SSM开发书评网13：图书列表分页及查询三：图书分页查询（2）；（Controller部分；前端部分开发了一半）

本文链接：https://blog.csdn.net/csucsgoat/article/details/122077080

说明：

（1）本篇博客任务：图书分页查询：首页加载时，先默认显示第一页数据：Controller部分；前端开发了一部分；

（2）本篇博客前端内容说明：

● 因为，我们希望，在第一次加载index.ftl这个首页时，首页上就默认加载第一页的图书；所以对于这个业务场景来说，我们把这个ajax请求的<script>写在了<head>中，即写在了页面就绪函数中；

● 本篇博客的一个重点是：前端通过Ajax向后端发起请求，然后服务器返回了一些JSON数据，如果我们想把这些JSON数据显示在页面上：就需要，把这些JSON数据转换为HTML，然后动态的加载到对应的数据容器中；（这是在日常开发中，比较普遍采取的做法）

（3） 有关Ajax的内容，可以参考【附加：Ajax总结；（随时补充……）】这篇汇总博客；

1.分析：【前端页面逻辑】与【后台Controller】开发分析：前端通过【Ajax的方式】来和后端交互比较好；

2.开发Controller：调用Service层的分页查询方法，并向前端返回JSON；

6.index.ftl前端文件，利用Ajax动态获取后端的JSON数据，组织数据；（只开发了一半）

（1）index.ftl首页文件分析；

（2）利用Ajax与后端交互；

1.分析：【前端页面逻辑】与【后台Controller】开发分析：前端通过【Ajax的方式】来和后端交互比较好；

上面我们已经在Service和Dao部分，实现了图书分页查询；然后Service返回的是IPage分页对象；接下来的任务就是开发Controller和前端了；

……………………………………………………

（1）如果前端不使用Ajax的方式来和后端交互：

● 那么，前端就是采用传统的方式来和后端交互了；这也意味着，【图书信息】是随着【index.ftl这个首页的加载】而同时生成的；此时，每当我们点击【点击加载更多】后，为了显示新加载的图书信息，就需要刷新整个index.ftl首页；

● 由此来看，这种方式不太好；

（2）如果前端使用Ajax的方式来和后端交互：

● 此时当我们点击【点击加载更多】后，index.ftl这个首页不用刷新，Ajax动态加载是在页面进行局部刷新的；

● 即，前端使用Ajax的方式来和后端交互，更加友好；

● 虽然，为了使用Ajax会比较麻烦一些；（我们需要通过JavaScript，来控制请求的提交，和，返回数据的处理）

（3）有关Ajax的内容，可以参考【附加：Ajax总结；（随时补充……）】这篇汇总博客；

2.开发Controller：调用Service层的分页查询方法，并向前端返回JSON；

BookController：这儿新增的是selectBook()图书分页查询方法；

package com.imooc.reader.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.imooc.reader.entity.Book;
import com.imooc.reader.entity.Category;
import com.imooc.reader.service.BookService;
import com.imooc.reader.service.CategoryService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import java.util.List;

@Controller
public class BookController {
    @Resource
    private CategoryService categoryService;
    @Resource
    private BookService bookService;

    /**
     * 显示首页
     * @return
     */
    @GetMapping("/")
    public ModelAndView showIndex() {
        ModelAndView modelAndView = new ModelAndView("/index");
        List<Category> list = categoryService.selectAll();
        mode