（根据居然老师直播课内容整理）
采用vue开发，使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。
采用前后端不分离模式
制作注册静态页面样式和内容模板
需要输入用户名、密码、确认密码、手机号、图形验证码、短信验证码、同意商城协意选择框和注册按钮及登录跳转
可选：网站log、广告等
需要进行数据校验
当输入框失焦时，判断必填项是否填写内容，内容是否符合简单规范
当用户名输入框失焦时，还需向后端发验证，确保用户名未被注册
当两次密码不一致时，提示输入一致
当手机号输入框失焦时，还需向后端发验证，确保手机号未被注册过
获取短信验证码时，需要向后端发图形验证，图形验证码正确后，才会发送短信
当页面加载完成后，需要向后端发起申请图形验证码图片
提前将vue-2.5.16.js复制到./static/js目录下
创建register.js
在register.html中添加 相关js引用
< script src= "{% static 'js/vue-2.5.16.js' %}" > < / script>
< script src= "{% static 'js/register.js' %}" > < / script>
< div id = "app" >
< body>
. . . . . .
< / body>
< / div>
v-model=“username” : 绑定属性
@blur=“check_username” ： 绑定失去焦点的事件 (针对输入框)
@change=“check_allow” ： 绑定变更后触发事件（针对 checkBox ）
v-show=“error_password2” ：v-show=True :显示相应信息；否则隐藏
let vm = new Vue( {
el: '#app' ,
// 修改Vue读取变量的语法
delimiters: [ '[[' , ']]' ] ,
data: {
username: '' ,
error_name: false,
} ,
methods: {
// 校验用户名
check_username( ) {
let re= / ^ [ a- zA- Z0- 9_- ] {
5 , 20 } $/
if ( re. test( this. username) )
this. error_name = false;
} else {
this. error_name = true;
this. error_name_message = '请输入5-20个字符的用户名' ;
}
} ,
} ) ;
现象： 如果有空格，正则表达式会了错：字符串符合长度规范也会报错
正确：
nicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position 9737 : ille
打开django/ views下的debug. py文件，转到line331行：
with Path( CURRENT_DIR, 'templates' , 'technical_500.html' ) . open ( ) as fh
将其改成：
with Path( CURRENT_DIR, 'templates' , 'technical_500.html' ) . open ( encoding= "utf-8" ) as fh
就成功了。
当用户名输入框失去焦点时，进行校验
当简单校验通过后，通过ajax向后台发起用户名重复注册校验申请，后台返回如果0 表示未注册过,否则是注册过或数据库出错
// 检验用户名
check_username( ) {
// 用户名: 5 - 20 [ a- zA- Z0- 9_- ]
let re = / ^ [ a- zA- Z0- 9_- ] {
5 , 20 } $/ ;
if ( re. test( this. username) ) {
// 匹配 不展示错误提示信息
this. error_name = false;
} else {
this. error_name = true;
this. error_name_message = '请输入5-20个字符的用户名' ;
}
if ( this. error_name == false) {
let url = '/users/usernames/' + this. username + '/count/' ;
// axios. get( url, 请求头( 字典) ) ajax请求
axios. get( url, {
responseType: 'json'
} )
// 请求成功 function( response) {
}
. then( response = > {
console. log( this) ;
console. log( response. data) ;
alert( response. data. count) ;
if ( response. code== 0 & & response. data. count == 0 ) {
this. error_name = false;
} else {
this. error_name= true;
if ( response. code== 0 ) {
this. error_name_message= "用户名已经存在" ;
} else {
this. error_name_message= response. date. errmsg;
}
}
} )
// 请求不成功
. catch( error = > {
console. log( error. response)
} )
}
} ,
< script src= "{% static 'js/axios-0.18.0.min.js' %}" > < / script>
