文章目录
-
- 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.修改家居
- 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()
}
)
}5.结果展示
