vue-element-admin登錄全流程分享
1.安裝最新的vue-element-admin
2.如有需要可以去掉eslint
在下面這個(gè)文件里面全局搜索
3.刪除所有的eslint文件
4.開始安裝依賴包
npm install
5.啟動(dòng)服務(wù)npm run dev
但是打開的是兩個(gè)窗口，需要把open設(shè)置為false;
6.進(jìn)入登錄頁面
7.后端編寫登錄接口
這里以java為列:
驗(yàn)證碼根據(jù)需求來進(jìn)行設(shè)置;
8.如需驗(yàn)證碼，對(duì)登錄頁面進(jìn)行改造
9.（重點(diǎn)）進(jìn)行登錄請(qǐng)求
出現(xiàn)this.$store，看到這個(gè)東西就去store目錄下面找東西
根據(jù)給的地址前面的一段來找，user，就找user
根據(jù)后面的找到對(duì)應(yīng)的函數(shù)名
說到這里應(yīng)該對(duì)項(xiàng)目結(jié)構(gòu)應(yīng)該比較清晰了，如果還覺得繞的話，只能說明你對(duì)項(xiàng)目的結(jié)構(gòu)理解還不夠徹底;
10.剛剛發(fā)送的登錄請(qǐng)求就進(jìn)入下面這個(gè)函數(shù)里面去
那么現(xiàn)在又看到一個(gè)login函數(shù)，從哪里來的呢?
可以看到，所有的接口都來自api ,根據(jù)花褲衩大佬的模式，直接api目錄下面找user就行
就這樣沒了？ No.No.No…
直接return request({xxxxx}),request是干嘛的？從哪來的呢？
繼續(xù)根據(jù)花褲衩大佬的模式，直接去utils目錄下面找request
request是干嘛的？(當(dāng)然是發(fā)送請(qǐng)求的撒)
request是封裝好的axios，主要用于發(fā)送網(wǎng)絡(luò)請(qǐng)求。
里面的東西好復(fù)雜，看不懂怎么辦？
沒關(guān)系，你只需要知道怎么拿數(shù)據(jù)就行了
這個(gè)請(qǐng)求代碼里面主要是看這一段
規(guī)定的是后臺(tái)返回的值里面是需要有一個(gè)code碼的，花褲衩大佬這里規(guī)定的是20000是正常的，你只需要將這里改成你自己定義的正常的就行，比如我的是0 (實(shí)際以后端為準(zhǔn))
說了這么多，這里就完了，這個(gè)項(xiàng)目里面也沒有后臺(tái)，卻能發(fā)送網(wǎng)絡(luò)請(qǐng)求，還能拿到數(shù)據(jù)，怎么做到的呢？
看代碼，發(fā)現(xiàn)配置的代理到了mock的地方，繼續(xù)根據(jù)項(xiàng)目的架構(gòu)走，直奔mock就行咯。
mock里面果然有user，還有l(wèi)ogin的地址
（重點(diǎn)來咯）關(guān)鍵是現(xiàn)在我們要用我們自己的地址，不能用模擬數(shù)據(jù)，所以我們要換成我們自己的地址；
開始修改配置參數(shù):
直接給代理地址改成你后臺(tái)的地址，我后臺(tái)的contentpath是sys就直接改成sys即可
在我實(shí)際使用的時(shí)候發(fā)現(xiàn)session會(huì)丟失，也就是登錄不進(jìn)去，查找資料發(fā)現(xiàn)是因?yàn)椴辉谝粋€(gè)域的原因，怎么解決呢？
這里需要改成一樣的
直接給里面的改成sys就ok了
由于修改了配置，需要重新啟動(dòng)服務(wù)器:npm run dev
可以看到我的驗(yàn)證碼沒出來，下面也報(bào)錯(cuò)了，這是什么原因呢?
可以看到我框出來的地方，有個(gè)啥東西沒定義
這個(gè)是我不想用原來的api，我覺得太麻煩，就直接將request放到全局了
現(xiàn)在我們把request注冊(cè)到全局
把request掛載到vue實(shí)例上去，這樣就可以注冊(cè)到全局了;
驗(yàn)證碼還是沒有出來，還報(bào)錯(cuò)了
這個(gè)時(shí)候就需要自己調(diào)試了
打斷點(diǎn)發(fā)現(xiàn)我這怎么直接走到error了，肯定是有地方和項(xiàng)目的配置不一樣
code也是undefined
和我的邏輯不一樣就讓其和我一樣的
讓別人的東西成為自己的
直接騷一波 (哈哈、牛皮!)
ok，驗(yàn)證碼出來了，證明后臺(tái)通了
完了，404(卡了我一天，頭發(fā)又少了) ，怎么辦?
好好想想404是什么？沒有找到接口啊
一看，我的登錄接口是sys/login (后端接口地址)
前端的接口地址還是user/login；需要我們直接改;
現(xiàn)在不是404了，但是還是error
控制臺(tái)也沒報(bào)錯(cuò)，這是咋回事？
一看是我后臺(tái)的問題。。。
去后臺(tái)看看什么問題：
打個(gè)debug看看發(fā)現(xiàn)前端沒有把參數(shù)帶過來;
現(xiàn)在我們好好想想，我們參數(shù)確定是傳過來了的，怎么會(huì)沒有呢？
仔細(xì)一看，這是要問號(hào)跟參，不能給參數(shù)放到body里面
ok,改
直接改成這樣就可以了!
登錄成功！
等等，怎么發(fā)現(xiàn)沒有跳轉(zhuǎn)啊，咋回事，一臉懵逼!(一個(gè)個(gè)門檻搞得好心慌)
咱們一步步的回推，看看vuex里面調(diào)用了登錄函數(shù)之后發(fā)生了啥，直接打斷點(diǎn)調(diào)試
進(jìn)來了，發(fā)現(xiàn)原來的框架需要有個(gè)data，我這里沒有哇，怎么辦呢？
走到原框架取登錄數(shù)據(jù)的地方，看到data里面丟了一個(gè)
咱們沒有這個(gè)數(shù)據(jù)怎么辦？
直接手動(dòng)給
又404了，發(fā)現(xiàn)有個(gè)info的接口，這個(gè)接口哪來的？
繼續(xù)看，發(fā)現(xiàn)是user/info
老規(guī)矩直接找
不知道在哪調(diào)用的就全局搜索
這里找到了兩個(gè)地方有這個(gè)路徑，一個(gè)是api，一個(gè)是mock,mock直接忽略掉，api里面getInfo函數(shù)，直接全局找在哪調(diào)用的
發(fā)現(xiàn)還是在store目錄下的user里面引用的
突然想來了，我沒有這個(gè)接口怎么辦？這一塊業(yè)務(wù)對(duì)我來說貌似沒什么卵用
那還不好說，直接干掉不就完了
但是看看他調(diào)用成功還要執(zhí)行一堆操作，我又看不懂，刪掉出了問題怎么辦？
這個(gè)時(shí)候想起來了，我登錄不是也是寫死的數(shù)據(jù)，我這里為什么不行？直接不調(diào)用接口，將數(shù)據(jù)直接寫死
屏蔽調(diào)用，data寫死
登錄成功，大功告成!
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)動(dòng)態(tài)查詢規(guī)則生成組件
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會(huì)碰到的一種需求場景，本文主要介紹了Vue動(dòng)態(tài)查詢規(guī)則生成組件，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue router+vuex實(shí)現(xiàn)首頁登錄驗(yàn)證判斷邏輯
這篇文章主要介紹了vue router+vuex實(shí)現(xiàn)首頁登錄判斷邏輯，用于判斷是否登錄首頁，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在Vue.js中頁面跳轉(zhuǎn)是前端開發(fā)中常見的需求,Vue提供了多種頁面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例
本篇文章主要介紹了vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue視圖不更新情況詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于element如何初始化組件功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08