H5頁面結合vue實現登陸註冊組件

介紹

結合`vue`框架做手機H5頁面的登陸註冊組件

登陸註冊相關知識點

1.cookie和token的做用（我的理解，若是不到位，懇請指出）

token：
個人電腦經過http請求登陸某一個網頁，登陸成功以後，服務器會返回一個token給個人電腦。
而後我只要把這個token保存下來,等下一次用個人電腦請求同一個頁面時，服務器會自動驗證個人token。
它會用它本身才知道的密鑰解析這個token是否是它上一次發送給我電腦的。
若是解析以後數據一致，那麼我就能夠不用登陸直接訪問頁面，若是不一致，則會認證不經過。

cookie：登陸以後，服務器也會返回一個cookie給個人瀏覽器。
cookie的做用是能夠保存在本地。因此這裏我是用請求到的token保存在cookie裏面。
就能夠作到下次免登陸就能夠訪問頁面了。

2.登陸註冊與cookie、token的聯繫

第一次登陸註冊------->服務器返回token、cookie----->不保存token，關閉瀏覽器---->下一次登陸須要輸入帳號密碼

第一次登陸註冊------->服務器返回token、cookie----->把token保存在cookie裏面，使其token保存在本機上----->關閉瀏覽器---->下一次登陸不須要帳號密碼就能夠訪問該頁面

3.獲取cookie、設置cookie、刪除cookie

1）把這個三個方法放在公共的js文件中，須要用到時調用

4.代碼實現

1）.用v-model雙向綁定數據

點擊下一步的時候，用正則判斷用戶名和手機號是不是知足要求，知足要求則能夠點擊下一步

一樣，也是用v-model雙向綁定數據

---

2）.我把ajax請求放在api文件裏面，在組件須要用到的時候，再調用這個函數

3）.在登陸註冊組件調用這個函數

引進請求後臺接口的函數，以及設置cookie的函數

import { getCodeNum, getRegister } from 'api/register.js'
import { setCookie } from 'common/js/cookie.js'

4）.在路由進入以前判斷有沒有token，是爲了請求用戶信息的接口，能夠獲取註冊成功以後的頭像以及用戶名

5）.退出登陸，清除cookie