手拉手全栈springboot+vue2+Element实现分页

环境介绍

技术栈	springboot+mybatis-plus+mysql+vue2+Element
软件	版本
mysql	8
IDEA	IntelliJ IDEA 2022.2.1
JDK	1.8
Spring Boot	2.7.13
mybatis-plus	3.5.3.2

后端

实体类、持久层、服务层使用Mybatis-Plus逆向工程生成

实体类

@TableName(value ="t_address")
@Data
public class TAddress implements Serializable {
    /**
     * 
     */
    @TableId(type = IdType.AUTO)
    private Integer id;

    /**
     * 
     */
    private String address;

    @TableField(exist = false)
    private static final long serialVersionUID = 1L;
}

持久层(mapper)

@Mapper
public interface TAddressMapper extends BaseMapper<TAddress> {

    Integer getTotal();

}

TAddressMapper.xml

<select id="getTotal">
    SELECT count(*) FROM `t_address`
</select>

服务层

public interface TAddressService extends IService<TAddress> {

    Integer getTotal();
}

@Service
@DS("sys2")
public class TAddressServiceImpl extends ServiceImpl<TAddressMapper, TAddress>
    implements TAddressService {

    @Autowired
    private   TAddressMapper tAddressMapper;

    @Override
    public Integer getTotal() {
        return tAddressMapper.getTotal();
    }
}

控制层

@GetMapping("/getpage")
public Map<String,Object> getPageTAddress(@RequestParam(defaultValue = "1") int pageNum,
                                          @RequestParam(defaultValue = "10") int pageSize) {
    PageHelper.startPage(pageNum,pageSize);
    List<TAddress> data = tAddressService.list();
    Integer  total= tAddressService.getTotal();
     HashMap<String, Object> res = new HashMap<>();
     res.put("data",data);
     res.put("total",total);
    return res;
}

@RestController
@CrossOrigin //表示都允许跨域访问
public class demoController {
    @Autowired
    private TAddressServiceImpl tAddressService;

    
    @GetMapping("/getpage")
    public Map<String,Object> getPageTAddress(@RequestParam(defaultValue = "1") int pageNum,
                                              @RequestParam(defaultValue = "10") int pageSize, HttpServletResponse response){
        PageHelper.startPage(pageNum,pageSize);
        List<TAddress> data = tAddressService.list();
        Integer  total= tAddressService.getTotal();
         HashMap<String, Object> res = new HashMap<>();
         res.put("data",data);
         res.put("total",total);
        return res;
    }

}

前端

Pagination.vue

<template>
    <div class="block">
        <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <!-- <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column> -->
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10,20,30,40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>


  <script>
  export default {
    data() {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 10
      }
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        this.$add.get("/getpage?"+"pageNum="+this.pageNum+"&pageSize="+this.pageSize).then((response)=>{
          console.log(response)
      this.tableData = response.data.data
      this.total = response.data.total
      })

      
      },
      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      }
    }
  }
  </script>

App.vue

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios'
import router from './router/router'
import store from './store/index'
import  './mock'

axios.defaults.baseURL = "http://localhost:8007"
Vue.prototype.$add = axios

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
  store:store
}).$mount('#app')

效果