SpringBoot + Vue项目（显示+删除+回显家居）

文章目录

- 1.显示家居信息
- - - [1.com/sun/furn/controller/FurnController.java 添加方法](#1.com/sun/furn/controller/FurnController.java 添加方法)
    - 2.postman测试
    - [3.src/views/HomeView.vue 修改el-table 并清空数据池tableData](#3.src/views/HomeView.vue 修改el-table 并清空数据池tableData)
    - [4.src/views/HomeView.vue 发送请求并取出数据](#4.src/views/HomeView.vue 发送请求并取出数据)
    - [5.src/utils/request.js 添加response 拦截器，对返回结果拦截，统一处理](#5.src/utils/request.js 添加response 拦截器，对返回结果拦截，统一处理)
    - [6.src/views/HomeView.vue 修改取数据方式](#6.src/views/HomeView.vue 修改取数据方式)
    - [7.src/views/HomeView.vue 添加家居之后刷新家居信息](#7.src/views/HomeView.vue 添加家居之后刷新家居信息)
- 2.修改家居
- - - 1.需求分析
    - 2.思路分析
    - 3.后端实现
    - - [1.com/sun/furn/controller/FurnController.java 添加方法](#1.com/sun/furn/controller/FurnController.java 添加方法)
      - 2.postman测试
    - 4.前端实现
    - - [1.src/views/HomeView.vue 点击编辑回显表单数据](#1.src/views/HomeView.vue 点击编辑回显表单数据)
      - 1.方法池
        
        2.结果展示
      - [2.src/views/HomeView.vue 修改家居](#2.src/views/HomeView.vue 修改家居)
      - [1.方法池 save方法根据form的id来判断是添加家居还是修改家居](#1.方法池 save方法根据form的id来判断是添加家居还是修改家居)
        
        2.异步问题
    - 5.结果展示
- 3.删除家居
- - - 1.需求分析
    - [2.com/sun/furn/controller/FurnController.java 添加方法](#2.com/sun/furn/controller/FurnController.java 添加方法)
    - 3.postman测试
    - 4.前端实现
    - - [1.src/views/HomeView.vue 添加确认删除提示框](#1.src/views/HomeView.vue 添加确认删除提示框)
      - [2.src/views/HomeView.vue 方法池添加方法](#2.src/views/HomeView.vue 方法池添加方法)
    - 5.结果展示

1.显示家居信息

1.com/sun/furn/controller/FurnController.java 添加方法

java 复制代码

    /*
    * 返回所有家居信息*/
    @RequestMapping("/furns")
    public Result listFurns() {
        List<Furn> list = furnService.list();
        return Result.success(list);
    }

2.postman测试

3.src/views/HomeView.vue 修改el-table 并清空数据池tableData

vue 复制代码

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column
          prop="id"
          label="ID" sortable
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="家居名" >
      </el-table-column>
      <el-table-column
          prop="maker"
          label="厂家">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="sales"
          label="销量">
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

4.src/views/HomeView.vue 发送请求并取出数据

1.方法池

js 复制代码

    // 显示家居信息
    list() {
      request.post("/api/furns").then(
          res => {
            // 将返回的json对象数据赋值给tableData
            this.tableData = res.data.data
          }
      )
    }

2.created阶段调用list方法

3.结果展示

5.src/utils/request.js 添加response 拦截器，对返回结果拦截，统一处理

js 复制代码

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        //取出返回 data 的内容
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 如果返回的是 string ,就转成 json 对象
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    }, error => {
        console.log('err' + error) // 输出错误信息
        return Promise.reject(error)
    }
)

6.src/views/HomeView.vue 修改取数据方式

7.src/views/HomeView.vue 添加家居之后刷新家居信息

2.修改家居

1.需求分析

2.思路分析

3.后端实现

1.com/sun/furn/controller/FurnController.java 添加方法

java 复制代码

    /**
     * 根据id修改家居信息
     * @param furn
     * @return
     */
    @PutMapping("/update")
    public Result update(@RequestBody Furn furn) {
        furnService.updateById(furn);
        return Result.success();
    }

2.postman测试

4.前端实现

1.src/views/HomeView.vue 点击编辑回显表单数据

1.方法池

js 复制代码

    handleEdit(row) {
      // 转换为json并且给提示框赋值
      let row_string = JSON.stringify(row);
      this.form = JSON.parse(row_string)
      //显示提示框
      this.dialogVisible = true
    }

2.结果展示

2.src/views/HomeView.vue 修改家居

1.方法池 save方法根据form的id来判断是添加家居还是修改家居

js 复制代码

    // 点击确定时触发，提交添加信息的表单
    save() {
      //根据id来区分是添加还是修改
      //添加逻辑
      if (!this.form.id) {
        request.post("/api/save", this.form).then(
            res => {
              console.log("res", res)
              this.dialogVisible = false
              // 刷新家居信息
              this.list()
            }
        )
      }
      else {
        //修改逻辑
        request.put("/api/update", this.form).then(
            res => {
              //修改成功则弹出提示框
              if (res.code === "200") {
                this.$message({
                  type: "success",
                  message: "更新成功！"
                })
              } else  {
                this.$message({
                  type: "error",
                  message: "更新失败！"
                })
              }
              this.dialogVisible = false
              // 刷新家居信息
              this.list()
            }
        )
      }
    }

2.异步问题

这里的添加逻辑和修改逻辑，有重复的代码，但是不能够提到if-else后
原因是axios请求是异步的，必须保证请求操作的原子性，否则会出问题
只要发送一个axios请求，主程序会跟axios请求并发执行

5.结果展示

3.删除家居

1.需求分析

2.com/sun/furn/controller/FurnController.java 添加方法

java 复制代码

    /**
     * 根据id删除家居
     * @return
     */
    @DeleteMapping("/del/{id}") //这里使用路径变量的方式
    public Result delete(@PathVariable("id") Integer id) {
        furnService.removeById(id);
        return Result.success();
    }

3.postman测试

4.前端实现

1.src/views/HomeView.vue 添加确认删除提示框

js 复制代码

      <el-table-column fixed="right" label="操作" width="245">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>
          <!-- 增加 popcomfirm 控件，确认删除 -->
          <el-popconfirm
              title="确定删除吗？" @confirm="handleDel(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

2.src/views/HomeView.vue 方法池添加方法

js 复制代码

    //处理删除逻辑
    handleDel(id) {
      request.delete(`/api/del/${id}`).then(
        res  => {
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "删除成功！"
            })
          } else {
            this.$message({
              type: "error",
              message: "删除失败！"
            })
          }
          //刷新页面
          this.list()
        }
    )
    }