2021-11-24_学习B站Spring Boot+vue项目step008_查询结果的前端数据渲染、编辑

今天完成查询结果的前端数据渲染、编辑。

前端数据渲染：

load() {
      request.get("/api/user", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

4.3 编辑

后端方法：

/**
     * 注解@PutMapping用来更新
     */
    @PutMapping
    public Result<?> update(@RequestBody User user){
        userService.updateById(user);
        return Result.success();
    }

前端代码：

<el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)"
          >编辑</el-button
          >
        </template>
      </el-table-column>

handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },

save() {
      if (this.form.id) {
        // 更新
        request.put("/api/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            ElMessage({
              type: "success",
              message: "更新成功"
            })
          } else {
            ElMessage({
              type: "error",
              message: res.msg
            })
          }
          this.load() // 刷新表格数据
          this.dialogVisible = false
        })
      } else {
        // 新增
        request.post("/api/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            ElMessage({
              type: "success",
              message: "新增成功"
            })
          } else {
            ElMessage({
              type: "error",
              message: res.msg
            })
          }
          this.load() // 刷新表格数据
          this.dialogVisible = false
        });
      }
    },

目前学习到视频P3的50:58。接下来学习当前页及每页个数这两个修改时触发刷新表格相关及删除。