2.專案初始化
3. 登入/退出功能
3.4退出
電商後台管理系統用於管理使用者賬號、商品分類、商品資訊、訂單、資料統計等業務功能。
電商後台管理系統整體採用前後端分離的開發模式，其中前端專案是基於 vue 技術棧的 spa 專案。
前端專案技術棧
後端專案技術棧① 安裝 vue 腳手架
② 通過 vue 腳手架建立專案
③ 配置 vue 路由
④ 配置 element-ui 元件庫
⑤ 配置 axios 庫
⑥ 初始化 git 遠端倉庫
⑦ 將本地專案託管到 github 或 碼雲 中
① 安裝 mysql 資料庫
② 安裝 node.js 環境
③ 配置專案相關資訊
④ 啟動專案
⑤ 使用 postman 測試後台專案介面是否正常
登入業務流程
① 在登入頁面輸入使用者名稱和密碼
② 呼叫後台介面進行驗證
③ 通過驗證之後，根據後台的響應狀態跳轉到專案主頁
登入業務的相關技術點
1. 登入頁面的布局
通過 element-ui 元件實現布局
2.實現登入功能
① 通過 axios 呼叫登入驗證介面
② 登入成功之後保持使用者 token 資訊
③ 跳轉到專案主頁
('登入失敗!'
)this
.$message.
success
('登入成功'
)// 1. 將登入成功之後的 token，儲存到客戶端的 sessionstorage 中
// 1.1 專案**了登入之外的其他api介面，必須在登入之後才能訪問
// 1.2 token 只應在當前**開啟期間生效，所以將 token 儲存在 sessionstorage 中
window.sessionstorage.
setitem
('token'
, res.data.token)
// 2. 通過程式設計式導航跳轉到後台主頁，路由位址是 /home
this
.$router.
push
('/home')}
)}3. 路由導航守衛控制訪問許可權
如果使用者沒有登入，但是直接通過url訪問特定頁面，需要重新導航到登入頁面。
// 掛載路由導航守衛
router.
beforeeach
((to,
from
, next)
=>
)
// 在 dom 元素上通過 ref 屬性標註，屬性名稱自定義
"info"
>hello<
/div>
// 通過 vue 例項的 $refs 獲取標記 ref 屬性的元素
let info =
this
.$refs.info.innerhtml
console.
log(info)
// hello
element-ui表單驗證規則 :
loginformrules:],
password:
}
// 進行表單驗證
this
.$refs.loginformref.
validate
(async valid =>
)
基於 token 的方式實現退出比較簡單，只需要銷毀本地的 token 即可。這樣，後續的請求就不會攜帶 token ，必須重新登入生成乙個新的 token 之後才可以訪問頁面。
// 清空token
window.sessionstorage.
clear()
// 跳轉到登入頁
this
.$router.
push
('/login'
)
專案管理筆記
作為管理，時間不短也不長，所感所悟略有所思，不敢講做經驗或什麼理論，只作為日常隨筆一記，算做茶餘飯後偶談一資且記於此。1.幫助員工成長。個人覺得乙個管理者，從管理員工的角度講，不僅僅是分配任務，授權或者匯報等等這些，最重要是幫助乙個員工去提高，去實現自己人生目標，大家都提高了，企業也會提高，同時，由...
DX專案筆記
lpdirect3d9 g d3d 該型別是direct3d介面物件,最主要的部分 d3ddisplaymode displaymode 該型別儲存前顯示的資訊，如桌面解析度 寬度和高度 顯示格式 顯示器重新整理頻率等 lpdirect3ddevice9 g d3ddevice d3d驅動 首先 g...
雲筆記專案
今天在老師帶領下學習雲筆記專案的登陸檢查功能。之前員工資訊管理系統寫過類似的業務，這次是用html頁面代替jsp,雖然不知道根本原因是什麼，但我想無非是從效率上去考慮，html應該會比jsp解析速度更快。用jquery和ajax在頁面寫指令碼，感覺邏輯很清晰，就是很多方法記不住，需要查閱api，而且...