简易分页操作

文章目录

一.技术栈
二.业务
三.后端
- 3.1.业务逻辑
- 3.2.主要业务
- - 3.3.测试结果
四.前端
- 4.1.业务逻辑
- 4.2.初步实现
- 4.3.js实现
- 4.4.展示
五.参考链接

一.技术栈

前端 jQuery
后端 spring springMVC mybatis
数据库 MySQL

资料:https://download.csdn.net/download/qq_45084064/85977006

二.业务

简单的分页查询展示

主要目录结构

三.后端 3.1.业务逻辑

pom.xml文件导入相关依赖
配置相关文件
主要业务呈现
测试结果

3.2.主要业务

其中 mapper(|dao)层,实体类,mapper映射文件由逆向工程生成

service层

package com.it.service;

import com.github.pagehelper.PageInfo;
import com.it.vo.UserVO;

public interface UserService {

    
    PageInfo getPageInfo(Integer pageNum,Integer pageSize);
}

package com.it.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.it.domain.Department;
import com.it.domain.DepartmentExample;
import com.it.domain.User;
import com.it.domain.UserExample;
import com.it.mapper.CityMapper;
import com.it.mapper.DepartmentMapper;
import com.it.mapper.ProjectMapper;
import com.it.mapper.UserMapper;
import com.it.service.UserService;
import com.it.vo.UserVO;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;

import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;
    @Autowired
    private ProjectMapper projectMapper;
    @Autowired
    private DepartmentMapper departmentMapper;

    
    @Override
    public PageInfo getPageInfo(Integer pageNum, Integer pageSize) {
        // 判断用户名
        UserExample userExample = new UserExample();
        // 分页
        PageHelper.startPage(pageNum,pageSize);
        List userList = userMapper.selectByExample(userExample);
        // 将获取的 List 转为 List
        List voList = userList.stream().map(user -> {
            UserVO vo = new UserVO();
            BeanUtils.copyProperties(user, vo);
            return vo;
        }).collect(Collectors.toList());
        // 赋值
        PageInfo pageInfo = new PageInfo(userList);
        // 补充部门信息
        for (UserVO vo:voList
        ) {
            //获取项目组编号 -> 部门编号
            Integer proId = vo.getProId();
            Integer deptId = projectMapper.selectByPrimaryKey(proId).getDeptId();
            //获取部门名称
            String deptNzme = departmentMapper.selectByPrimaryKey(deptId).getDeptName();
            vo.setDeptId(deptId);
            vo.setDeptName(deptNzme);
        }

        // 将原有列表覆盖
        pageInfo.setList(voList);

        return pageInfo;
    }
}

controller层

package com.it.controller;

import com.github.pagehelper.PageInfo;
import com.it.service.UserService;
import com.it.vo.UserVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {


    @Autowired
    private UserService userService;

    @GetMapping("/find")
    public PageInfo findInfo(@RequestParam(defaultValue = "1") Integer pageNum,
                                     @RequestParam(defaultValue = "5") Integer pageSize){

        return userService.getPageInfo(pageNum,pageSize);
    }

}

vo: 用于封装返回前端对象

vo对象属性最好与实体类保持一致

package com.it.vo;

import lombok.Data;


@Data
public class UserVO {

    private Integer userId;//编号
    private String username;//姓名
    private String idcard; //身份证
    private Integer proId;//项目组编号
    private Integer deptId;//部门编号
    private String deptName; //部门

}

3.3.测试结果

GET请求

浏览器直接发起请求
IDEA -> resource目录下 -> 创建 http目录 -> 创建文件 text==.http== 发起请求

IDEA请求路径:
GET http://localhost:8099/page/user/find?pageNum=1&pageSize=4

其中端口8099是由原端口号8080更改

结果

其中返回数据已经是通过pagehelper插件 - > pageInfo对象封装

四.前端 4.1.业务逻辑

html+css 进行初步页面实现 (bootstrap框架)
导入jquery+jqPaginator
js编写
页面展示

4.2.初步实现

4.3.js实现

$().ready(function () {

    var result;
    // 请求方法 - 后台分页数据获取
    function getInfo(pageNum, pageSize) {
        $.ajax({
            url: "/page/user/find",
            type: "GET",
            async: false,//同步
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            dataType: "json",
            success(res) {
                // console.log(res)
                let list = res.list;
                result = res;
                // 删除原有数据
                $("#append tr").remove();
				
                // 页面动态添加数据
                $.each(list, function (index, user) {
                    let str = 'n' +
                        '        ' + user.userId + 'n' +
                        '        ' + user.username + 'n' +
                        '        ' + user.idcard + 'n' +
                        '        ' + user.deptName + 'n' +
                        // '        ' +
                        // '           ' +
                        // '           ' +
                        // '       ' +
                        '    '
                    $(str).appendTo($("#append"))
                })

            }
        })
    }


    // 页面初始化
    getInfo();

    //console.log(result)

    //测试jqPaginator
    $("ul.pagination").jqPaginator({
        pageSize: 5,
        totalCounts: result.total,
        visiblePages: 5,
        currentPage:1,

        first:'首页',
        prev:'上一页',
        next:'下一页',
        last:'尾页',
        page:'{{page}}',

        onPageChange: function (num){
            // console.log("当前为"+num+"页")
            getInfo(num)
        }

    })

})

ajax同步请求,不然获取数据有误.

不足: pageSize固定.

改进: 添加下拉框,绑定 onchange事件获取pageSize (初始化一个固定值,不然undefined)

4.4.展示

五.参考链接

jquery分页插件快速使用
html页脚位置调整,将页脚始终控制在页面最下方的几种方法
pageInfo如何数据转换
html页脚位置调整,将页脚始终控制在页面最下方的几种方法
pageInfo如何数据转换
PageHelper 在 Spring+Spring MVC+MyBatis 中的配置使用

简易分页操作

测试页面

Java相关栏目本月热门文章