零基础搭建完成完整的前后端分离项目的准备工作

搭建完成一个完整的项目需要准备哪些东西?

下面就根据我自己的项目经历,分享如何从 0 开始,搭建一个完整的前后端分离项目。既然是一个前后端分离项目,我们就需知道前端是什么?后端是什么?前后端如何协作?

前端 ,全称前端开发 ,是软件开发中负责用户直接交互界面的部分,简单来说就是用户打开网站、App 时能看到、能点击、能操作的所有内容。

后端 ,全称后端开发 ,是软件开发中负责用户不可见的底层逻辑与数据处理的部分,相当于整个软件的 "幕后大脑",支撑着前端的所有交互功能正常运转。

一、前端与后端

1.前端的核心技术栈

前端开发主要基于三大核心技术,也是入门前端的基础:

(1).HTML(超文本标记语言)

作用:搭建页面的骨架结构,决定页面有哪些元素(比如标题、按钮、图片、文字段落)。

类比:像房子的承重墙、门窗框架,是页面的基础。

(2).CSS(层叠样式表)

作用:给页面元素设置样式和外观,比如颜色、字体、大小、布局、动画效果。

类比:相当于给房子装修,刷墙、铺地板、设计软装,让页面更好看。

(3).JavaScript

作用:实现页面的动态交互功能,比如点击按钮弹出菜单、表单提交验证、数据实时刷新、轮播图自动切换等。

类比:像房子的电路、水管、智能家居系统,让页面 "活" 起来,能响应用户操作。

2.后端的核心技术栈

(1).后端编程语言

主流语言及生态:

Java:生态完善,适合大型企业级应用(如电商、金融系统),框架有 Spring、Spring Boot。

Python:开发效率高,适合数据分析、人工智能、小型后端服务,框架有 Django、Flask。

Go:性能优异,适合高并发场景(如直播、即时通讯),框架有 Gin、Beego。

Node.js:基于 JavaScript,可实现 "前后端同语言",适合轻量级应用,框架有 Express、NestJS。

(2).数据库技术

关系型数据库:用于存储结构化数据(如用户信息、订单数据)。

非关系型数据库:用于存储非结构化或半结构化数据(如日志、缓存数据)。

缓存技术:如 Redis,提升数据读取速度,减轻数据库压力。

(3).服务器与部署

管理应用服务器(如 Tomcat、Nginx),配置服务器环境;

掌握容器化技术(Docker)、编排工具(Kubernetes),实现应用的快速部署与扩容。

3.前后端协作的完整流程示例

以用户在网站登录为例:

**(1).前端:**用户输入账号密码,点击 "登录" 按钮,前端将数据封装后通过 API 接口发送给后端。

(2).后端:

接收前端请求,对密码进行加密验证;

查询数据库,确认账号密码是否正确;

生成登录凭证(如 Token),将结果(成功 / 失败)返回给前端。

**(3).前端:**根据后端返回的结果,展示登录成功页面或提示错误信息。

二、针对项目完成的准备工作分析

1.技术栈

前后端分离(两个工程)

前端:Vue3 + Element-Plus 架构

后端:SpringBoot3 + Mybatis 架构

数据库:MySQL

2.编程软件

2.1使用的编程软件版本

JDK17 以上版本、IntelliJ IDEA 2023 以上版本、MySQL 5.7 或 8.0 以上、node.js 16 以上版本、Navicat(数据库可视化工具)。编译软件也可以使用 Microsoft Visual Studio Code,根据个人习惯选择编译软件。

需要软件安装教程的可以参考一下 软件安装 专栏收录的软件安装教程。

需要软件使用教程的可以参考一下 软件程序使用操作 专栏收录的软件使用教程。

注:不当之处,请批评指正!谢谢~

相关推荐
不思念一个荒废的名字2 小时前
【黑马JavaWeb+AI知识梳理】Web后端开发08 - 总结
java·后端
沛沛老爹2 小时前
Web开发者实战AI Agent:基于Dify实现OpenAI Deep Research智能体
前端·人工智能·gpt·agent·rag·web转型
冬奇Lab2 小时前
【Cursor进阶实战·01】Figma设计稿一键还原:Cursor + MCP让前端开发提速10倍
android·前端·后端·个人开发·figma
JarvanMo2 小时前
用 Flutter、SwiftUI 和 Compose 写同一个界面:一份真实开发者的实测报告
前端
可以吧可以吧2 小时前
前端vue jenkins打包资源增加阿里云oss+cdn加速
前端·vue.js·jenkins
superman超哥2 小时前
Rust 泛型参数的使用:零成本抽象的类型级编程
开发语言·后端·rust·零成本抽象·rust泛型参数·类型级编程
代码不停2 小时前
Spring Boot快速入手
java·spring boot·后端
hashiqimiya2 小时前
vue项目的选择星级样式和axios依赖调用
前端·javascript·vue.js
沛沛老爹2 小时前
Web开发者实战AI Agent:基于Dify的多模态文生图与文生视频智能体项目
前端·人工智能·llm·agent·rag·web转型