vue-element-admin登入流程
阿新 • • 發佈：2020-12-04
前端架構師大佬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寫死 ## 登入成功，大功告成! 