vue实现分页功能(BootStrap5.x + vue2.x)

0.前置知识

• SpringBoot基础
• Vue2.x 尚硅谷Vue视频前三十集内容
• BootStrap会看文档，懂点英文

1.需求实现

注意第一页的前一页功能为disabled

同理第四页的后一页功能为disabled

中间页

2.后端接口

假如我们拥有这样一个接口：

    @GetMapping("patients/{pageNum}/{pageSize}")
	public R getPatientsList(@PathVariable String pageNum,
							 @PathVariable String pageSize) {
   
		int page_num = Integer.parseInt(pageNum);
		int page_size = Integer.parseInt(pageSize);
		PageInfo<PatientQueueInfo> list = patientService.getPatientQueueInfoList(page_num, page_size);
		if (list.getList().isEmpty()) {
   
			return R.error(404, "找不到您所查询的数据！");
		}
		return R.ok().put("data", list);
	}

前端请求url为：

http://localhost:8080/test/patients/2/5

获得的json数据为：

{
   
    "msg": "success",
    "code": 200,
    "data": {
   
        "total": 20,
        "list": [
            {
   
                "registerId": 14,
                "patientId": 1044,
                "name": "王冕",
                "sex": "男",
                "level": 0,
                "planId": 1,
                "queueId": 2,
                "registerTime": "2021-09-30 14:33:51"
            },
            {
   ...},
            {
   ...},
            {
   ...},
            {
   ...}
        ],
        "pageNum": 2,
        "pageSize": 5,
        "size": 5,
        "startRow": 6,
        "endRow": 10,
        "pages": 4,
        "prePage": 1,
        "nextPage": 3,
        "isFirstPage": false,
        "isLastPage": false,
        "hasPreviousPage": true,
        "hasNextPage": true,
        "navigatePages": 8,
        "navigatepageNums": [
            1,
            2,
            3,
            4
        ],
        "navigateFirstPage": 1,
        "navigateLastPage": 4
    }
}

3.思路步骤

1. 使用axios从后端获取数据，并记录关键变量的值

   data: {
        
            page: {
        
                pageNum: 1,
                pageSize: 5,
            },
            patientList: [],
            pageTotal: 1,
            rows: 1, // 当前条数
        },
    methods: {
        
            getPatients(i) {
        
                let _this = this;
                _this.page.pageNum = i || _this.page.pageNum;
                axios({
        
                    method:"get",
                    url:`http://localhost:8080/test/patients/${
          _this.page.pageNum}/${
          _this.page.pageSize}`,
                }).then(res => {
        
                    let result = res.data;
                    let data = result.data;
                    _this.patientList = data.list;
                    _this.pageTotal = data.navigateLastPage;
                    _this.rows = data.size;
                    console.log(data);
                }).catch(err => {
        
                    console.log(err);
                });
            },
        },
        mounted() {
        //生命周期函数——钩子函数
            this