vue-element-ui 分页实现 axios请求 spring boot带后台

你的名字 2023-03-01 10:07 4阅读 0赞

> vue-element-ui 分页实现 axios请求 spring boot带后台

直接上步骤

码云上直接下载[vue-element-admin][]下载地址可百度

git clone xxxxxx 下载到本地运行起来

新建一个组件，并在路由曾加一个菜单引用这个文件，vue文件如下，可以直接粘贴测试

<template>
      <div style="padding: 20px">
        <div style="margin-bottom: 20px">
          <el-input style="width: 200px;margin-right: 20px" v-model="query.name" placeholder="请输入名字"></el-input>
          <el-input style="width: 200px;margin-right: 20px" v-model="query.address" placeholder="请输入地址"></el-input>
          <el-button style="width: 80px" type="primary" @click="loadData">搜索</el-button>
        </div>
      <el-table border
        :data="tableData"
        stripe
        style="width: 100%;margin-bottom: 20px">
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="query.total"
          :current-page="query.page"
          :page-size="query.pageSize"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            query:{
              name:'',
              address:'',
              total:20,
              page:1,
              pageSize:10
            },
            tableData: []
          }
        },
        created(){
          this.loadData()
        },
        methods:{
          pageChange(page){
            this.query.page = page
            this.loadData()
          },
          loadData(){
            this.$axios.get("/getDataList",{
              params:this.query,
            }).then(res => {
              this.tableData = res.data.list
              this.query.total = res.data.total
            }).catch(e => {
              console.log(e)
            })
          }
        }
      }
    </script>

后台java接口，模拟接口，就不调用数据库了，道理是一样的

package com.ning.controller;
    
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @RestController
    public class TestController {
        private int pageSize = 10;
        private int total = 599;
        @GetMapping("/getDataList")
        public Map<String,Object> getDataList(@RequestParam Map<String,Object> params){
            Map<String, Object> retMap = new HashMap<>();
            List<Map<String,Object>> list = new ArrayList<>();
            Object name = params.get("name");
            String nameStr = "随机名字";
            if(name != null && !"".equals(name.toString())){
                nameStr = name.toString();
            }
            String addressStr = "随机地址";
            Object address = params.get("address");
            if(address != null && !"".equals(address.toString())){
                addressStr = address.toString();
            }
            for(int i = 1;i <= pageSize;i++){
                Map<String,Object> temp = new HashMap<>();
                temp.put("name",nameStr+i+"第"+params.get("page").toString()+"页");
                temp.put("address",addressStr+i+"第"+params.get("page").toString()+"页");
                list.add(temp);
            }
            retMap.put("list",list);
            retMap.put("page",params.get("page"));
            retMap.put("total",total);
            return retMap;
        }
    }

两个文件即可，没有条件测试的同学可以参看下我的运行截图

页面刚加载下来的效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70][]

输入查询参数，点击搜索的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70 1][]

点击分页插件的继续调用接口并且携带输入框查询参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70 2][]

欢迎关注交流

[vue-element-admin]: https://panjiachen.gitee.io/vue-element-admin/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70]: /images/20230209/635a127bdc6f4486bc7ff086319f6f6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70 1]: /images/20230209/b86eab70dee345719db33e04b2d1cb79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzE2Mjcy_size_16_color_FFFFFF_t_70 2]: /images/20230209/8dd4fabc65704d339d2476cfd19ea2c5.png