SpringBoot實現vue-admin-template登錄接口
vue-admin-template
vue-admin-template是一個簡化版的vue-element-admin的模板，
適合vue用來做項目的搭建，雖然官方文檔以及花褲衩前端大佬
在博客中已經將大部分的疑難雜症解決了，但當完全自己搭建的
時候才發現多折騰
vue-admin-template登錄接口請求詳解
要想搞懂一個接口，最好的方式就是
1.去看接口的定義聲明的參數
2.發送請求查看返回的數據格式
1.在Github拉項目下來運行，Chrome開發者模式調試登錄接口
2.查看login請求傳參和返回的參數
從上往下看的分別是請求頭，響應的數據格式，請求的參數
提取重點信息：POST請求，URL地址
3.查看info請求傳參和返回的參數
從上往下看分別是請求頭和響應的數據格式
提取重點信息：GET請求，URL地址，URL地址中傳遞參數
vue-admin-template登錄接口代碼詳解
找到login.vue文件，在點擊登錄按鈕后會觸發處理登錄的函數
如果通過element ui的表單校驗則會進入紅色方框的代碼塊
this.$store.dispatch('user/login', this.loginForm)
這里的代碼是Vuex的狀態管理模式方法調用，轉發到user的login方法下
login請求詳解
在store文件夾可以找到user.js文件，在里面聲明的actions中可以找到具體的方法
這里有兩個login方法，第一個方法是user.js中聲明的，第二個方法可以在頂部看到是src目錄下的api文件夾中的user.js引入進來的
進入到第二個login方法會發現它其實就是封裝axios進行異步請求
你可以找到頂部request.js點進去看到，你就發現它引入axios
圖中的baseURL先圈起來，后面會考（會用到）
看到這里也就不難明白轉發(dispatch)的目的
1.發送login請求獲取到token值
2.並存儲到Vuex狀態管理模式中，供多個組件同時識別使用
不懂Vuex狀態，可以暫時膚淺的理解為全局的一個變量，能被子組件識別到
說完大概的發送請求，接下來就是看響應的數據格式，回到login的代碼塊中
可以看到請求后的數據用response接收，
這個response在這之前就已經經過request.js處理過再返回
途中的res.code!==20000就跟login返回的參數有一點眼熟，
這里應該是把data.code的值設置為20000才能不報錯，
同時另外的一個info請求，還涉及到
data.code不能設為50000 ，500012這些，不然也會報錯
info請求詳解
上面的login請求還有一點收尾沒講，就是要把獲取到token
存儲cookie中，具體setToken的方法在utils文件夾下auth.js
可以看到引入js.cookies
接下來就是info的請求了，這個請求跟login請求類似，稍微提下的參數即可，
這里我沒有找到它具體的調用的位置，但是這個請求是一定會發送的
它是用來獲取用戶的權限的信息，頭像信息和名字等的個人信息的
在login獲取並設置token后它去store中獲取token，放在url中請求接口，
接口需要返回頭像（avatar），姓名（name），權限信息(roles)既可
通過校驗其中權限是必須要有的，其他可以不返回
登錄接口請求頭詳解
在項目的根目錄下有vue.config.js
打開里面的這個文件，就可以看到vue前端的項目端口默認的端口9528
如果在開發的環境中沒有改變過端口就會默認使用這個端口
還有before屬性是引入mock.js用前端產生假數據來進行前后交互
如果有后端的接口，就需要把這行注釋掉
剩下的還有一個dev-api這個請求頭信息，它其實在.env.development文件中
里面有一個VUE_APP_BASE_API 的基礎URL
我們要進行后端接口數據交互有時候需要改動這里
至此登錄接口的詳細解釋就全部了解完了，下面就開始用自己簡單寫一個后端數據接口來進行交互，我這里用的是SpringBoot來進行數據交互
SpringBoot整合vue-admin-template登錄接口
這里不會涉及到數據庫的操作，只是在后端模擬生成
前端的mock.js里的數據，並按照對應的格式，能成功登錄跳轉即可，
如果再寫數據庫操作，博文就很長很臭，以后再另外開一篇
vue.config.js文件改動
1.注釋掉mock.js生成數據
2.open屬性改為false，這里是為了編譯啟動項目時不要開兩個網頁
3.如果改了open那么需要在package.json的啟動命令中加上 --open（只在完成編譯后才啟動界面），其中2和3非必須
另外需要改動的就是接口的地址
main.js注釋掉mock生成數據
SpringBoot中代碼
SpringBoot中代碼，只需要寫一個controller既可以，其他默認自動生成結構如下
@Controller
public class LoginController {
@CrossOrigin
@PostMapping(value = "/vue-admin-template/user/login")
@ResponseBody
public Map login() {
HashMap<String, Object> response = new HashMap<>();
HashMap<String, Object> responseData = new HashMap<>();
responseData.put("token",1);
response.put("code",20000);
response.put("msg","登錄成功");
response.put("data",responseData);
return response;
}
@CrossOrigin
@GetMapping(value = "/vue-admin-template/user/info")
@ResponseBody
public Map info() {
HashMap<String, Object> responseInfo = new HashMap<>();
HashMap<String, Object> responseData = new HashMap<>();
responseData.put("roles","admin");
responseData.put("name","Super admin");
responseData.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
responseInfo.put("code",20000);
responseInfo.put("msg","登錄成功");
responseInfo.put("data",responseData);
return responseInfo;
}
}
登錄效果及請求和數據返回
請求頭涉及到跨域訪問前端時8081后端是8080，采取代理模式
數據返回
文章配套的源碼：
鏈接: https://pan.baidu.com/s/1FRwVZpH1ye4zPEAll1ER4Q 提取碼: ubif