51Testing软件测试论坛

标题: 测开实战项目：Web平台之图书修改 [打印本页]

作者: lsekfe 时间: 2022-11-9 10:39
标题: 测开实战项目：Web平台之图书修改
在前几篇文章中，我们主要讲了开发Web平台之环境准备、登录认证、用户信息管理、接口文档、图书信息、图书下架。
　　在本篇文章中，我们主要完成图书信息的修改，主要的任务是：
　　1.豆瓣图书修改功能的后端实现
　　2.豆瓣图书修改功能的前端实现
　　豆瓣图书修改功能的后端实现
　　其实对于后端来说，它的更新主要有PUT和PATCH两种请求类型，前者是做全量更新，后者是做部分更新。部分更新主要是为了节省带宽，这里我们使用PATCH。

[attach]144687[/attach]

如果你有留意到PATCH接口，就会发现is_delete字段作为更新接口的请求参数，不应该让用户通过更新操作来决定图书的显隐逻辑，这里需要在序列化器book/serializer.py中不允许is_delete输入输出。

[attach]144688[/attach]

豆瓣图书修改功能的前端实现
　　前端修改功能的思路是，先要有一个修改的按钮，当用户点击按钮后，弹出一个表单，这个表单里要做当前图书信息的回显，表单里的内容可以手动修改，在表单底部应该有一个提交按钮，当提交表单后，会通过调用封装好的更新方法，去调用后端的部分更新接口，接口拿到正常的响应结果后，会自动刷新当前页面。
　　修改views/book/index.vue
　　可以参考一下vue-element-admin的设计和实现，点击编辑按钮的时候，弹出一个表单，实现了数据的回显。

[attach]144689[/attach]

[attach]144690[/attach]

定义一个修改的按钮，这里的按钮我使用elementui提供的按钮组件。
　　其中handleUpdate表示处理更新的方法。

<font size="3"> <el-button type="danger" icon="el-icon-delete" @click="deleteDouBanBook(item)" circle></el-button>
//新增部分
<el-button type="primary" icon="el-icon-edit" @click="handleUpdate(item)" circle></el-button></font>

复制代码

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)