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