百度做网站哪里可以学,wordpress全站背景,中铁建设集团官网登录,重庆市建设工程信息网文件打不开一、用户注册业务逻辑分析 二、用户注册接口设计和定义
2.1. 设计接口基本思路
对于接口的设计#xff0c;我们要根据具体的业务逻辑#xff0c;设计出适合业务逻辑的接口。设计接口的思路#xff1a; 分析要实现的业务逻辑#xff1a; 明确在这个业务中涉及到几个相关子…一、用户注册业务逻辑分析 二、用户注册接口设计和定义
2.1. 设计接口基本思路
对于接口的设计我们要根据具体的业务逻辑设计出适合业务逻辑的接口。设计接口的思路 分析要实现的业务逻辑 明确在这个业务中涉及到几个相关子业务。将每个子业务当做一个接口来设计。分析接口的功能任务明确接口的访问方式与返回数据 请求方法如GET前端向后端获取数据查、POST隐私数据、注册增、PUT修改数据改、DELETE删除数据删等请求地址请求参数如路径参数、查询字符串、表单、JSON等响应数据如HTML、JSON等
2.2 用户注册接口设计
1.请求方式
选项方案请求方法POST请求地址/register/
2.请求参数表单参数
参数名类型是否必传说明usernamestring是用户名passwordstring是密码password2string是确认密码mobilestring是手机号sms_codestring是短信验证码allowstring是是否同意用户协议
3.响应结果HTML
register.html
响应结果响应内容注册失败响应错误提示注册成功重定向到首页
2.3 用户注册接口定义
1.注册视图
class RegisterView(View):用户注册def get(self, request):提供注册界面:param request: 请求对象:return: 注册界面return render(request, register.html)def post(self, request):实现用户注册:param request: 请求对象:return: 注册结果pass2.总路由
3.子路由
三、用户注册前端逻辑
为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果
3.1 用户注册页面绑定Vue数据
1.准备div盒子标签
bodydiv idapp....../div
/body2.register.html
绑定内容变量、事件、错误提示等
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langen
headmeta http-equivContent-Type contenttext/html;charsetUTF-8title美多商城-注册/titlelink relstylesheet typetext/css href../static/css/reset.csslink relstylesheet typetext/css href../static/css/main.css
/head
bodydiv idappdiv classregister_condiv classl_con fla hrefindex.html classreg_logoimg src../static/images/logo.png/adiv classreg_slogan商品美 · 种类多 · 欢迎光临/divdiv classreg_banner/div/divdiv classr_con frdiv classreg_title clearfixh1用户注册/h1a hreflogin.html登录/a/divdiv classreg_form clearfixform methodpost classregister_form submiton_submit v-cloak{# v-cloak解决vue渲染页面时先出现变量名再出现文字的延迟效果#}{{ csrf_input }}ullilabel用户名:/labelinput typetext v-modelusername blurcheck_username nameusername iduser_namespan classerror_tip v-showerror_name[[ error_name_message ]]/span/li lilabel密码:/labelinput typepassword v-modelpassword blurcheck_password namepassword idpwdspan classerror_tip v-showerror_password请输入8-20位的密码/span/lililabel确认密码:/labelinput typepassword v-modelpassword2 blurcheck_password2 namepassword2 idcpwdspan classerror_tip v-showerror_password2两次输入的密码不一致/span/lililabel手机号:/labelinput typetext v-modelmobile blurcheck_mobile namemobile idphonespan classerror_tip v-showerror_mobile[[ error_mobile_message ]]/span/lililabel图形验证码:/labelinput typetext nameimage_code idpic_code classmsg_inputimg src../static/images/pic_code.jpg alt图形验证码 classpic_codespan classerror_tip请填写图形验证码/span/lililabel短信验证码:/labelinput typetext namesms_code idmsg_code classmsg_inputa hrefjavascript:; classget_msg_code获取短信验证码/aspan classerror_tip请填写短信验证码/span/lili classagreementinput typecheckbox v-modelallow changecheck_allow nameallow idallowlabel同意”美多商城用户使用协议“/labelspan classerror_tip v-showerror_allow请勾选用户协议/span/lili classreg_subinput typesubmit value注 册/li/ul /form/div/div/divdiv classfooter no-mpdiv classfoot_linka href#关于我们/aspan|/spana href#联系我们/aspan|/spana href#招聘人才/aspan|/spana href#友情链接/a /divpCopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved/pp电话010-****888 京ICP备*******8号/p/div/div
/body
/html 3.2 用户注册JS文件实现用户交互
1.导入Vue.js库和ajax请求的库
script typetext/javascript src{{ static(js/vue-2.5.16.js) }}/script
script typetext/javascript src{{ static(js/axios-0.18.0.min.js) }}/script2.准备register.js文件
script typetext/javascript src{{ static(js/register.js) }}/script绑定内容变量、事件、错误提示等
// 创建vue对象vm
// 采用的是ES6语法
let vm new Vue({el: #app, //通过id选择器找到绑定的html内容// 修改Vue读取变量的语法delimiters: [[[, ]]],data: { // 数据对象// v-modelusername: ,password: ,password2: ,mobile: ,allow: ,// v-showerror_name: false,error_password: false,error_password2: false,error_mobile: false,error_allow: false,// error_messageerror_name_message: ,error_mobile_message: ,},methods: { // 定义和实现事件方法// 校验用户名check_username(){},// 校验密码check_password(){},// 校验确认密码check_password2(){},// 校验手机号check_mobile(){},// 校验是否勾选协议check_allow(){},// 监听表单提交事件on_submit(){},}
}); 3.用户交互事件实现
methods: {// 校验用户名check_username(){let re /^[a-zA-Z0-9_-]{5,20}$/;if (re.test(this.username)) {this.error_name false;} else {this.error_name_message 请输入5-20个字符的用户名;this.error_name true;}},// 校验密码check_password(){let re /^[0-9A-Za-z]{8,20}$/;if (re.test(this.password)) {this.error_password false;} else {this.error_password true;}},// 校验确认密码check_password2(){if(this.password ! this.password2) {this.error_password2 true;} else {this.error_password2 false;}},// 校验手机号check_mobile(){let re /^1[3-9]\d{9}$/;if(re.test(this.mobile)) {this.error_mobile false;} else {this.error_mobile_message 您输入的手机号格式不正确;this.error_mobile true;}},// 校验是否勾选协议check_allow(){if(!this.allow) {this.error_allow true;} else {this.error_allow false;}},// 监听表单提交事件on_submit(){this.check_username();this.check_password();this.check_password2();this.check_mobile();this.check_allow();if(this.error_name true || this.error_password true || this.error_password2 true|| this.error_mobile true || this.error_allow true) {// 禁用表单的提交window.event.returnValue false;}},
} 3.3 知识要点
Vue绑定页面的套路 导入Vue.js库和ajax请求的库准备div盒子标签准备js文件html页面绑定变量、事件等js文件定义变量、事件等错误提示 如果错误提示信息是固定的可以把错误提示信息写死再通过v-show控制是否展示如果错误提示信息不是固定的可以使用绑定的变量动态的展示错误提示信息再通过v-show控制是否展示修改Vue变量的读取语法避免和Django模板语法冲突delimiters: [[[, ]]]后续的页面中如果有类似的交互和刷新效果也可按照此套路实现 学习导航http://www.xqnav.top
