1 配置分页插件

首先在MyBatis的核心配置文件中配置分页插件

myBatisConfig.xml

<!-- 配置分页插件 -->
<plugins>
    <plugin interceptor="com.github.pagehelper.PageInterceptor">
        <!-- 设置数据库的类型 Oracle mysql ... -->
        <property name="helperDialect" value="mysql" />
    </plugin>
</plugins>

2 创建实体类

用户实体类：User.java

package edu.stu.pojo;

import java.util.Date;

public class User {
	private Integer userid;
	private String username;
	private String userpwd;
	private String namee;
	private String usersex;
	private String useraddress;
	private Date userbirth;
	private String usertel;
	private String userstatus;

	/**
	 * 创建一个新的实例 User.
	 *
	 */
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * 创建一个新的实例 User.
	 *
	 * @param userid
	 * @param username
	 * @param userpwd
	 * @param namee
	 * @param usersex
	 * @param useraddress
	 * @param userbirth
	 * @param usertel
	 * @param userstatus
	 */
	public User(Integer userid, String username, String userpwd, String namee, String usersex, String useraddress,
			Date userbirth, String usertel, String userstatus) {
		super();
		this.userid = userid;
		this.username = username;
		this.userpwd = userpwd;
		this.namee = namee;
		this.usersex = usersex;
		this.useraddress = useraddress;
		this.userbirth = userbirth;
		this.usertel = usertel;
		this.userstatus = userstatus;
	}

	public Integer getUserid() {
		return userid;
	}

	public void setUserid(Integer userid) {
		this.userid = userid;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getUserpwd() {
		return userpwd;
	}

	public void setUserpwd(String userpwd) {
		this.userpwd = userpwd;
	}

	public String getNamee() {
		return namee;
	}

	public void setNamee(String namee) {
		this.namee = namee;
	}

	public String getUsersex() {
		return usersex;
	}

	public void setUsersex(String usersex) {
		this.usersex = usersex;
	}

	public String getUseraddress() {
		return useraddress;
	}

	public void setUseraddress(String useraddress) {
		this.useraddress = useraddress;
	}

	public Date getUserbirth() {
		return userbirth;
	}

	public void setUserbirth(Date userbirth) {
		this.userbirth = userbirth;
	}

	public String getUsertel() {
		return usertel;
	}

	public void setUsertel(String usertel) {
		this.usertel = usertel;
	}

	public String getUserstatus() {
		return userstatus;
	}

	public void setUserstatus(String userstatus) {
		this.userstatus = userstatus;
	}

	@Override
	public String toString() {
		return "login [userid=" + userid + ", username=" + username + ", userpwd=" + userpwd + ", namee=" + namee
				+ ", usersex=" + usersex + ", useraddress=" + useraddress + ", userbirth=" + userbirth + ", usertel="
				+ usertel + ", userstatus=" + userstatus + "]";
	}

}

分页实体类：PageBean.java

package edu.stu.pojo;

import java.util.List;

public class PageBean<T> {
	private int totalCount;
	
	private List<T> rows;

	public PageBean() {
		super();
	}

	public PageBean(int totalCount, List<T> rows) {
		super();
		this.totalCount = totalCount;
		this.rows = rows;
	}

	public int getTotaCount() {
		return totalCount;
	}

	public void setTotaCount(int totaCount) {
		this.totalCount = totaCount;
	}

	public List<T> getRows() {
		return rows;
	}

	public void setRows(List<T> rows) {
		this.rows = rows;
	}
	
	
	
	
}

3 编写Dao层的接口和映射文件

接口文件：UserMapper.java

package edu.stu.dao;

import java.util.List;

import edu.stu.pojo.User;

/**
 * @ClassName: UserDao
 * @Description:
 * @author xxx
 * @date 2023年8月28日
 * @version V1.0
 */
public interface UserMapper {
	public abstract List<User> selectAll();
}

映射文件：UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "mybatis-3-mapper.dtd" >
<mapper namespace="edu.stu.dao.UserMapper">
	<!-- 查询所有 -->
	<select id="selectAll" resultType="User">
		select * from tb_User
		where
		userstatus!='管理员'
	</select>
</mapper>

4 编写controller层的方法

public void selectBrandPage(HttpServletRequest request, HttpServletResponse response) throws Exception {
    // 接收前端传递的参数
    // pagesize:每页显示的条数
    int size = Integer.parseInt(request.getParameter("pageSize"));

    // currentPage：当前页码
    int currentPage = Integer.parseInt(request.getParameter("currentPage"));

    // 获取sqlsession对象
    SqlSession s = MybatisUtils.createSqlSession();

    // 分页 
    // currentPage：获取哪一页的数据
    // size：每一页的数据条数
    Page<Object> page = PageHelper.startPage(currentPage, size);

    // 执行操作，查询用户表的全部数据
    List<User> rows = s.getMapper(UserMapper.class).selectAll();
    
    // 通过PageInfo类解析分页结果
    // rows：获取到的全部数据的集合
    PageInfo<User> info = new PageInfo<User>(rows);
    
    // 获取总共有多少条数据
    int totalcount = (int) info.getTotal();
    
    // 想要获取的那一页的数据
    List<User> list = info.getList();

    // 把结果封装在PageBean中
    PageBean<User> pageBean = new PageBean<>(totalcount, list);

    // 响应数据到前端
    String str = JSON.toJSONString(pageBean);
    System.err.println(str);
    response.getWriter().print(str);
}

5 编写前端页面

UserManager.html

<body>
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" style="padding: 10px 5px;">
        </el-pagination>
    </div>

</body>


<script type="text/javascript">
new Vue({
    el: "#app",
    data() {
        return {
            //每页条数
            pageSize: 5,

            //当前页码
            currentPage: 1,

            //总记录数
            totalCount: 0,

            tableData: []
        }
    },
    methods: {
        //查询所有数据
        selectAll() {
            var _this = this;
            var cookie = document.cookie;
            console.log(cookie)
            if (cookie == "" || cookie == "null" || cookie == null) {
                alert("请先登录");
                location.href = "http://localhost:8080/StudentManagement/Login.html";
            } else {
                axios({
                    method: "get",
                    url:"http://localhost:8080/StudentManagement/UserControllermethod=selectBrandPage&currentPage=" + this.currentPage +"&pageSize=" + this.pageSize
                }).then(function(resp) {
                    _this.uname = cookie
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totaCount;
                })
            }
        }
    },
    mounted() {
        this.selectAll()
    }
})
</script>