text: var vm = new Vue({
      el: '#app',
      data: {
          host: host,
  
          error_name: false,
          error_password: false,
          error_check_password: false,
          error_phone: false,
          error_allow: false,
          error_sms_code: false,
          error_name_message: '',
          error_phone_message: '',
          error_sms_code_message: '',
          error_image_code:'',
  
          sms_code_tip: '获取短信验证码',
          sending_flag: false, // 正在发送短信标志
  
          // 图形验证码:
          image_code_id: '',
          image_code_url: '',
  
          username: '',
          password: '',
          password2: '',
          mobile: '',
          sms_code: '',
          allow: false,
          image_code:'',
          error_image_code_message:''
      },
      mounted: function(){
  		// 向服务器获取图片验证码
  		this.generate_image_code();
  	},
      methods: {
          // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
  		generate_image_code: function(){
  			// 生成一个编号 : 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
  			this.image_code_id = generateUUID();
  			// 设置页面中图片验证码img标签的src属性
  			this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
  		},
          // 检查用户名
          check_username: function () {
              var re = /^[a-zA-Z0-9_-]{5,20}$/;
              var re2 = /^[0-9]+$/;
              if (re.test(this.username) && !re2.test(this.username)) {
                  this.error_name = false;
              } else {
                  this.error_name_message = '请输入5-20个字符的用户名且不能为纯数字';
                  this.error_name = true;
              }
              // 检查重名
              if (this.error_name == false) {
                  var url = this.host + "/usernames/"+ this.username  +"/count/";
                  axios.get(url, {})
                      .then((resposne) => {
                          if (resposne.data.count == 1) {
                              this.error_name = true;
                              this.error_name_message = '用户名已存在';
                          } else {
                              this.error_name = false;
                          }
                      })
                      .catch((error) => {
                          console.log(error)
                      })
              }
          },
          check_pwd: function () {
              var len = this.password.length;
              if (len < 8 || len > 20) {
                  this.error_password = true;
              } else {
                  this.error_password = false;
              }
          },
          check_cpwd: function () {
              if (this.password != this.password2) {
                  this.error_check_password = true;
              } else {
                  this.error_check_password = false;
              }
          },
          // 检查手机号
          check_phone: function () {
              var re = /^1[345789]\d{9}$/;
  
              if (re.test(this.mobile)) {
                  this.error_phone = false;
              } else {
                  this.error_phone_message = '您输入的手机号格式不正确';
                  this.error_phone = true;
              }
              if (this.error_phone == false) {
                  var url = this.host + '/mobiles/' + this.mobile + '/count/';
                  axios.get(url, {
                      responseType: 'json',
                       withCredentials:true,
                  })
                      .then(response => {
                          if (response.data.count > 0) {
                              this.error_phone_message = '手机号已存在';
                              this.error_phone = true;
                          } else {
                              this.error_phone = false;
                          }
                      })
                      .catch(error => {
                          console.log(error.response);
                      })
              }
          },
          // 检查图片验证码
  		check_image_code: function (){
  			if(!this.image_code) {
  				this.error_image_code_message = '请填写图片验证码';
  				this.error_image_code = true;
  			} else {
  				this.error_image_code = false;
  			}
  		},
          check_sms_code: function () {
              if (!this.sms_code) {
                  this.error_sms_code_message = '请填写短信验证码';
                  this.error_sms_code = true;
              } else {
                  this.error_sms_code = false;
              }
          },
          check_allow: function () {
              if (!this.allow) {
                  this.error_allow = true;
              } else {
                  this.error_allow = false;
              }
          },
          // 发送手机短信验证码
          send_sms_code: function () {
              // if (this.sending_flag == true) {
              //     return;
              // }
              // this.sending_flag = true;
  
              // 校验参数，保证输入框有数据填写
              this.check_phone();
  
              if (this.error_phone == true) {
                  this.sending_flag = false;
                  return;
              }
  
              // 向后端接口发送请求，让后端发送短信验证码
              var url = this.host + '/sms_codes/' + this.mobile + '/' + '?image_code=' + this.image_code
                  + '&image_code_id=' + this.image_code_id
              axios.get(url, {
                  responseType: 'json',
                  withCredentials:true,
              })
                  .then(response => {
                      // 表示后端发送短信成功
                      if (response.data.code == 0) {
                          // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                          var num = 60;
                          // 设置一个计时器
                          var t = setInterval(() => {
                              if (num == 1) {
                                  // 如果计时器到最后, 清除计时器对象
                                  clearInterval(t);
                                  // 将点击获取验证码的按钮展示的文本回复成原始文本
                                  this.sms_code_tip = '获取短信验证码';
                                  // 将点击按钮的onclick事件函数恢复回去
                                  this.sending_flag = false;
                              } else {
                                  num -= 1;
                                  // 展示倒计时信息
                                  this.sms_code_tip = num + '秒';
                              }
                          }, 1000, 60)
                      } else {
                          alert(response.data.errmsg);
                      }
                  })
                  .catch(error => {
                      if (error.response.status == 400) {
                          this.error_sms_code_message = error.response.data.message;
                          this.error_sms_code = true;
                      } else {
                          console.log(error.response.data);
                      }
                      this.sending_flag = false;
                  })
          },
          // 注册
          on_submit: function () {
              this.check_username();
              this.check_pwd();
              this.check_cpwd();
              this.check_phone();
              this.check_sms_code();
              this.check_allow();
  
  
  
              // 点击注册按钮之后, 发送请求 (下面的代码是通过请求体传参的)
              if (this.error_name == false && this.error_password == false && this.error_check_password == false
                  && this.error_phone == false && this.error_sms_code == false && this.error_allow == false) {
                  axios.post(this.host + '/register/', {
                      username: this.username,
                      password: this.password,
                      password2: this.password2,
                      mobile: this.mobile,
                      sms_code: this.sms_code,
                      allow: this.allow
                  }, {
                      responseType: 'json',
                      withCredentials:true,
                  })
                      .then(response => {
                          if (response.data.code==0) {
                             location.href = 'index.html';
                          }
                          if (response.data.code == 400) {
                              alert(response.data.errmsg)
                          }
                      })
                      .catch(error => {
                          if (error.response.code == 400) {
                              if ('non_field_errors' in error) {
                                  this.error_sms_code_message = error.response;
                              } else {
                                  this.error_sms_code_message = '数据有误';
                              }
                              this.error_sms_code = true;
                          } else {
                              console.log(error);
                          }
                      })
              }
          }
      }
  });