稻草快速开发平台

开发背景就是通过此项目介绍使用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 数据对象
     */
    @Override
    public 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;
    }
}

创建dev分支

先拉取仓库的最新代码，再做开发，提交

如果在拉取代码之前操作了仓库中已有的文件，将该文件复制出来，删除掉再拉取最新仓库代码，再修改提交，避免版本冲突问题

MybatisPlus配置

• 分页插件
• 自动填充功能

在daocao_support模块中做核心组件的配置，

模块间的关联关系

parent模块：父工程，作用是定义依赖和版本，并不是实现任何功能

|-----common模块：定义一些最基础，通用的工具类或者公用的类，比如lombok，hutool

|-----support模块：核心配置模块，做一些项目中引入的第三方组件的配置，比如：MyBatisPlus、SpringSecurity、Redis、支付，support依赖common模块

|-----业务模块：主要实现系统功能，auth认证模块，用户模块，菜单模块，系统模块，代码生成模块，支付模块，数据分析模块，这些模块依赖support模块

|-----入口模块：依赖其他的业务模块，提供一个项目入口即可

common是最基础的模块--------》被support模块引用------》support被其他的业务模块引用-------》auth/sysuser/引用----------》被starter模块引用