手把手教你做测开：开发Web平台之图书修改

在本篇文章中，我们主要完成图书信息的修改，主要的任务是：

1.豆瓣图书修改功能的后端实现

2.豆瓣图书修改功能的前端实现

豆瓣图书修改功能的后端实现

其实对于后端来说，它的更新主要有PUT和PATCH两种请求类型，前者是做全量更新，后者是做部分更新。部分更新主要是为了节省带宽，这里我们使用PATCH。

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

豆瓣图书修改功能的前端实现

前端修改功能的思路是，先要有一个修改的按钮，当用户点击按钮后，弹出一个表单，这个表单里要做当前图书信息的回显，表单里的内容可以手动修改，在表单底部应该有一个提交按钮，当提交表单后，会通过调用封装好的更新方法，去调用后端的部分更新接口，接口拿到正常的响应结果后，会自动刷新当前页面。

修改views/book/index.vue

可以参考一下vue-element-admin的设计和实现，点击编辑按钮的时候，弹出一个表单，实现了数据的回显。

定义一个修改的按钮，这里的按钮我使用elementui提供的按钮组件。

其中handleUpdate表示处理更新的方法。

 <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>
1
2
3
4

因为点击按钮后，触发handleUpdate需要弹出表单，因此需要定义编辑页面的表单。需要解释以下几点：

temp：这个表单里的字段和前端展示的字段是一致的，它的字段保存在temp这个临时对象里，并且做了双向绑定，当我们在页面修改某个字段时，temp里的字段值会同步更新。

:visible.sync：通过dialogFormVisible来控制表单的显隐，默认应该是false表示隐藏，当点击修改按钮后，应该将dialogFormVisible置为true，显示在前端，当点击Cancel和Comfirm按钮后，也应该将表单隐藏。

 <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getDouBanBookList" />


//新增部分
<el-dialog title="Edit" :visible.sync="dialogFormVisible">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
      <el-form-item label="书名" prop="title">
        <el-input v-model="temp.title" />
      </el-form-item>
      <el-form-item label="评分" prop="score">
        <el-input v-model="temp.score" />
      </el-form-item>
      <el-form-item label="出版信息" prop="publish_detail">
        <el-input v-model="temp.publish_detail" />
      </el-form-item>
      <el-form-item label="简介" prop="slogan">
        <el-input v-model="temp.slogan" />
      </el-form-item>
      <el-form-item label="图片链接" prop="img_src">
        <el-input v-model="temp.img_src" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        Cancel
      </el-button>
      <el-button type="primary" @click="updateDouBanBook">
        Confirm
      </el-button>
    </div>
  </el-dialog>
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

在data中定义temp和初始数据，可以都定义为undefined，定义dialogFormVisible为false。

   data() {
    return {
        statisticsData: {
          article_count: 1024,
          pageviews_count: 1024
          },
        bookInfo: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 2
        },
        //新增部分
        temp: {
          id: undefined,
          title: undefined,
          score: undefined,
          publish_detail: undefined,
          slogan: undefined,
          img_src: undefined,
        },
        dialogFormVisible: false,

    }
  },
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

在methods中定义handleUpdate方法，点击编辑按钮后，会弹出回显的表单，回显的方法是通过将每个图书对象item中和临时对象temp中元素相同的部分拷贝到temp中，然后将dialogFormVisible置为true，让表单出现。

 handleUpdate(item) {
  this.temp = Object.assign({}, item)
  this.dialogFormVisible = true
},
1
2
3
4

在methods中定义updateDouBanBook方法，这个方法通过调用douban-book.js中封装好的updateDouBanBookAPI方法来实现更新操作（需要注意的是，这里我还没在douban-book.js中定义该方法，只是提前将方法调用写在这里）。

调用更新方法后，需要将dialogFormVisible置为false，关闭表单弹窗。然后通过使用elementui中的通知组件，给出一个更新成功的提示。

最后，通过调用this.reload()来实现页面的自动刷新。

 updateDouBanBook() {
  DouBanBook.updateDouBanBookAPI(this.temp.id, this.temp)
    .then(res => {
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: '更新成功!',
          type: 'success',
          duration: 2000
        })
        this.reload()
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13

修改api/douban-book.js

和之前定义的方法一样，这里直接定义一个updateDouBanBookAPI，需要注意的是后端部分更新的接口需要传两个值，一个是路径参数id，一个是更新数据。

export function updateDouBanBookAPI(id, data) {
  return request({
    url: `/douban/book/${id}/` ,
    method: 'patch',
    data
  })
}
1
2
3
4
5
6
7

测试图书修改功能

点击修改。

修改图书信息，点击Confirm。

页面自动刷新后，加载到最新的数据。

---

资源分享

下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码，朋友们如果需要可以自行免费领取 【保证100%免费】