目錄
1.下載下傳資源
2.導入資料庫表結構和資料
3.更改配置
3.1 redis配置
3.2 資料庫配置
4.本地運作服務
4.1 啟動後端服務
4.2 啟動前端服務
4.2.1 方式一
4.2.3 方式二
5.自動生成代碼
5.1 生成存放資料表
5.2 自動生成前後端代碼
5.2.1 自動生成代碼
5.3 前後端代碼放入指定位置
5.4 重新建構項目
6.Linux服務部署
6.1 後端部署
6.2 前端部署
6.2.1 安裝nginx
6.2.2 修改nginx配置
6.2.3 重新開機nginx服務
7.常見問題總結
7.1 資料庫編碼字元集不同導緻自動生成代碼無法搜尋到表
7.2 線上環境驗證碼不顯示
7.3 線上登入後無法進入菜單
7.3 個人首頁更換頭像失敗
8.常用技巧
8.1 修改标題和logo
8.2 修改首頁資訊
8.3 修改右上角菜單資訊
8.4 關閉登陸驗證碼
說明：
由于公司需要一個給下遊管道展示資料的平台，是以需要開發一套背景管理系統，需求相對比較簡單并且要的急，下午給的需求說要今天或者明天就要用...，如果單獨部署服務，采用前後端分離肯定是來不及，是以直接選用了開源項目完成功能的實作
需求：
1.手動錄入資料，可以根據條件搜尋，并且支援多個條件搜尋
2.有管理者和管道使用者，管理者有CURD權限，管道使用者隻有檢視權限
1.下載下傳資源
若依有幾個不同類型版本
1.前後端不分離
下載下傳位址： RuoYi: 🎉 基于SpringBoot的權限管理系統 易讀易懂、界面簡潔美觀。 核心技術采用Spring、MyBatis、Shiro沒有任何其它重度依賴。直接運作即可用
2.前後端分離
下載下傳位址：RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前後端分離權限管理系統，同時提供了 Vue3 的版本
3.cloud版本
下載下傳位址：
RuoYi-Cloud: 🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服務架構權限管理系統，同時提供了 Vue3 的版本
官方文檔：介紹 | RuoYi
我是用的是前後端分離版本，是以下面将做這個版本記錄
2.導入資料庫表結構和資料
項目拉到本地後會有這些檔案，找到其中sql目錄
在資料庫中分别運作這兩個檔案
後期在建立自己的表導入編碼後出現了編碼問題，是以建議先修改sql檔案，在每一個建表語句後面指定編碼和字元集
DEFAULT CHARSET=utf8 COLLATE=utf8_general
建立資料庫ry并給登入賬号配置設定對新庫的操作權限
導入sql檔案到ry庫,成功後資料庫表如下所示
3.更改配置
3.1 redis配置
在application.yml檔案中修改redis配置
3.2 資料庫配置
在application-druid.yml檔案中修改資料庫連結配置
4.本地運作服務
做好以上操作本地已經可以正常運作了
4.1 啟動後端服務
後端服務再本地可以直接通過IDEA的方式啟動，也可以通過打jar包方式
4.2 啟動前端服務
4.2.1 方式一
# 進入項目目錄
cd ruoyi-ui
# 安裝依賴
npm install
# 強烈建議不要用直接使用 cnpm 安裝，會有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。
npm install --registry=https://registry.npm.taobao.org
# 本地開發 啟動項目
npm run dev
4.2.3 方式二
進入到ruoyi-ui目錄下直接點選打包建構和運作三個腳本檔案
腳本運作後直接通過本機ipv4通路，localhost無法通路
5.自動生成代碼
5.1 生成存放資料表
通過表單自動生成後，在資料庫導入檔案生成表用來存放資訊
5.2 自動生成前後端代碼
5.2.1 自動生成代碼
表建立好之後登入背景管理服務，系統工具->代碼生成。搜尋剛剛建立的表
點選生成代碼，下載下傳後解壓，将指定目錄代碼放入到服務指定位置
注意運作sql檔案
5.3 前後端代碼放入指定位置
生成的前端代碼也放入指定位置
5.4 重新建構項目
參考上面記錄，重新運作前後端服務，再次通路，新添加的生成
沒有指定上級菜單則預設挂在“系統工具”下面
參考文檔：Ruoyi-Vue若依前後端分離版 代碼生成使用方法（生成新頁面、生成新子產品）保姆式教學_Ayaki_murasami的部落格-CSDN部落格_若依架構新增頁面
6.Linux服務部署
首先java運作環境是必不可少，用來運作java程式
6.1 後端部署
# 将服務放到背景運作
nohup java -jar xxx.jar > /dev/null 2>&1 &
6.2 前端部署
6.2.1 安裝nginx
yum install nginx
6.2.2 修改nginx配置
如果是http通路，監聽80端口
6.2.3 重新開機nginx服務
systemctl restart nginx.service
同樣的通路成功
參考文檔： 環境部署 | RuoYi
7.常見問題總結
7.1 資料庫編碼字元集不同導緻自動生成代碼無法搜尋到表
統一修改表的編碼和字元集，參考前面的注意事項，将建表sql語句的編碼字元集設定加上
7.2 線上環境驗證碼不顯示
問題描述：本地運作登入驗證碼可以看到，但是線上上環境驗證碼加載失敗
7.3 線上登入後無法進入菜單
詳細：Cannot find module '@/views/system/user/index'
問題原因：若依分離版下前端路由切換不了
解決方法：
修改 /src/store/modules/permission.js
将原有的加載視圖改為
export const loadView = (view) => { // 路由懶加載
return (resolve) => require([`@/views/${view}`], resolve)
}
我直接注釋掉了，怕出錯，後面改
重新打包運作問題解決
原文參考：若依 vue 菜單點選報錯 Error: Cannot find module ‘@/views/system/user/index‘_夏目友人帳...的部落格-CSDN部落格
7.3 個人首頁更換頭像失敗
解決方法：配置檔案路徑
7.4 無法通路資源 401
1. 部署前端到nginx後，通路頁面出現 403 錯誤。
原因：nginx配置檔案的第一行改為 user root;
2. 前後端都部署好了，但是前端發請求時報“請求逾時”，後端控制台沒有任何的輸出，原因，用的是雲伺服器，8080端口沒有配置安全組。
3. 打開前端頁面就出現 ‘’無法通路系統資源 401‘’ ，連圖檔驗證碼都加在出來，原因是 nginx的配置檔案中， proxy_pass http://192.168.1.101:8080/; 分号前面少了一個 /
我是因為第三個原因
若依前後端分離部署，出現 “無法通路系統資源 401”或者 “The request was rejected because the URL contained a potentially malicious String - 碼農教程
8.常用技巧
8.1 修改标題和logo
vim src/layout/components/Sidebar/Logo.vue
搜尋标題并更改
logo直接替換
參考原文：若依前後端分離版怎樣修改首頁面和浏覽器上的圖示和标題 - 灰信網（軟體開發部落格聚合）
8.2 修改首頁資訊
在此修改
8.3 修改右上角菜單資訊
8.4 關閉登陸驗證碼
# 編輯login.vue
vim ruoyi-ui/src/views/login.vue
// 驗證碼開關設定為false不啟用
captchaOnOff: false,
這裡隻是實作了最基礎的入門，還有更多的技巧希望CSDN的小夥伴們一起分享，歡迎在下方評論區給我留言~