前端架構師大佬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寫死