若依管理系統RuoYi-Vue（一）：項目啟動和菜單創建

本文轉載自查看原文 2021-02-04 15:13 9168 ruoyi/ JAVA EE 學習筆記/ 若依

若依管理系統應該是國內最受歡迎的完全開源的后端管理系統了吧，看看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'
}