text: var vm = new Vue({
      el: '#app',
      // 修改Vue变量的读取语法，避免和django模板语法冲突
      delimiters: ['[[', ']]'],
      data: {
          host: host,
          error_name: false,
          error_password: false,
          error_password2: false,
          error_check_password: false,
          error_phone: false,
          error_image_code: false,
          error_sms_code: false,
          error_allow: false,
          error_name_message: '请输入5-20个字符的用户',
          error_password_message: '请输入8-20位的密码',
          error_password2_message: '两次输入的密码不一致',
          error_mobile_message: '请输入正确的手机号码',
          error_image_code_message: '请填写图形验证码',
          error_sms_code_message: '请填写短信验证码',
          error_allow_message: '请勾选用户协议',
          image_code_id: '',
          image_code_url: '',
          sms_code_tip: '获取短信验证码',
          sending_flag: false,
          username: 'itcast2',
          password: '123456789',
          password2: '123456789',
          mobile: '13344445555',
          image_code: '1234',
          sms_code: '4321',
          allow: true
      },
      mounted: function () {
          // 向服务器获取图片验证码
          this.generate_image_code();
      },
      methods: {
          generateUUID: function () {
              var d = new Date().getTime();
              if (window.performance && typeof window.performance.now === "function") {
                  d += performance.now(); //use high-precision timer if available
              }
              var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                  var r = (d + Math.random() * 16) % 16 | 0;
                  d = Math.floor(d / 16);
                  return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
              });
              return uuid;
          },
          // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
          generate_image_code: function () {
              // 生成一个编号 : 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
              this.image_code_id = this.generateUUID();
              // 设置页面中图片验证码img标签的src属性
              this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
              console.log(this.image_code_url);
          },
          // 检查用户名
          check_username: function () {
              var 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;
              }
              //    发送 ajax请求  判断用户名是否重复
             if (this.error_name == false){
  
             //    1.url http://www.meiduo.site:8000/usernames/itcast1/count/
                 let url = this.host + '/usernames/' + this.username + '/count/';
  
             //    2.axios 写法
                 axios(url)
                     .then(response=>{
  
                         if (response.data.count == 1){//有重复了
                              this.error_name_message = '用户名已经存在';
                              this.error_name = true;
  
                         }else {
                              this.error_name = false;
                         }
  
                     })
                     .catch(error=>{
                         console.log(error.response)
                     })
  
  
             }
  
  
          },
          // 检查密码
          check_password: function () {
              var re = /^[0-9A-Za-z]{8,20}$/;
              if (re.test(this.password)) {
                  this.error_password = false;
              } else {
                  this.error_password = true;
                  this.error_name_message = '请输入8-20密码';
              }
          },
          // 确认密码
          check_password2: function () {
              if (this.password != this.password2) {
                  this.error_check_password = true;
                  this.error_name_message = '两次密码不一致';
              } else {
                  this.error_check_password = false;
              }
          },
          // 检查手机号
          check_mobile: function () {
              var re = /^1[345789]\d{9}$/;
              if (re.test(this.mobile)) {
                  this.error_phone = false;
              } else {
                  this.error_mobile_message = '您输入的手机号格式不正确';
                  this.error_phone = true;
              }
          //    发送 判断手机号是否重复 的 ajax 请求
              if (this.error_phone == false) {
              let url = '/mobiles/'+ this.mobile + '/count/';
              axios.get(url, {
                  responseType: 'json'
              })
                  .then(response => {
                      if (response.data.count == 1) {
                          this.error_mobile_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_mobile();
              this.check_image_code();
  
              if (this.error_phone == true || this.error_image_code == 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'
              })
                  .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 {
                          if (response.data.code == '4001') {
                              this.error_image_code_message = response.data.errmsg;
                              this.error_image_code = true;
                          } else { // 4002
                              this.error_sms_code_message = response.data.errmsg;
                              this.error_sms_code = true;
                          }
                          this.generate_image_code();
                          this.sending_flag = false;
                      }
                  })
                  .catch(error => {
                      console.log(error.response);
                      this.sending_flag = false;
                  })
          },
          // 表单提交
          on_submit(){
              this.check_username();
              this.check_password();
              this.check_password2();
              this.check_mobile();
              // this.check_sms_code();
              this.check_allow();
  
              if (this.error_name == true || this.error_password == true || this.error_check_password == true
                  || this.error_phone == true || this.error_sms_code == true || this.error_allow == true) {
                  // 不满足注册条件：禁用表单
                  window.event.returnValue = false;
              }
          }
      }
  });
  
  
  