基于DRF和VUE实现的前后端分离的登录注册功能

后端 - DRF

• 中间件 - 跨域请求

from django.utils.deprecation import MiddlewareMixin
class MyCorsMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        # 允许所有人向我发请求
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == 'OPTIONS':
            # 所有的头信息都允许
            response['Access-Control-Allow-Headers'] = '*'
        return response

• setting - 注册自定义中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    "logindemo.MyCorsMiddle.MyCorsMiddle",
]

• 模型

from django.db import models

# Create your models here.

class Login(models.Model):
    """登录模型类"""
    username = models.CharField(max_length=64,unique=True)
    passwoed = models.IntegerField()

    class Meta:
        db_table = "tb_login"

• 子应用下的serializer

from rest_framework import serializers
from app01 import models

class LoginSerializer(serializers.ModelSerializer):
    class Meta:
        fields = "__all__"
        model = models.Login

• 视图

from django.shortcuts import render
from .serializer import LoginSerializer
from .models import Login
from rest_framework.response import Response
from rest_framework.decorators import action
from rest_framework.viewsets import ModelViewSet
# Create your views here.

class LoginModelView(ModelViewSet):
    queryset = Login.objects.all()
    serializer_class = LoginSerializer

    @action(methods=["post"],detail=False,url_path="login")
    def login(self,request):
        """登录视图"""
        username = request.data['username']
        passwoed = request.data['passwoed']
        try:
            use_obj = Login.objects.get(username=username)
        except Exception as e:
            print(123)
            return Response({"meg":"该用户不存在"})

        if use_obj.passwoed != int(passwoed):
            return Response({"meg":"密码错误"})
        return Response({"meg":"登录成功！"})

---

前端 - VUE

• src/utils/http.js -- axios前提

import axios from "axios";

//实例化
const http = axios.create({
    baseURL:"http://127.0.0.1:8000",
})
export default http

• src/utils/router.js -- 路由前提

import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";

const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:"/",
            name:"Login",
            component:import('../views/Login.vue')
        },
        {
            path:"/reg",
            name:"reg",
            component:import("../views/reg.vue")
        },
        {
            path:"/index",
            name:"index",
            component:import("../views/index.vue")
        },
        {
            path:"/log",
            name:"log",
            component:import("../views/log.vue")
        }
    ]
})

export default router

• src/views/Login.vue - 导航页面

• src/views/reg.vue - 注册页面

• src/views/log.vue - 登录页面

• src/views/log.vue - 登录页面

效果展示：

• 导航

• 注册

• 登录

• 主页面

当注册用户已存在，会提示
当登录密码错误或账号不存在，会提示
当注册页面注册成功后，会自动跳转到登录页面。

第一次实现前后端分离的小案例，有什么不足，请各位斧正，谢谢！