[TOC]
简要描述
前端页面和服务端交互过程
- 页面发送ajax请求,将参数(id)提交到服务端
- 服务端Controller接收页面提交的数据并调用Service删除数据
- Service调用Mapper操作数据库
触发事件
<span class="span-btn delBut non" @click="deleteHandle('批量', null)">批量删除</span>
接口调用
deleteHandle (type, id) {
if (type === '批量' && id === null) {
if (this.checkList.length === 0) {
return this.$message.error('请选择删除对象')
}
}
this.$confirm('确认删除该菜品, 是否继续?', '确定删除', {
'confirmButtonText': '确定',
'cancelButtonText': '取消',
}).then(() => {
deleteDish(type === '批量' ? this.checkList.join(',') : id).then(res => {
if (res.code === 1) {
this.$message.success('删除成功!')
this.handleQuery()
} else {
this.$message.error(res.msg || '操作失败')
}
}).catch(err => {
this.$message.error('请求出错了:' + err)
})
})
},
请求URL
请求方式
API接口
const deleteDish = (ids) => {
return $axios({
url: '/dish',
method: 'delete',
params: { ids }
})
}
请求参数
参数名 |
必选 |
类型 |
说明 |
id |
是 |
bigint |
菜品编号 |
返回示例
code: 1
data: "删除菜品成功!"
map: {}
msg: null
返回参数说明
参数名 |
类型 |
说明 |
code |
int |
返回码:1:成功 0或其他:失败 |
data |
object |
返回数据 |
map |
map |
动态数据 |
msg |
string |
错误信息 |
备注
public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}
后端接口请求参数
- 在Controller接口方法中声明数组类型参数ids
后端代码
@DeleteMapping
public R<String> deleteDish(String[] ids){
log.info(ids.toString());
for (String id : ids) {
dishService.removeById(id);
}
return R.success("删除菜品成功!");
}