若依管理系統RuoYi-Vue（一）：專案啟動和選單建立

狂盜一枝梅發表於2021-02-04

若依管理系統應該是國內最受歡迎的完全開源的後端管理系統了吧，看看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資料夾，檢視使用說明書。綜合使用說明書和實際操作，可以得到以下幾點：

後端啟動專案是ruoyi-admin，啟動類是com.ruoyi.RuoYiApplication；前端專案是ruoyi-ui
後端專案使用maven構建，使用前需確保maven環境；前端是vue專案，使用前需確保node環境
後端專案依賴mysql和redis，啟動前需要修改application.yml配置檔案和application-druid.yml配置檔案修改對應的配置。
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檔案，裡面的配置項和頁面佈局中的選項一一對應，這裡如果做了修改，則永久生效

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'
}