LayUI前端分页项目解析

• LayUi 官网 https://www.layui.com/doc/

准备工作

首先想做分页必须了解
前台发什么数据：当前页码，一页显示多少条
后台给什么数据：给你当前页数据，一共多少条

后端

• 项目技术SpringBoot
• 包结构
  model （po）数据库表对应实体类
  mapper 接口，实现类，针对表实际操作，service 服务层
  controller 控制层

具体实现

• model 首先写实体类并且生成get和set方法，toString

 private Integer id;
 private String username;
 private String password;

• mapper 接口首先知道数据总数和，写实现类sql语句

@Mapper
加Mapper注解或者加入到启动类上二选一
@MapperScan(basePackages = "com.example.demo.mapper")

有2个参数为了区分加个@Param

/**
     * 返回分页用户数据
     * @param pageIndex 从哪查（索引）
     * @param pageSize 查几条(一页显示5条)
     * @return
     */
    /*查询用户数据*/
    public List getPageUserinfo(@Param("index") Integer pageIndex,@Param("size")  Integer pageSize);

    /*查询总数*/
    public int totalUserCount();

• 因为用户数据和查询总数一起给前台，所以，请求一个接口得到2个数据
  还得封装一个实体类

private List list; // 查询页的数据
 private Integer total; // 总数

• service 里面注入一个dao
  因为分页是一个业务在一个方法里面写，

 @Autowired
    UserMapper userMapper;

    public PageRespBean getPageInfo(Integer index,Integer size) {
        //调一个分页总数
        int totalUserCount = userMapper.totalUserCount();
        
        // 分页传过来的是页码，必须经过处理(1-1)*10 0,10    10,10   20,10
        List pageUserinfo = userMapper.getPageUserinfo((index-1)*size, size);
       
        PageRespBean pageRespBean = new PageRespBean();
        
        pageRespBean.setList(pageUserinfo);
        pageRespBean.setTotal(totalUserCount);

        return pageRespBean;

• 服务层

 @Autowired
    UserService userService;

    @GetMapping("/user/pageInfo")
    //跨域  @CrossOrigin（"*"）
    @CrossOrigin
    public PageRespBean getUserInfo(@RequestParam(value="pageIndex",defaultValue = "1") Integer pageIndex,@RequestParam(value="pageSize",defaultValue = "10") Integer pageSize) {
        return userService.getPageInfo(pageIndex,pageSize);
    }

优化

泛型，可以在类上用
然后传一个泛型

public class PageRespBean {
    
    private List list; // 查询页的数据

 PageRespBean pageRespBean = new PageRespBean();

• 在servlet上，优化给分页默认值
  /@RequestParam(value="pageIndex",defaultValue = "1") 给默认值/

• 跨域
  @CrossOrigin

• 时间
  /对象写成json数据时候这个注解会生效，/
  @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
  /@JsonFormat(pattern = "yyyy-MM-dd",timezone = "Asia/Shanghai")/

• 前台代码