51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1219|回复: 0
打印 上一主题 下一主题

[原创] 测开实战项目:Web平台之图书修改

[复制链接]
  • TA的每日心情
    擦汗
    前天 09:00
  • 签到天数: 1025 天

    连续签到: 4 天

    [LV.10]测试总司令

    跳转到指定楼层
    1#
    发表于 2022-11-9 10:39:39 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    在前几篇文章中,我们主要讲了开发Web平台之环境准备登录认证用户信息管理接口文档图书信息图书下架
      在本篇文章中,我们主要完成图书信息的修改,主要的任务是:
      1.豆瓣图书修改功能的后端实现
      2.豆瓣图书修改功能的前端实现
      豆瓣图书修改功能的后端实现
      其实对于后端来说,它的更新主要有PUT和PATCH两种请求类型,前者是做全量更新,后者是做部分更新。部分更新主要是为了节省带宽,这里我们使用PATCH。






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





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









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



    1. <font size="3"> <el-button type="danger" icon="el-icon-delete" @click="deleteDouBanBook(item)" circle></el-button>




    2. //新增部分

    3. <el-button type="primary" icon="el-icon-edit" @click="handleUpdate(item)" circle></el-button></font>
    复制代码




    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

    x
    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-9-28 17:30 , Processed in 0.072355 second(s), 24 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表