稻草快速開發(fā)平臺

開發(fā)背景就是通過此項目介紹使用SpringBoot + Vue3兩大技術(shù)棧開發(fā)一個擁有動態(tài)權(quán)限、路由的前后端分離項目，此項目可以繼續(xù)完善，成為一個模板為將來快速開發(fā)做鋪墊。

實現(xiàn)功能

開發(fā)流程

通過命令構(gòu)建前端項目在VSCode中開發(fā)，在IDEA中通過maven開發(fā)后端項目，此后在gitee上創(chuàng)建倉庫，測試完功能之后上傳到代碼倉庫中。最后通過云服務(wù)器實現(xiàn)項目上線的完整流程。

前后端分離

前后端分離顧名思義是將前端和后端拆分出來開發(fā)，前后端分離也為微服務(wù)架構(gòu)，多端化服務(wù)等打下基礎(chǔ)。前后端分離主要目的是解耦。核心思想是：前端 Html 頁面通過 Ajax 調(diào)用后端的 RestFul API 并使用 Json 數(shù)據(jù)【或其他類型數(shù)據(jù)如：xml、csv、yaml等】進(jìn)行數(shù)據(jù)交互。

前端項目部署到Web服務(wù)器上：web服務(wù)器一般只能解析靜態(tài)資源如html、css、圖片、文檔等。一般性能較強(qiáng)，常用的有nginx、Apache

后端服務(wù)部署到應(yīng)用服務(wù)器上：可以解析動態(tài)資源和靜態(tài)資源，解析靜態(tài)資源的性能沒有web服務(wù)器好，常用的有Tomcat、Jetty等

一般來說Web服務(wù)器暴露在公網(wǎng)上，應(yīng)用服務(wù)器只允許內(nèi)網(wǎng)訪問，前后端http請求，通過web服務(wù)器代理到對應(yīng)的后端服務(wù)端口上

交互形式

前后端不分離

后端將數(shù)據(jù)和頁面組裝【SpringMVC中的ModelAndView，沒出現(xiàn)JSP之前Servlet寫頁面】、渲染好了之后，向瀏覽器輸出最終的html；瀏覽器接收到后會解析html，解析引入的css、執(zhí)行js腳本，完成最終的頁面展示。甚至后端還涉及到了頁面跳轉(zhuǎn)的工作0.0。

前后端分離

后端只需要和前端約定好接收以及返回的數(shù)據(jù)格式（一般用JSON格式），向前端提供API接口。前端就可以通過HTTP請求調(diào)用API的方式進(jìn)行交互。前端獲取到數(shù)據(jù)后，進(jìn)行頁面組裝、渲染，最終在瀏覽器呈現(xiàn)。頁面的跳轉(zhuǎn)也交由前端控制

代碼組成形式

前后端不分離：在web應(yīng)用早期的時候，前端頁面以及后臺業(yè)務(wù)數(shù)據(jù)處理的代碼都放在一個工程下，甚至放在同一目錄下，前端頁面夾雜著后端代碼。前、后端開發(fā)工程師都需要把整套代碼導(dǎo)入開發(fā)工具才能開發(fā)。此階段下前后端代碼以及工作耦合度太高，前端不能獨(dú)立開發(fā)和測試，后端人員也要依賴前端完成頁面后才能完成開發(fā)。最糟糕的情況是前端工程師需要會后端模板技術(shù)（jsp），后端工程師還要會點(diǎn)前端技術(shù)，需要口頭說明頁面數(shù)據(jù)接口，才能配合完成開發(fā)。否則前端只能當(dāng)一個“切圖仔”，只輸出HTML、CSS、以及很少量與業(yè)務(wù)邏輯無關(guān)的js；然后由后端轉(zhuǎn)化為后端jsp，并且還要寫業(yè)務(wù)的js代碼。后來的Thymealf這些模板引擎也都不是前后端分離，其實就是JSP的另一種包裝，代碼還是在同一個項目中

前后端分離：前后端代碼放在不同的工程下，前端代碼可以獨(dú)立開發(fā)，通過mock/easy-mock技術(shù)模擬后端API服務(wù)可以獨(dú)立運(yùn)行、測試；后端代碼也可以獨(dú)立開發(fā)，運(yùn)行、測試，通過swagger技術(shù)能自動生成API文檔供前端閱讀，還可以進(jìn)行自動化接口測試，保證API的可用性，降低集成風(fēng)險。

開發(fā)模式與流程

前后端不分離：在項目開發(fā)階段，前端根據(jù)原型和UI設(shè)計稿，編寫HTML、CSS以及少量與業(yè)務(wù)無關(guān)的js（純效果那些），完成后交給后臺人員，后臺人員將HTML轉(zhuǎn)為jsp，并通過JSP的模板語法進(jìn)行數(shù)據(jù)綁定以及一些邏輯操作。后臺完成后，將全部代碼打包，包含前端代碼、后端代碼打成一個war，然后部署到同一臺服務(wù)器運(yùn)行。頂多做一下動靜分離，也就是把圖片、css、js分開部署到nginx。

前后端分離：實現(xiàn)前后端分離之后，前端根據(jù)原型和UI設(shè)計稿編寫HTML、CSS以及少量與業(yè)務(wù)無關(guān)的 js（純效果那些），后端也同時根據(jù)原型進(jìn)行API設(shè)計，并與前端協(xié)定API數(shù)據(jù)規(guī)范。等到后臺API完成，或僅僅是API數(shù)據(jù)規(guī)范設(shè)定完成之后。前端即可通過HTTP調(diào)用API，或通過mock數(shù)據(jù)完成數(shù)據(jù)組裝以及業(yè)務(wù)邏輯編寫。前后端可以并行，或者前端先行于后端開發(fā)了。

部署架構(gòu)

項目架構(gòu)

實現(xiàn)前后端分離，主要是前端的技術(shù)架構(gòu)變化較大，后端主要變?yōu)閞estfull 風(fēng)格API，然后加上Swagger技術(shù)自動生成在線接口文檔。

前后端分離意義

提高開發(fā)效率：前后端分離以后，可以實現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應(yīng)用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對方的開發(fā)工作結(jié)束。與此同時，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開發(fā)人員就不需要修改代碼，只要前端進(jìn)行變動即可。如此一來整個應(yīng)用的開發(fā)效率必然會有質(zhì)的提升。

完美應(yīng)對復(fù)雜多變的前端需求：如果開發(fā)團(tuán)隊能完成前后端分離的轉(zhuǎn)型，打造優(yōu)秀的前后端團(tuán)隊，開發(fā)獨(dú)立化，讓開發(fā)人員做到專注專精，開發(fā)能力必然會有所提升，能夠完美應(yīng)對各種復(fù)雜多變的前端需求。

增強(qiáng)代碼可維護(hù)性：前后端分離后，應(yīng)用的代碼不再是前后端混合，只有在運(yùn)行期才會有調(diào)用依賴關(guān)系。應(yīng)用代碼將會變得整潔清晰，不論是代碼閱讀還是代碼維護(hù)都會比以前輕松。

故障定位：前后端分離之后更能快速定位問題，通過接口響應(yīng)數(shù)據(jù)可定位到是前端還是后端問題。

當(dāng)然隨著前后端分離思想出現(xiàn)，隨之出現(xiàn)了具體的落地實現(xiàn)，就要去學(xué)習(xí)對應(yīng)的技術(shù)，增加了項目的復(fù)雜度。甚至還要求前后端都要會的現(xiàn)象。從而引出了全棧工程師這樣的代名詞

技術(shù)棧

后端

• JDK17
• SpringBoot3.X
• SpringSecurity6.X
• MySQL8.X
• MyBatis-Plus3.5.X
• JWT
• Redis7
• maven
• 等其他工具類技術(shù)

前端

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

其他工具

• nginx
• git

開發(fā)環(huán)境準(zhǔn)備

首先電腦上應(yīng)安裝以下環(huán)境和工具

• JDK17
• IDEA
• MySQL
• Redis
• NodeJS
• VS Code
• git
• Maven

構(gòu)建后端項目

使用maven構(gòu)建，

• 父工程：定義依賴，并不實現(xiàn)什么代碼
• common模塊：主要定義使用的公共模塊，工具類
• support模塊：定義項目中的核心支持，如springsecurity，redis等
• starter模塊：定義項目入口
• 各種業(yè)務(wù)模塊：user模塊、system模塊

構(gòu)建前端項目

vue3，推薦我們使用vite作為構(gòu)建工具，之前使用webpack構(gòu)建項目

vscode安裝插件

• Auto Close Tag：自動閉合標(biāo)簽
• Vue VSCode Snippets：生成代碼片段
• Vue Peek：快速跳轉(zhuǎn)到組件、模塊定義的文件
• Vue Theme：主題
• Image preview：圖片預(yù)覽

IDEA插件

• CodeGlance：縮略圖
• GenerateAllSetter：生成默認(rèn)set方法

上傳項目到Gitee中

上傳代碼流程

• 創(chuàng)建遠(yuǎn)程倉庫【github、gitee、coder、gitlab等等】
• 首先將代碼上傳到本地倉庫，再將本地庫推送的遠(yuǎn)程倉庫

數(shù)據(jù)表

數(shù)據(jù)表以倉庫中sql文件為準(zhǔn)

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 '手機(jī)號碼',`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 '帳號狀態(tài)（0正常 1停用）',`creator` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '創(chuàng)建者',`create_time` datetime DEFAULT NULL COMMENT '創(chuàng)建時間',`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 '角色標(biāo)識',`role_name` varchar(255) DEFAULT NULL COMMENT '角色名字',`sort` int DEFAULT NULL COMMENT '排序',`status` int DEFAULT NULL COMMENT '狀態(tài)：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 '創(chuàng)建者',`updater` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '更新者',`create_time` datetime DEFAULT NULL COMMENT '創(chuàng)建時間',`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 '權(quán)限標(biāo)識',`icon` varchar(255) DEFAULT NULL COMMENT '圖標(biāo)',`deleted` int DEFAULT NULL COMMENT '是否刪除',`status` int DEFAULT NULL COMMENT '狀態(tài)：0：可用，1：不可用',`creator` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '創(chuàng)建者',`updater` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '更新者',`create_time` datetime DEFAULT NULL COMMENT '創(chuàng)建時間',`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模塊

• 創(chuàng)建實體
• 創(chuàng)建service、mapper

common模塊

定義公共功能

定義響應(yīng)碼

定義前后端判斷請求狀態(tài)的響應(yīng)碼。當(dāng)然可以是自己定義的除HTTP狀態(tài)碼之外的數(shù)據(jù)

public class HttpStatus {/*** 操作成功*/public static final int SUCCESS = 200;/*** 對象創(chuàng)建成功*/public static final int CREATED = 201;/*** 請求已經(jīng)被接受*/public static final int ACCEPTED = 202;/*** 操作已經(jīng)執(zhí)行成功，但是沒有返回數(shù)據(jù)*/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;/*** 參數(shù)列表錯誤（缺少，格式不匹配）*/public static final int BAD_REQUEST = 400;/*** 未授權(quán)*/public static final int UNAUTHORIZED = 401;/*** 訪問受限，授權(quán)過期*/public static final int FORBIDDEN = 403;/*** 資源，服務(wù)未找到*/public static final int NOT_FOUND = 404;/*** 不允許的http方法*/public static final int BAD_METHOD = 405;/*** 資源沖突，或者資源被鎖*/public static final int CONFLICT = 409;/*** 不支持的數(shù)據(jù)，媒體類型*/public static final int UNSUPPORTED_TYPE = 415;/*** 系統(tǒng)內(nèi)部錯誤*/public static final int ERROR = 500;/*** 接口未實現(xiàn)*/public static final int NOT_IMPLEMENTED = 501;/*** 系統(tǒng)警告消息*/public static final int WARN = 601;
}

統(tǒng)一返回結(jié)果集

前端返回數(shù)據(jù)的時候數(shù)據(jù)格式是JSON，結(jié)構(gòu)是：

{code: HttpStatus.SUCCESS,data: data,msg: '響應(yīng)信息'
}

code：前端根據(jù)code判斷請求的狀態(tài)

msg：根據(jù)msg的值做一些提示

data：數(shù)據(jù)，可以是單個數(shù)據(jù)，對象或者集合【數(shù)組】

@Data
public class DaoCaoResult extends HashMap<String, Object> {private static final long serialVersionUID = 1L;/*** 狀態(tài)碼*/public static final String CODE_TAG = "code";/*** 返回內(nèi)容*/public static final String MSG_TAG = "msg";/*** 數(shù)據(jù)對象*/public static final String DATA_TAG = "data";/*** 初始化一個新創(chuàng)建的 AjaxResult 對象，使其表示一個空消息。*/public DaoCaoResult() {}/*** 初始化一個新創(chuàng)建的 AjaxResult 對象** @param code 狀態(tài)碼* @param msg  返回內(nèi)容*/public DaoCaoResult(int code, String msg) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一個新創(chuàng)建的 AjaxResult 對象** @param code 狀態(tài)碼* @param msg  返回內(nèi)容* @param data 數(shù)據(jù)對象*/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("操作成功");}/*** 返回成功數(shù)據(jù)** @return 成功消息*/public static DaoCaoResult success(Object data) {return DaoCaoResult.success("操作成功", data);}/*** 返回成功消息** @param msg 返回內(nèi)容* @return 成功消息*/public static DaoCaoResult success(String msg) {return DaoCaoResult.success(msg, null);}/*** 返回成功消息** @param msg  返回內(nèi)容* @param data 數(shù)據(jù)對象* @return 成功消息*/public static DaoCaoResult success(String msg, Object data) {return new DaoCaoResult(HttpStatus.SUCCESS, msg, data);}/*** 返回警告消息** @param msg 返回內(nèi)容* @return 警告消息*/public static DaoCaoResult warn(String msg) {return DaoCaoResult.warn(msg, null);}/*** 返回警告消息** @param msg  返回內(nèi)容* @param data 數(shù)據(jù)對象* @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 返回內(nèi)容* @return 錯誤消息*/public static DaoCaoResult error(String msg) {return DaoCaoResult.error(msg, null);}/*** 返回錯誤消息** @param msg  返回內(nèi)容* @param data 數(shù)據(jù)對象* @return 錯誤消息*/public static DaoCaoResult error(String msg, Object data) {return new DaoCaoResult(HttpStatus.ERROR, msg, data);}/*** 返回錯誤消息** @param code 狀態(tài)碼* @param msg  返回內(nèi)容* @return 錯誤消息*/public static DaoCaoResult error(int code, String msg) {return new DaoCaoResult(code, msg, null);}/*** 是否為成功消息** @return 結(jié)果*/public boolean isSuccess() {return Objects.equals(HttpStatus.SUCCESS, this.get(CODE_TAG));}/*** 是否為警告消息** @return 結(jié)果*/public boolean isWarn() {return Objects.equals(HttpStatus.WARN, this.get(CODE_TAG));}/*** 是否為錯誤消息** @return 結(jié)果*/public boolean isError() {return Objects.equals(HttpStatus.ERROR, this.get(CODE_TAG));}/*** 方便鏈?zhǔn)秸{(diào)用** @param key   鍵* @param value 值* @return 數(shù)據(jù)對象*/@Overridepublic DaoCaoResult put(String key, Object value) {super.put(key, value);return this;}
}

定義業(yè)務(wù)異常

/*** @author 石添* @date 2023/11/14 16:24*/
public class ServiceException extends RuntimeException {private static final long serialVersionUID = 1L;/*** 錯誤碼*/private Integer code;/*** 錯誤提示*/private String message;/*** 錯誤明細(xì)，內(nèi)部調(diào)試錯誤*/private String detailMessage;/*** 空構(gòu)造方法，避免反序列化問題*/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;}
}

創(chuàng)建dev分支

先拉取倉庫的最新代碼，再做開發(fā)，提交

如果在拉取代碼之前操作了倉庫中已有的文件，將該文件復(fù)制出來，刪除掉再拉取最新倉庫代碼，再修改提交，避免版本沖突問題

MybatisPlus配置

• 分頁插件
• 自動填充功能

在daocao_support模塊中做核心組件的配置，

模塊間的關(guān)聯(lián)關(guān)系

parent模塊：父工程，作用是定義依賴和版本，并不是實現(xiàn)任何功能

|-----common模塊：定義一些最基礎(chǔ)，通用的工具類或者公用的類，比如lombok，hutool

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

|-----業(yè)務(wù)模塊：主要實現(xiàn)系統(tǒng)功能，auth認(rèn)證模塊，用戶模塊，菜單模塊，系統(tǒng)模塊，代碼生成模塊，支付模塊，數(shù)據(jù)分析模塊，這些模塊依賴support模塊

|-----入口模塊：依賴其他的業(yè)務(wù)模塊，提供一個項目入口即可

common是最基礎(chǔ)的模塊--------》被support模塊引用------》support被其他的業(yè)務(wù)模塊引用-------》auth/sysuser/引用----------》被starter模塊引用