【前后端分离】用户绑定及分页展示

后台：SpringBoot+Mybatis-plus
前端： Vue 框架
数据传输：Axios 异步请求

后台代码

    
    @GetMapping("/findDList")
    public Result findDList(@RequestParam(required = true,defaultValue = "1")Integer current,
                                 @RequestParam(required = true,defaultValue = "6")Integer size){
        //对用户进行分页，current是当前页，size是页面大小，泛型注入的为用户类
        Pagepage=new Page<>(current,size);
        //
        Page dPage = dService.page(page);
        long total = dPage.getTotal();
        List records = dPage.getRecords();
        return Result.ok().data("total",total).data("records",records);
    }

再写前端代码之前，需要先安装 axios 库，具体可参看进入

前端页面代码

代码结构

//引入axios包
import axios from 'axios'
// 创建 axios 对象
const instance = axios.create({
// 后台端口号为 8081
  baseURL: 'http://localhost:8081',
  timeout: 3000 //单位 毫秒
});
export default instance;

import request from '../utils/request'

export const findDList = (current,size) => {
  return request({
  // Java 后台的 controller 方法
    url: '/system/d/findDList',
    method: 'get',
    params: {
      current,
      size,
    }
  })
}