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. 增加退出登录的链接
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值