本节课程,你将依照在task02中编写的用户管理接口规范,实现用户管理相关后端接口及前端界面。
该章节你将学习实现接口所涉及的代码。
在task01课程中,你已熟悉User
这个Model类。按照需求,需要扩展用户相关属性。
如期望增加学校字段school
,可以在User
该类中添加相关属性(文件路径backend/core/models.py
):
# 已定义属性
school = models.CharField(_('school'), max_length=64, blank=True)
objects = UserManager()
保存文件后,你将能看到命令行中展示如下信息:
该信息表明Django识别到文件发生变动,并重新加载了变动。这时再次访问接口 http://127.0.0.1:8000/api/v1/me将会看到如下错误信息:
这是因为我们新增了字段,但是还没有处理数据。通过Ctrl+C
停掉后端接口进程,然后执行下面命令可以处理数据库相关事项:
python manage.py makemigrations
- 生成migration脚本python manage.py migrate
- 执行migration脚本
执行结果如下:
生成的migration脚本可以在应用目录下面的migrations文件夹中找到。最终我们通过访问数据,
可以发现数据库中core_user
这个用户表新增一列school
,如下:
至此数据库相关的修改已完成。
通过python manage.py runserver
重新启动服务后,再次访问
http://127.0.0.1:8000/api/v1/me,会发现结果中
并没有school
属性:
{
"data": {
"id": 1,
"email": "[email protected]",
"phone": "",
"nickname": "",
"date_joined": "2021-01-25T03:28:09.214616Z",
"last_login": "2021-04-27T06:22:06.690042Z",
"last_login_ip": "127.0.0.1",
"description": "",
"groups": []
},
"code": 0
}
原因是我们还需处理序列化相关的代码,增加这部分的序列化配置。文件路径为backend/core/serializers.py
,
类为UserSerializer
。通过定义该类中Meta
类的fields
属性,我们可以添加我们需要序列化的字段。
添加school
项,并刷新页面http://127.0.0.1:8000/api/v1/me,
观察返回的结果数据。
至此序列化相关的修改已完成。
要新增用户管理相关后端接口实现,我们需要创建APIView
并在urls.py
中添加URL路由至APIView的映射。
APIView
是一种特殊的类,Django将REST接口相关的增删改查的操作(HTTP Method)映射为APIView
类中对应的方法:
- 查询列表或单个数据项 -
get -> retrieve
- 新增 -
post -> create
- 修改 -
put -> update
&patch -> partial_update
- 删除 -
delete -> destroy
如果需要对特定的接口做特殊的处理,可以通过Override
实际处理函数进行处理,具体示例可以参考backend/blog/views.py
中的处理(该示例中使用非自增的id作为主键,而是使用生成uuid的方式作为主键):
class ArticleListCreateView(BasicListCreateAPIView):
permission_classes = [IsAuthenticated|ReadOnly]
serializer_class = ArticleSerializer
queryset = Article.objects.all()
def create(self, request, *args, **kwargs):
data = request.data
data['id'] = shortuuid.uuid()
serializer = self.get_serializer(data=data)
serializer.is_valid(raise_exception=True)
self.perform_create(serializer)
headers = self.get_success_headers(serializer.data)
return Response(
{
'data': serializer.data,
'code': 0,
},
status=status.HTTP_201_CREATED, headers=headers
)
def perform_create(self, serializer):
serializer.save(author=self.request.user)
class ArticleDetailView(BasicRetrieveUpdateDestroyAPIView):
permission_classes = [IsAuthenticated|ReadOnly]
serializer_class = ArticleSerializer
queryset = Article.objects.all()
最后在backend/bluewhale/urls.py
中,对所要的接口路径进行URL与APIView的映射,如:
path(f'{api_prefix}/articles', ArticleListCreateView.as_view(), name='articles'),
path(f'{api_prefix}/articles/<pk>', ArticleDetailView.as_view(), name='article'),
至此接口及View处理完毕。
在本次课程中,我们需要将我们编写的代码上传至服务端并运行(服务器用户及密码等信息由助教提供)。
在clone的项目根目录,运行如下命令:
export USER=team00 # 替换成助教提供的用户名
export HOST=127.0.0.1 # 替换成助教提供的服务器地址
rsync -avzh --delete --exclude=*.pyc --exclude=.venv --exclude=.idea --exclude=.env \
--exclude=.git --exclude=__pycache__ \
backend $USER@$HOST:
该命令将后端代码目录同步至远程服务器中。登录到远程服务器,在用户主目录下将看到backend
文件夹,
其中为后端代码。参考课程task00中环境搭建-后端服务的部分,初始化后端项目db及用户
(远程服务器中已经安装了Python3.8环境,MySQL数据库,并初始化了MySQL的用户,相关步骤可以略过)
最终运行时,运行下列命令(PORT已在环境变量中指定):
python manage.py runserver 127.0.0.1:$PORT
在clone的项目子目录client
,编译前端文件,然后同步至服务端:
npm run build # 编译前端代码
export USER=team00 # 替换成助教提供的用户名
export HOST=127.0.0.1 # 替换成助教提供的服务器地址
rsync -avzh dist $USER@$HOST:/usr/share/caddy/$USER
该命令将编译后的前端代码目录dist
同步至远程服务器中。
依次安装xshell和xftp
打开xshell并新建连接
在工具栏点击绿色按钮打开文件传输工具xftp
弹出文件夹预览页面(左侧为本地路径,右侧为服务器路径)
如果文件夹路径不一致,可以先cd到backend或其他对应目录再打开xftp
确定两边目录一致后,点击下方的传输按钮进行文件夹同步
也可以将左侧的目录直接拖拽到右侧进行覆盖
如果同步前端代码则注意调整相应的文件目录,方法同backed
部署完成后,打开浏览器输入服务器地址,你将能看到实现的界面。