Java项目 (SpringBoot+SpringCloud) 十次方:前端(六) 网站前台-登陆与用户中心

1 用户注册

一.页面构建

1. 创建pages/login.vue

二.获取验证码

1. 模拟数据与API
   1. 将user.yml 导入easymock
   2. 修改easy-mock 数据
      url： /user/user/sendsms/{mobile}
      method：put
      
   3. 编写API 创建api/user.js
      
2. 调用API
   1. 修改pages/login.vue脚本部分
      
   2. 修改pages/login.vue 绑定变量
      
   3. 修改pages/login.vue 按钮绑定方法
      
3. 使用ElementUI 的弹出框
   1. 安装element-ui
      
   2. plugins文件夹下创建element-ui.js
      
   3. 修改nuxt.config.js，加入插件与样式
      
   4. 修改pages/login.vue的脚本部分，将alert替换为以下代码
      

三.提交注册

1. 在easy-mock 增加数据
   URL: /user/user/register/{code}
   Method: post
   
2. 修改api/user.js，增加方法
   
3. 修改pages/login/index.vue脚本部分 增加属性
   
   新增注册的方法
   
4. 修改pages/login/index.vue页面部分
   绑定表单输入框
   绑定方法
   

四.输入校验

1. 校验昵称必须填写
2. 校验手机号的合法性 ,可以使用正则表达式进行验证。
   ^((13[0‐9])|(15[^4])|(18[0,2,3,5‐9])|(17[0‐8])|(147))\\d{8}$
3. 密码长度校验
4. 判断是否勾选同意条款

2 用户登陆

一.登陆验证

1. mock模拟数据
   url: /user/user/login
   method: post
   
2. API编写。 修改api/user.js，新增方法
   
3. 修改pages/login/index.vue ，增加属性：用户名和密码
   
4. 修改pages/login/index.vue ,增加登陆的方法
   
5. 绑定页面
   

二.登录用户信息存储

1. 安装js-cookie
   
2. 创建utils/auth.js
   
3. 修改pages/login/index.vue 导入auth.js
   
   修改登陆方法，调用auth实现cookie的数据的保存
   

三.登陆状态显示用户信息

1. 修改utils/auth.js
   
2. 修改layouts/default.vue 代码部分
   
3. 判断在当前已经登陆的情况下显示当前登录用户名称和头像
   

四.未登录状态显示登陆链接

1. 修改layouts/default.vue 页面部分
   

五.退出登录

1. 修改utils/auth.js
   
2. 修改layouts/default.vue 导入removeUser方法
   
3. 增加退出登录的方法
   
4. 增加退出登录的链接