1. 程式人生 > 其它 >Vue實戰網易雲音樂---個人中心詳解

Vue實戰網易雲音樂---個人中心詳解

個人中心

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使用者登入資料,清空本地儲存資料,返回到專案首頁