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

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").value
    loadData(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这个参数有默认值，如果没有传值，则使用默认值 1
    axios({
        method: 'get',
        url: '/index',
        params: {
            pageNo: pageNo,
            keyword:keyword
        }
    }).then(response => {
        debugger
        let fruitList = response.data.data.list
        pageNo = response.data.data.pageNo
        pageCount = response.data.data.pageCount
        // 此处使用的是axios，那么响应回来的数据自动就是json，
        // 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)
        // let fruitArr = JSON.parse(fruitList)
        let fruitArr = fruitList;
        let fruitTbl = $("#fruit_tbl")
        //向表格中添加行之前，先删除原来的行
        let rows=fruitTbl.rows
        for (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.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();
            }
        });
    }
};

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);

    @Deprecated
    List<Fruit> getFruitList();
    @Deprecated
    List<Fruit> getFruitList(Integer pageNo, Integer pageSize);

    List<Fruit> getFruitList(Integer pageNo, Integer pageSize,String keyword);

    Fruit getFruitByFname(String fname);

    Fruit getFruitByFid(Integer fid);

    //查询总记录条数
    @Deprecated
    Integer 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 {
    @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 List<Fruit> getFruitList(Integer pageNo, Integer pageSize) {
        return super.executeQuery("select * from t_fruit limit ?,?", (pageNo - 1) * pageSize, pageSize);
    }

    @Override
    public 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);
    }

    @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);
    }

    @Override
    public Integer getRecordCount() {
        String sql = "select count(*) from t_fruit";
        return ((Long) executeComplexQuery(sql).get(0)[0]).intValue();
    }

    @Override
    public 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();
    @Override
    protected 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);
    }
}