1 用户注册
一.页面构建
- 创建pages/login.vue
二.获取验证码
- 模拟数据与API
- 将user.yml 导入easymock
- 修改easy-mock 数据
url: /user/user/sendsms/{mobile}
method:put - 编写API 创建api/user.js
- 调用API
- 修改pages/login.vue脚本部分
- 修改pages/login.vue 绑定变量
- 修改pages/login.vue 按钮绑定方法
- 修改pages/login.vue脚本部分
- 使用ElementUI 的弹出框
- 安装element-ui
- plugins文件夹下创建element-ui.js
- 修改nuxt.config.js,加入插件与样式
- 修改pages/login.vue的脚本部分,将alert替换为以下代码
- 安装element-ui
三.提交注册
- 在easy-mock 增加数据
URL: /user/user/register/{code}
Method: post - 修改api/user.js,增加方法
- 修改pages/login/index.vue脚本部分 增加属性
新增注册的方法 - 修改pages/login/index.vue页面部分
绑定表单输入框
绑定方法
四.输入校验
- 校验昵称必须填写
- 校验手机号的合法性 ,可以使用正则表达式进行验证。
^((13[0‐9])|(15[^4])|(18[0,2,3,5‐9])|(17[0‐8])|(147))\\d{8}$ - 密码长度校验
- 判断是否勾选同意条款
2 用户登陆
一.登陆验证
- mock模拟数据
url: /user/user/login
method: post - API编写。 修改api/user.js,新增方法
- 修改pages/login/index.vue ,增加属性:用户名和密码
- 修改pages/login/index.vue ,增加登陆的方法
- 绑定页面
二.登录用户信息存储
- 安装js-cookie
- 创建utils/auth.js
- 修改pages/login/index.vue 导入auth.js
修改登陆方法,调用auth实现cookie的数据的保存
三.登陆状态显示用户信息
- 修改utils/auth.js
- 修改layouts/default.vue 代码部分
- 判断在当前已经登陆的情况下显示当前登录用户名称和头像
四.未登录状态显示登陆链接
- 修改layouts/default.vue 页面部分
五.退出登录
- 修改utils/auth.js
- 修改layouts/default.vue 导入removeUser方法
- 增加退出登录的方法
- 增加退出登录的链接