做Spring Boot图书后台管理项目遇到分页报错的问题

一、问题

        实现分页功能时，点击第几页或者下一页时报错404

二、分析问题

      1、  使用的是MyBatis Plus 框架 ，实现分页功能需要拦截器，可能是没有添加拦截器。

检查是否添加配置类并添加拦截器

PageConfiguration配置类

/**
 * 配置类，用于Spring Boot项目的页面分页配置。
 */
@Configuration
public class PageConfiguration {

    /**
     * 配置分页拦截器，用于对数据库操作结果进行分页处理。
     *
     * @return PaginationInterceptor 分页拦截器实例。
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

2、添加了配置类，也报错404，检查业务代码寻找问题

前端

HTML index默认查询第几页

<script>
    BUI.use('common/main',function(){
        var config = [{id:'1',menu:[{text:'书籍管理',items:[
                    {id:'12',text:'书籍查询',href:'/book/list/1'},//默认查询第一页并展示数据
                    {id:'3',text:'书籍借阅',href:'/borrow/list'},
                    {id:'4',text:'书籍归还',href:'/back/list'}
                ]}]}];
        new PageUtil.MainPage({
            modulesConfig : config
        });
    });
</script>

html分页组件

 <script>
        $(function() {
            var cp=parseInt($("#curPage").val());
            var tp=parseInt($("#tolPage").val());
            $("#pagination2").pagination({
                currentPage:cp,
                totalPage:tp,
                isShow: false,
                count: 5,
                prevPageText: "< 上一页",
                nextPageText: "下一页 >",
                callback: function(current) {
                    location.href='/book/list'+current;
                }
            });
        });
    </script>

HTML隐藏域

<input th:value="${page.currentPage}" type="hidden" id="curPage"/>
<input th:value="${page.totalPage}" type="hidden" id="tolPage"/>

后端

Service层

public interface BookService extends IService<Book> {
    public PageVO pageList(Integer currentPage);

}

ServiceImpl层

@Service
public class BookServiceImpl extends ServiceImpl<BookMapper, Book> implements BookService {

    @Autowired
    private SortMapper sortMapper;
    @Autowired
    private BookMapper bookMapper;
    /**
     * 分页查询书籍列表，包括书籍的基本信息和所属分类名称。
     *
     * @return PageVO 包含分页信息和书籍列表的VO对象。
     */
    @Override
    public PageVO pageList(Integer currentPage) {
        // 创建查询条件，筛选出数量大于0的书籍
        QueryWrapper<Book> bookQueryWrapper = new QueryWrapper<>();
        bookQueryWrapper.gt("number", 0);

        // 初始化分页参数，第1页，每页显示5条记录
        Page<Book> page = new Page<>(currentPage, 5);

        // 执行分页查询
        Page<Book> resultPage = this.bookMapper.selectPage(page, bookQueryWrapper);

        // 初始化分页VO对象
        PageVO pageVO = new PageVO();
        // 设置当前页码和总页数
        pageVO.setCurrentPage(resultPage.getCurrent());
        pageVO.setTotalPage(resultPage.getPages());

        // 初始化书籍VO列表
        // 初始化一个列表，用于存储转换后的书籍VO对象
        List<BookVO> result = new ArrayList<>();

        // 遍历查询结果，转换为BookVO对象，并获取分类名称
        // 遍历书籍列表，将每个书籍转换为BookVO对象，并获取其排序信息
        for (Book book : resultPage.getRecords()) {
            BookVO bookVO = new BookVO();
            BeanUtils.copyProperties(book, bookVO);

            // 根据书籍的分类ID，查询分类名称
            // 根据书籍的排序ID，查询对应的排序信息
            QueryWrapper<Sort> sortQueryWrapper = new QueryWrapper<>();
            sortQueryWrapper.eq("id", book.getSid());
            Sort sort = this.sortMapper.selectOne(sortQueryWrapper);
            // 设置分类名称
            bookVO.setSname(sort.getName());
            result.add(bookVO);
        }

        // 将排序信息设置到BookVO对象中
        pageVO.setData(result);
        return pageVO;
    }
}

Controller层

@Controller
@RequestMapping("/book")
public class BookController {

    /**
     * 注入书籍服务类，用于处理书籍相关的业务逻辑。
     */
    @Autowired
    private BookService bookService;


    /**
     * 处理列出所有书籍的GET请求。
     *
     * @param model Spring MVC中的模型对象，用于向视图传递数据。
     * @return 返回视图名称，此处为列出书籍的页面。
     */
    @GetMapping("/list/{current}")
    public String list(@PathVariable("current") Integer current,  Model model) {

        PageVO pageVO = bookService.pageList(current);
        // 返回视图名称，跳转到列出书籍的页面
        model.addAttribute("page", pageVO);
        return "/user/list";
    }

}

三、解决问题

检查前端 调出控制台报错，发现是book文件下的list2.html找不到，

原因：是HTML中分页组件少写了杠，导致视图解析器直接去寻找list2.html文件

四、解决方法

将上述代码修改为以下代码即可

 <script>
        $(function() {
            var cp=parseInt($("#curPage").val());
            var tp=parseInt($("#tolPage").val());
            $("#pagination2").pagination({
                currentPage:cp,
                totalPage:tp,
                isShow: false,
                count: 5,
                prevPageText: "< 上一页",
                nextPageText: "下一页 >",
                callback: function(current) {
                    location.href='/book/list/'+current;
                }
            });
        });
    </script>