springboot+vue+elementUI实现分页功能

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

springboot+vue+elementUI做分页还是非常简单的,这里简单写个demo。

一、前端

<template>
  <div class="father">
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="username"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码"
          width="180">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        @current-change="pageNoChange"
        :current-page.sync="currentPage.pageNo"
        :page-size="5"
        layout="total, prev, pager, next"
        :total='currentPage.total'>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "Father",
  data(){
    return {
      tableData: [],
      currentPage: {
        pageNo: 1,
        total: 0
      }
    }
  },
  mounted() {
    this.search();
  },
  methods:{
    pageNoChange(){
      let that = this;
      that.search();
    },
    search(){
      let that = this;
      that.$axios.defaults.baseURL='http://localhost:8081'
      that.$axios({
        method: 'get',
        url: '/test/search?pageNo='+that.currentPage.pageNo,
      }).then((result) => {
        that.tableData = result.data.data;
        that.currentPage.total = result.data.count;
      });
    }
  }
}
</script>

二、后端

controller代码:

import com.example.myblog.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;

@RestController
@RequestMapping("/test")
public class TestController {

    @Autowired
    private TestService testService;

    @RequestMapping(value="/search",method={RequestMethod.GET})
    @ResponseBody
    public Map<String, Object> search(Integer pageNo){
        return testService.search(pageNo);
    }
}

service代码:

import java.util.Map;

public interface TestService {
    Map<String,Object> search(Integer pageNo);
}

serviceImpl

import com.example.myblog.mapper.TestMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class TestServiceImpl implements TestService{

    @Autowired
    private TestMapper testMapper;

    @Override
    public Map<String,Object> search(Integer pageNo) {
        Integer pageSize = 5;
        Integer startIndex = pageSize * (pageNo-1);
        Map map = new HashMap();
        map.put("data",testMapper.search(startIndex,pageSize));
        map.put("count",testMapper.searchCount());
        return map;
    }
}

mapper代码:

import com.example.myblog.pojo.Test;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;


import java.util.List;
@Mapper
public interface TestMapper {
    @Select("select * from test limit #{startIndex},#{pageSize}")
    List<Test> search(Integer startIndex,Integer pageSize);
    @Select("select count(*) from test")
    Integer searchCount();
}

数据库数据:
在这里插入图片描述
效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

利用element-UI做分页还是很简单的,查询时,得到分页数据和总数据量,传到前端赋值即可。

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值