若依文件分析
前提
Jdk、maven等環境部署成功，部署若依項目到本地
第一部分 前端
1、當前網頁對應的網址是localhost/system/role對應哪個頁面
? ? ?1.1、前端路由是動態的，url來自于數據庫；
? ? ?1.2、前端文件夾名稱以及文件名稱、位置與數據庫里一一對應
? ? ?1.3、路由動態賦值
? ? ?例如： 如果地址是/system/role ?就找一個system文件夾下面有role文件夾的文件
2、點擊某個頁面，上面的數據是從數據庫來的，前端如何發送請求給后端呢？
剛加載頁面時，發送請求給后端，用created或者mouted{}
getList()是一個封裝的請求，listRole在api的js文件中
你會發現vue里引入js的變量，都是js里的方法名稱
export function listRole(query) {
?
? return request({
?
? ? url: '/system/role/list',
?
? ? method: 'get',
?
? ? params: query
?
? })}
后端的端口以及全稱是什么呢？始終看不到真實地址？
我們繼續看request這個方法，在utils/request下
普通的前后端交互，看demo, ?axios實例
這里注意，vue分開發環境與生產環境，這個
process.env.VUE_APP_BASE_API
這里/prod-api代表什么？
vue項目前端頁面相互訪問，是通過router就可以實現。
而數據交互的前后端存在跨域（跨域就是端口不一樣或域名不一樣），前后端交互頻繁，若服務器地址后期變更，不方便維護。
所以我們需要一個精簡的路徑來映射真實后端請求路徑。
在開發環境下，使用vue的proxy就可以實現前后端交互：
Vue-cli3做例子：在vue.config.js里面有信息
以上僅在開發時有效，若部署到云服務器上，則不行。
?devServer: {
?
? ? host: '0.0.0.0',
?
? ? port: port,
?
? ? open: true,
?
? ? proxy: {
?
? ? ? [process.env.VUE_APP_BASE_API]: {
?
? ? ? ? ?target: `http://localhost:8090`,
?
? ? ? ?// target: `http://192.168.1.64:8080`,
?
? ? ? ? changeOrigin: true,
?
? ? ? ? pathRewrite: {
?
? ? ? ? ? ['^' + process.env.VUE_APP_BASE_API]: ''
?
? ? ? ? }}},
?
? ? disableHostCheck: true},
Proxy:{}是代理服務器
pathRewrite意思是重寫路徑
process.env.VUE_APP_BASE_API
總結上述：上面提到axios請求url都有一個公共的頭部baseurl，指向process.env.Vue_APP_BASE_API，其值為/prod-api。在代理服務器中，把真實的后端請求地址與/prod-api映射起來了。
例子
前端地址：ip:80
后端地址：ip:8080/項目名
存在跨域
前端配置映射 ? /prod-api ? ----------- ip:8080/項目名
?changeOrigin: true,// 允許跨域的必備代碼
生產環境下，以上devServer: {proxy….}不起作用的，可注釋掉（不注釋也行），在Nginx里配置就可以了
user ?root;
worker_processes ?1;
#pid ? ? ? ?logs/nginx.pid;
events {
? ? worker_connections ?1024;
}
http {
? ? include ? ? ? mime.types;
? ? default_type ?application/octet-stream;
? ? sendfile ? ? ? ?on;
? ? keepalive_timeout ?65;
? ? server {
? ? ? ? listen ? ? ? 80;
? ? ? ? server_name ?192.168.209.236;
? ? ? ? location / {
? ? ? ? ? ? root ? /usr/share/nginx;
? ? ? ? ? ? index ?index.html index.htm;
? ? ? ? ? ? try_files $uri $uri/ /index.html;
}
? ? ? ? ? ?location ^~ /prod-api/ {
? ? ? ? ? ?proxy_pass http://192.168.209.236:8080/ruoyi-admin/;} }}
?
總結：只要請求存在跨域問題，就需要一個代理服務器把真實的后期請求地址與一個自定義的簡短路徑映射起來
這個request封裝axios方法，axios請求，都有一個公共的頭部/prod-api，經過代理服務器映射，會轉發到真實的后端服務器上
1、后端是如何接受前端的請求？
先看ruoyi框架的后端整體結構
若依框架看似有多個獨立的項目，但只有一個入口程序（ruoyi-admin里面RuoYoApplication），入門程序一旦啟動，其他項目都會啟動起來。
Ruoyi-common是注解、過濾器，異常及工具類的封裝。
Ruoyi-framework是事務管理；
Ruoyi-generator是自動生成bean等映射文件及vue前端；
Ruoyi-quartz是定時任務的配置
Ruoyi-system主要是bean類，接口類與實現類等;
Ruoyi-admin是業務層，直接與前端交互
業務層在ruouyi-admin里，從包名就可以看出具體的請求方法
但是以下這個注解是什么意思呢？
@PreAuthorize
答案：權限認證，用戶是否有操作的權限，有則執行，無則報錯
@GetMapping("/list")
答：是路徑，一個方法的全路徑=類上路徑+方法上路徑；
若類上無路徑，該方法的全路徑就是方法上的路徑；
前后端請求的案例：
請求數據庫到此結束。
疑惑：
各大模塊之間都有獨立的pom.xml文件，各個獨立的模塊之間如何通信的？？？
答：1、引入類 ?2、@Autowired自動裝配
為什么前端發送請求給這個項目，項目就能夠精準的找到某個類的方法里呢？
答案：攔截器。所有請求，經過攔截器，都能精準轉發。
它是如何實現數據庫與bean類映射的？
Mapper文件與數據庫關聯。
它為什么不需要寫映射文件就可以呢？什么起作用？
答案：有映射文件，只不過若依框架只需要執行sql語句，在前端就能自動生成bean service mapper以及xml文件，直接下載既可。
這個方法中的參數(SysRole role)是不是不需要的，因為前端沒有傳遞參數過來？
答案：在這個查詢數據庫中所有數據是不需要的，但是這個方法還對應前端條件查詢，所以參數必不可少。
List數據為什么不需要封裝成jsonobject或者jsonarray就可以給前端，并且前端返回的還是…
答案：封裝了，有專門的類 ，也有封裝成Object自定義類
后端如何把數據返回給前端的？
答案：直接return就可以了，類必須是@RestController而不能是@Controller，前者返回數據，后者是調轉頁面。
前端是如何展示數據的？
答案：獲取后端數據，然后通過v-for渲染
數據權限在前后端是如何控制的？
答案：不同的用戶擁有不同的權限，登錄成功時，查詢用戶擁有的權限并與token存儲在redis里，前后端根據用戶自帶的權限展示出可以展示的。
證明：先登錄一個普通的用戶，看看頁面的網絡信息。
在點擊登錄的時候，首先驗證用戶名與密碼是否正確。然后返回一個口令
查詢到的用戶訪問頁面權限
數據給前端，前端通過一些校驗來顯示或者隱藏一些東西
后端采用權限限制訪問，請問前端傳什么值過來了，后端才放行了，為什么我們沒看到呢？
答案：前后端訪問是token令牌，每個用戶都不同的token，token與該用戶權限以鍵值對的方式存儲。前后端根據這個用戶權限展示或隱藏
那么為什么后端會設置權限呢？
答案：防止postman以及爬蟲人員解析出后端地址，沒有后端權限，就能直接訪問后端。
我們拿postman做實驗：
管理員的特殊權限，普通用戶看不到，但是當你知道后端地址，是不是就可以自己用postman查看返回的數據。
后端有權限設置，你沒有token就不能訪問后端，自然看不到數據
是不是只要有token就可以拿到數據？
是的！！！
每次請求都會被攔截器攔截查看權限
ruoyi后端框架的攔截器先把請求定位到某類某個方法，還是先校驗登錄口令？
答案：先查看token口令權限，再轉發請求。
各個子包下的pom.xml是獨立的，還是需要在總項目下pom.xml里包含？
答案：包含的。
Ruoyi-system包下面的mapper的xml文件，怎么沒有在.yml文件中被引用/調用
答案:在admin項目包下配置了掃描路徑
總結
- 上一篇： 针对这一行业痛点，创新工场投资的潞晨科技
- 下一篇： RuoYi-Vue————权限管理