vue3+django+mysql实现一个简单的前后端分离的小案例

前端部分

前端主要是使用了vue3的基本框架，首先是创建一个vue3项目，这里我是使用的vite+vue创建的项目，比较方便，在vscode里边几行代码就可以创建起来，这里有我遇到的一个坑是关于vscode，就是下面这种错误，在cmd终端执行指令的时候是可以的，但是在vscode里边就会出现这种错误，然后我使用管理员打开vscode这种错误就取消了，这是我的解决方案，对于其他设备可能会有不同的解决方案。

vue目录

1、首先在src目录下新增2个文件夹，一个是view文件，里边存放视图组件，通常对应路由，每个视图都是一个独立的 .vue 文件；还有一个就是router文件，里边存放路由配置文件。
我是在views文件里边新建了两个页面，一个是初始页面index.vue和登录成功的页面content.vue,然后在router里边新建一个index.js配置路由规则就OK。

主视图index.vue

脚本文件

<script setup>
    import { useRouter } from 'vue-router';
    import { ref } from 'vue';
    import axios from 'axios';

    const router = useRouter();
    const username = ref('');
    const password = ref('');

    const login = async () => {
            try {
                const response = await axios.post('http://127.0.0.1:8000/api/login/', {
                    username: username.value,
                    password: password.value
                });
                //alert(response.data.message);

                if (response.data.message === '登录成功') {
                    router.push('/content');
                } else if (response.data.message === '注册成功') {
                    location.reload();
                }
            } catch (error) {
                if (error.response) {
                    alert(error.response.data.message);
                } else {
                    console.error(error);
                }
            }
        }
</script>

首先导入需要用的js文件，然后创建三个常量，分别用于路由跳转，获取用户名和密码。
接下来就是使用axios发起一个后端请求，如果登录成功则跳转至/content页面，注册成功则刷新页面，登录失败则弹出提示信息。

template文件

<template>

    <h1>登录页面</h1>

    <form @submit.prevent="login()">
        <input v-model="username" type="text" placeholder="用户名"></input>

        <input v-model="password" type="text" placeholder="密码"></input>

        <button type="submit">登录</button>

    </form>

</template>

<style scoped>

</style>

html代码就是插入了一个简单的表单，里边有用户名和密码两个输入框，然后加了一个按钮，提交后触发表单的事件，执行登录逻辑。submit.prevent()是为了取消表单提交的默认刷新网页的行为。

后端部分

后端我使用django+mysql搭了一个简单的后端接口，创建一个django项目步骤也是比较简单，最后创建好的项目目录如下：

app01是自己在创建项目是注册的app，注意要在创建完app后，在settings.py里边加上对应的配置文件。

然后我这里是还安装了一个Django REST framework用于实现校验逻辑，这里注意安装djangorestframework时，要注意和自己的django版本对应上，不然他会自动将你本地的django给卸载掉，然后再重新安装一个和djangorestframework版本相对应的django，如果django版本过高了会导致你的mysql版本也得升，就很麻烦，所以在安装djangorestframework的时候要相对注意一下，这里我使用的是django2.2+djangorestframework 3.11.2 。

最后在配置一下数据库的环境，在settings.py里边连接上你自己的数据库就可以。

将环境配置好之后就可以写相对应的后端逻辑了。

数据库部分

在models文件中定义你自己的表结构

我创建了一个名为UserInfo的表，里边有两个字段，username和password，分别用于存储用户名和密码。

然后在终端输入这两条指令就可以在你的数据库里边建好这张表。

python manage.py makemigrations
python manage.py migrate

校验逻辑

from django.shortcuts import render
from django.contrib.auth.hashers import make_password, check_password
from rest_framework.decorators import api_view
from rest_framework.response import Response
from rest_framework import status
from app01.models import UserInfo


@api_view(['POST'])
def login(request):
    username = request.data.get('username')
    password = request.data.get('password')

    if not username or not password:
        return Response({'message': '用户名和密码不能为空'}, status=status.HTTP_400_BAD_REQUEST)

    try:
        user = UserInfo.objects.get(username=username)
        if check_password(password, user.password):
            return Response({'message': '登录成功'}, status=status.HTTP_200_OK)
        else:
            return Response({'message': '密码错误'}, status=status.HTTP_401_UNAUTHORIZED)
    except UserInfo.DoesNotExist:
        hashed_password = make_password(password)
        UserInfo.objects.create(username=username, password=hashed_password)
        return Response({'message': '注册成功'}, status=status.HTTP_201_CREATED)

在view.py里边写实现逻辑，将post请求体里边的数据username和password给拿出来，然后判断用户名是否在数据库里边可以获取到，如果可以则使用check_password将明文密码和数据库里边的加密密码进行比对，成功则返回http状态200，失败返回401。如果用户名不存在的话，那么就是注册了，就需要把用户名和密码写入到数据里边，然后返回注册成功。
这里使用的make_password是为了将明文密码转化为哈希加密过的密码，然后再存入数据库里边。

最后在urls.py里边加入对应的后端接口url，

到这里，就可以实现一个登录注册的功能了。

这就是一个简单的前后端分离的例子，我也是刚开始学，后边会继续改进，使用ElementPlus UI对页面进行美化。