部署環(huán)境

JDK >= 1.8

MYSQL >= 5.7

Maven >= 3.0

Node >= 12

Redis >= 3

運行若依項目

下載若依源碼

?若依官網(wǎng)

若依項目源碼(前后端分離)

運行后端項目?

ruoyi-ui就是vue項目（這里使用vscode打開）?

?整體用idea打開

1.配置數(shù)據(jù)庫(sql提供sql文件中的sql腳本配置)

創(chuàng)建數(shù)據(jù)庫 ruoyi_vue數(shù)據(jù)庫并導入quartz.sql腳本和ry_20230706.sql腳本

結(jié)果為下:

?2.在工程中配置數(shù)據(jù)源（在ruoyi-admin中的配置文件中配置）

3.配置redis

4.通過啟動類RuoYiApplication進行啟動。?

?后端啟動成功。

啟動前端項目(ruoyi-ui)?

?1.打開前端項目

2.打開終端

#導入所需要的依賴
npm install 

#使用下面指令解決下載速度慢的問題
npm install --registry=https://registry.npmmirror.com

#啟動前端項目
npm run dev

?前端啟動結(jié)果為下:

用戶名:admin，密碼: admin123

進入主頁

?驗證碼實現(xiàn)

實現(xiàn)的思路：后端會隨機生成一個固定的表達式比如(2*2=?@4)，通過字符串符分割的方式，獲得對應的題目和答案，后端會通過該題目生成對應的驗證碼圖， 并將答案存放到redis中，后端把生成好的圖片和redis對應的key傳給前端。前端通過調(diào)用后端api傳入用戶輸入值和之前的key值，最終這個api查詢redis，判斷redis中的value是否和用戶輸入的值一樣，最終實現(xiàn)驗證碼。

前端的實現(xiàn)步驟

1.在頁面初始化時調(diào)用自定義方法 getCode

調(diào)用該方法后會獲取到后端生成的圖片 img 和對應的key，這里使用uuid表示。

?自定義的getCodeImage的方法為下

在該方法中調(diào)用了自定義方法request，該方法就是使用axios實現(xiàn)ajax。

?在該request.js中設置的了前端請求的共部分?VUE_APP_BASE_API, 這里該值為:

?此時表示開發(fā)環(huán)境，我們后續(xù)可以根據(jù)需求設置為上線環(huán)境。

?上線環(huán)境的配置為下:

因為Request方法中設置了BaseURL所以對應的getCodeImg的請求路徑為下:

我們通過觀察可以發(fā)現(xiàn)前端地址是 localhost:80, 而我們的后端接口卻是localhost:8080，存在跨域的問題，這種跨域問題前端和后端都有方法解決，這里通過前端解決此問題。

前端通過反向代理的方法解決，使用vue自帶的反向代理服務器。

其中在進行反向代理的時候會將將/dev-api重寫成空，如果將localhost:80代理成localhost:8080，最終實現(xiàn)反向代理。

?最終前端實現(xiàn)驗證碼的效果。

后端的實現(xiàn)步驟

?Controlle層的實現(xiàn)方法為下:

判斷項目是否開啟驗證，項目是支持不開啟驗證的。

生成一個vo對象，用于最后返回給前端，這里的vo對象就是自定義的AjaxResult。

?生成對應的uuid用于作為redis中的key。

通過自定義方法createText生成題目和答案拼接的字符串，通過分割字符，獲得題目和答案。

生成的表達式效果為下:?

通過createImage將題目生成對應的圖片。

?將key和對應的答案存放到redis中。

將生成的圖片以流的形式也就是這里的os，最終通過流的形式返回給前端， uuid和圖片都封裝到ajaxResult中，最終將這個vo返回給前端。

完成驗證碼。

登錄實現(xiàn)

調(diào)用service層的login

?驗證碼校驗

通過uuid從redis中獲取對應驗證碼的答案，獲取后就將對應的鍵值對從redis中刪除，判斷用戶輸入的驗證碼的有效性，錯誤就返回異常。

判斷賬號和密碼的有效性?

?只要出現(xiàn)錯誤就會通過異步的方式記錄日志到數(shù)據(jù)庫中的sys_logininfor中

?sys_logininfor表為下:

?使用springsecurity設置權(quán)限

獲取當前用戶的登錄信息，將該用戶信息更新到數(shù)據(jù)庫sys_user中?

updateUserProfile就是修改數(shù)據(jù)庫表中對應的用戶信息。

?sys_user表為下:

使用JWT生成對應的token令牌。

?使用setUserAgent方法獲取loginUser的完整信息。

使用refreshToken方法設置loginUser的過期時間(默認是30分鐘)，在前端用不到，主要是為了做備份。

?并將loginUser的信息持久化到redis中，設置其的有效時間。

生成JWT令牌

?最后會將生成好的token返回給前端。

在前端的login中

?會將獲得JWT令牌設置為前端的token，也就是存到cookie中，最終完成登錄。

獲取用戶角色和權(quán)限

getInfo(將最終的數(shù)據(jù)存在vueX中)

在我們進行登錄操作以后，我們可以觀察到發(fā)送了兩個請求。

1.前端實現(xiàn)

因為getInfo是獲取用戶的信息，所以為了保證正常的使用，進入每個界面都會調(diào)用getInfo，設置在全局路由?promission.js中。

?router.beforeEach方法的作用就是在做每次路由前都會執(zhí)行其中的內(nèi)容。（這里就是每次都會執(zhí)行getInfo和getRoutes）

在GetInfo方法中調(diào)用getInfo方法，最終返回給前端當前的用戶數(shù)據(jù)，將用戶數(shù)據(jù)存儲在全局存儲中（這里會存儲用戶的角色，權(quán)限，名字，頭像 ,此處為該getInfo實現(xiàn)的核心）

在該方法中的getInfo方法的實現(xiàn)為下:

?就是調(diào)用后端的getInfo接口

?2.后端實現(xiàn)

?獲取用戶的身份信息，如果不是admin就到數(shù)據(jù)庫中從查詢。

因為是多對多的關系，所以將sys_role,sys_user,sys_user_role三表聯(lián)合起來查詢。

最終查出用戶的身份，并返回對應的身份。

獲取用戶的權(quán)限 ,如果用戶是admin的話就直接返回*.*.*。

?如果不是就到數(shù)據(jù)庫查詢，通過身份的判斷，關聯(lián)sys_menu和sys_role兩表返回該用戶有權(quán)限訪問的菜單。

最終將數(shù)據(jù)返回給前端，完成getInfo。

getRouters

1.前端實現(xiàn)?

?在界面加載時就會調(diào)用方法GenerateRoutes

在GenerateRoutes中會調(diào)用?getRouters方法，調(diào)用后端對用的getRouters接口

?2.后端實現(xiàn)

在數(shù)據(jù)庫中對應的menu表中設置了父id用于遞歸做樹形菜單。

通過userId查詢中間表sys_role_menu，查詢出所有屬于該角色的menu。

通過對應的菜單表通過遞歸的方式將其組裝起來成為以含有完整子菜單的菜單表。

通過遍歷根據(jù)parentId查詢所有主節(jié)點，通過方法recursionFn查詢各個主節(jié)點對應的子節(jié)點，并將其組裝起來。

從通過userId查詢到總菜單列表中查詢出該節(jié)點對應的所有菜單，將這些菜單全部設置為當前節(jié)點的子菜單，設置完畢之后，通過循環(huán)遞歸的方式去訪問各個子節(jié)點的對應的子菜單并對其進行組裝，以此類推，那些沒有子菜單的菜單就不會繼續(xù)遞歸，最終完成菜單的組裝。

最終返回組裝好的菜單列表返回給前端，完成getRouters。

首頁數(shù)據(jù)加載

主頁分析?

進入主頁

在登錄時會執(zhí)行handleLogin方法會通過路由到主界面，該方法會路由到"/"

?對應"/"的路由為下:

?會去加載主組件Layout，還會加載子組件/views/index.vue

?因為Layout組件沒有特定指定對應名字的vue界面，所以默認就會跳轉(zhuǎn)到該組件文件夾下的index.vue

在該index.vue中sidebar就是自定義的側(cè)邊欄組件，app-mian就是主界面的自定義組件。

?在sidebar組件中就是去生成對應的樹形菜單。

我們可以發(fā)現(xiàn)在我們進入主頁后，直接加載主頁的信息，而不是別的菜單信息。

?在路由中我們做了重定向，在地址是"/"時會直接重定向到 /views/index.vue界面。

?用戶管理界面分析

在我們點擊用戶管理界面時對應的路徑為下:?

我們就可以找到對應的index.vue文件

?在加載該界面時就會去調(diào)用方法getList和getDeptTree。

1.getList?

getList獲取的數(shù)據(jù)由于展示頁面中的用戶信息，getDeptTree獲取的數(shù)據(jù)由于生成頁面中的部門樹形圖。

getList通過調(diào)用listUser方法進行實現(xiàn)，這里queryParams就是用戶在界面中設置的限制條件。

?params就是傳入的搜索的限制條件

發(fā)送的請求為下:?

?@PreAuthorize注解就是判斷當前用戶身份有權(quán)限調(diào)用該接口，這里是管理員角色，權(quán)限就是

*:*:*，參數(shù)就是傳入的限制條件。

@DataScope(deptAlias = "d, userAlias = "u")，此注解用于設置別名。?

?2.getDeptTree

deptTreeSelect方法

發(fā)送的請求為下:?

?后端的Controller中

也是使用和菜單組裝的遞歸方式將部門進行組裝，最終返回給前端。（就是廣度優(yōu)先搜索）

?用戶數(shù)據(jù)分頁

在用戶管理中用戶數(shù)據(jù)存在分頁的步驟

在發(fā)送獲取用戶數(shù)據(jù)的請求時就會攜帶對應的分頁參數(shù)

?分頁設置步驟就在getDataTable方法中

在方法startPage中就會設置分頁

該方法使用mybatis實現(xiàn)分頁操作。此時我們會有一個疑問，它是怎么獲取分頁參數(shù)的呢？（我們在controller層中可沒有就是對應的分頁參數(shù)）

setReasonable(reasonable)的作用就是設置頁面邏輯判斷。（如果頁面為負數(shù)，字母，那么頁面就會自動設置為1,保證邏輯正確）

在buildPageRequest中通過 ServletUtils工具類獲取請求對應的路徑參數(shù)。

通過對應的名字獲取對應的路徑參數(shù)。?

?在我們這給請求中的路徑參數(shù)就是pageNum和pageSize。

?獲取到對應的分頁參數(shù)，使用pageHelper生成對應的page結(jié)果。（mybatis的pagehelper會通過攔截器在我們查詢對應的用戶數(shù)據(jù)時自動進行分頁），mybtis的pageHelper只需要我們配置其參數(shù)也就是配置當前頁碼和總頁數(shù)，配置完后在我們查詢數(shù)據(jù)的時候就會自動實現(xiàn)分頁效果。

?將最終分頁的總數(shù)據(jù)，總個數(shù)，封裝成對象返回給前端。

前端會獲取到用戶的數(shù)據(jù)列表和用戶的個數(shù)。

最終完成分頁。

添加用戶

添加用戶前的數(shù)據(jù)加載

在點擊新增按鈕時，會調(diào)用方法handleAdd方法。

調(diào)用后端接口為下:

?獲取用戶的基本信息，因為這里是新增操作且身份是admin，所以就返回對應的身份列表，所有職位列表。（這里沒有返回部門列表，因為需要顯示所有惡的部門，之前已經(jīng)查詢過了，所以我們直接使用之前查到的部門列表）最終實現(xiàn)數(shù)據(jù)加載。

添加用戶

在新增頁面中，填寫數(shù)據(jù)完成后，調(diào)用方法submitform。?

調(diào)用后端接口

?校驗基本的信息，設置被新建的時間，對密碼進行加密。

最終完成用戶的添加。

修改用戶

在點擊修改的時候，會調(diào)用handleUpdate,該方法會調(diào)用后端的接口?

該后端接口就會通過userId返回對應的數(shù)據(jù)。

?在設置好修改修改的新內(nèi)容后，點擊修改就會調(diào)用后端的以下方法edit：

其會先判斷該用戶是否為超級管理員，如果是就不能進行修改，判斷當前用戶是否有訪問權(quán)限，判斷基本的輸入，設置修改時間，對新密碼進行加密?。

在updateUser中其步驟就是先刪除對應的該用戶舊信息，在重新添加該用戶的新信息。

最終完成修改。

刪除用戶

點擊刪除按鈕就都會調(diào)用handleDelete函數(shù)?

handleDelete方法為下:?

?通過delUser會調(diào)用后端接口

?如果要刪除的用戶就是當前用戶的話就無法刪除，最終實現(xiàn)的刪除也是邏輯刪除。（并非真正的刪除）

代碼自動生成

在改該項目的數(shù)據(jù)庫中創(chuàng)建對應的新表?

?在代碼生成中選擇導入表，選中test表。

點擊編輯按鈕設置基本信息。（每個屬性的注釋，生成的包名及路徑）?

因為是基于若依項目，所以設置對應的上級菜單。?

設置對應的上級菜單。

點擊生成代碼，?最終會生成一個壓縮包，解壓進行使用。

1.后端修改部分?

將對應的代碼復制到前后端即可。?

?直接選中java和resources將其復制到項目的main中(直接心中 idea中main的文件夾粘貼即可)

?

?2.前端修改部分

選中api和views直接復制到ruoyi-ui項目中（選中src進行粘貼，也就是粘貼到根路徑）?

?

??

執(zhí)行SQL（導入新菜單在數(shù)據(jù)庫中的信息）

重新運行進行測試(后端點擊構(gòu)建項目按鈕)，測試結(jié)果為下:

最終完成代碼的自動生成。文章來源地址http://www.zghlxwxcb.cn/news/detail-732129.html

到了這里，關于若依使用及源碼解析（前后端分離版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！