【前端VUE】Vue3+TypeScript+Django Rest Framework-环境准备-CSDN博客

本文链接：https://blog.csdn.net/qq_33530840/article/details/140019509

开发环境搭建

需要用到的环境如下：

* Python 3.7.7
* Node.js v20.4.0
* NPM 9.7.2
* Yarn 1.22.21
* Git 2.40.1.windows.1

前端环境安装

1、下载安装Node.js,下载链接

https://nodejs.org/dist/v14.17.3/node-v14.17.3-x86.msi

2、安装Node.js时自动安装了npm
查看版本信息

C:\Users\Administrator>node -v
v20.4.0
C:\Users\Administrator>npm -v
9.7.2

3、NPM 全换淘宝镜像源，加速依赖安装速度

npm config set registry https://registry.npm.taobao.org
npm config get registry #查看镜像源
#https://registry.npm.taobao.org/

4、安装Yarn，并切换淘宝源

C:\Users\Administrator>npm install -g yarn

added 1 package in 3s
C:\Users\Administrator>yarn -version
1.22.21

yarn config set registry https://registry.npm.taobao.org/
# yarn config v1.22.10
# success Set "registry" to "https://registry.npm.taobao.org/".
# Done in 0.13s.
yarn config get registry
# https://registry.npm.taobao.org/

5、安装Vite

yarn global add create-vite-app

6、代码仓库准备
下载安装

https://git-scm.com/download/win

C:\Users\Administrator>git -v
git version 2.40.1.windows.1

初始前后端代码

搭建后端代码

直接使用Pycharm生成Django项目
成功创建django项目
点击创建后自动下载django模块。版本为3.2.23
启动Django项目，点击Pycharm右上角启动，也可以通过命令行python manage.py runserver 8002启动
添加Django Rest Frameworkpip install djangorestframework
也可以指定版本

pip install djangorestframework==3.12.4

注册模块，在项目目录下setting.py中INSTALLED_APPS 添加

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'common.apps.CommonConfig',
    'rest_framework',
    ]

添加分页配置

REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10
}

本次项目采用sqlite数据库，可以指定sqlite目录。
也可以配置mysql数据库，根据项目需求

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'data/db.sqlite3'),
    }
}

编写User对象的API

在common/models.py中添加如下代码

from django.db import models
from django.contrib.auth.models import AbstractUser

# Create your models here.
class AbstractBaseModel(models.Model):
    creator = models.IntegerField('创建人', null=True)
    created_at = models.DateTimeField(verbose_name='创建人时间', auto_now_add=True)  #新增时的时间

    modifier = models.IntegerField('修改人', null=True)
    modified_at = models.DateTimeField(verbose_name='修改时间', auto_now=True)  #更新时候的时间

    class Meta:
        abstract = True  #表示该类是抽象类，不需要生成物理模型

'''
扩展Django自带的User模型，集成AbstractUser类来扩展
AbstractBaseUser：基础的User模型类
PermissionsMixin：权限类

AbstractUser默认拥有的字段
username：用户名。150个字符以内。可以包含数字和英文字符，以及_、@、+、.和-字符。不能为空，且必须唯一！
first_name：外国人的first_name，在30个字符以内。可以为空。
last_name：外国人的last_name，在150个字符以内。可以为空。
email：邮箱。可以为空。
password：密码。经过哈希过后的密码。(父类AbstractBaseUser的属性)
groups：分组。一个用户可以属于多个分组，一个分组可以拥有多个用户。groups这个字段是跟Group的一个多对多的关系。(父类PermissionsMixin的属性)
user_permissions：权限。一个用户可以拥有多个权限，一个权限可以被多个用户所有用。和Permission属于一种多对多的关系。(父类PermissionsMixin的属性)
is_staff：是否可以进入到admin的站点。代表是否是员工
is_active：是否是可用的。对于一些想要删除账号的数据，我们设置这个值为False就可以了，而不是真正的从数据库中删除。
is_superuser：是否是超级管理员。如果是超级管理员，那么拥有整个网站的所有权限。(父类PermissionsMixin的属性)
last_login：上次登录的时间。(父类AbstractBaseUser的属性)
date_joined：账号创建的时间。
'''
class User(AbstractUser, AbstractBaseModel):
    avatar = models.CharField('头像', max_length=1000, blank=True)
    nickname = models.CharField('昵称', null=True, blank=True, max_length=200)  #可以为空

    class Meta(AbstractUser.Meta):
        db_table = 'blog_user'  # 自定义表名
        swappable = 'AUTH_USER_MODEL'  #    Django 身份验证系统中的用户由该模型

在common目录下新建serializers.py，添加如下代码：

from rest_framework import serializers
from common.models import User

class UserSerializer(serializers.ModelSerializer):
    """
    这里定义需要在 API 接口中出现的字段，包括新增、修改、查询接口字段。
    """
    class Meta:
        model = User
        fields = ['id', 'username', 'avatar', 'email', 'is_active', 'created_at',  'nickname']

在common/views.py中添加如下代码

from rest_framework import viewsets, permissions
from common.models import User
from common.serializers import UserSerializer

class UserViewSet(viewsets.ModelViewSet):
    """
    查询集合 queryset
    序列器类 serialiazer_class
    权限校验 permission_classes
    """
    queryset = User.objects.all().order_by('username')
    serializer_class = UserSerializer
    permission_classes = [permissions.AllowAny]  #permissions.AllowAny表示该接口不需要登录即可访问

在common/urls.py中添加如下代码

from rest_framework import routers
from django.urls import include, path
from common import views

router = routers.DefaultRouter()
router.register('user', views.UserViewSet)

app_name = 'common'

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

在test01blog/urls.py中添加如下代码

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('common.urls', namespace='common')),
    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

数据库迁移

(venv) PS C:\Users\Administrator\Desktop\test01blog> python manage.py makemigrations
Migrations for 'common':
  common\migrations\0001_initial.py
    - Create model User
(venv) PS C:\Users\Administrator\Desktop\test01blog> python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, common, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0001_initial... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying common.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying sessions.0001_initial... OK

查看数据库内容

原基础上新增的列

添加用户

(venv) PS C:\Users\Administrator\Desktop\test01blog> python manage.py createsuperuser
Username: admin
Email address: 1@qq.com
Password: 
Password (again):
This password is too short. It must contain at least 8 characters.
This password is too common.
This password is entirely numeric.
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.

运行Djnago项目

访问http://127.0.0.1:8002/

HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "user": "http://127.0.0.1:8002/user/"
}

访问user接口：http://127.0.0.1:8002/user

HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "username": "admin",
            "avatar": "",
            "email": "1@qq.com",
            "is_active": true,
            "created_at": "2023-11-24T07:12:17.811122Z",
            "nickname": null
        }
    ]
}

搭建前端代码

通过Vite初始化Vue项目

创建文件夹VSCodeProjects，再用VSCode打开文件夹新建blog项目

yarn create vite blog --template vue-ts

通过 Vite 模板，已经帮我们生成好了所有基础文件，包括 TypeScript 相关的依赖和 shims 文件

PS C:\Users\Administrator\Desktop\VSCodeProjects> yarn create vite blog --template vue-ts
yarn create v1.22.21
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@5.0.0" with binaries:
      - create-vite
      - cva
[##########] 10/10
Scaffolding project in C:\Users\Administrator\Desktop\VSCodeProjects\blog...

Done. Now run:

  cd blog
  yarn
  yarn dev

Done in 1.23s.

安装依赖

yarn add less@4.1.1 -Dyarn add element-plus element-plus框架yarn add axios axios前后端联通
可以查看package.json文件查看是否安装成功
启动Vue项目

cd blog
  yarn
  yarn dev

yarn dev --host=127.0.0.1

VITE v5.0.2  ready in 488 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  press h + enter to show help

前后端代码联调

前后端联调时，需要先在前端配置路由，Vite 代理，Axios 网络请求。