商场项目-用户注册前端

1.用户注册业务逻辑分析

 用户获取注册页面-注册请求-接收请求提取参数-校验参数【响应错误信息】-保存注册数据【Mysql】-状态保持【Redis】-响应注册结果

2.用户注册接口设计和定义:

 1.判断用户名时候重复注册、判断手机号码是否注册、图形验证码验证、短信验证码验证

 2.后端判断请求方法GET或POST

3.用户注册前端逻辑:

 1.用户注册页面绑定Vue数据

 2.用户注册JS文件实现用户交互

4.配置流程:

  1.子应用views增加一个post方法

  

  2.配置static文件夹的路径,否则服务器找不到:

  

  3.创建static文件夹,与templates文件夹同一目录,并加载ajax、vue包,新建register.js文件:

  

  4.在register.html添加js代码,下面是用户名输入框代码内添加:

  

  5.下面是密码输入框代码内添加:

  

  6.下面是密码确认输入框代码内添加:

  

  7.下面是手机号码输入框代码内添加:

  

  8.下面是协议选择框代码内添加:

  

  9.编辑register.js文件,编写vue.js代码:

  

  

  10.运行页面测试代码结果:

  

附Vue.js套路:
1.准备div盒子标签
2.HTML页面中绑定变量、事件、错误提示等
3.导入Vue.js库和ajax请求库
4.准备js文件
5.js文件中实现用户交互和局部刷新