若依管理系統應該是國內最受歡迎的完全開源的後端管理系統了吧，看看gitee上的star數量，著實驚人。若依系統有很多個版本 | 版本 | gitee地址 | 說明 | | ---------------- | --------------------------------------- | ------------------------------------------------------------ | | 前後端不分離版本 | https://gitee.com/y_project/RuoYi | 應該是第一版若依系統，star數量最多，但是前端介面比較醜 | | 前後端分離版本 | https://gitee.com/y_project/RuoYi-Vue | 該版本前後端分離，而且前端使用Vue重寫了，後端許可權部分使用了spring seurity+jwt實現，和原來的前後端不分離版本似乎有所不同 | | 微服務版本 | https://gitee.com/y_project/RuoYi-Cloud | 相對於前後端分離版本，微服務版本將模組拆分的更細，並且單獨作為一個服務對外暴露，通過服務發現相互呼叫 | 個人覺得前後端不分離版本太醜，而且前後端不分離維護起來也比較困難，而微服務版本又拆分的太細，前後端分離版本則正好，本篇文章將會講解如何如何使用RuoYi-Vue前後端分離版本。 ## 一、專案啟動 首先下載原始碼 https://gitee.com/y_project/RuoYi-Vue ，下載完之後開啟doc資料夾，檢視使用說明書。綜合使用說明書和實際操作，可以得到以下幾點： 1. 後端啟動專案是ruoyi-admin，啟動類是com.ruoyi.RuoYiApplication；前端專案是ruoyi-ui 2. 後端專案使用maven構建，使用前需確保maven環境；前端是vue專案，使用前需確保node環境 3. 後端專案依賴mysql和redis，啟動前需要修改application.yml配置檔案和application-druid.yml配置檔案修改對應的配置。 4. mysql資料初始化，需要建立ruoyi資料庫並且依次執行sql資料夾下的ry_20210108.sql、quartz.sql檔案 所以，操作上： 第一步，建立ruoyi資料庫，並且執行sql資料夾下的ry_20210108.sql、quartz.sql 第二步，修改application.yml配置檔案和application-druid.yml配置檔案中的redis和mysql的連線配置 第三步，在專案根目錄下執行`mvn clean package -DskipTests`命令下載後端專案依賴；在ruoyi-ui模組下執行`npm install --registry=https://registry.npm.taobao.org`命令安裝前端專案依賴 第四步，開啟ruoyi-admin專案的啟動類com.ruoyi.RuoYiApplication，並執行main方法，執行後端程式碼；開啟ruoyi-ui模組，執行命令`npm run dev`執行前端程式碼 第五步，開啟瀏覽器輸入網址`http://127.0.0.1`，看到以下頁面就表示前後端專案均已經成功執行  ## 二、修改前端預設設定 登入若依系統之後，看到的頁面是這樣子的  如果想側邊欄變成白色主題，關閉tabview，只需要依次點選頭像->佈局設定，即可切換主題、開啟或者關閉tabview功能，但是頁面一重新整理就失效了，想要永久生效，則需要改變前端程式碼的預設設定。  開啟前端專案ruoyi-ui，找到ruoyi-ui/src/settings.js檔案，裡面的配置項和頁面佈局中的選項一一對應，這裡如果做了修改，則永久生效 ``` js module.exports = { title: '若依管理系統', /** * 側邊欄主題 深色主題theme-dark，淺色主題theme-light */ sideTheme: 'theme-dark', /** * 是否系統佈局配置 */ showSettings: false, /** * 是否顯示 tagsView */ tagsView: true, /** * 是否固定頭部 */ fixedHeader: false, /** * 是否顯示logo */ sidebarLogo: true, /** * @type {string | array} 'production' | ['production', 'development'] * @description Need show err logs component. * The default is only used in the production env * If you want to also use it in dev, you can pass ['production', 'development'] */ errorLog: 'production' } ``` ## 三、新增選單和頁面 新增選單和頁面是若依管理系統最核心的功能，也是使用者最關心的事情，這裡涉及到核心中的核心功能：許可權，先不考慮那麼多，直接新增頁面，看看能否生效 下面演示新聞列表頁新增的過程，這裡如果想要新增新聞列表選單，需要先新增“新聞”父選單目錄，再新增“新聞列表”選單項。 ### 1.新增新聞父目錄選單 依次點選系統管理->選單管理->新增，在彈出框中輸入內容如下：  這裡，選單圖示隨意選擇，路由地址隨意輸入news即可 ### 2.新增新聞列表選單 在上一步新建的新聞目錄那一行點選新增按鈕，在彈出框中輸入內容如下  完成之後，新聞列表選單就新增完成了，之後重新整理頁面，當前admin管理員就能看到新增的選單了  但是點選新聞列表選單，會報錯，說是沒有找到`news/list/index`模組，因為雖然我們定義好了路由和選單，但是真正的前端頁面還沒有新增。畢竟 每一個選單項都要有一個頁面和它對應的嘛。 ### 3.新增新聞列表頁面 在前端專案ruoyi-ui的ruoyi-ui/src/views目錄下新增news/list/index.vue檔案，檔案內容如下：  之後再點選新聞列表頁，就可以看到頁面內容了（如果出現快取問題，重新執行命令npm run dev即可解決）  ## 四、建立新使用者和分配選單許可權 若依系統初始化SQL已經建立了兩個使用者：admin和ry，分別作為管理員和普通使用者，這裡我建立一個新使用者kdyzm，用來測試選單許可權。 首先，建立一個角色“運營角色”，僅允許“新聞”選單許可權。  接下來，建立一個新使用者一枝梅，並將上一步建立的角色賦給該使用者  建立完成之後，開啟無痕視窗，使用該賬戶登入若依管理系統，之後看到的選單就是這樣子的了  可以看到，使用admin賬號管理系統，只能看到新聞選單了，如果這時候輸入只有admin才能看到的其它頁面地址又會如何呢，比如kdyzm在瀏覽器上手動輸入了地址：http://127.0.0.1/system/user 這本應當是管理員才有許可權看到的頁面，kdyzm看到的則是  這說明選單許可權是生效了的，而不僅僅至於看不到，就算知道頁面地址也無濟於事。 好了，若依系統到了這裡，初步的頁面和許可權問題已經解決，下一篇文章將會講解實際開發中的一些細節，比如按鈕許可權，前端如何發起http請求，後端介面許可權等等，欲知後事如何，且聽下