若依框架快速開發(fā)項目（避坑超詳細）

初衷：

若依框架使用及其普遍，是一個非常優(yōu)秀的開源框架，框架本身的權(quán)限系統(tǒng)，字典設置以及相關封裝，安全攔截相當完善，本人受益匪淺，學學到了許多，在這里，先向原創(chuàng)作者致敬！

本人剛剛接觸這個框架的時候，很迷茫，幾乎沒有入手的地方，不知道怎么去開始，網(wǎng)上的教程也是良莠不齊，當時遇到了許多的坑，在這里，為了避免后來人遇到同樣的問題，將使用過程在這里一一詳述，這既是技術行業(yè)的惺惺相惜吧，也感謝你能刷到這篇文章，本來是不做限制的，但是為了讓更多的朋友看見，有違初心，在這里向大家道歉，希望理解，設置為粉絲可見！

1.若依介紹

借用官網(wǎng)的介紹，若依其實有點像低代碼平臺！若依分為基礎版，分離版，微服務版本，大家可能剛剛上手，就會直接使用分離版，也就是ruoyi-Vue，由于基礎版這種架構(gòu)方式已經(jīng)不再推薦，很少去用的，現(xiàn)在都是分離版，大一點的項目就是微服務版本！

主要特性

• 完全響應式布局（支持電腦、平板、手機等所有主流設備）
• 強大的一鍵生成功能（包括控制器、模型、視圖、菜單等）
• 支持多數(shù)據(jù)源，簡單配置即可實現(xiàn)切換。
• 支持按鈕及數(shù)據(jù)權(quán)限，可自定義部門數(shù)據(jù)權(quán)限。
• 對常用js插件進行二次封裝，使js代碼變得簡潔，更加易維護
• 完善的XSS防范及腳本過濾，徹底杜絕XSS攻擊
• Maven多項目依賴，模塊及插件分項目，盡量松耦合，方便模塊升級、增減模塊。
• 國際化支持，服務端及客戶端支持
• 完善的日志記錄體系簡單注解即可實現(xiàn)
• 支持服務監(jiān)控，數(shù)據(jù)監(jiān)控，緩存監(jiān)控功能。

內(nèi)置功能

• 用戶管理：用戶是系統(tǒng)操作者，該功能主要完成系統(tǒng)用戶配置。
• 部門管理：配置系統(tǒng)組織機構(gòu)（公司、部門、小組），樹結(jié)構(gòu)展現(xiàn)支持數(shù)據(jù)權(quán)限。
• 崗位管理：配置系統(tǒng)用戶所屬擔任職務。
• 菜單管理：配置系統(tǒng)菜單，操作權(quán)限，按鈕權(quán)限標識等。
• 角色管理：角色菜單權(quán)限分配、設置角色按機構(gòu)進行數(shù)據(jù)范圍權(quán)限劃分。
• 字典管理：對系統(tǒng)中經(jīng)常使用的一些較為固定的數(shù)據(jù)進行維護。
• 參數(shù)管理：對系統(tǒng)動態(tài)配置常用參數(shù)。
• 通知公告：系統(tǒng)通知公告信息發(fā)布維護。
• 操作日志：系統(tǒng)正常操作日志記錄和查詢；系統(tǒng)異常信息日志記錄和查詢。
• 登錄日志：系統(tǒng)登錄日志記錄查詢包含登錄異常。
• 在線用戶：當前系統(tǒng)中活躍用戶狀態(tài)監(jiān)控。
• 定時任務：在線（添加、修改、刪除)任務調(diào)度包含執(zhí)行結(jié)果日志。
• 代碼生成：前后端代碼的生成（java、html、xml、sql)支持CRUD下載 。
• 系統(tǒng)接口：根據(jù)業(yè)務代碼自動生成相關的api接口文檔。
• 服務監(jiān)控：監(jiān)視當前系統(tǒng)CPU、內(nèi)存、磁盤、堆棧等相關信息。
• 緩存監(jiān)控：對系統(tǒng)的緩存信息查詢，命令統(tǒng)計等。
• 在線構(gòu)建器：拖動表單元素生成相應的Vue代碼。
• 連接池監(jiān)視：監(jiān)視當期系統(tǒng)數(shù)據(jù)庫連接池狀態(tài)，可進行分析SQL找出系統(tǒng)性能瓶頸。

那么，大家就會想問，我拿到這樣一個開源框架我可以做什么呢，在這里我給大家仔細說，大家看看是不是能夠用到：
1.做一個畢業(yè)設計
使用這套系統(tǒng)，大家可以基本不用自己寫代碼，快速生成前后端代碼，對的，就是全部生成，不用自己去寫，比如一個簡單的航班信息管理系統(tǒng)，學生信息管理系統(tǒng)，或者是員工，教務管理系統(tǒng)。大家可以發(fā)現(xiàn)，只要不涉及復雜的邏輯需求，這個框架基本都是可以實現(xiàn)的，自己隨便修修補補就是一套非常精美的系統(tǒng)！

2.做兼職，掙點小錢

有時候，大家可以利用這套框架去掙點小錢，由于前后端都可以自己生成，所以大家拿這個項目去掙點小錢是一個非?？斓耐緩?/p>

3.做練習，熟悉架構(gòu)，理解封裝

如果對于自己有要求，對于這個行業(yè)充滿熱情，大家可以自己把代碼跑起來，自己試一試，去看看人家的封裝和架構(gòu)思想，有很多的東西值得去學習，去理解

接下來，我們就直接開始上手，同時將網(wǎng)址鏈接放到這里

• 若依官網(wǎng)：http://ruoyi.vip(opens new window)
• 演示地址：http://vue.ruoyi.vip(opens new window)
• 代碼下載：https://gitee.com/y_project/RuoYi-Vue

再加一個環(huán)境依賴，大家注意一下，這些是需要有的，不然跑不起來

• JDK >= 1.8 (推薦1.8版本)
• MySQL >= 5.7 (推薦5.7版本,高版本數(shù)據(jù)庫腳本導入低版本數(shù)據(jù)庫會報錯)
• Maven >= 3.0
• Node >= 12
• Redis >= 3

2.代碼拉取

我們需要有一個碼云（Gitee）的賬號，這是一個類似于Github的代碼倉庫，登錄上去，打開代碼加載的地址

對的，就是這個地方

對于下載方式我在這里給大家介紹兩種

2.1直接下載壓縮包

大家想必明白哈，下載下來直接解壓就可以

2.2使用git拉取

不知道大家有沒有安裝git，這個是需要安裝的，以后肯定肯定要用的，大家以后涉及到協(xié)同開發(fā)，一個小組好幾個人同時開發(fā)一個項目，就必須使用git進行拉取，合并這些操作，所以大家還是安裝一下

大家選擇https,然后點擊復制地址

在自己的目標文件夾下右鍵單擊，安裝完git的同學肯定會有一個Git Bash Here,我們點擊打開命令窗口,然后輸入如下命令

git clone  [復制的http地址]
例
git clone https://gitee.com/y_project/RuoYi-Vue.git

這樣，我們就成功拉下來了代碼

3.后端代碼運行

數(shù)據(jù)庫配置

導入數(shù)據(jù)庫

我們需要將sql文件夾中的兩個sql腳本導入數(shù)據(jù)庫

1.選擇自己的目的數(shù)據(jù)庫（沒有就新建一個）

在這里我新建了一個測試數(shù)據(jù)庫，名字為ruoyi001

2.數(shù)據(jù)導入

導入兩次后我們就得到了系統(tǒng)數(shù)據(jù)表

修改配置文件

總共兩個數(shù)據(jù)庫配置文件，我們可以看到第二個里面有配置數(shù)據(jù)庫的相關內(nèi)容

下面，我們對于內(nèi)容進行修改

            master:
                url: jdbc:mysql://localhost:3306/數(shù)據(jù)庫名?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                username: 賬號
                password: 密碼

redis配置修改

第一個配置文件里面我們需要配置redis的密碼，端口號默認一般都是6379，有的同學可能會設置自己密碼，默認密碼也是空，大家需要配置一下

其他配置（可修改，可不修改）

啟動后端項目

首先保證自己環(huán)境是完備的，保證redis服務和MySQL服務正常哈

運行這個主啟動器

4.前端代碼運行

首先保證一個問題，你的筆記本環(huán)境可以跑起來vue項目，意味著你的電腦需要安裝node

# 進入項目目錄
cd ruoyi-ui

# 安裝依賴
npm install

# 強烈建議不要用直接使用 cnpm 安裝，會有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。
npm install --registry=https://registry.npmmirror.com

# 本地開發(fā) 啟動項目
npm run dev

就這樣大家成功跑起來了代碼，恭喜大家?。?！打開瀏覽器，輸入：(http://localhost:80 (opens new window)) 默認賬戶/密碼 admin/admin123）
若能正確展示登錄頁面，并能成功登錄，菜單及頁面展示正常，則表明環(huán)境搭建成功

5.生成自己需要的功能

創(chuàng)建測試數(shù)據(jù)

我們這里建立一個測試表，作為測試使用

CREATE TABLE `flightinfo` (
  `flightid` int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵ID',
  `flightnum` varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '航班編號',
  `flydate` datetime DEFAULT NULL COMMENT '飛行日期',
  `starttime` datetime DEFAULT NULL COMMENT '起飛時間',
  `flytime` datetime DEFAULT NULL COMMENT '飛行時間',
  `startcity` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '出發(fā)地',
  `endcity` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '目的地',
  `seatnum` int(11) DEFAULT NULL COMMENT '座位數(shù)',
  `status` varchar(255) NOT NULL COMMENT '狀態(tài)',
  PRIMARY KEY (`flightid`,`flightnum`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=68 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC;

大家這里需要注意一下，注釋不能忘

導入數(shù)據(jù)表

我們選擇自己想要導入的數(shù)據(jù)

數(shù)據(jù)配置

在這里主要向大家介紹一下這三個框

第一個選擇是否填，選擇之后表單的新增就會有了提交校驗，如果為空就會校驗不過去

第二個顯示類型，顧名思義，就是顯示出來的是單選框，多選框，還是其他的，根據(jù)自己的目的去選型

第三個字典更重要，選擇了字典，你的下拉框/單選框就會顯示字典里面的值

我們新增一個字典

我們增加了兩個航班狀態(tài)作為測試

下面就進行配置

6.導入代碼

點擊生成代碼，我們將代碼導入

將這兩個文件復制在如下目錄

將這兩個文件復制到前端如下文件夾

然后再加數(shù)據(jù)庫腳本在數(shù)據(jù)庫運行，重啟前后端

這樣，大家就完成了自己功能模塊的添加，如果向?qū)Σ藛蜗嚓P細節(jié)進行探索，大家自己進行研究一下哈

7.如何增加自己的模塊（避坑）

Maven多模塊下新建子模塊流程案例。

1、新建業(yè)務模塊目錄，例如：ruoyi-test。

2、在ruoyi-test業(yè)務模塊下新建pom.xml文件以及src\main\java，src\main\resources目錄。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>ruoyi</artifactId>
        <groupId>com.ruoyi</groupId>
        <version>x.x.x</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>ruoyi-test</artifactId>

    <description>
        test系統(tǒng)模塊
    </description>

    <dependencies>

        <!-- 通用工具-->
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-common</artifactId>
        </dependency>

    </dependencies>

</project>

3、根目錄pom.xml依賴聲明節(jié)點dependencies中添加依賴

<!-- 測試模塊-->
<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-test</artifactId>
    <version>${ruoyi.version}</version>
</dependency>

4、根目錄pom.xml模塊節(jié)點modules添加業(yè)務模塊

<module>ruoyi-test</module>

5、ruoyi-admin目錄pom.xml添加模塊依賴

<!-- 測試模塊-->
<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-test</artifactId>
</dependency>

如上是官方說辭，但是有問題，加了還是404，大家解決方法兩步，找一下哪里有ruoyi-system,就在那里加上自己的模塊，除了ruoyi-system自己下面不加

哈游一個就是自己的包名稱，是不是 com.ruoyi.**.domain,

不是的話，要么改自己的，要么在別人的基礎上加一個自己的

8.如何獲取用戶登錄信息

第一種方法

// 獲取當前的用戶信息
User currentUser = ShiroUtils.getSysUser();
// 獲取當前的用戶名稱
String userName = currentUser.getUserName();

第二種方法（子模塊可使用）

// 獲取當前的用戶名稱
String userName = (String) PermissionUtils.getPrincipalProperty("userName");

界面獲取當前用戶信息（支持任意th標簽）

<input th:value="${@permission.getPrincipalProperty('userName')}">

js中獲當前用戶信息

var userName = [[${@permission.getPrincipalProperty('userName')}]];

9.登錄頁面如何不顯示驗證碼

在application.yml設置captchaEnabled為false即可

# Shiro
shiro:
  user:
    # 驗證碼開關
    captchaEnabled: false

10.如何更換主題皮膚

1、項目主頁-個人信息中選擇切換主題

2、修改主框架頁-默認皮膚，在菜單參數(shù)設置修改參數(shù)鍵名sys.index.skinName支持如下幾種皮膚

• 藍色 skin-blue
• 綠色 skin-green
• 紫色 skin-purple
• 紅色 skin-red
• 黃色 skin-yellow

3、修改主框架頁-側(cè)邊欄主題，在菜單參數(shù)設置修改參數(shù)鍵名sys.index.sideTheme支持如下幾種主題

• 深色主題theme-dark
• 淺色主題theme-light

注：如需新增修改皮膚主題可以在skins.css中調(diào)整

提示

頂部默認主題顏色在skins.css

/** 藍色主題 skin-blue **/
.navbar, .skin-blue .navbar {
	background-color: #3c8dbc
}

左側(cè)默認主題顏色在static\css\style.css

.navbar-static-side {
    background: #2f4050;
}

nav .logo {
    background-color: #367fa9;
}
n-purple
- 紅色 skin-red
- 黃色 skin-yellow

3、修改主框架頁-側(cè)邊欄主題，在菜單`參數(shù)設置`修改參數(shù)鍵名`sys.index.sideTheme`支持如下幾種主題

- 深色主題theme-dark
- 淺色主題theme-light

注：如需新增修改皮膚主題可以在`skins.css`中調(diào)整

提示

頂部默認主題顏色在`skins.css`

```css
/** 藍色主題 skin-blue **/
.navbar, .skin-blue .navbar {
	background-color: #3c8dbc
}

左側(cè)默認主題顏色在static\css\style.css文章來源地址http://www.zghlxwxcb.cn/news/detail-773437.html

.navbar-static-side {
    background: #2f4050;
}

nav .logo {
    background-color: #367fa9;
}

到了這里，關于若依框架快速開發(fā)項目（不涉及底層邏輯，只是簡單使用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！