流程:用户点击删除(@click = “删除方法”—(发送ajax请求携带被选中的id号))—servlet拿到删除所需要的id号—调用service的删除方法—dao层编写相应的方法以及数据库的删除语句
写代码 从后往前写:
首先编写dao层的方法:
@Delete("delete from tb_brand where id = #{id}")
void delete(int id);
service层编写删除方法(接口添加此方法):
@Override
public void delete(int id) {
SqlSession sqlSession = factory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
mapper.delete(id);
sqlSession.commit();
sqlSession.close();
}
写servlet:
- 前端的id号以url的形式传到后端
- 前端的id号我们也可以放到前端ajax的data的位置上,以json的形式传到后端
第一种:
public void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String _id = request.getParameter("id");
int id = Integer.parseInt(_id);
service.delete(id);
response.getWriter().write("success");
}
第二种:
public void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
BufferedReader reader = request.getReader();
String _id = reader.readLine();
Integer id = JSON.parseObject(_id, int.class);
service.delete(id);
response.getWriter().write("success");
}
以上便是后端的
前端就是修修改改:
//第一步
//slot-scope="scope":简单理解带有数据的插槽; scope.ro:相当于当前行的数据对象
//有兴趣深究的话可以瞅瞅https://blog.csdn.net/qyl_0316/article/details/107360542
<el-row slot-scope="scope">
<el-button type="primary">修改</el-button>
<el-button type="danger" @click = "byDelete(scope.row)">删除</el-button>
</el-row>
//第二步:添加到data()
//当前选中行的对象
row:{},
//当前选中行的下标
index:0,
//第三步:做出删除方法:
byDelete(row)
{
//删除的对象的id
// this.brand.id= row.id;
//弹出确认删除的提示框
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
//用户点击确认按钮
//发送ajax请求
axios({
method:"get",
//url:"http://localhost:8080/brand_case/brand/delete?id="+this.brand.id
url:"http://localhost:8080/brand_case/brand/delete?id="+row.id
}).then(resp=>{
if(resp.data=="success"){
//表示删除成功
//刷新页面
//location.reload();
//刷新页面,重新查询数据
this.selectAll();
//弹出消息提示
this.$message({
message: '恭喜你,删除成功!',
type: 'success'
});
}
})
}).catch(()=>{
//用户点击取消按钮
this.$message({
type: 'info',
message: '已取消删除'
});
})
},