海上捞火锅

海上捞火锅


菜品批量删除

[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
  • [context-path]/dish
请求方式
  • DELETE
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 错误信息
备注
  • data有两种返回值
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("删除菜品成功!");
}

页面列表

ITEM_HTML