vue+django实现图片验证码功能之vue逻辑

<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">
      <div>

      注册页面


        <Form
          ref="form"
          :showErrorTip="showErrorTip"
          :rules="rules"
          :model="model"

        >

          <FormItem label="用户名" prop="username">
            <template v-slot:label>
              用户名
            </template>
            <input type="text" v-model="model.username">

          </FormItem>



          <FormItem label="密码" prop="password">

            <input type="password" v-model="model.password">

          </FormItem>

          <FormItem label="再次输入密码" prop="password2">
            <input type="password" v-model="model.password2">
          </FormItem>

            <!---->
          <FormItem label="验证码" prop="code">
            <input type="text" v-model="model.code"><img :src="src" @click="changeImgCode">


          </FormItem>
                <!---->

          <FormItem>

            <Button
            color="#a52a2a" :loading="isLoading"
            @click="submit"
            >
              提交
            </Button>
            &nbsp;&nbsp;&nbsp;
            <Button @click="reset">重置</Button>

          </FormItem>

        </Form>

      </div>

    </main>





  </div>
</template>



<script>


import mh from './mh.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //进度条
      isLoading:false,
      //用户数据
      model:{
        username:'',
        password:'',
        password2:'',
        code:''
      },
      src:"http://127.0.0.1:8000/aut/",
      //规则
      rules:{
        //非空验证
        required:['username','password','password2'],
        combineRules: [{
          refs: ['password', 'password2'],
          valid: {
            valid: 'equal',
            message: '两次输入的密码不一致'
          }
        }]

      },
      //错误提示
      showErrorTip:true
    }
  },
  components: {
        'mh':mh
  },
  mounted:function(){


},
  methods:{
    //点击刷新验证码
    changeImgCode(){

      //生成随机字符
      let num = Math.ceil(Math.random()*10);
      this.src = this.src + "?code=" + num;

    },



    //提交
      submit(){

        //取值
        let username = this.model.username;
        let password = this.model.password;
        let password2 = this.model.password2;

        if(username == ''){
          this.$Message('用户名不能为空');
          return false;

        }


        //定义一个传递变量
        var _this = this;

        //打印 console.log(username);

        //请求后台接口
        this.axios.get('http://localhost:8000/reg/',{
          //设置参数
          params:{
            username:username,
            password:password,
            password2:password2,
            // code值传送后台
            code:this.model.code
          }
        }).then(function (result) {

          //判断是否注册成功
          if(result.data.code==200){
              //跳转页面  跳转到vue登录页面
            _this.$router.push('/login');

            //提示信息
            _this.$Message(result.data.message);

          }else {


          // 打印数据console.log(result)

          //不能经常写这种 弹出提示框alert(result.data.message);

          //组件式提醒
          // _this.$Notice(result.data.message);
          _this.$Message(result.data.message);

          }
        })


      },
    //重置
    reset(){

        //将内容置空
      this.model.username = '';
      this.model.password = '';
      this.model.password2 = '';
    }
  }
}


</script>

<style>



</style>