Vue3+TypeScript+Django Rest Fr

发表于

本文适合对有 Python 语言有一定基础的人群，希望利用 Python 做更多有意思的事情，比如搭建个人博客，记录自己的所思所想，或者想找一个项目实践前后端分离技术等等。跟着本文可以了解和运行项目，本项目是在 Window 10 Professional 系统下开发

大家好，我是落霞孤鹜，上一篇介绍了开发博客的背景、技术栈，并介绍了如何搭建开发环境。这一篇介绍后端和前端的基础框架代码初始化，基于Django和Vue初始化项目框架代码，跑通Hello world。

一、后端框架代码搭建

后端 Python 代码通过 PyCharm 能比较快速的搭建 Django 项目，因为在 PyCharm 的专业版里面，已经内置了 Django 框架

1.1 通过 PyCharm 初始化 Django 项目

  1. 通过 pip 安装Django 包

为了更好的兼容性，我们自己安装 Django 2 版本，不采用最新版本。在命令行输入如下命令：

1
bash复制代码pip install django==2.2.23
  1. 在 PyCharm 的首屏界面，点击 New Project 对话框，在左侧选择 Django，在右侧的 Location中选择项目地址，项目命令为Blog 并将我们之前安装的 Python 路径选择为 Interpreter ，如下图：

image-20210717165800189
3. 点击Create，等待 PyCharm 执行创建。

如果选择的 Python Interpreter 环境中没有安装 Django，PyCharm 会自动安装 Django 最新版本，由于我们已经安装了Django，PyCharm 会自动使用环境中的 Django 版本

完成后左侧的导航区域会自动生成Django框架项目所需的文件，结构如下图：

image-20210717170550892

  1. 在 Pycharm 右下角点击 Terminal，通过 pip 安装 Django Rest Framework
1
bash复制代码pip install djangorestframework==3.12.4
  1. 验证框架是否可以运行

运行点击 PyCharm 右上角的运行按钮，如果正常，在PyCharm的运行控制台会打印如下信息

1
2
3
4
5
6
7
8
9
10
11
bash复制代码Performing system checks...

Watching for file changes with StatReloader
System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
July 17, 2021 - 17:42:28
Django version 2.2.23, using settings 'project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

打开 Edge 或 Chrome 浏览器，输入 http://127.0.0.1:8000，回车，如下图，说明框架搭建成功

image-20210717201616697

1.2 配置 Django Rest Framework

  1. 启用 Django Rest Framework

在 Blog 文件夹下，打开 settings.py 文件，在 INSTALLED_APPS 的 list 中增加 rest_framework

1
2
3
4
5
6
7
8
9
python复制代码INSTALLED_APPS = [
    'django.contrib.admin',  
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
]
  1. 在 settings.py 中增加 Rest Framework 的配置
1
2
3
4
python复制代码REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10
}

1.3 配置 Sqlite 数据库

  1. 在项目路径下，创建data文件夹
  2. 在 settings.py 中修改 DATABASES 中 default 下的 NAME 的值，增加 data 路径，接入如下
1
2
3
4
5
6
python复制代码DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'data/db.sqlite3'),
    }
}

1.4 调整项目结构

  1. 修改 Blog 文件夹名称为 project

通过 PyCharm 自动生成的项目结构，会自动生成一个和项目名称一样的子文件夹，为了有效的组织后端的各个模块，这里我们将自动生成的 Blog 文件夹修改为 project

操作如图：

image-20210716174351302
image-20210716174434089
点击 Refector，然后点击左下角的 Do Refector 完成修改。

image-20210716174553811
2. 在 settings.py 文件中，将 ROOT_URLCONF 中的 Blog 修改为 project

1
python复制代码ROOT_URLCONF = 'project.urls'
  1. 在 settings.py 文件中，将 TEMPLATES 中的 DIRS 的值修改为 [BASE_DIR + '/templates']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
python复制代码TEMPLATES = [    
  {        
    	'BACKEND': 'django.template.backends.django.DjangoTemplates',
    	'DIRS': [BASE_DIR + '/templates'],
    	'APP_DIRS': True,
     	'OPTIONS': {
        	'context_processors': [
            	'django.template.context_processors.debug',
            	'django.template.context_processors.request',
            	'django.contrib.auth.context_processors.auth',
            	'django.contrib.messages.context_processors.messages',
          	],
      },
  },
]
  1. 创建 common APP，在 terminal 中输入如下命令：
1
bash复制代码python manage.py startapp common
  1. 完成后，整个项目结构如下图：

image-20210717173357712

1.5 编写 User 对象的 API

  1. 在 common/models.py 中编写基础模型抽象类 AbstractBaseModel

用来帮助构建所有业务模型自动增加创建人，创建时间，修改人，修改时间

1
2
3
4
5
6
7
8
9
10
11
12
13
python复制代码from django.contrib.auth.models
import AbstractUser
from django.db import models


class AbstractBaseModel(models.Model):
    creator = models.IntegerField('creator', null=True)
    created_at = models.DateTimeField(verbose_name='Created at', auto_now_add=True)

    modifier = models.IntegerField('modifier', null=True)
    modified_at = models.DateTimeField(verbose_name='Modified at', auto_now=True)

    class Meta:
        abstract = True

其中两个属性的入参需要说明

  • auto_now_add=True 表示在新增的时候，自动将该字段的值设置为当前时间
  • auto_now=True 表示在记录更新的时候，自动设置为当前时间
  • abstract = True 表示该类是抽象类，不需要生成物理模型
  1. 在 common/models.py 中重写User类

由于我们需要在博客中记录注册用户的昵称，头像等扩展信息，因此 Django 自带的User 模型字段无法满足，所以通过集集成Django 提供的 AbstractUser 来扩展，通过Meta类中定义我们想要的表名 blog_user 。

1
2
3
4
5
6
7
python复制代码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 中设定的表名，这样不利于我们有效的识别和管理数据库中的表

  1. 在 common 下新增 serializers.py ，在serializers.py 中新增类 UserSerialiazer，继承 Rest Framework 提供的 serializers.ModelSerializer
1
2
3
4
5
6
7
8
python复制代码from rest_framework import serializers
from common.models import User


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'avatar', 'email', 'is_active', 'created_at',  'nickname']

这里定义需要在 API 接口中出现的字段，包括新增、修改、查询接口字段。

  1. 在 common/views.py 文件中，编写 UserViewSet 类，继承 Rest Framework 提供的 viewsets.ModelViewSet
1
2
3
4
5
6
7
8
python复制代码from rest_framework import viewsets, permissions
from common.models import User
from common.serializers import UserSerializer

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all().order_by('username')
    serializer_class = UserSerializer
    permission_classes = [permissions.AllowAny]

这里只需要 Override 三个类属性，查询集合 queryset、序列器类 serialiazer_class，权限校验 permission_classes。

我们这里设置权限校验为 AllowAny，表示这个对象下的接口可以不用登录就可以访问，这么做的目的是为了下面测试接口的连通性。

  1. 修改 project/settings.py 配置

在 INSTALL_APPS 中增加 common

1
2
3
4
5
6
7
8
9
10
python复制代码INSTALLED_APPS = [
    'django.contrib.admin',  
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
  	'common',
]

新增一行代码，定义User 鉴权对应的模型，因为我们改写的默认的 User 表

1
2
python复制代码# User
AUTH_USER_MODEL = 'common.User'
  1. 定义 API 路由规则

在 common 下新增urls.py 中，并增加如下代码，这里需要定义 app_name = 'common'，用于路由 Rest Framework 区别路由

1
2
3
4
5
6
7
8
9
10
11
12
python复制代码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)),
]

在 project/url 中引入 common APP中的路由，并加入 Rest Framework 用户鉴权路由api-auth/

1
2
3
4
5
6
7
8
python复制代码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'))
]

1.6 模型迁移和配置

  1. 通过Django 做模型迁移

在 PyCharm 提供的 Terminal 中输入如下命令，完成模型创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
bash复制代码python manage.py makemigrations
# Migrations for 'common':
#  common\migrations\0001_initial.py
#    - Create model User
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 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
  1. 配置数据库管理工具

这个时候，可以在 data 文件下看到生成的 Sqlite 数据库文件 db.sqlite3，和我们在 project/settings.py 的 DATABASE 中定义的名称一致。

image-20210717200523546

双击这个文件，PyCharm 会自动在右侧的 Database 工具类中创建一个 Sqlite 的数据库记录。点击下图中表红的按钮，进入数据库配置页面。

image-20210717195549453

点击下方的 Download missing driver files，下载 Sqlite 驱动，修改 name 为 blog，在Schemas 标签页中，勾选 All shemas，点击确定。

image-20210717195453923

然后右侧就出现了我们刚刚通过 migrate 命令生成的表：

image-20210717200126701

标红的表就是我们在 common/models.py 中定义的 User 类映射出来的表，其他的表是 Django 框架内置的表，主要用在管理权限，Session，日志等。

1.7 创建管理员账号

这里通过 Django 自带的命令完成管理员账号的创建，在 PyCharm 提供的 Terminal 中，输入如下命令：

1
2
3
4
bash复制代码python manage.py createsuperuser --email admin@example.com --username blog-admin
# Password:
# Password (again):
# Superuser created successfully.

依据提示输入密码 12345678.Abc，确认输入密码，回车，完成管理员账号的创建

1.8 测试API

  1. 点击 PyCharm 右上角的运行按钮

image-20210717201808127

  1. 打开浏览器，在地址栏中输入 http://127.0.0.1:8000/

看到如下界面，说明API配置已经成功

image-20210717201333539

  1. 测试用户查询接口

点击上图中的 http://127.0.0.1:8000/user/

1
2
3
4
5
6
7
8
json复制代码HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

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

得到如下图界面，说明接口已经完全编写成功，恭喜你，记得给你自己一个大拇指哦

image-20210717201959887

1.9 Django Rest Framework 官方英文示例教程

1
http复制代码https://www.django-rest-framework.org/tutorial/quickstart/

二、前端框架代码搭建

在介绍篇，我们已经安装了 Vite，这里我们就通过 Vite 来初始化 Vue 的项目

2.1 通过 Vite 初始化 Vue 项目

  1. 在 C:\Users\Administrator 路径下，创建文件夹 VSCodeProjects
1
2
bash复制代码cd C:\Users\Administrator
mkdir VSCodeProjects
  1. 在 VscodeProjects 文件夹下创建 blog 项目
1
2
bash复制代码cd VSCodeProjects
yarn create vite blog --template vue-ts
  1. 用 VS Code 项目

打开 C:\Users\Administrator\VSCodeProjects\Blog 文件夹，可以看到，通过 Vite 模板，已经帮我们生成好了所有基础文件，包括 TypeScript 相关的依赖和 shims 文件。

image-20210717223043228

2.2 依赖安装

  1. 安装 Less 依赖

这里的 -D 参数表示是在开发阶段的依赖，上线运行时不需要该依赖。

1
bash复制代码yarn add less@4.1.1 -D
  1. 安装 Element-Plus 依赖
1
bash复制代码yarn add element-plus
  1. 安装基础依赖，并运行

在 VS Code 中，通过快捷键 Ctrl + J 打开 Terminal，输入如下命令：

1
2
3
4
5
6
7
8
9
10
11
bash复制代码yarn
yarn dev
# yarn run v1.22.10
# warning package.json: No license field
# $ vite
# [vite] Optimizable dependencies detected:
# vue
# 
#   Dev server running at:
#   > Network:  http://192.168.2.14:3000/
#   > Local:    http://localhost:3000/
  1. 在浏览器中输入地址 http://localhost:3000/， 效果如下

image-20210717223231841

三、前后端代码联调

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

3.1 配置 Axios

  1. 安装 Axios ，在 VS Code 的Terminal 中执行命令
1
bash复制代码yarn add axios
  1. 配置 vite.config.ts

在项目根目录下，修改 vite.config.ts，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
typescript复制代码import vue from '@vitejs/plugin-vue'
import {defineConfig} from 'vite'


export default defineConfig({
    plugins: [
        vue(),
     ],

    base: '/',

    server: {
        host: "localhost",
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8000/',
                changeOrigin: true,
                ws: false,
                rewrite: (pathStr) => pathStr.replace('/api', ''),
                timeout: 5000,
            },
        },
    }
});
  1. 配置 Axios 实例

在 src 目录下，新建文件夹 api，在 api 下新建文件 index.ts，编写如下代码：

1
2
3
4
5
6
7
typescript复制代码import axios, {AxiosRequestConfig, AxiosResponse} from "axios";

const request = axios.create({
    baseURL: import.meta.env.MODE !== 'production' ? '/api' : '',
})

export default request;
  1. 编写请求接口的代码

在 api 下新建文件 service.ts，编写如下代码：

1
2
3
4
5
6
7
8
9
typescript复制代码import request from "./index";

export function getUserList(params: any) {
    return request({
        url: '/user/',
        method: 'get',
        params,
    })
}

3.2 创建用户列表页面

修改在 src 下创建 App.vue ，在文件里面编写如下代码，获取用户列表的接口调用，调用后得到的数据加载到表格中展示，同时通过分页展示列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
vue复制代码<template>
  <div>
    <div>
      <el-table
        :data="state.userList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" prop="id" width="80" />
        <el-table-column label="账号" prop="username" width="200" />
        <el-table-column label="昵称" prop="nickname" width="200" />
        <el-table-column label="状态" prop="is_active" />
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        :page-size="10"
        :total="state.total"
        background
        layout="prev, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { getUserList } from "./api/service";

export default defineComponent({
  name: "App",
  setup: function () {
    const state = reactive({
      userList: [],
      params: {
        page: 1,
        page_size: 10,
      },
      total: 0,
    });

    const handleSearch = async (): Promise<void> => {
      try {
        const data: any = await getUserList(state.params);
        state.userList = data.data.results;
        state.total = data.data.count;
      } catch (e) {
        console.error(e);
      }
    };

    handleSearch();
    return {
      state,
      handleSearch,
    };
  },
});
</script>

<style scoped>
.pagination {
  text-align: right;
  margin-top: 12px;
}
</style>

3.3 配置 Router

  1. 安装 vue-router ，在 VS Code 的Terminal 中执行命令
1
bash复制代码yarn add vue-router@next
  1. 配置 route

在项目 src 目录下面新建 route 目录，并添加 index.ts 文件，文件中添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
typescript复制代码import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
import App from "../App.vue";

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "User",
        component: App,
        meta: {}
    },
]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});


export default router;

3.4 调整 main.ts

增加 Element-Plus的组件，加载 router，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
typescript复制代码import { createApp } from 'vue'
import App from './App.vue'
import router from "./route";
import {
    ElPagination,
    ElTable,
    ElTableColumn
} from 'element-plus';

const app = createApp(App)

app.component(ElTable.name, ElTable);
app.component(ElTableColumn.name, ElTableColumn);
app.component(ElPagination.name, ElPagination);


app.use(router).mount('#app')

3.5 测试界面

  1. 在 PyCharm 中启动后端服务
  2. 在 VS Code 中启动前端
1
bash复制代码yarn dev
  1. 在浏览器中输入http://127.0.0.1:8080 得到如下效果

image-20210718175955373

到这一步，我们已经完成了前后端联调，第一个接口已经通过界面方式完成调用和数据展示，给自己一个赞哦。

四、代码纳入Git 版本管理

还记得我们在第一篇文章中创建的代码仓库吧，现在我们要把刚刚创建的前端代码和后台代码提交到代码仓库中。

这里以后端为例，我之前是在Gitee上创建了一个公开仓库：https://gitee.com/Zhou_Jimmy/blog-backend.git，现在就把后端代码提交到这个仓库中。

命令在 PyCharm 提供的 Terminal 中输入

4.1 配置本地的 git 信息

1
2
bash复制代码git config --global user.name "Zhou_Jimmy"
git config --global user.email "331352343@qq.com"

在设置的时候记得修改成你自己的名字和邮箱哦

4.2 本地代码初始化git

1
2
3
bash复制代码git init
# Initialized empty Git repository in C:/Users/Administrator/PycharmProjects/Blog/.git/
git remote add origin https://gitee.com/Zhou_Jimmy/blog-backend.git

在设置的时候，记得修改成你自己的仓库地址

4.3 拉取远程仓库上的代码

1
bash复制代码git pull origin master

4.4 建立忽略文件

在项目根路径下增加或编辑 .gitignore 文件，忽略不用加入到版本管理的文件，文件中的内容可以参考 Gitee 或 GitHub 提供的模板，这里主要增加 PyCharm 配置信息的文件夹

1
ini复制代码.idea

如果是前端代码，则增加这么一行

1
ini复制代码.vscode

4.5 提交代码

4.5.1 通过 Git 命令提交

可以通过如下命令完成提交，最后需要你输入仓库账号和密码，完成后，代码就提交到了远程仓库了。

1
2
3
bash复制代码git add .
git commit -m "Django框架初始化代码提交"
git push origin master

4.5.2 通过 PyCharm 界面功能提交

可以点击 PyCharm 右上角的提交按钮

image-20210717205924922

点击后，左侧出现提交文件选择框，勾选文件，并填写comment，点击 Commit and Push 按钮，完成提交。

image-20210717210041771

后端提交完成后，远程仓库效果如下：

image-20210717210532928

前端提交完成后，远程仓库效果如下：

image-20210718181424047

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%