测试平台开发：Django开发实战之注册界面实现(上)

实现注册功能，大概包括以下几个步骤

1、设计ui

##字段

通过看数据库里面的user表里面的字段，可以大概知道需要几个字段：

• email
• username
• password
• password_confirm

生成简单的ui界面，复制这个html代码

然后在项目路径下面创建一个register.html文件，粘贴刚复制的代码

2、创建视图

def register(request):
    html = open("register.html", encoding="utf-8").read()
    return HttpResponse(html)

3、添加路由，在应用下面添加，项目级路由保持不变

但是，这不是我期望的路由，我期望的路由是：http://127.0.0.1:8000/accounts/register/

那么怎么做呢？换一种思路，重新创建一个和账号相关的路由：

4、前后端对接

接下来需要做前后端对接，提交数据给到后端：

目前数据是没有给到后端的，那么接下来怎么做呢？

1）让我们的前端可以发送参数

首先在html文件引入axios

2） 编写请求方法

<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>


  methods: {
        submitForm() {
          this.$refs.vFormRef.getFormData().then( (formData) => {
            // Form Validation OK
            // alert( JSON.stringify(formData) )
			  axios({
				  method:"post",
				  url:"http://127.0.0.1:8000/accounts/register/",
				  data:formData,
			  })
          }).catch( function(error) {
            // Form Validation Failed
            alert(error)
          })
        }
      }

再次发送请求：

 可以加一些请求成功和失败的判断

methods: {
        submitForm() {
          this.$refs.vFormRef.getFormData().then( (formData) => {
            // Form Validation OK
            // alert( JSON.stringify(formData) )
			  axios({
				  method:"post",
				  url:"http://127.0.0.1:8000/accounts/register/",
				  data:formData,
			  }).then(function (response){      //请求成功调用这个函数
			     alert(response.data.message)
		      }).catch( function(error) {
                // Form Validation Failed
                 alert(error.response.data.message)
               })
          }).catch( function(error) {
            // Form Validation Failed
            alert(error.response.data.message)
          })
        }
      }

2）让我们的后端处理请求，编写注册的视图函数：

import json
import os

from django.contrib.auth import login, logout
from django.contrib.auth.base_user import AbstractBaseUser
from django.shortcuts import render
from django.http import JsonResponse, HttpResponse, HttpResponseRedirect, HttpResponsePermanentRedirect
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password
from django.template.loader import render_to_string
from django.urls import reverse
from django.contrib.auth.decorators import login_required

from django.db import connection

from lili.models import Feedback

def register(request):
    if request.method == 'POST':
        # 获取提交的表单数据
        data = json.loads(request.body)
        key_list = [
            "email","username","password","password_confirm"
        ]
        for key in key_list:
            if len(data.get(key)) == 0:
                return JsonResponse({'code': -1,
                                     'message':f"{key}不能为空",
                                     'status': 422})

        if data['password'] != data['password_confirm']:
            return JsonResponse({'code':-2,
                                 'message':"两次密码必须相同",
                                 'status': 322})

        if len(data['password']) < 6:
            return JsonResponse({'code': -3,
                                 'message': "密码长度必须大于等于6",
                                 'status': 322})

        user_list = User.objects.filter(username=data['username'])
        if len(user_list) > 0:
            return JsonResponse({'code': -4,
                                 'message': "用户已经存在，请重新注册",
                                 'status': 222})

        User.objects.create_user(username=data['username'],
                                        password=data['password'],
                                        email=data['email']
                                        )

        return JsonResponse({'code':0,
                             'message':"注册成功",
                             })

根据校验的逻辑去发送请求

 可是这样的用户体验不好，我们希望用户创建成功的同时，也登录成功

这个时候可以对视图函数进行重新编辑，调用djang里面自带的登录方法：

from django.contrib.auth import login

编写html文件的请求成功的部分，希望它重定向到业务页面

submitForm() {
          this.$refs.vFormRef.getFormData().then( (formData) => {
            // Form Validation OK
            // alert( JSON.stringify(formData) )
			  axios({
				  method:"post",
				  url:"http://127.0.0.1:8000/accounts/register/",
				  data:formData,
			  }).then(function (response){      //请求成功调用这个函数
			     alert("请求成功" + response.data.message)
				  //可以重定向到想要他跳转的界面
				  window.location.href ='http://127.0.0.1:8000/lili/submit/'
		      }).catch( function(error) {
                // Form Validation Failed   //请求失败调用这个函数
                 alert("请求失败" + error.response.data.message)
               })
          }).catch( function(error) {
            // Form Validation Failed
            alert(error.response.data.message)
          })
        }