本文适合对有
Python语言有一定基础的人群，希望利用Python做更多有意思的事情，比如搭建个人博客，记录自己的所思所想，或者想找一个项目实践前后端分离技术等等。跟着本文可以了解和运行项目，本项目是在Window 10 Professional系统下开发
大家好，我是落霞孤鹜，上一篇介绍了开发博客的背景、技术栈，并介绍了如何搭建开发环境。这一篇介绍后端和前端的基础框架代码初始化，基于Django和Vue初始化项目框架代码，跑通Hello world。
一、后端框架代码搭建
后端 Python 代码通过 PyCharm 能比较快速的搭建 Django 项目，因为在 PyCharm 的专业版里面，已经内置了 Django 框架
1.1 通过 PyCharm 初始化 Django 项目
- 通过
pip安装Django包
为了更好的兼容性，我们自己安装 Django 2 版本，不采用最新版本。在命令行输入如下命令：
pip install django==2.2.23
- 在
PyCharm的首屏界面，点击New Project对话框，在左侧选择Django，在右侧的Location中选择项目地址，项目命令为Blog并将我们之前安装的Python路径选择为Interpreter，如下图：
- 点击Create，等待
PyCharm执行创建。
如果选择的
Python Interpreter环境中没有安装Django，PyCharm会自动安装Django最新版本，由于我们已经安装了Django，PyCharm会自动使用环境中的Django版本
完成后左侧的导航区域会自动生成Django框架项目所需的文件，结构如下图：
- 在
Pycharm右下角点击Terminal，通过pip安装Django Rest Framework
pip install djangorestframework==3.12.4
- 验证框架是否可以运行
运行点击 PyCharm 右上角的运行按钮，如果正常，在PyCharm的运行控制台会打印如下信息
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，回车，如下图，说明框架搭建成功
1.2 配置 Django Rest Framework
-
启用
Django Rest Framework在
Blog文件夹下，打开settings.py文件，在INSTALLED_APPS的list中增加rest_frameworkINSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', ] 在
settings.py中增加Rest Framework的配置
REST_FRAMEWORK = {
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'PAGE_SIZE': 10
}
1.3 配置 Sqlite 数据库
- 在项目路径下，创建data文件夹
- 在
settings.py中修改DATABASES中default下的NAME的值，增加data路径，接入如下
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'data/db.sqlite3'),
}
}
1.4 调整项目结构
- 修改
Blog文件夹名称为project
通过 PyCharm 自动生成的项目结构，会自动生成一个和项目名称一样的子文件夹，为了有效的组织后端的各个模块，这里我们将自动生成的 Blog 文件夹修改为 project
操作如图：
点击 Refector，然后点击左下角的 Do Refector 完成修改。
- 在
settings.py文件中，将ROOT_URLCONF中的Blog修改为project
ROOT_URLCONF = 'project.urls'
- 在
settings.py文件中，将TEMPLATES中的DIRS的值修改为[BASE_DIR + '/templates']
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',
],
},
},
]
- 创建
commonAPP，在terminal中输入如下命令：
python manage.py startapp common
- 完成后，整个项目结构如下图：
1.5 编写 User 对象的 API
- 在
common/models.py中编写基础模型抽象类AbstractBaseModel
用来帮助构建所有业务模型自动增加创建人，创建时间，修改人，修改时间
from django.contrib.auth.models
import AbstractUserfrom 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表示该类是抽象类，不需要生成物理模型
- 在
common/models.py中重写User类
由于我们需要在博客中记录注册用户的昵称，头像等扩展信息，因此 Django 自带的User 模型字段无法满足，所以通过集集成Django 提供的 AbstractUser 来扩展，通过Meta类中定义我们想要的表名 blog_user 。
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，在serializers.py中新增类UserSerialiazer，继承Rest Framework提供的serializers.ModelSerializer
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 接口中出现的字段，包括新增、修改、查询接口字段。
- 在
common/views.py文件中，编写UserViewSet类，继承Rest Framework提供的viewsets.ModelViewSet
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，表示这个对象下的接口可以不用登录就可以访问，这么做的目的是为了下面测试接口的连通性。
- 修改
project/settings.py配置
在 INSTALL_APPS 中增加 common
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 表
# User
AUTH_USER_MODEL = 'common.User'
- 定义 API 路由规则
在 common 下新增urls.py 中，并增加如下代码，这里需要定义 app_name = 'common'，用于路由 Rest Framework 区别路由
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/
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 模型迁移和配置
- 通过
Django做模型迁移
在 PyCharm 提供的 Terminal 中输入如下命令，完成模型创建
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
- 配置数据库管理工具
这个时候，可以在 data 文件下看到生成的 Sqlite 数据库文件 db.sqlite3，和我们在 project/settings.py 的 DATABASE 中定义的名称一致。
双击这个文件，PyCharm 会自动在右侧的 Database 工具类中创建一个 Sqlite 的数据库记录。点击下图中表红的按钮，进入数据库配置页面。
点击下方的 Download missing driver files，下载 Sqlite 驱动，修改 name 为 blog，在Schemas 标签页中，勾选 All shemas，点击确定。
然后右侧就出现了我们刚刚通过 migrate 命令生成的表：
标红的表就是我们在 common/models.py 中定义的 User 类映射出来的表，其他的表是 Django 框架内置的表，主要用在管理权限，Session，日志等。
1.7 创建管理员账号
这里通过 Django 自带的命令完成管理员账号的创建，在 PyCharm 提供的 Terminal 中，输入如下命令：
python manage.py createsuperuser --email [email protected] --username blog-admin
# Password:
# Password (again):
# Superuser created successfully.
依据提示输入密码 12345678.Abc，确认输入密码，回车，完成管理员账号的创建
1.8 测试API
- 点击 PyCharm 右上角的运行按钮
- 打开浏览器，在地址栏中输入
http://127.0.0.1:8000/
看到如下界面，说明API配置已经成功
- 测试用户查询接口
点击上图中的 http://127.0.0.1:8000/user/
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept
{
"user": "http://127.0.0.1:8000/user/"
}
得到如下图界面，说明接口已经完全编写成功，恭喜你，记得给你自己一个大拇指哦
1.9 Django Rest Framework 官方英文示例教程
https://www.django-rest-framework.org/tutorial/quickstart/
二、前端框架代码搭建
在介绍篇，我们已经安装了 Vite，这里我们就通过 Vite 来初始化 Vue 的项目
2.1 通过 Vite 初始化 Vue 项目
- 在
C:\Users\Administrator路径下，创建文件夹VSCodeProjects
cd C:\Users\Administrator
mkdir VSCodeProjects
- 在
VscodeProjects文件夹下创建blog项目
cd VSCodeProjects
yarn create vite blog --template vue-ts
- 用
VS Code项目
打开 C:\Users\Administrator\VSCodeProjects\Blog 文件夹，可以看到，通过 Vite 模板，已经帮我们生成好了所有基础文件，包括 TypeScript 相关的依赖和 shims 文件。
2.2 依赖安装
- 安装
Less依赖
这里的 -D 参数表示是在开发阶段的依赖，上线运行时不需要该依赖。
yarn add [email protected] -D
- 安装
Element-Plus依赖
yarn add element-plus
- 安装基础依赖，并运行
在 VS Code 中，通过快捷键 Ctrl + J 打开 Terminal，输入如下命令：
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/
- 在浏览器中输入地址
http://localhost:3000/， 效果如下
三、前后端代码联调
前后端联调时，需要先在前端配置路由，Vite 代理，Axios 网络请求。
3.1 配置 Axios
- 安装
Axios，在 VS Code 的Terminal 中执行命令
yarn add axios
- 配置
vite.config.ts
在项目根目录下，修改 vite.config.ts，代码如下：
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,
},
},
}
});
- 配置
Axios实例
在 src 目录下，新建文件夹 api，在 api 下新建文件 index.ts，编写如下代码：
import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
const request = axios.create({
baseURL: import.meta.env.MODE !== 'production' ? '/api' : '',
})
export default request;
- 编写请求接口的代码
在 api 下新建文件 service.ts，编写如下代码：
import request from "./index";
export function getUserList(params: any) {
return request({
url: '/user/',
method: 'get',
params,
})
}
3.2 创建用户列表页面
修改在 src 下创建 App.vue ，在文件里面编写如下代码，获取用户列表的接口调用，调用后得到的数据加载到表格中展示，同时通过分页展示列表。
3.3 配置 Router
- 安装
vue-router，在 VS Code 的Terminal 中执行命令
yarn add vue-router@next
- 配置
route
在项目 src 目录下面新建 route 目录，并添加 index.ts 文件，文件中添加以下内容
import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
import App from "../App.vue";
const routes: Array = [
{
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，代码如下：
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 测试界面
- 在 PyCharm 中启动后端服务
- 在 VS Code 中启动前端
yarn dev
- 在浏览器中输入
http://127.0.0.1:8080得到如下效果
到这一步，我们已经完成了前后端联调，第一个接口已经通过界面方式完成调用和数据展示，给自己一个赞哦。
四、代码纳入Git 版本管理
还记得我们在第一篇文章中创建的代码仓库吧，现在我们要把刚刚创建的前端代码和后台代码提交到代码仓库中。
这里以后端为例，我之前是在Gitee上创建了一个公开仓库：https://gitee.com/Zhou_Jimmy/blog-backend.git，现在就把后端代码提交到这个仓库中。
命令在 PyCharm 提供的 Terminal 中输入
4.1 配置本地的 git 信息
git config --global user.name "Zhou_Jimmy"
git config --global user.email "[email protected]"
在设置的时候记得修改成你自己的名字和邮箱哦
4.2 本地代码初始化git
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 拉取远程仓库上的代码
git pull origin master
4.4 建立忽略文件
在项目根路径下增加或编辑 .gitignore 文件，忽略不用加入到版本管理的文件，文件中的内容可以参考 Gitee 或 GitHub 提供的模板，这里主要增加 PyCharm 配置信息的文件夹
.idea
如果是前端代码，则增加这么一行
.vscode
4.5 提交代码
4.5.1 通过 Git 命令提交
可以通过如下命令完成提交，最后需要你输入仓库账号和密码，完成后，代码就提交到了远程仓库了。
git add .
git commit -m "Django框架初始化代码提交"
git push origin master
4.5.2 通过 PyCharm 界面功能提交
可以点击 PyCharm 右上角的提交按钮
点击后，左侧出现提交文件选择框，勾选文件，并填写comment，点击 Commit and Push 按钮，完成提交。
后端提交完成后，远程仓库效果如下：
前端提交完成后，远程仓库效果如下：