Django电商项目（四）用户注册-前端逻辑的实现

上次我们完成了用户注册表单验证，这次我们完成注册页面前端逻辑实现
前端用户登录js

let vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
        // v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',

        // v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        // err_message
        error_name_message: ""

    },
    methods: {
        // 校验用户名
        check_username() {
            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() {

        },
        check_password2() {

        },
        check_mobile() {

        },
        check_allow() {

        },
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            if (this.error_name == true||this.error_mobile==true||this.error_password==true||this.error_password2==true||this.error_allow==true) {
                //    禁用表单提交时间
                window.event.returnValue = false;
            }
        }
    }
});

登录页面视图

from django.shortcuts import render, redirect, reverse
from django.views import View
from django import http
from .forms import RegisterForm
from users.models import User


class RegisterView(View):

    def get(self, request):
        """提供用户注册页面"""
        return render(request, 'register.html')

    def post(self, request):
        """提供用户注册逻辑"""
        # 校验参数
        register_form = RegisterForm(request.POST)

        if register_form.is_valid():
            username = register_form.cleaned_data.get('username')
            password = register_form.cleaned_data.get('password')
            mobile = register_form.cleaned_data.get('mobile')

            # 保存到数据库中
            try:
                User.objects.create_user(username=username, password=password, mobile=mobile)
            except Exception as e:
                return render(request, 'register.html', {'register_errmsg': '注册失败'})
            # 状态保持

            # 响应结果
            return redirect(reverse('contents:index'))
        else:
            context = {
                'forms_errors': register_form.errors
            }
        return render(request, 'register.html', context=context)

建立contents文件夹，完成前端页面的渲染

from django.shortcuts import render
from django.views import View


class IndexView(View):

    def get(self, request):
        return render(request, 'index.html')