项目实战：根据关键字检索，查找相应的水果-编程知识

1、在index.html绑定查询点击事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style/index.css"><script src="script/axios.min.js"></script><script src="script/index.js"></script><script src="script/common.js"></script>
</head>
<body>
<div id="div0"><div id="div_title"><p>欢迎使用水果库存系统</p><div style="float: left;border: 0px solid red;margin-left: 18%;margin-bottom: 4px">请输入查询的关键字：<input type="text" id="keyword" size="30"style="border: 1px solid lightgray;height: 24px; margin-left: 8px;padding-left: 4px"/><input type="button" value="查询" class="btn" onclick="search()"/></div><div style="float: right;border: 0px solid red;margin-right:8%;margin-bottom: 4px"><a href="add.html" style="text-decoration: none">添加新库存</a></div></div><div id="div_fruit_table"><table id="fruit_tbl"><tr><th class="w25">名称</th><th class="w25">单价</th><th class="w25">库存</th><th>操作</th></tr><!--<tr><td><a href='edit.html?fid=1'>苹果</a></td><td>5</td><td>100</td><td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td></tr>--></table></div><div id="div_pagination"><input type="button" class="btn" onclick="page('first')" value="首页"/><input type="button" class="btn" onclick="page('pre')" value="上一页"/><input type="button" class="btn" onclick="page('next')" value="下一页"/><input type="button" class="btn" onclick="page('last')" value="尾页"/></div>
</div>
</body>
</html>

2、index.js实现点击事件

2.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)}}
}

let pageNo = 1;
let pageCount = 0;
let keyword=""//当页面加载完成，执行匿名函数
window.onload=function(){loadData();
}
function search() {keyword=$("#keyword").valueloadData(pageNo)
}function page(str) {if (str) {if (str == "first") {pageNo = 1;}else if (str == "pre") {pageNo = pageNo - 1;}else if (str == "next") {pageNo = pageNo + 1;}else if (str == "last") {pageNo = pageCount;}if (pageNo > pageCount) {pageNo=pageCount}if (pageNo <= 0) {pageNo=1}}loadData(pageNo)
}
loadData=function(pageNo=1){//pageNo这个参数有默认值，如果没有传值，则使用默认值 1axios({method: 'get',url: '/index',params: {pageNo: pageNo,keyword:keyword}}).then(response => {debuggerlet fruitList = response.data.data.listpageNo = response.data.data.pageNopageCount = response.data.data.pageCount// 此处使用的是axios，那么响应回来的数据自动就是json，// 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)// let fruitArr = JSON.parse(fruitList)let fruitArr = fruitList;let fruitTbl = $("#fruit_tbl")//向表格中添加行之前，先删除原来的行let rows=fruitTbl.rowsfor (let i = rows.length - 1; i >= 1; i--) {fruitTbl.deleteRow(i);}for (let i = 0; i < fruitArr.length; i++) {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.fnamefnameTD.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();}});}
};

3、FruitDao接口重载通过关键字查询方法

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);@DeprecatedList<Fruit> getFruitList();@DeprecatedList<Fruit> getFruitList(Integer pageNo, Integer pageSize);List<Fruit> getFruitList(Integer pageNo, Integer pageSize,String keyword);Fruit getFruitByFname(String fname);Fruit getFruitByFid(Integer fid);//查询总记录条数@DeprecatedInteger getRecordCount();Integer getRecordCount(String keyword);
}

4、FruitDaoImpl实现方法

"select * from t_fruit where fname like ? or remark like?  limit ?,?", "%" + keyword + "%", "%" + keyword + "%"

"select count(*) from t_fruit where fname like ? or remark like ? "

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 {@Overridepublic void addFruit(Fruit fruit) {String sql = "insert into t_fruit values (0,?,?,?,?)";super.executeUpdate(sql, fruit.getFname(), fruit.getPrice(), fruit.getFcount(), fruit.getRemark());}@Overridepublic void delFruit(String fname) {String sql = "delete from t_fruit where fname=?";super.executeUpdate(sql, fname);}//通过 fid 删除水果库存记录@Overridepublic void delFruitByFid(Integer fid) {super.executeUpdate("delete from t_fruit where fid = ? ", fid);}//通过 fid 可以修改所有的属性值@Overridepublic 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());}@Overridepublic List<Fruit> getFruitList() {return super.executeQuery("select * from t_fruit");}@Overridepublic List<Fruit> getFruitList(Integer pageNo, Integer pageSize) {return super.executeQuery("select * from t_fruit limit ?,?", (pageNo - 1) * pageSize, pageSize);}@Overridepublic List<Fruit> getFruitList(Integer pageNo, Integer pageSize, String keyword) {return super.executeQuery("select * from t_fruit where fname like ? or remark like?  limit ?,?", "%" + keyword + "%", "%" + keyword + "%", (pageNo - 1) * pageSize, pageSize);}@Overridepublic Fruit getFruitByFname(String fname) {return load("select * from t_fruit where fname = ?", fname);}@Overridepublic Fruit getFruitByFid(Integer fid) {return load("select * from t_fruit where fid=?", fid);}@Overridepublic Integer getRecordCount() {String sql = "select count(*) from t_fruit";return ((Long) executeComplexQuery(sql).get(0)[0]).intValue();}@Overridepublic Integer getRecordCount(String keyword) {String sql = "select count(*) from t_fruit where fname like ? or remark like ? ";return ((Long) executeComplexQuery(sql, "%" + keyword + "%", "%" + keyword + "%").get(0)[0]).intValue();}
}

5、编写IndexServlet

package com.csdn.fruit.servlet;
import com.csdn.fruit.dao.FruitDao;
import com.csdn.fruit.dao.impl.FruitDaoImpl;
import com.csdn.fruit.dto.PageInfo;
import com.csdn.fruit.dto.Result;
import com.csdn.fruit.pojo.Fruit;
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;
import java.util.List;
@WebServlet("/index")
public class IndexServlet extends HttpServlet {private FruitDao fruitDao = new FruitDaoImpl();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Integer pageNo = 1;String pageNoStr = req.getParameter("pageNo");if (pageNoStr != null && !"".equals(pageNoStr)) {pageNo = Integer.parseInt(pageNoStr);}String keyword = "";String keywordStr = req.getParameter("keyword");if (keywordStr!=null) {keyword = keywordStr;}List<Fruit> fruitList = fruitDao.getFruitList(pageNo, 5,keyword);//总记录条数Integer total = fruitDao.getRecordCount(keyword);//计算总页数//Integer pageSize = 5;//当前项目中，每页数据固定写死 5 条//Integer pageCount = (total + pageSize - 1) / pageSize;PageInfo<Fruit> pageInfo = new PageInfo<>(fruitList, pageNo, total);Result result = Result.OK(pageInfo);ResponseUtil.print(resp, result);}
}