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

【前后端分离】用户绑定及分页展示 本文记录前后端用户绑定及分页展示的过程 效果展示

技术架构

后台：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 库，具体可参看进入

前端页面代码

代码结构

request.js 代码

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

后台对象controller交互的文件，即 api 文件夹下的那个 js，为以下内容

import request from '../utils/request'

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

views层前端页面，该部分内容可借鉴Element UI 进入