spring cloud+vue在线视频网站 5.分页功能+增加章节

1 分页功能开发

首先集成分页功能需要先在 Maven 中添加 pagehelper 依赖，然后在 ChapterService 中添加 pagehelper 的设置，接着试一下分页功能是否生效。后面添加分页功能的具体细节，第一修改成后端接收分页要求，第二修改前端分页布局，第三修改前端请求。

1 添加依赖

首先在 course 的 pom.xml 文件中添加依赖和版本

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

然后在 service 模块中的 pom.xml 添加

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

2 添加设置

在 ChapterService 的 list 类第一句添加PageHelper.startPage(1,1);即可，访问 http://127.0.0.1:9002/business/admin/chapter/list 即可看到只返回了一条记录。

1 添加后端 pageDto

package com.course.server.dto;

import java.util.List;

public class PageDto<T> {
   
    //当前页码
    protected int page;
    //每页条数
    protected int size;
    //总条数
    protected long total;

    protected List<T> list;

    public long getTotal() {
   
        return total;
    }

    @Override
    public String toString() {
   
        return "PageDto{" +
                "page=" + page +
                ", size=" + size +
                ", total=" + total +
                ", list=" + list +
                '}';
    }

    public List<T> getList() {
   
        return list;
    }

    public void setList(List<T> list) {
   
        this.list = list;
    }

    public void setTotal(long total) {
   
        this.total = total;
    }

    public int getPage() {
   
        return page;
    }

    public void setPage(int page) {
   
        this.page = page;
    }

    public int getSize() {
   
        return size;
    }

    public void setSize(int size) {
   
        this.size = size;
    }
}

2 调整后端 Controller Service 层

这里调用后端查询的方法是，前端先传入分页的参数 page 和 size；接着后端先查询出结果，然后将结果传给 PageInfo 实例，实例对结果进行分页处理后再赋给 PageDto 返回前端。
修改 ChapterController 层代码如下：

package com.course.business.controller.admin;

import com.course.server.dto.PageDto;
import com.course.server.service.ChapterService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

@RestController
@RequestMapping("/admin/chapter")
public class ChapterController {
   

    @Resource
    private ChapterService chapterService;

    @RequestMapping("/list")
    public PageDto list(@RequestBody PageDto pageDto){
   
        chapterService.list(pageDto);
        return pageDto;
    }
}

这里如果在 list 的传入函数中不加 @RequestBody 是接收不到传入的数据的。

ChapterService 代码如下：

package com.course.server.service;

import com.course.server.domain.Chapter;
import com.course.server.domain.ChapterExample;
import com.course.server.dto.ChapterDto;
import com.course.server.dto.PageDto;
import com.course.server.mapper.ChapterMapper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import com.github.pagehelper.PageHelper;

@Service
public class ChapterService {
   

    @Resource
    private ChapterMapper chapterMapper;

    public void list(PageDto pageDto){
   
        PageHelper.startPage(pageDto.getPage(),pageDto.getSize());

        ChapterExample chapterExample = new ChapterExample();
        List<Chapter> chapterList = chapterMapper.selectByExample(chapterExample);

        PageInfo<Chapter> pageInfo = new PageInfo<>(chapterList);
        pageDto.setTotal(pageInfo.getTotal());
        List<ChapterDto> chapterDtosList = new ArrayList<>();
        for (int i = 0; i < chapterList.size(); i++) {
   
            Chapter chapter = chapterList.get(i);
            ChapterDto chapterDto = new ChapterDto();
            BeanUtils.copyProperties(chapter,chapterDto);
            chapterDtosList.add(chapterDto);
        }
        pageDto.