项目实战：展示第一页数据

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

2、编写FruitDaoImpl实现这两个方法

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

3、dto层封装PageInfo类

package com.csdn.fruit.dto;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
//分页组件类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageInfo<T> {private List<T> list;private Integer pageNo = 1;private Integer pageSize = 5;private Integer recordCount = 0;private Integer pageCount = 0;public PageInfo(List<T> list, Integer pageNo, Integer recordCount) {this.list = list;this.pageNo = pageNo;this.recordCount = recordCount;this.pageCount = (recordCount + pageSize - 1) / pageSize;}
}

4、改写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);}List<Fruit> fruitList = fruitDao.getFruitList(pageNo,5);//总记录条数Integer total = fruitDao.getRecordCount();//计算总页数//Integer pageSize = 5;//当前项目中，每页数据固定写死 5 条//Integer pageCount = (total + pageSize - 1) / pageSize;PageInfo<Fruit> pageInfo = new PageInfo<>(fruitList, 1, total);Result result = Result.OK(pageInfo);ResponseUtil.print(resp, result);}
}

5、前端数据结构改变修改index.js

5.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=>{debuggerlet fruitList = response.data.data.listlet pageNo=response.data.data.pageNolet pageCount=response.data.data.pageCount// 此处使用的是axios，那么响应回来的数据自动就是json，// 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)// let fruitArr = JSON.parse(fruitList)let fruitArr = fruitListfor(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.fnamefnameTD.innerHTML = '<a href="edit.html?fid='+fruit.fid+'">'+fruit.fname+'</a>';priceTD.innerText = fruit.pricefcountTD.innerText = fruit.fcountoperTD.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();}});}
};