vue+pagehelper使用

Vue.js 和 PageHelper 是两个不同的工具，可以在前后端开发中结合使用。

Vue.js 是一个用于构建用户界面的 JavaScript 框架，它可以帮助开发者构建可复用的组件，实现数据的双向绑定和响应式更新等功能。Vue.js 可以轻松地与后端 API 进行通信，实现前后端分离的开发模式。

PageHelper 是一个用于分页查询的 Java 类库，它可以帮助开发者在数据库查询时进行分页处理。PageHelper 提供了丰富的分页查询方法和参数配置，可以方便地实现数据的分页展示和导航功能。

结合 Vue.js 和 PageHelper 进行分页查询的示例代码如下：

1. 后端代码（Java）：

// 导入 PageHelper 类库
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

// 分页查询方法
public PageInfo<User> getUserList(int pageNum, int pageSize) {
    // 开始分页，pageNum 表示当前页码，pageSize 表示每页显示数量
    PageHelper.startPage(pageNum, pageSize);
    // 调用后端接口获取用户列表数据，例如从数据库中查询
    List<User> userList = userDao.getUserList();
    // 封装查询结果为 PageInfo 对象
    PageInfo<User> pageInfo = new PageInfo<>(userList);
    return pageInfo;
}

2. 前端代码（Vue.js）：

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [], // 用户列表数据
      pageNum: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    };
  },
  methods: {
    loadMore() {
      // 调用后端接口获取分页数据
      axios.get('/api/userList', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }