01-项目功能，架构设计介绍

稻草快速开发平台

开发背景就是通过此项目介绍使用SpringBoot + Vue3两大技术栈开发一个拥有动态权限、路由的前后端分离项目，此项目可以继续完善，成为一个模板为将来快速开发做铺垫。

实现功能

在这里插入图片描述

开发流程

通过命令构建前端项目在VSCode中开发，在IDEA中通过maven开发后端项目，此后在gitee上创建仓库，测试完功能之后上传到代码仓库中。最后通过云服务器实现项目上线的完整流程。

前后端分离

前后端分离顾名思义是将前端和后端拆分出来开发，前后端分离也为微服务架构，多端化服务等打下基础。前后端分离主要目的是解耦。核心思想是：前端 Html 页面通过 Ajax 调用后端的 RestFul API 并使用 Json 数据【或其他类型数据如：xml、csv、yaml等】进行数据交互。

前端项目部署到Web服务器上：web服务器一般只能解析静态资源如html、css、图片、文档等。一般性能较强，常用的有nginx、Apache

后端服务部署到应用服务器上：可以解析动态资源和静态资源，解析静态资源的性能没有web服务器好，常用的有Tomcat、Jetty等

一般来说Web服务器暴露在公网上，应用服务器只允许内网访问，前后端http请求，通过web服务器代理到对应的后端服务端口上

交互形式

前后端不分离

后端将数据和页面组装【SpringMVC中的ModelAndView，没出现JSP之前Servlet写页面】、渲染好了之后，向浏览器输出最终的html；浏览器接收到后会解析html，解析引入的css、执行js脚本，完成最终的页面展示。甚至后端还涉及到了页面跳转的工作0.0。

前后端分离

后端只需要和前端约定好接收以及返回的数据格式（一般用JSON格式），向前端提供API接口。前端就可以通过HTTP请求调用API的方式进行交互。前端获取到数据后，进行页面组装、渲染，最终在浏览器呈现。页面的跳转也交由前端控制

代码组成形式

前后端不分离：在web应用早期的时候，前端页面以及后台业务数据处理的代码都放在一个工程下，甚至放在同一目录下，前端页面夹杂着后端代码。前、后端开发工程师都需要把整套代码导入开发工具才能开发。此阶段下前后端代码以及工作耦合度太高，前端不能独立开发和测试，后端人员也要依赖前端完成页面后才能完成开发。最糟糕的情况是前端工程师需要会后端模板技术（jsp），后端工程师还要会点前端技术，需要口头说明页面数据接口，才能配合完成开发。否则前端只能当一个“切图仔”，只输出HTML、CSS、以及很少量与业务逻辑无关的js；然后由后端转化为后端jsp，并且还要写业务的js代码。后来的Thymealf这些模板引擎也都不是前后端分离，其实就是JSP的另一种包装，代码还是在同一个项目中

前后端分离：前后端代码放在不同的工程下，前端代码可以独立开发，通过mock/easy-mock技术模拟后端API服务可以独立运行、测试；后端代码也可以独立开发，运行、测试，通过swagger技术能自动生成API文档供前端阅读，还可以进行自动化接口测试，保证API的可用性，降低集成风险。

开发模式与流程

前后端不分离：在项目开发阶段，前端根据原型和UI设计稿，编写HTML、CSS以及少量与业务无关的js（纯效果那些），完成后交给后台人员，后台人员将HTML转为jsp，并通过JSP的模板语法进行数据绑定以及一些逻辑操作。后台完成后，将全部代码打包，包含前端代码、后端代码打成一个war，然后部署到同一台服务器运行。顶多做一下动静分离，也就是把图片、css、js分开部署到nginx。

前后端分离：实现前后端分离之后，前端根据原型和UI设计稿编写HTML、CSS以及少量与业务无关的 js（纯效果那些），后端也同时根据原型进行API设计，并与前端协定API数据规范。等到后台API完成，或仅仅是API数据规范设定完成之后。前端即可通过HTTP调用API，或通过mock数据完成数据组装以及业务逻辑编写。前后端可以并行，或者前端先行于后端开发了。

部署架构

在这里插入图片描述

项目架构
在这里插入图片描述

实现前后端分离，主要是前端的技术架构变化较大，后端主要变为restfull 风格API，然后加上Swagger技术自动生成在线接口文档。

前后端分离意义

提高开发效率：前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。

完美应对复杂多变的前端需求：如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。

增强代码可维护性：前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。应用代码将会变得整洁清晰，不论是代码阅读还是代码维护都会比以前轻松。

故障定位：前后端分离之后更能快速定位问题，通过接口响应数据可定位到是前端还是后端问题。

当然随着前后端分离思想出现，随之出现了具体的落地实现，就要去学习对应的技术，增加了项目的复杂度。甚至还要求前后端都要会的现象。从而引出了全栈工程师这样的代名词

技术栈

后端

JDK17
SpringBoot3.X
SpringSecurity6.X
MySQL8.X
MyBatis-Plus3.5.X
JWT
Redis7
maven
等其他工具类技术

前端

Node.js 20.X
Vue3
vue-router4
paina
vite
Element-plus

其他工具

nginx
git

开发环境准备

首先电脑上应安装以下环境和工具

JDK17
IDEA
MySQL
Redis
NodeJS
VS Code
git
Maven

构建后端项目

使用maven构建，

父工程：定义依赖，并不实现什么代码
common模块：主要定义使用的公共模块，工具类
support模块：定义项目中的核心支持，如springsecurity，redis等
starter模块：定义项目入口
各种业务模块：user模块、system模块

构建前端项目

vue3，推荐我们使用vite作为构建工具，之前使用webpack构建项目

vscode安装插件

Auto Close Tag：自动闭合标签
Vue VSCode Snippets：生成代码片段
Vue Peek：快速跳转到组件、模块定义的文件
Vue Theme：主题
Image preview：图片预览

IDEA插件

CodeGlance：缩略图
GenerateAllSetter：生成默认set方法

上传项目到Gitee中

上传代码流程

创建远程仓库【github、gitee、coder、gitlab等等】
首先将代码上传到本地仓库，再将本地库推送的远程仓库

数据表

数据表以仓库中sql文件为准

CREATE TABLE `ums_sys_user` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户ID',`username` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户账号',`nickname` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '用户昵称',`email` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '用户邮箱',`mobile` varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '手机号码',`sex` int DEFAULT '0' COMMENT '用户性别（0男 1女 2未知）',`avatar` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '头像地址',`password` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT '' COMMENT '密码',`status` int DEFAULT '0' COMMENT '帐号状态（0正常 1停用）',`creator` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '创建者',`create_time` datetime DEFAULT NULL COMMENT '创建时间',`updater` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '更新者',`update_time` datetime DEFAULT NULL COMMENT '更新时间',`remark` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '备注',`deleted` tinyint DEFAULT '0',PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='后台用户表';

CREATE TABLE `ums_role` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '角色id',`role_label` varchar(255) DEFAULT NULL COMMENT '角色标识',`role_name` varchar(255) DEFAULT NULL COMMENT '角色名字',`sort` int DEFAULT NULL COMMENT '排序',`status` int DEFAULT NULL COMMENT '状态：0：可用，1：不可用',`deleted` int DEFAULT NULL COMMENT '是否删除：0: 未删除，1：已删除',`remark` varchar(255) DEFAULT NULL COMMENT '备注',`creator` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '创建者',`updater` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '更新者',`create_time` datetime DEFAULT NULL COMMENT '创建时间',`update_time` datetime DEFAULT NULL COMMENT '修改时间',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

CREATE TABLE `ums_menu` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',`parent_id` bigint NOT NULL DEFAULT '0' COMMENT '父id',`menu_name` varchar(255) DEFAULT NULL COMMENT '菜单名',`sort` int DEFAULT '0' COMMENT '排序',`menu_type` int DEFAULT NULL COMMENT '类型：0，目录，1菜单，2：按钮',`path` varchar(255) DEFAULT NULL COMMENT '路由路径   umsUser',`component_path` varchar(255) DEFAULT NULL COMMENT '组件路径  如：ums/user/index',`perms` varchar(255) DEFAULT NULL COMMENT '权限标识',`icon` varchar(255) DEFAULT NULL COMMENT '图标',`deleted` int DEFAULT NULL COMMENT '是否删除',`status` int DEFAULT NULL COMMENT '状态：0：可用，1：不可用',`creator` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '创建者',`updater` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '更新者',`create_time` datetime DEFAULT NULL COMMENT '创建时间',`update_time` datetime DEFAULT NULL COMMENT '修改时间',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

CREATE TABLE `ums_sys_user_role` (`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键id',`user_id` bigint NOT NULL COMMENT '用户id',`role_id` bigint NOT NULL COMMENT '角色id',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

CREATE TABLE `ums_role_menu` (`id` bigint NOT NULL AUTO_INCREMENT,`role_id` bigint DEFAULT NULL,`menu_id` bigint DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

Auth模块

创建实体
创建service、mapper

common模块

定义公共功能

定义响应码

定义前后端判断请求状态的响应码。当然可以是自己定义的除HTTP状态码之外的数据

public class HttpStatus {/*** 操作成功*/public static final int SUCCESS = 200;/*** 对象创建成功*/public static final int CREATED = 201;/*** 请求已经被接受*/public static final int ACCEPTED = 202;/*** 操作已经执行成功，但是没有返回数据*/public static final int NO_CONTENT = 204;/*** 资源已被移除*/public static final int MOVED_PERM = 301;/*** 重定向*/public static final int SEE_OTHER = 303;/*** 资源没有被修改*/public static final int NOT_MODIFIED = 304;/*** 参数列表错误（缺少，格式不匹配）*/public static final int BAD_REQUEST = 400;/*** 未授权*/public static final int UNAUTHORIZED = 401;/*** 访问受限，授权过期*/public static final int FORBIDDEN = 403;/*** 资源，服务未找到*/public static final int NOT_FOUND = 404;/*** 不允许的http方法*/public static final int BAD_METHOD = 405;/*** 资源冲突，或者资源被锁*/public static final int CONFLICT = 409;/*** 不支持的数据，媒体类型*/public static final int UNSUPPORTED_TYPE = 415;/*** 系统内部错误*/public static final int ERROR = 500;/*** 接口未实现*/public static final int NOT_IMPLEMENTED = 501;/*** 系统警告消息*/public static final int WARN = 601;
}

统一返回结果集

前端返回数据的时候数据格式是JSON，结构是：

{code: HttpStatus.SUCCESS,data: data,msg: '响应信息'
}

code：前端根据code判断请求的状态

msg：根据msg的值做一些提示

data：数据，可以是单个数据，对象或者集合【数组】

@Data
public class DaoCaoResult extends HashMap<String, Object> {private static final long serialVersionUID = 1L;/*** 状态码*/public static final String CODE_TAG = "code";/*** 返回内容*/public static final String MSG_TAG = "msg";/*** 数据对象*/public static final String DATA_TAG = "data";/*** 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。*/public DaoCaoResult() {}/*** 初始化一个新创建的 AjaxResult 对象** @param code 状态码* @param msg  返回内容*/public DaoCaoResult(int code, String msg) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一个新创建的 AjaxResult 对象** @param code 状态码* @param msg  返回内容* @param data 数据对象*/public DaoCaoResult(int code, String msg, Object data) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);if (ObjectUtil.isNull(data)) {super.put(DATA_TAG, data);}}/*** 返回成功消息** @return 成功消息*/public static DaoCaoResult success() {return DaoCaoResult.success("操作成功");}/*** 返回成功数据** @return 成功消息*/public static DaoCaoResult success(Object data) {return DaoCaoResult.success("操作成功", data);}/*** 返回成功消息** @param msg 返回内容* @return 成功消息*/public static DaoCaoResult success(String msg) {return DaoCaoResult.success(msg, null);}/*** 返回成功消息** @param msg  返回内容* @param data 数据对象* @return 成功消息*/public static DaoCaoResult success(String msg, Object data) {return new DaoCaoResult(HttpStatus.SUCCESS, msg, data);}/*** 返回警告消息** @param msg 返回内容* @return 警告消息*/public static DaoCaoResult warn(String msg) {return DaoCaoResult.warn(msg, null);}/*** 返回警告消息** @param msg  返回内容* @param data 数据对象* @return 警告消息*/public static DaoCaoResult warn(String msg, Object data) {return new DaoCaoResult(HttpStatus.WARN, msg, data);}/*** 返回错误消息** @return 错误消息*/public static DaoCaoResult error() {return DaoCaoResult.error("操作失败");}/*** 返回错误消息** @param msg 返回内容* @return 错误消息*/public static DaoCaoResult error(String msg) {return DaoCaoResult.error(msg, null);}/*** 返回错误消息** @param msg  返回内容* @param data 数据对象* @return 错误消息*/public static DaoCaoResult error(String msg, Object data) {return new DaoCaoResult(HttpStatus.ERROR, msg, data);}/*** 返回错误消息** @param code 状态码* @param msg  返回内容* @return 错误消息*/public static DaoCaoResult error(int code, String msg) {return new DaoCaoResult(code, msg, null);}/*** 是否为成功消息** @return 结果*/public boolean isSuccess() {return Objects.equals(HttpStatus.SUCCESS, this.get(CODE_TAG));}/*** 是否为警告消息** @return 结果*/public boolean isWarn() {return Objects.equals(HttpStatus.WARN, this.get(CODE_TAG));}/*** 是否为错误消息** @return 结果*/public boolean isError() {return Objects.equals(HttpStatus.ERROR, this.get(CODE_TAG));}/*** 方便链式调用** @param key   键* @param value 值* @return 数据对象*/@Overridepublic DaoCaoResult put(String key, Object value) {super.put(key, value);return this;}
}

定义业务异常

/*** @author 石添* @date 2023/11/14 16:24*/
public class ServiceException extends RuntimeException {private static final long serialVersionUID = 1L;/*** 错误码*/private Integer code;/*** 错误提示*/private String message;/*** 错误明细，内部调试错误*/private String detailMessage;/*** 空构造方法，避免反序列化问题*/public ServiceException() {}public ServiceException(String message) {this.message = message;}public ServiceException(Integer code,String message) {this.message = message;this.code = code;}public String getDetailMessage() {return detailMessage;}public String getMessage() {return message;}public Integer getCode() {return code;}public ServiceException setMessage(String message) {this.message = message;return this;}
}