vue中使用分页组件、将从数据库中查询出来的数据分页展示（前后端分离SpringBoot+Vue）

文章目录

• 1、看实现的效果
• 2、前端vue页面核心代码
• • 2.1、 表格代码（表格样式可以去elementui组件库直接调用相应的）
  • 2.2、分页组件代码
  • 2.3 、script中的代码
• 3、后端核心代码
• • 3.1 控制层
  • 3.2 编写的sql语句调用
  • 3.3 、service层 dao层略

1、看实现的效果

2、前端vue页面核心代码

2.1、 表格代码（表格样式可以去elementui组件库直接调用相应的）

    <div>
              <el-table
                :data="tableDatas"
                border
                style="width: 100%; height: 450px"
              >
                <el-table-column prop="uid" label="编号" width="100">
                </el-table-column>
                <el-table-column prop="userName" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="100">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="100">
                </el-table-column>
                <el-table-column prop="idCard" label="身份证" width="200">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="200">
                </el-table-column>
                <el-table-column
                  prop="registerTime"
                  label="注册时间"
                  width="200"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >查看</el-button
                    >
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

2.2、分页组件代码

直接放到相应的位置

   <!--分页组件-->
            <div style="text-align: left">
              <el-row>
                <el-col :span="12">
                  <el-pagination
                    style="margin: 15px 0px"
                    background
                    layout="prev, pager, next, jumper, total, sizes"
                    :page-size="size"
                    :current-page="now"
                    :page-sizes="[2, 4, 6, 8]"
                    @current-change="findPage"
                    @size-change="findSize"
                    :total="total"
                  >
                  </el-pagination>
                </el-col>
              </el-row>
            </div>

2.3 、script中的代码

提示：这里的total默认设置为0，否则会出现意想不到的问题（不影响使用、但是看起来难受）
在进行方法调用时，会根据传入的size和page作为参数、再次查询数据库

<script>
export default {
  data() {
    return {
      total: 0,
      now: 1,
      size: 8,
      input2: "",
      tableDatas: [],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },

    // 第n页信息
    findPage(now_page) {
      //用来处理当前页的方法,page为当前页
      this.now = now_page;
      this.showAllUserInfo(now_page, this.size);
    },
    findSize(now_size) {
      //用来处理每页条数的方法,size为当前页条数
      this.size = now_size;
      this.showAllUserInfo(this.now, now_size);
    },

    // 展示所有的用户信息
    showAllUserInfo(currentPage, pageSize) {
      //异步请求显示所有数据
      currentPage = currentPage ? currentPage : this.now;
      pageSize = pageSize ? pageSize : this.size;
      axios
        .get("user/findAllUser/" + currentPage + "/" + pageSize)
        .then((res) => {
          console.log(res);
          this.tableDatas = res.data.data.result.userList;
          this.total = res.data.data.result.totals;
        });
    },
  },
  created() {
    this.showAllUserInfo();
  },
};
</script>

3、后端核心代码

3.1 控制层

   // 查询所有的用户信息
    @RequestMapping(value = "/user/findAllUser/{page}/{size}",method = RequestMethod.GET)
    public Result findAllUser(@PathVariable("page") Integer page,@PathVariable("size") Integer size){
        //准备数据 通过这两个参数，可以算出start   计算方法 start=size(page-1)
        int currentPage = page;//当前是第几页
        int pageSize = size; //页面大小
        Map<String, Integer> map = new HashMap<String, Integer>();
        map.put("startIndex", (currentPage - 1) * pageSize);
        map.put("pageSize", pageSize);
        List<User> userList = userService.findAllUser(map);
        Long totals = userService.findUserTotals();
        HashMap<String, Object> result = new HashMap<>();
        result.put("userList",userList);
        result.put("totals",totals);
        return  Result.ok().data("result",result);

    }

3.2 编写的sql语句调用

<!--    分页查询所有用户-->
    <select id="findAllUser" parameterType="Map" resultType="com.zyz.bookshopmanage.pojo.User">
        select * from bookshopmanage.tbl_user limit #{startIndex},#{pageSize}
    </select>

3.3 、service层 dao层略