第一个团队项目的记录(一)——分页查询是如何实现的?(偏向后端)

一、如何分页?

数据库分页查询后,在浏览器中的目标显示结果大体是这样的。

二、如何实现?(5步实现)

1、创建表格

        首先,从浏览器显示结果来看,需要在前端创建一个表格,用来存放服务器传来的每一条记录。(代码略)

2、创建Page对象

        有了表格之后,怎么从服务器获取即将填入表格的数据?

        一般来说,每一页都包含着数条记录,服务器一次response想要传递多条记录的最佳方法就是把他们看做一个对象,我们创建一个Page对象,包含分页查询所需的常见属性,同时引入List集合来存放每页的数据。(代码省略了各属性的get、set方法)

import java.util.List;

public class Page<T> {
	private int totalCount;// 总记录数
	private int totalPage;// 总页码
	private List<T> list;// 每页的数据
	private int currentPage;// 当前页码
	private int rows;// 每页显示最大记录数

此处Page<T>作为泛型类,指定了容器Page的成员变量list的类型也必须为T。

 3、获取当前页面的数据(DAO)

        创建好Page对象之后,数据传输的问题解决了,我们面临的是数据库分页查询的核心问题——如何从数据库获取当前页面的数据?

        这里我们需要通过数据库访问层(DAL)的接口对象(DAO)来获取数据库中的数据。

        分页查询的方法实现如下

@Override
	public List<Student> getByPage(int start, int rows, int tutorId) {
		try {
			String sql;
			sql = "select * from student limit ? , ?";
			return template.query(sql, 
                new BeanPropertyRowMapper<Student>(Student.class), 
                start, rows);
		} catch (DataAccessException e) {
			e.printStackTrace();
			return null;
		}
	}

 注:这里查询时使用了spring框架提供的数据访问模板JdbcTemplate,用来简化jdbc的操作

4、创建servlet处理数据

        从数据库中获取数据时,需要用到客户端传来的参数,此时我们先理清业务思路,为了实现分页查询,我们需要接受客户端传来的两个数据:每页的记录数和当前页码。根据需求创建如下servlet,将数据通过接口传入业务逻辑层(BLL),再将json序列化对象写回客户端

package com.pba.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.pba.domain.Page;
import com.pba.domain.ResultInfo;
import com.pba.domain.Student;
import com.pba.domain.Teacher;
import com.pba.service.StudentService;
import com.pba.service.impl.StudentServiceImpl;

/**
 * @author PBA E-mail: 983208415@qq.com
 * @version 创建时间:2021年6月17日 下午5:52:03
 */
@WebServlet("/getStudentByPageServlet")
public class GetStudentByPageServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 设置编码
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		// 1 获取参数
		String currentPage = request.getParameter("currentPage");// 当前页码
		String rows = request.getParameter("rows");// 每页显示记录数
		// 2 调用service进行查询
		StudentService service = new StudentServiceImpl();
		Page<Student> page = service.getStudentByPage(currentPage, rows);
		// 3 存储数据
		ResultInfo info = new ResultInfo();
		info.setData(page);
		// 将info对象序列化为json
		ObjectMapper mapper = new ObjectMapper();// 创建jackson核心对象
		String json = mapper.writeValueAsString(info);
		// 将json数据写回客户端
		response.setContentType("application/json;charset=utf-8");// 设置contentType
		response.getWriter().write(json);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

5、对数据进行业务处理

        在业务逻辑层(BLL)实现如下方法

@Override
	public Page<Student> getStudentByPage(String currentPageStr, String rowsStr) {
		int currentPage = Integer.parseInt(currentPageStr);
		int rows = Integer.parseInt(rowsStr);
		// 计算开始的记录索引
		int start = (currentPage - 1) * rows;
		// 1创建空的分页对象
		Page<Student> page = new Page<Student>();
		// 2 设置参数
		page.setCurrentPage(currentPage);
		page.setRows(rows);
		// 3 调用DAO,查询总记录数
		int totalCount = studentDaoImpl.getTotalCount();
		page.setTotalCount(totalCount);
		// 4 调用DAO,查询List集合
		List<Student> list = studentDaoImpl.getByPage(start, rows);
		page.setList(list);
		// 5 计算总页码
		int totalPage = totalCount % rows == 0 ? totalCount / rows : totalCount / rows + 1;
		page.setTotalPage(totalPage);
		return page;
	}

以上就是数据库分页查询的实现过程。

——小尾巴,记录第一条技术blog的发布

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的前端Vue和后端Java查询分页功能示例: 前端Vue代码: ```html <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="(user, index) in users" :key="index"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <div class="pagination"> <button @click="prevPage" :disabled="page <= 1">Prev</button> <span>Page {{ page }} of {{ totalPages }}</span> <button @click="nextPage" :disabled="page >= totalPages">Next</button> </div> </div> </template> <script> export default { data() { return { users: [], page: 1, totalPages: 0 }; }, mounted() { this.fetchUsers(); }, methods: { fetchUsers() { axios.get(`/users?page=${this.page}`).then(response => { this.users = response.data.users; this.totalPages = response.data.totalPages; }); }, nextPage() { this.page++; this.fetchUsers(); }, prevPage() { this.page--; this.fetchUsers(); } } }; </script> ``` 后端Java代码: ```java @RestController @RequestMapping("/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping public Page<User> getUsers(@RequestParam(defaultValue = "0") int page) { Pageable pageable = PageRequest.of(page, 10); return userRepository.findAll(pageable); } } ``` 这个例子假设你有一个名为User的模型,并且你已经在后端创建了一个名为UserRepository的JPA仓库。在前端,我们使用axios库来进行HTTP请求。在这个例子中,我们每页显示10个用户,并且我们可以使用“Next”和“Prev”按钮来浏览不同的页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值