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

embedded/2024/10/9 13:21:55/

稻草快速开发平台

开发背景就是通过此项目介绍使用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状态码之外的数据

java">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：数据，可以是单个数据，对象或者集合【数组】

java">@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;}
}

定义业务异常

java">/*** @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模块引用


http://www.ppmy.cn/embedded/40913.html

相关文章

括号匹配（栈）

括号匹配（栈）

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; c有栈 但是C语言没有 到那时我们可以自己造 这里的代码是直接调用栈&#xff0c;然后调用 等于三个左括号的任意一个 我们就入栈 左括号&#xff08;入栈&#xff09; 右括号 取出栈顶数据&#xff0c;出栈并且进行匹配…
阅读更多...
原生微信小程序canvas签名功能

原生微信小程序canvas签名功能

半个月前百度搜出来的&#xff0c;没存书签现在不知道是哪篇文章了&#xff0c;再搜也没搜出来那篇文章&#xff0c;还好当时把代码复制到本地跑了一下&#xff0c;现在再发csdn存一下。 sign.js Page({data: {ctx: null,width: null,height: null,drawCount: 0,drawState: &…
阅读更多...
红黑树高度上限2log2(N+1)简洁证明【通俗易懂且正确！】

红黑树高度上限2log2(N+1)简洁证明【通俗易懂且正确！】

首先阅读这篇文章 https://fanlv.fun/2018/08/12/binary-tree/ 明白什么是满二叉树&#xff1f;什么是2-3树&#xff0c;红黑树如何转换成2-3树。 我们可以得知满二叉树节点n和高度h的关系。 n 2 h − 1 n 2^h-1 n2h−1 根据2-3树的构造规则&#xff0c;可知2-3树是一个满…
阅读更多...
构建第一个ArkTS应用之@AppStorage：应用全局的UI状态存储

构建第一个ArkTS应用之@AppStorage：应用全局的UI状态存储

AppStorage是应用全局的UI状态存储&#xff0c;是和应用的进程绑定的&#xff0c;由UI框架在应用程序启动时创建&#xff0c;为应用程序UI状态属性提供中央存储。 和AppStorage不同的是&#xff0c;LocalStorage是页面级的&#xff0c;通常应用于页面内的数据共享。而AppStora…
阅读更多...
145.二叉树的后序遍历

145.二叉树的后序遍历

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…
阅读更多...
C语言（指针）6

C语言（指针）6

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…
阅读更多...
【GoLang基础】垃圾回收是如何工作的？

【GoLang基础】垃圾回收是如何工作的？

问题引出&#xff1a; Go语言中的垃圾回收是如何工作的&#xff1f; 解答&#xff1a; 在 Go 语言中&#xff0c;垃圾回收&#xff08;Garbage Collection&#xff0c;GC&#xff09;是自动管理内存的机制&#xff0c;用于在运行时识别和释放不再使用的内存对象&#xff0c;以…
阅读更多...
理解安卓系统的三个时间

理解安卓系统的三个时间

安卓设备有三种不同的可用时钟&#xff1a; System.currentTimeMillis()SystemClock.uptimeMillis()SystemClock.elapsedRealtime() 一、System.currentTimeMillis() System.currentTimeMillis()是一个标准的“墙”时钟(时间和日期)&#xff0c;表示从纪元到现在的毫秒数。该…
阅读更多...
最新文章

Copyright @ 2022~2023