行吧，早上上班遲到二十分鐘，維護了一通上線的項目就開始倒騰iview-admin了，要用這個寫一個簡單的後臺，本來還以爲代碼庫是之前其他項目的基礎輪子，沒想到clone下來後發現是原始的不能再原始的框架，花了幾個小時後，沒有從頭搞過的我終於知道這個東西怎麼搞，記錄一下login機制中包含的小tips：
先看一下主要的src目錄
從輸入localhost/login開始
1.這時的路由爲‘/login’，router.js中可以找到path爲‘/login’的路由，可以看到對應的component引入的頁面
2.在對應的vue文件中看到這樣的構成頁面的代碼
這裏的login-form是一個組件，唯一需要觸發的函數就是寫在這個組件上，找到這個組件
回車和點擊登錄按鈕觸發的都是下面這個方法
- 這裏的$ref用來快捷獲取綁定相應ref的節點，減少節點消耗
- validate爲vue驗證器調用後會驗證調用主題綁定的驗證規則（簡略表達:rules=‘’綁定此表單下總數組，表單元素用‘prop=‘’’綁定總數組下對應key的規則），valid爲返回值T/F
- $emit簡單講就是子組件向父組件通信，沒錯，第一個參數就是上一個login文件使用當前組件的地方觸發方法的地方，此句向父組件on-success-valid通信並觸發父組件對應的方法，現在讓我們回到父組件中
登錄邏輯
回頭看，主戰場就是這裏，可以將這裏看成一個衆多待用的組件通過用戶觸發來完成的一個連鎖反應
- …mapAction可以理解爲將mapAction中以多個方法分別拿出來，參數爲需要拿出來的方法名稱，引入並且拿出來了纔可以使用
- handleSubmit中的參數就是自組件傳過來的，看一下方法觸發後第一個使用的組件方法，此方法在模塊中
![/store/module/user.js]()
- 所有需要用的模塊都需要在/store/index.js中引入，並且在main.js中引入才能使用
- 此方法的返回值是一個promise容器，在容器中調用了login方法，找到當前文件中引入login 的地方，是從/api/user.js中引入
![/api/user.js]()
- 參數是用戶名密碼，返回的是一個request，可以修改成你自己的login url
再回到模塊裏，返回的res就是接口的返回值，再拿這個返回值進行自己的邏輯出來，框架中是對用戶的token做了存儲並調用容器的成功回調，並做了錯誤處理
拿不到接口返回值？？
這時候你可能會發現run之後的框架在輸入賬號密碼之後並沒有訪問接口，但是依然有返回值，這就體現出當前框架另一個有用的功能了：接口攔截和數據模擬
可以找到在/mock/login.js中對login方法的模擬返回值
- 所有的攔截和都需要在/mock/index.js中註冊
- 這裏的login並不是我們訪問的login方法或者接口，看下圖
![/mock/index.js]()
去掉註冊就可以成功接收到接口返回值了
login基礎流程到這就完了，接下來就需要根據項目需要更改或增加部分邏輯，還有沒搞過的webpack需要了解，貌似坑不少，腦闊發昏.jpg
