Django继承User表实现注册和登录

django中已经有了user表，这篇文章将为大家详细讲解有关Django如何继承自带user表并重写。

一、后端部分

1、引入AbstractUser并继承

（1）、引入

python 复制代码

from django.contrib.auth.models import AbstractUser

**（2）、继承 **

python 复制代码

class User(AbstractUser):

    phone = models.CharField(max_length=11, null=True, verbose_name="手机号")

    class Meta:
        db_table = "tb_user"
        verbose_name = "用户表"
        verbose_name_plural = verbose_name

2、在settings.py中配置

python 复制代码

AUTH_USER_MODEL = "users.User"

3、配置app以及跨域

python 复制代码

INSTALLED_APPS = [
    'users.apps.UsersConfig',  # 用户app
    'corsheaders',  		   # 跨域
]

# 中间件
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',         # 跨域中间件
    # 'django.middleware.csrf.CsrfViewMiddleware',   # 注释掉CSRF这一行
]

CORS_ORIGIN_ALLOW_ALL = True    # 允许所有请求

4、生成迁移文件并执行迁移

python 复制代码

python manage.py makemigrations  	# 生成迁移文件
python manage.py migrate			# 执行迁移文件

5、编写视图

python 复制代码

from django.contrib.auth.hashers import make_password, check_password
from django.views import View
from django.http.response import JsonResponse

import re

from .models import User


class RegisterView(View):
    """
    @author donghm
    @date 2024-05-16
    用户注册
    """

    def post(self, request):
        username = request.POST.get('username')
        email = request.POST.get('email')
        phone = request.POST.get('phone')
        password = request.POST.get('password')

        # 校验数据是否有空值
        if not all([username, email, phone, password]):
            return JsonResponse({'data': {}, 'message': '数据不完整，请检查数据', 'code': 0})

        # 校验用户是否已存在
        user_obj = User.objects.filter(username=username).first()
        if user_obj:
            return JsonResponse({'data': {}, 'message': '用户已存在', 'code': 0})

        # 校验手机号
        phone_pattern = re.compile(r'1[3-9]\d{9}$')
        phone_info = phone_pattern.match(phone)

        if not phone_info:
            return JsonResponse({'data': {}, 'message': '手机号不正确', 'code': 0})

        user = User.objects.create(
            username=username,
            email=email,
            phone=phone,
            password=make_password(password)
        )

        return JsonResponse({'data': {"id": user.id}, 'message': '注册成功', 'code': 1})


class LoginView(View):
    """
    @author donghm
    @date 2024-05-16
    用户登录接口
    """

    def post(self, request):
        username = request.POST.get('username')
        password = request.POST.get('password')

        user = User.objects.filter(username=username).first()

        if not user:
            return JsonResponse({'data': {}, 'message': '用户不正确，请重新输入', 'code': 0})

        is_correct = check_password(password, user.password)
        if not is_correct:
            return JsonResponse({'data': {}, 'message': '密码校验失败', 'code': 0})

        if user and is_correct:
            return JsonResponse({'data': {"username": username, "user_id": user.id}, 'message': 'success', 'code': 1})

6、配置路由

(1)、app下的urls.py

python 复制代码

from django.urls import path
from . import views

urlpatterns = [
    path('register/', views.RegisterView.as_view(), name='register'),
    path('login/', views.LoginView.as_view(), name='login'),
]

（2）、主路由下配置

python 复制代码

from django.urls import path, include

urlpatterns = [
    path('users/', include('users.urls')),
]

默认urls.py文件是不存在的，需要进行创建。

7、使用postman对接口进行测试

（1）、注册

（2）、登录

a、登录失败

b、登录成功

8、接口文档

开发当中，接口文档还是很重要的，优雅的写好你的接口文档，有以下好处：

1、前后端联调时非常方便，前端人员可以根据请求地址、请求方式以及所需要的参数去获取，省去很多麻烦。

2、后端人员可以根据接口文档知道当前接口所要做的事情以及所需要的参数。

3、离职后交接代码也会很省心。

接口文档格式

1）、请求地址

http://127.0.0.1:8000/users/register/

2)、请求方式

post

3)、接口说明

根据所提供的参数，注册用户信息

4）、请求参数

字段	类型	是否必填	说明
username	string	true	要注册的用户的名称
password	string	true	用户登录时的密码
email	string	true	用户的邮箱地址
phone	string	true	用户的手机号信息

5）、请求示例

python 复制代码

{
    "username": "donghm",
    "password": "donghm123",
    "email": "donghm@163.com",
    "phon3": "13311112222"
}

6)、返回结果示例

json 复制代码

{
    "data": {
        "id": 1
    },
    "message": "注册成功",
    "code": 1
}

7)、返回结果说明

字段	类型	说明
data	object	返回的数据
message	string	返回消息说明
code	int	返回编码，1表示成功，0表示失败

二、前端部分

1、register代码

html 复制代码

<template>
    <div style="margin: 30px auto;text-align: center; width: 400px">
        <h1 style="color: #484848;">用户注册</h1>
        <el-form :label-position="labelPosition" label-width="80px" :model="formRegister" >
            <el-form-item label="用户名" >
                <el-input v-model="formRegister.username"></el-input>
            </el-form-item>
            <el-form-item label="密 码">
                <el-input v-model="formRegister.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="邮 箱">
                <el-input v-model="formRegister.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formRegister.phone"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="register">注册</el-button>  
        <el-link @click="toLogin">有账号，去登录</el-link>
    </div>
</template>

<script>
import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
export default {
    data() {
        return {
            labelPosition: 'right',
            formRegister: {
                username: '',
                password: '',
                email: '',
                phone: ''
            }
            
        }a
    },
    methods: {
        // 用户注册
        register(){
            let formData = new FormData()
            formData.append('username', this.formRegister.username);
            formData.append('password', this.formRegister.password);
            formData.append('email', this.formRegister.email);
            formData.append('phone', this.formRegister.phone);

            axios({
                url: 'http://127.0.0.1:8000/users/register/',
                method: 'post',
                data: formData,
            }).then(res => {
                if (res.status == 200) {
                    let result = res.data;
                    if (result.code == 1) {
                        Message.success(result.message);
                    } else {
                        Message.warning(result.message);
                    }
                } else {
                    Message.warning(res.statusText);
                }
            }).catch(err => {
                Message.warning(err.statusText);
            })
        },
        // 去登录
        toLogin() {
            this.$router.push(
                {
                    name: 'Login',
                }
            )
        }
    }
}
</script>

2、login代码

html 复制代码

<template>
    <div style="margin: 30px auto;text-align: center; width: 400px">
        <h1 style="color: #484848;">用户登录</h1>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLogin" >
            <el-form-item label="用户名" >
                <el-input v-model="formLogin.username"></el-input>
            </el-form-item>
            <el-form-item label="密 码">
                <el-input v-model="formLogin.password" type="password"></el-input>
            </el-form-item>
            
        </el-form>
        <el-button type="primary" @click="login">登录</el-button>  
        <el-link @click="toRegister">没有账号，去注册</el-link>
    </div>
</template>

<script>
import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
export default {
    data() {
        return {
            labelPosition: 'right',
            formLogin: {
                username: '',
                password: ''
            }
        }
    }, 
    methods: {
        login() {
            let formData = new FormData();
            formData.append('username', this.formLogin.username);
            formData.append('password', this.formLogin.password);

            axios({
                url: 'http://127.0.0.1:8000/users/login/',
                method: 'post',
                data: formData
            }).then(res => {
                if (res.status == 200) {
                    let result = res.data;
                    if (result.code == 1) {
                        Message.success(result.message);
                    } else {
                        Message.warning(result.message);
                    }
                } else {
                    Message.warning(res.statusText);
                }
            }).catch(err => {
                Message.warning(err.statusText);
            })

        },
        toRegister() {
            this.$router.push({
                name: 'Register'
            })
        }
    }
}
</script>

<style>

</style>

至此，一个简单的登录注册流程就完成了，前后端全部实现，后面会继续在这个流程之上进行优化，添加上token、django的自带认证流程，让流程更加完善。