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

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

下面就根据我自己的项目经历,分享如何从 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,根据个人习惯选择编译软件。

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

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

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

相关推荐
尾善爱看海17 小时前
不常用的浏览器 API —— Web Speech
前端
美酒没故事°17 小时前
vue3拖拽+粘贴的综合上传器
前端·javascript·typescript
jingling55518 小时前
css进阶 | 实现罐子中的水流搅拌效果
前端·css
晚风吹长发19 小时前
初步了解Linux中的动静态库及其制作和使用
linux·运维·服务器·数据结构·c++·后端·算法
悟能不能悟20 小时前
前端上载文件时,上载多个文件,但是一个一个调用接口,怎么实现
前端
梁下轻语的秋缘20 小时前
ESP32-WROOM-32E存储全解析:RAM/Flash/SD卡读写与速度对比
java·后端·spring
wanzhong233320 小时前
开发日记8-优化接口使其更规范
java·后端·springboot
可问春风_ren20 小时前
前端文件上传详细解析
前端·ecmascript·reactjs·js
羊小猪~~21 小时前
【QT】--文件操作
前端·数据库·c++·后端·qt·qt6.3
张彦峰ZYF1 天前
商品供给域的工程化简要设计考量
后端·系统架构·商品模型·商品供给