1：前台代码
（1）：绑定删除单击事件
（2）：弹出确认操作提示（在ElementUI中查找）
（3）：发送ajax请求，执行删除
2：后台代码
（1）TravelItemController.java
（2）TravelItemService.java（服务接口）
（3）TravelItemServiceImpl.java（服务实现类）
（4）TravelItemDao.java（Dao接口）
（5）TravelItemDao.xml（Mapper映射文件）
前台代码
为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户点击确定按钮再提交删除请求。
绑定单击事件
需要为删除按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
调用的方法
// 删除
handleDelete(row) {
alert(row.id);
}
弹出确认操作提示
用户点击删除按钮会执行handleDelete方法，此处需要完善handleDelete方法，弹出确认提示信息。ElementUI提供了$confirm方法来实现确认提示信息弹框效果
// 删除
handleDelete(row) {
// alert(row.id);
this.$confirm("确认删除当前选中记录吗？","提示",{
type:'warning'}).then(()=>{
//点击确定按钮时只需此处代码
alert('用户点击的是确定按钮');
});
}
发送请求
如果用户点击确定按钮就需要发送ajax请求，并且将当前自由行的id作为参数提交到后台进行删除操作
// 删除
handleDelete(row) {
// alert(row.id);
this.$confirm("确认删除当前选中记录吗？","提示",{
type:'warning'}).then(()=>{
//点击确定按钮时只需此处代码
// alert('用户点击的是确定按钮');
axios.get("/travelItem/delete.do?id=" + row.id).then((res)=> {
if(res.data.flag){
//删除成功
this.$message({
message: res.data.message,
type: 'success'
});
//调用分页，获取最新分页数据
this.findPage();
}else{
//删除失败 直接调用函数的写法
this.$message.error(res.data.message);
}
});
});
}
后台代码
Controller
在 TravelItemController 中增加删除方法
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.constant.MessageConstant;
import com.atguigu.entity.PageResult;
import com.atguigu.entity.QueryPageBean;
import com.atguigu.entity.Result;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/travel")
@RestController
public class TravelItemController {
@Reference
private TravelItemService travelItemService;
@RequestMapping("/delete")
public Result delete(Integer id){
try {
travelItemService.deleteById(id);
return new Result(true,MessageConstant.DELETE_TRAVELITEM_SUCCESS);
}catch (RuntimeException e){
// 运行时异常，表示自由行和跟团游的关联表中存在数据
return new Result(false,e.getMessage());
}catch (Exception e) {
e.printStackTrace();
return new Result(false,MessageConstant.DELETE_TRAVELITEM_FAIL);
}
}
服务接口
在 TravelItemService 服务接口中扩展删除方法
package com.atguigu.service;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
public interface TravelItemService {
void deleteById(Integer id);
}
服务实现类
注意：不能直接删除，需要判断当前自由行是否和跟团游关联，如果已经和跟团游进行了关联则不允许删除
package com.atguigu.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.atguigu.dao.TravelItemDao;
import com.atguigu.entity.PageResult;
import com.atguigu.pojo.TravelItem;
import com.atguigu.service.TravelItemService;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
@Service(interfaceClass = TravelItemService.class)
@Transactional
public class TravelItemServiceImpl implements TravelItemService {
@Autowired
private TravelItemDao travelItemDao;
@Override
public void deleteById(Integer id) {
// 在删除自由行之前，先判断自由行的id，在中间表中是否存在数据
long count = travelItemDao.findCountByTravelItemItemId(id);
// 中间表如果有数据，不要往后面执行，直接抛出异常
// 如果非要删除也可以：delete from t_travelgroup_travelitem where travelitem_id = 1
if (count > 0){
throw new RuntimeException("不允许删除");
}
// 使用自由行的id进行删除
travelItemDao.deleteById(id);
}
Dao接口
在 TravelItemDao 接口中扩展方法 findCountByTravelItemItemId和 deleteById
package com.atguigu.dao;
import com.atguigu.pojo.TravelItem;
import com.github.pagehelper.Page;
public interface TravelItemDao {
void deleteById(Integer id);
long findCountByTravelItemItemId(Integer id);
}
Mapper映射文件
在 TravelItemDao.xml 中扩展SQL语句
<!--根据自由行id查询中间关系表-->
<select id="findCountByTravelItemItemId" parameterType="int" resultType="long">
select count(*) from t_travelgroup_travelitem where travelitem_id =#{id}
</select>
<!--删除-->
<delete id="deleteById" parameterType="int">
delete from t_travelitem where id=#{id}
</delete>