分页功能实现前端vue+java后端代码 以及sql语句

以下是一个基于Vue和Java的分页功能实现的示例代码：

前端Vue代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="person in persons" :key="person.id">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
          <td>{{ person.gender }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button :disabled="page <= 1" @click="prevPage">上一页</button>
      <button :disabled="page >= totalPages" @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      persons: [],
      page: 1,
      size: 10,
      totalPages: 0
    };
  },
  mounted() {
    this.getPersons();
  },
  methods: {
    getPersons() {
      axios.get("/api/persons", {
          params: {
            page: this.page,
            size: this.size
          }
        })
        .then(response => {
          this.persons = response.data.content;
          this.totalPages = response.data.totalPages;
        })
        .catch(error => {
          console.error(error);
        });
    },
    prevPage() {
      if (this.page > 1) {
        this.page--;
        this.getPersons();
      }
    },
    nextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.getPersons();
      }
    }
  }
};
</script>

后端Java代码：

@RestController
@RequestMapping("/api")
public class PersonController {
  
  @Autowired
  private PersonRepository personRepository;
  
  @GetMapping("/persons")
  public Page<Person> getPersons(
      @RequestParam(defaultValue = "1") Integer page,
      @RequestParam(defaultValue = "10") Integer size) {
    Pageable pageable = PageRequest.of(page - 1, size);
    return personRepository.findAll(pageable);
  }
  
}

SQL语句：

如果您使用的是Spring Data JPA，则无需编写SQL语句，因为它会自动生成基于方法名的查询语句。如果您使用的是MyBatis等其他ORM框架，则可以根据不同的数据库编写不同的分页SQL语句。以下是一个MySQL数据库的分页查询SQL语句示例：

SELECT * FROM person LIMIT ?, ?

其中，第一个问号表示从哪一行开始查询，第二个问号表示查询多少行数据，这两个参数可以由Java后端代码中的Pageable对象提供。