1、在index.js中添加删除点击事件
1.1、common.js
function $(key){
if(key){
if(key.startsWith("#")){
key = key.substring(1)
return document.getElementById(key)
}else{
let nodeList = document.getElementsByName(key)
return Array.from(nodeList)
}
}
}
window.onload=function(){
loadData();
}
loadData=function(){
axios({
method:'get',
url:'/index'
}).then(response=>{
debugger
let fruitList = response.data.data
// 此处使用的是axios,那么响应回来的数据自动就是json,
// 不需要再进行parse(如果是原始的ajax操作,那么一定需要parse)
// let fruitArr = JSON.parse(fruitList)
let fruitArr = fruitList
for(let i = 0 ; i<fruitArr.length; i++){
let fruitTbl = $("#fruit_tbl")
let tr = fruitTbl.insertRow()
let fnameTD = tr.insertCell()
let priceTD = tr.insertCell()
let fcountTD = tr.insertCell()
let operTD = tr.insertCell()
let fruit = fruitArr[i]
//fnameTD.innerText = fruit.fname
fnameTD.innerHTML = '<a href="edit.html?fid='+fruit.fid+'">'+fruit.fname+'</a>';
priceTD.innerText = fruit.price
fcountTD.innerText = fruit.fcount
operTD.innerHTML="<img class=\"delImg\" src=\"imgs/del.png\" onclick=\"delFruit("+fruit.fid+")\"/>"
}
})
}
delFruit = function (fid) {
if (window.confirm('是否确认删除?')) {
axios({
method: 'get',
url: 'del',
params:{
fid: fid,
}
}).then(response=>{
if (response.data.flag) {
window.location.reload();
}
});
}
};
2、在FruitDao接口中添加delFruitByFid方法
package com.csdn.fruit.dao;
import com.csdn.fruit.pojo.Fruit;
import java.util.List;
//dao :Data Access Object 数据访问对象
//接口设计
public interface FruitDao {
void addFruit(Fruit fruit);
void delFruit(String fname);
//通过 fid 删除 水果库存记录
void delFruitByFid(Integer fid);
void updateFruit(Fruit fruit);
List<Fruit> getFruitList();
Fruit getFruitByFname(String fname);
Fruit getFruitByFid(Integer fid);
}
3、在FruitDaoImpl中实现delFruitByFid方法
package com.csdn.fruit.dao.impl;
import com.csdn.fruit.dao.FruitDao;
import com.csdn.fruit.pojo.Fruit;
import com.csdn.mymvc.dao.BaseDao;
import java.util.List;
public class FruitDaoImpl extends BaseDao<Fruit> implements FruitDao {
@Override
public void addFruit(Fruit fruit) {
String sql = "insert into t_fruit values (0,?,?,?,?)";
super.executeUpdate(sql, fruit.getFname(), fruit.getPrice(), fruit.getFcount(), fruit.getRemark());
}
@Override
public void delFruit(String fname) {
String sql = "delete from t_fruit where fname=?";
super.executeUpdate(sql, fname);
}
//通过 fid 删除水果库存记录
@Override
public void delFruitByFid(Integer fid) {
super.executeUpdate("delete from t_fruit where fid = ? ", fid);
}
//通过 fid 可以修改所有的属性值
@Override
public void updateFruit(Fruit fruit) {
String sql = "update t_fruit set fname=?,price=?,fcount=?,remark=? where fid = ?";
super.executeUpdate(sql, fruit.getFname(), fruit.getPrice(), fruit.getFcount(), fruit.getRemark(), fruit.getFid());
}
@Override
public List<Fruit> getFruitList() {
return super.executeQuery("select * from t_fruit");
}
@Override
public Fruit getFruitByFname(String fname) {
return load("select * from t_fruit where fname = ?", fname);
}
@Override
public Fruit getFruitByFid(Integer fid) {
return load("select * from t_fruit where fid=?", fid);
}
}
4、编辑Controller层DelServlet
package com.csdn.fruit.servlet;
import com.csdn.fruit.dao.FruitDao;
import com.csdn.fruit.dao.impl.FruitDaoImpl;
import com.csdn.fruit.dto.Result;
import com.csdn.fruit.util.ResponseUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/del")
public class DelServlet extends HttpServlet {
FruitDao fruitDao = new FruitDaoImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Integer fid = Integer.parseInt(req.getParameter("fid"));
fruitDao.delFruitByFid(fid);
ResponseUtil.print(resp, Result.OK());
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/fac68c627a3a031e6002d58ca5fcd59e.png)