java实现分页功能 一页展示12条数据并实现下一页功能和前端代码

Java实现分页功能，可以使用MyBatis-PageHelper插件来实现。这里以Spring Boot框架为例，具体步骤如下：

1. 在pom.xml文件中添加PageHelper的依赖：

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>

2. 在MyBatis的配置文件中配置PageHelper：

<!-- 分页插件 -->
<plugins>
    <plugin interceptor="com.github.pagehelper.PageInterceptor">
        <!-- 设置数据库类型 -->
        <property name="helperDialect" value="mysql"/>
        <!-- 是否将参数offset作为PageNum使用 -->
        <property name="offsetAsPageNum" value="true"/>
        <!-- 是否进行count查询 -->
        <property name="rowBoundsWithCount" value="true"/>
        <!-- 是否分页合理化 -->
        <property name="reasonable" value="true"/>
    </plugin>
</plugins>

3. 在Service层中使用PageHelper进行分页查询，例如：

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public PageInfo<User> getUserList(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<User> userList = userMapper.getUserList();
        return new PageInfo<>(userList);
    }
}

4. 在Controller层中接收前端传来的pageNum和pageSize参数，并调用Service层的方法进行分页查询，例如：

@RestController
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/users")
    public PageInfo<User> getUserList(@RequestParam(defaultValue = "1") int pageNum,
                                      @RequestParam(defaultValue = "12") int pageSize) {
        return userService.getUserList(pageNum, pageSize);
    }
}

5. 前端代码中可以使用Vue.js来实现分页功能，例如：

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
    </ul>
    <div>
      <button @click="prevPage" :disabled="pageInfo.pageNum === 1">上一页</button>
      <button @click="nextPage" :disabled="pageInfo.isLastPage">下一页</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userList: [],
      pageInfo: {},
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    getUserList(pageNum = 1, pageSize = 12) {
      axios.get(`/users?pageNum=${pageNum}&pageSize=${pageSize}`)
        .then(res => {
          this.userList = res.data.list;
          this.pageInfo = res.data;
        });
    },
    prevPage() {
      this.getUserList(this.pageInfo.pageNum - 1);
    },
    nextPage() {
      this.getUserList(this.pageInfo.pageNum + 1);
    },
  },
};
</script>

其中，getUserList方法使用axios来发起GET请求，获取分页数据，并将返回的结果赋值给userList和pageInfo对象。prevPage和nextPage方法分别调用getUserList方法，传入不同的pageNum参数来实现上一页和下一页的功能。在按钮上使用:disabled属性来判断是否可以点击。