Vue實戰網易雲音樂---個人中心詳解
阿新 • • 發佈:2022-05-11
個人中心
1.建立登入頁面和個人中心頁面並配置路由
2.在進入個人中心路由之前,要執行的生命週期函式,判斷使用者是否登入(判斷條件是store中的user中的isLogin)
3.配置登入頁面樣式及獲取資料
4.設定物件儲存使用者賬號及使用者密碼
5.獲取使用者登入驗證的api封裝並丟擲
6. v-model繫結phone輸入手機號及password輸入密碼
7.設定點選事件繫結登入按鈕,獲取輸入賬號密碼。觸發store中登入驗證phoneCheckLogin的函式
8. 非同步函式驗證使用者是否登入成功,判斷使用者登入,使用者登入成功,修改使用者的登入狀態為true
9. 登陸成功進入個人中心頁面
10. 獲取使用者詳情的api進行封裝並丟擲
11.獲取當前登入使用者的詳情,將使用者詳情儲存到state的user資料中
12.去掉a標籤的預設行為,點選事件繫結返回首頁
13. 設定個人中心樣式並獲取資料進行展示
14.退出登入點選事件繫結函式logout返回首頁
15.定義一個函式,使用者退出時,刪除user中使用者登陸資料
16.使用者退出登入,刪除store中user使用者登入資料,清空本地儲存資料,返回到專案首頁