乐趣区

关于java:ssmvue实现分页功能

jiezi

我的项目效果图:


我的项目结构图：


为了不便大家练习，我的项目没有过多的代码，只有与分页相干的代码，而且分页性能应用的是 PageHelper 插件，所以实现分页性能超级简略。相干操作步骤及思路：
1、pom.xml 文件引入 PageHelper 的 jar 包坐标
2、spring 配置文件注入分页插件信息
3、dao 层间接查问的是所有的数据
4、service 层先设置分页查问的条件，比方当前页多少，每页显示多少条，而后再查问全副，返回的是一个 Page 对象
5、contraller 层，获取页面传过来的参数（当前页，每页显示多少条数据），而后调用 service 层的办法，返回一个 page 对象，依据这个 page 对象再封装一个 PageInfo 对象，最初把 PageInfo 转成 json 格局返回页面即可。

我的项目环境：

前端：vue

后端：ssm（spring+springmvc+mybatis）

数据库：mysql

如果你在运行这个代码的过程中有遇到问题，请加小编 vi 信 xxf960513，我拉你进对应学习群！！帮忙你疾速把握这个性能代码！

后端代码

1、pom.xml 文件引入 PageHelper 的 jar 包坐标 

<!-- 分页插件坐标 -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
   </dependency>

2、spring 配置文件注入分页插件信息 

 <!-- 整合 mybatis 到 spring 中 -->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="com.javaxxf.pojo"/>
        <!-- 分页插件 -->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

3、dao 层间接查问的是所有的数据

ZiLiaoDao.java

@Component
public interface ZiLiaoDao {@Select("SELECT * FROM ziliao")
    public abstract List<ZiLiao> findAll();}

4、service 层先设置分页查问的条件，比方当前页多少，每页显示多少条，而后再查问全副，返回的是一个 Page 对象

ZiLiaoServiceImpl.java

@Service
public class ZiLiaoServiceImpl  implements ZiLiaoService {

    @Autowired
    private ZiLiaoDao ziLiaoDao;
    /**
     *
     * @author xuxiaofei
     * @date 2021/8/13 上午 10:54
     * @param currentPage  当前页
     * @param pageSize   每页条数
     * @return com.github.pagehelper.Page
     */
    public Page findAll(Integer currentPage, Integer pageSize) {
        // 设置分页
        Page page= PageHelper.startPage(currentPage,pageSize);
        // 查问全副
        List<ZiLiao> all = ziLiaoDao.findAll();
        return  page;
    }

}

5、contraller 层，获取页面传过来的参数（当前页，每页显示多少条数据），而后调用 service 层的办法，返回一个 page 对象，依据这个 page 对象再封装一个 PageInfo 对象，最初把 PageInfo 转成 json 格局返回页面即可。

ZiLiaoController.java

@RestController
public class ZiLiaoController {
@Autowired
private ZiLiaoService ziLiaoService;
@RequestMapping("findAll")
public String getAll(Integer currentPage, Integer pageSize) throws IOException {
// 分页查问
Page page = ziLiaoService.findAll(currentPage, pageSize);
// 封装 PageInfo
PageInfo info = new PageInfo(page);
// 将 info 转成 json，响应给客户端
String json = new ObjectMapper().writeValueAsString(info);
return json;
 }
}

前端代码

index.html

methods:{
            // 分页查问性能
            selectByPage(){axios.post("findAll","currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                    .then(resp => {
                        // 将查问出的数据赋值 tableData
                        this.tableData = resp.data.list;
                        // 设置分页参数
                        // 当前页
                        this.pagination.currentPage = resp.data.pageNum;
                        // 总条数
                        this.pagination.total = resp.data.total;
                    })
            },
            // 扭转每页条数时执行的函数
            handleSizeChange(pageSize) {
                // 批改分页查问的参数
                this.pagination.pageSize = pageSize;
                // 从新执行查问
                this.selectByPage();},
            // 扭转页码时执行的函数
            handleCurrentChange(pageNum) {
                // 批改分页查问的参数
                this.pagination.currentPage = pageNum;
                // 从新执行查问
                this.selectByPage();}
        },
        mounted(){
            // 调用分页查问性能
            this.selectByPage();}

残缺源码下载地址：https://gitee.com/xuxiaofei19…

如果你在运行这个代码的过程中有遇到问题，请加小编 vi 信 xxf960513，！帮忙你疾速把握这个性能代码！

退出移动版