電商后台管理系統的功能——登錄/退出功能
1. 登錄業務流程
① 在登錄頁面輸入用戶名和密碼
② 調用后台接口進行驗證
③ 通過驗證之后，根據后台的響應狀態跳轉到項目主頁
2. 登錄業務的相關技術點
- http 是無狀態的
- 通過 cookie 在客戶端記錄狀態
- 通過 session 在服務器端記錄狀態
- 通過 token 方式維持狀態
如果前端與后台接口之間不存在跨域問題，那么推薦使用cookie和session來記錄登錄狀態。
反之，如果前端與服務器接口之間存在跨域問題，那么就要使用token的方式來維持登錄狀態。
3. 登錄 — token 原理分析
4. 登錄功能實現
① 登錄頁面的布局
通過 Element-UI 組件實現布局：
- el-form
- el-form-item
- el-input
- el-button
- 字體圖標
打開vscode，先別着急寫代碼，先打開終端，輸入git status命令查看一下工作區域是否干凈。
繪制登錄頁面期間，首先應該創建一個分支，在開發中，如果要開發一個新功能，盡量把這些新功能都放到一個新的分支上進行開發，當把分支功能開發完成以后，再把這個分支合並到master主分支上即可。
首先創建一個分支並切換到該新分支上：git checkout -b 分支名（git checkout -b login）
查看當前項目中的所有分支：git branch
打*表示當前正處於這個分支上
可以使用vue ui命令在圖形化界面中運行項目，也可以直接在vscode的命令行中輸入npm run serve來運行項目：
默認的項目結構頁面：
我們需要清理整個頁面，將不需要的組件刪除：
- 將App.vue里面的基本代碼給刪掉、清空main.js、App.vue、router→index.js里面的內容，刪除components→HelloWorld.vue組件、刪除views文件夾。
- 我們只用到App.vue根組件，所以把其他的組件全部刪掉
創建登錄組件：在components文件夾下創建login.vue
lang="less"表示支持less語法。scoped表示樣式生效區間，只在當前組件內生效，如果沒有該指令，就是全局生效。
創建完成之后，需要在router里面通過路由的形式把它渲染到App根組件中。
第三步，在App.vue根組件中放置一個路由占位符：
這樣的話通過路由匹配到的組件都會被渲染到路由占位符里面。
安裝第三方依賴項，都可以使用vue ui在圖形化界面中安裝。
less-loader應該是安裝到開發依賴中，安裝less-loader還需要安裝less，因為less-loader內部是依賴於less的。
在assets文件夾下面新建一個css文件夾，並新建一個global.css來設置全局樣式
需要使用elementUI中的什么組件，就需要在全局element.js文件中按需導入並注冊好。
如果要使用字體圖標，但是elementUI里面沒有提供想要的字體圖標，則可以使用第三方的圖標庫（阿里矢量圖標庫），使用方法：
下載好自己需要的第三方字體圖標后，在main.js入口文件中導入對應的圖標文件，然后在對應的組件中添加iconFont基礎類，然后將對應的圖標名稱粘過來即可
如何給表單進行數據綁定：
第一步，先給el-form添加:model屬性綁定，指向一個數據對象；第二步，為每一個表單項通過v-model綁定到數據對象上對應的屬性中
如何給表單項添加數據驗證的行為：
第一步，要為el-form添加:rules屬性綁定，指向一個表單驗證規則對象；第二步，給每個el-form-item項指定一個prop屬性，值為rules中的一個具體驗證規則
注意：表單驗證項是加給item的，而不是加給文本框的
實現重置功能：
獲取到表單的實例對象，通過實例對象直接訪問resetField函數，從而重置整個表單。
如何才能拿到這個表單的實例對象呢？給el-form組件添加一個ref的引用，引用名稱可以任意取，只要合法就行。
Vue 直接操作 DOM：
- 通過 ref 標注 DOM 元素
- 通過 $refs 獲取 DOM 元素
只要獲取到LoginFormRef，就能拿到該表單的實例對象。可以直接通過LoginFormRef調用resetField函數來重置表單。
通過this.$refs可以直接獲取到表單的引用對象，這個引用對象就是表單組件的實例對象
② 實現登錄
- 通過 axios 調用登錄驗證接口
- 登錄成功之后保持用戶 token 信息
- 跳轉到項目主頁
const {data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200)return this.$message.error('登錄失敗！ ')
// 提示登錄成功
this.$message.success('登錄成功！ ')
// 把登錄成功的token保存到sessionStorage
window.sessionStorage.setItem('token', res.data.token)
// 使用編程式導航，跳轉到后台主頁
this.$router.push('/home')
如何全局配置axios：
注意：全局配置都需要在main.js入口文件中配置！！！
注意，發送axios請求時，必須打開MySQL數據庫，並且運行后端服務器接口的項目！！！
如果某個方法的返回值是promise對象，需要使用.then()的方式來獲取返回的結果，則可以使用async/await來簡化對promise的操作。
注意，await只能用在被async修飾的方法中，所以需要在緊挨着await的方法修飾為一個異步的async方法。
登錄彈框提示功能：
- 第一步，首先在element.js中導入Message
- 第二步，將彈框組件掛載到Vue的原型對象上，這樣的話每一個組件都可以通過this來訪問到$message，從而使用彈框提示
③ 路由導航守衛控制訪問權限
如果用戶沒有登錄，但是直接通過URL訪問特定頁面，需要重新導航到登錄頁面。
// 為路由對象，添加 beforeEach 導航守衛 router.beforeEach((to, from, next) => { // 如果用戶訪問的登錄頁，直接放行 if (to.path === '/login') return next() // 從 sessionStorage 中獲取到 保存的 token 值 const tokenStr = window.sessionStorage.getItem('token') // 沒有token，強制跳轉到登錄頁 if (!tokenStr) return next('/login') next() })
④ 基於 Element-UI 進行表單驗證
點擊登錄按鈕后，通過調用表單的某個函數來進行預驗證。
<!-- 登錄表單區域 --> <el-form ref="LoginFormRef" :model="loginForm" :rules="LoginFormRules" label-width="0px" class="login_form"> <!-- 用戶名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input> </el-form-item> <!-- 密碼 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input> </el-form-item> <!-- 按鈕區域 --> <el-form-item class="btns"> <el-button type="primary" @click="login">登錄</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </el-form>
// 這是表單的驗證規則對象 LoginFormRules: { // 驗證用戶名是否合法 username: [ { required: true, message: '請輸入登錄名稱', trigger: 'blur' }, { min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur' } ], // 驗證密碼是否合法 password: [ { required: true, message: '請輸入登錄密碼', trigger: 'blur' }, { min: 6, max: 15, message: '長度在 6 到 15 個字符', trigger: 'blur' } ] }
login () {
// 進行表單驗證 this.$refs.LoginFormRef.validate(async valid => {
// 如果驗證失敗，則直接退出后續代碼的執行 if (!valid) return // el-form中所填寫的數據都會自動同步到loginForm中 // axios返回的結果中的data屬性才是我們真正需要的數據，使用解構賦值的方式將data解構出來 const { data: res } = await this.$http.post('login', this.loginForm) // 返回的結果是一個promise對象，使用async/await后返回的是一個具體的響應對象 // console.log(res) if (res.meta.status !== 200) return this.$message.error('登錄失敗！') this.$message.success('登錄成功！') // 1. 將登錄成功之后的token保存到客戶端的sessionStorage中 // 因為localStorage是持久化的存儲機制，而sessionStorage是會話期間的存儲機制 // 1.1 項目中除了登錄之外的其他API接口，必須在登錄之后才能訪問 // 1.2 token只應在當前網站打開期間生效，所以token保存在sessionStorage中 window.sessionStorage.setItem('token', res.data.token) // 2. 通過編程式導航跳轉到后台主頁，路由地址是 /home this.$router.push('/home') }) }
⑤ 退出功能實現原理
基於 token 的方式實現退出比較簡單，只需要銷毀本地的 token 即可。這樣，后續的請求就不會攜帶token ，必須重新登錄生成一個新的 token 之后才可以訪問頁面。
// 清空token window.sessionStorage.clear() // 跳轉到登錄頁 this.$router.push('/login')
5. 處理eslint中語法警告的問題
eslint中所有的字符串都必須使用單引號，代碼中不能出現分號，函數名與括號之間都必須要有一個空格等等，如果不遵循eslint這些語法規范，則在編譯的過程中就會報錯，如何解決呢？
① 使用快捷鍵方式格式化代碼：在項目的根目錄中創建一個配置文件.prettierrc，這是一個json格式的配置文件
內容如下：
再使用格式化快捷鍵就可以按要求格式化代碼：
② 修改eslintrc.js文件
我們並不想要格式化成這樣的格式，而是希望eslint能夠忽略這種語法規范，如何解決呢？只需要修改一下eslint語法規則即可。
eslintrc.js是ESLint的配置文件，至於為什么用ESLint的話，就是為了自動檢查代碼，保持一致的代碼風格，從而保證代碼質量。
這里需要注意的是，在eslintrc.js文件里面:rules是自定義的檢查規則，可以覆蓋默認的檢查規則，例如要加分號，函數要加空格，這個跟代碼風格有關
如果不想要某個語法檢驗，關閉該語法校驗規則即可：在eslintrc.js文件中修改如下，0表示禁用該語法規則
6. 將代碼更新到雲端
登錄功能已經完成，將代碼更新到碼雲上：
- 首先使用git status命令查看一下項目中代碼的狀態
- 使用git add .命令將所有文件都添加到暫存區
- 使用git commit -m "完成了登錄功能"命令，就將暫存區里的所有文件提交到了本地倉庫中
當前我們正處於login分支，也就是說剛才提交的所有文件都被放到了login分支里面進行保存了
如何將login里面的所有代碼更新或者合並到master主分支中呢？
- 第一步，使用git checkout master切換到master主分支中，你要合並到哪個分支中 ，就必須先切換到該分支上，然后再從這個分支主動合並其他分支。
- 第二步，使用git merge login命令合並login分支的所有代碼
此時，master分支中的代碼也是最新的，最后使用git push命令將本地的master分支的代碼推送到雲端的碼雲中
可以看到，雲端的分支只有master一個。那如何將本地的login分支推送到雲端進行保存呢？
- 首先要切換到login分支：git checout login
- 然后使用命令：git push -u origin login 表示要將本地的login子分支推送到雲端origin倉儲里面，並且叫做login子分支來進行保存
代碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-vue