SpringBoot實現vue-admin-template登陸接口
vue-admin-template
vue-admin-template是一個簡化版的vue-element-admin的模板,
適合vue用來作項目的搭建,雖然官方文檔以及花褲衩前端大佬
在博客中已經將大部分的疑難雜症解決了,但當徹底本身搭建的
時候才發現多折騰
javascript
vue-admin-template登陸接口請求詳解
要想搞懂一個接口,最好的方式就是
1.去看接口的定義聲明的參數
2.發送請求查看返回的數據格式
前端
1.在Github拉項目下來運行,Chrome開發者模式調試登陸接口
2.查看login請求傳參和返回的參數
從上往下看的分別是請求頭,響應的數據格式,請求的參數
提取重點信息:POST請求,URL地址
3.查看info請求傳參和返回的參數
vue
從上往下看分別是請求頭和響應的數據格式
提取重點信息:GET請求,URL地址,URL地址中傳遞參數
java
vue-admin-template登陸接口代碼詳解
找到login.vue文件,在點擊登陸按鈕後會觸發處理登陸的函數
若是經過element ui的表單校驗則會進入紅色方框的代碼塊
ios
this.$store.dispatch('user/login', this.loginForm)
這裏的代碼是Vuex的狀態管理模式方法調用,轉發到user的login方法下
spring
login請求詳解
在store文件夾能夠找到user.js文件,在裏面聲明的actions中能夠找到具體的方法
數據庫
這裏有兩個login方法,第一個方法是user.js中聲明的,第二個方法能夠在頂部看到是src目錄下的api文件夾中的user.js引入進來的
json
進入到第二個login方法會發現它其實就是封裝axios進行異步請求
從url和請求方式大體和登陸請求的詳解的圖能對上能夠猜出是發送異步請求
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,採起代理模式
數據返回