分页查询基于SSM&ElementUI

1.介绍

本文主要介绍如何完整的实现分页查询功能,基于SSM框架, Vue框架和ElementUI前端组件, MySQL数据库, 集成到IDEA工具中, 创建maven的webapp骨架, 来实现.

2 实现思路

1. 前端实现: 通过Vue 框架,上传当前页和每页的条数给后台, 并接收从后台返回的数据总数和当前页的数据;然后在前端页面中显示这些数据;
2. 创建Entity类
   QueryPageBean类: 实现实例化接口, 分页传递的参数作为该类的成员变量;
   PageResult类: 用于接收数据库返回的分页数据,包括数据总条数和当前页数据;
3. Controller层
   定义方法, 返回值类型为PageResult类型, 传参类型为QueryPageBean类型;

 @RestController 
 @RequestMapping("/goods")
 public class GoodsController{
   
     //依赖注入
     @Autowired
     private GoodsService goodsService;

      @RequestMapping("findByPage")
      public PageResult findByPage(@RequestBody QueryPageBean pageBean) {
   
      //@RequestBody将传来的json参数,封装成QueryPageBean对象
      PageResult pageResult = goodsService.findByPage(pagebean);
      return pageResult;      
}
}

1. Service接口实现类

@Service
@Transactional
public class GoodsServiceImpl implements GoodsService {
   
//依赖注入dao
    @Autowired
    private GoodsDao goodsDao;
        @Override
    public PageResult findByPage(QueryPageBean pageBean) {
   
        //通过分页助手, 设置分页查询参数(参数1: 当前页码,  参数2: 每页显示条数 )
        PageHelper.startPage(pageBean.getCurrentPage(), pageBean.getPageSize());

        //调用dao, 执行分页查询
        Page<Goods> page = goodsDao.findByPage(); //这里的sql语句 我们没有编写 limit 关键字

        return new PageResult(page.getTotal