vue-element-admin登錄流程


前端架構師大佬QQ群:634196762

1.安裝最新的vue-element-admin;在這里插入圖片描述

2.如有需要可以去掉eslint;在下面這個文件里面全局搜索

在這里插入圖片描述

3.刪除所有的eslint文件

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

4.開始安裝依賴包, npm install

5.啟動服務:npm run dev ,但是打開的是兩個窗口,需要把open設置為false;

在這里插入圖片描述

6.進入登錄頁面:

在這里插入圖片描述

7.后端編寫登錄接口(這里以java為列):

在這里插入圖片描述

驗證碼根據需求來進行設置;

8.如需驗證碼,對登錄頁面進行改造:

在這里插入圖片描述

在這里插入圖片描述

9.(重點)進行登錄請求:

出現this.$store,看到這個東西就去store目錄下面找東西
在這里插入圖片描述
根據給的地址前面的一段來找,user,就找user
在這里插入圖片描述
根據后面的找到對應的函數名
在這里插入圖片描述

說到這里應該對項目結構應該比較清晰了,如果還覺得繞的話,只能說明你對項目的結構理解還不夠徹底;

10.剛剛發送的登錄請求就進入下面這個函數里面去:

在這里插入圖片描述
那么現在又看到一個login函數,從哪里來的呢?
在這里插入圖片描述
可以看到,所有的接口都來自api ,根據花褲衩大佬的模式,直接api目錄下面找user就行
在這里插入圖片描述
就這樣沒了? No.No.No...
直接return request({xxxxx}),request是干嘛的?從哪來的呢?
在這里插入圖片描述
繼續根據花褲衩大佬的模式,直接去utils目錄下面找request
在這里插入圖片描述
request是干嘛的?(當然是發送請求的撒)

request是封裝好的axios,主要用於發送網絡請求。

里面的東西好復雜,看不懂怎么辦?

沒關系,你只需要知道怎么拿數據就行了
在這里插入圖片描述
這個請求代碼里面主要是看這一段

規定的是后台返回的值里面是需要有一個code碼的,花褲衩大佬這里規定的是20000是正常的,你只需要將這里改成你自己定義的正常的就行,比如我的是0 (實際以后端為准)
在這里插入圖片描述
說了這么多,這里就完了,這個項目里面也沒有后台,卻能發送網絡請求,還能拿到數據,怎么做到的呢?
在這里插入圖片描述
在這里插入圖片描述
看代碼,發現配置的代理到了mock的地方,繼續根據項目的架構走,直奔mock就行咯。
在這里插入圖片描述
mock里面果然有user,還有login的地址
(重點來咯)關鍵是現在我們要用我們自己的地址,不能用模擬數據,所以我們要換成我們自己的地址;

開始修改配置參數:

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
直接給代理地址改成你后台的地址,我后台的contentpath是sys就直接改成sys即可
在我實際使用的時候發現session會丟失,也就是登錄不進去,查找資料發現是因為不在一個域的原因,怎么解決呢?
在這里插入圖片描述
這里需要改成一樣的
在這里插入圖片描述
直接給里面的改成sys就ok了

由於修改了配置,需要重新啟動服務器:npm run dev

在這里插入圖片描述
可以看到我的驗證碼沒出來,下面也報錯了,這是什么原因呢?
可以看到我框出來的地方,有個啥東西沒定義
這個是我不想用原來的api,我覺得太麻煩,就直接將request放到全局了
現在我們把request注冊到全局
在這里插入圖片描述
把request掛載到vue實例上去,這樣就可以注冊到全局了;
在這里插入圖片描述
驗證碼還是沒有出來,還報錯了
這個時候就需要自己調試了
在這里插入圖片描述
打斷點發現我這怎么直接走到error了,肯定是有地方和項目的配置不一樣
在這里插入圖片描述
code也是undefined
和我的邏輯不一樣就讓其和我一樣的
讓別人的東西成為自己的
在這里插入圖片描述
直接騷一波 (哈哈、牛皮!)
在這里插入圖片描述
ok,驗證碼出來了,證明后台通了
在這里插入圖片描述
完了,404(卡了我一天,頭發又少了) ,怎么辦?

好好想想404是什么?沒有找到接口啊
在這里插入圖片描述
一看,我的登錄接口是sys/login (后端接口地址)
在這里插入圖片描述
前端的接口地址還是user/login;需要我們直接改;
在這里插入圖片描述
現在不是404了,但是還是error
控制台也沒報錯,這是咋回事?
在這里插入圖片描述
一看是我后台的問題。。。
去后台看看什么問題:
在這里插入圖片描述
打個debug看看發現前端沒有把參數帶過來;

現在我們好好想想,我們參數確定是傳過來了的,怎么會沒有呢?
仔細一看,這是要問號跟參,不能給參數放到body里面

ok,改

在這里插入圖片描述
直接改成這樣就可以了!
在這里插入圖片描述
登錄成功!

等等,怎么發現沒有跳轉啊,咋回事,一臉懵逼!(一個個門檻搞得好心慌)在這里插入圖片描述
在這里插入圖片描述
咱們一步步的回推,看看vuex里面調用了登錄函數之后發生了啥,直接打斷點調試
在這里插入圖片描述
進來了,發現原來的框架需要有個data,我這里沒有哇,怎么辦呢?
走到原框架取登錄數據的地方,看到data里面丟了一個
在這里插入圖片描述
咱們沒有這個數據怎么辦?
直接手動給
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
又404了,發現有個info的接口,這個接口哪來的?
在這里插入圖片描述
繼續看,發現是user/info
老規矩直接找
不知道在哪調用的就全局搜索
在這里插入圖片描述
這里找到了兩個地方有這個路徑,一個是api,一個是mock,mock直接忽略掉,api里面getInfo函數,直接全局找在哪調用的
在這里插入圖片描述
發現還是在store目錄下的user里面引用的
在這里插入圖片描述
突然想來了,我沒有這個接口怎么辦?這一塊業務對我來說貌似沒什么卵用
那還不好說,直接干掉不就完了
但是看看他調用成功還要執行一堆操作,我又看不懂,刪掉出了問題怎么辦?
這個時候想起來了,我登錄不是也是寫死的數據,我這里為什么不行?直接不調用接口,將數據直接寫死
在這里插入圖片描述

屏蔽調用,data寫死

登錄成功,大功告成!

在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM