點選上方藍字設為星标
下面開始今天的學習～
已經有一段時間沒有更新了，正好這段時間在做一個電商管理系統的項目，借此總結一下。該項目主要是一個電商的背景管理系統，可實作管理使用者賬号，即登入、退出、使用者管理、權限管理等，商品管理，即商品分類、分類參數、商品資訊，訂單資訊等以及資料統計。
前端項目是基于Vue的SPA項目，前端技術棧采用Vue+Vue-Router+Element-UI+Axios+Echarts，後端技術棧采用Node.js+Express+Jwt(模拟session)+Mysql+Sequelize組成。由于此項目主要練習相關前端技術棧，故後端采用已有模闆進行搭建。
安裝Vue腳手架
通過 vue ui 指令啟動可視化視窗對Vue腳手架進行配置(需事先安裝好Vue)，指令鍵入成功後，會自動彈出配置頁面，選擇 手動配置 ，勾選 Babel (将進階JS文法轉換為低級文法)、 Router (路由)、 Linter (拼寫檢查)進行配置，選擇 标準配置 ，建立好項目後可能會需要一段時間的加載。
安裝依賴
點選右上角添加插件，搜尋vue-cli-plugin-elemen，點選插件圖示然後點選最下方安裝按鈕，安裝成功點選下方完成安裝。
預覽頁面
點選左側邊欄選擇任務->serve->運作，預編譯成功後點選啟動app，将自動跳轉至http://localhost:8080/#/，即搭建成功。
項目結構
用vscode打開剛剛建立的Vue腳手架，項目結構如下：
- node_modules：用于存放用包管理工具下載下傳安裝了的包
- public：用于存放靜态資源檔案(不會經過webpack的打包處理)
- src：用于存放項目的源碼檔案
- assets：用于存放靜态資源檔案(會經過webpack的打包處理)
- components：用于存放vue元件
- plugins：用于存放element.js
- router：用于存放路由檔案
- views：用于存放視圖檔案
- APP.vue：項目入口檔案
- main.js：項目的核心檔案
- .editorconfig：代碼規範配置檔案
- .gitignore：git忽略配置檔案
- babel.config.js：babel配置檔案
- package.json：項目配置檔案
- package-lock.json：項目包管控檔案
- README.md：說明檔案
删除多餘檔案
删除view檔案夾，即删除view内的所有檔案及view檔案夾。
删除router/index.js 内的views檔案夾内檔案的導入，以及routes内的相關代碼，留下以下代碼：
删除components内的HelloWorld.vue檔案，并重新建立名為Home.vue的檔案，配置如下：
删除APP.vue檔案中的多餘部分，配置如下：
預覽首頁，如下圖所示：
搭建登入頁面
在components檔案夾下建立登入元件，Login.vue，并快速生成template、script和style骨架。
配置路由，進入router檔案夾，導入Login元件，建立路由并重定向首頁為登入界面，進入首頁時會自動跳轉至登入頁面，配置如下：
安裝Less依賴，回到項目儀表盤首頁，點選依賴，選擇開發依賴，安裝less和less-loader依賴。
繪制登入界面(由于僅僅使用到了最基本的html+css 這裡就不詳細講解了)，繪制完畢後，界面如下：
實作登入功能
1 綁定賬号資訊
在script中建立表單資料綁定對象loginForm，并設定username和password，為了測試效果，這裡将其進行指派。
在template中将login_form表單進行資料綁定
重新整理目前頁面，發現登入視窗中自動填寫了賬号及密碼，說明資料綁定成功。
2 賬戶合法性驗證
為了減輕伺服器壓力，在發送登入請求前，将先對輸入的賬戶資訊合法性進行驗證。這裡我們使用Element-UI元件進行實作。
1.在data中建立表單驗證規則對象
2.表單綁定驗證規則
3.測試，當輸入非法賬戶時，進行提示
3 重置功能實作
當點選重置按鈕時，賬号和密碼輸入框的内容将會清空。給登入表單注冊引用資訊，添加重置按鈕點選事件，調用resetFields()清空表單内容。
4 實作登入功能
由于登入功能需要用到後端子產品，我們将後端子產品導入，并啟動伺服器。
安裝axios依賴
在main.js中導入axios子產品，并設定基準位址。
給登入按鈕添加點選事件，當使用者點選登入按鈕時，進行賬号合法性驗證，如果目前所輸入的賬号合法，則允許向伺服器發送登入請求。
伺服器根據請求資訊檢查目前賬号是否正确，并傳回響應資訊，用戶端通過傳回的響應資訊做出相應響應。
即若賬号密碼錯誤則提示登陸失敗，反之，登陸成功，将目前的token存儲至session并跳轉至背景首頁。
5 實作退出功能
當使用者登入後進入背景，點選退出按鈕即可實作退出功能。
即在Home.vue中添加一個退出按鈕，并為其添加點選事件，當使用者點選時，删除目前存儲在session中的token資訊，并且跳轉至登入頁面。
6 實作導航守衛功能
至此，登入功能基本實作，但存在一個bug，即在使用者未登入的情況下，在位址欄輸入http://localhost:8080/#/home位址時，也可以跳轉至背景。
為了解決此bug，我們在router裡挂載一個導航守衛路由，即在使用者每次跳轉前，驗證使用者所要跳轉的位址，若為login頁面則放行，若為其他頁面，則查詢目前session中是否有對應的token，若有則放行，反之，則強制跳轉至登陸頁面。
——————end——————
圖 片 / Cs Max
編 輯 / Liony
在看點這裡