4.网页分页实现，查询，大图查看

一、分页

在我们前端index.html中，已经做好了分页的设计，展示一条作为参考。

 <li class="page-item"><a class="page-link text-danger" href="#">第一页</a></li>

现在需要做的是将分页是功能实现出来，当用户点击的时候可以进行页面的切换。
我们需要在设计好的分页导航栏上为分页添加点击事件。

 <li class="page-item"><a class="page-link text-danger" href="#">第一页</a></li>

在每一条分页的代码中添加onclick属性，它将在点击时调用getList()函数，传入的参数是1。
同时我们还需要添加window.event.preventDefault()，它的作用是阻止浏览器的默认行为，阻止默认的链接行为的目的是为了实现自定义的功能或交互效果，而不是让浏览器按照默认的方式处理链接。
在传统的网页中，点击一个链接通常会使浏览器导航到该链接指向的URL地址，需要在点击链接时执行一些其他的操作，触发一个JavaScript函数来执行特定的逻辑，如打开一个模态窗口、显示一个弹出框等，就需要阻止浏览器的默认行为。
我也不是很透彻，测试了去除window.event.preventDefault()，分页功能会有一点点问题，比如下一页点击时依旧还是在原来的页面。
分页导航栏添加完成后如下这般：

<nav>
        <ul class="pagination justify-content-center text-danger fw-bold">
            <li class="page-item"><a class="page-link text-danger" href="#"
                                     onclick="getMealList(1);window.event.preventDefault()">第一页</a></li>
            <li class="page-item"><a class="page-link text-danger" href="#"
                                     onclick="getMealList(pageObj.curr-1);window.event.preventDefault()">上一页</a></li>
            <li class="page-item"><a class="page-link text-danger" href=""
                                     onclick="getMealList(pageObj.curr+1);window.event.preventDefault()">下一页</a></li>
            <li class="page-item"><a class="page-link text-danger" href="#"
                                     onclick="getMealList(pageObj.last);window.event.preventDefault()">最后一页</a></li>
            <li class="page-item d-flex align-items-center ms-1" id="pageInfo"></li>
        </ul>
    </nav>

二、查询

2.1后端

在完成分页的功能后，还需要实现查询的功能，
查询就需要我们的查询条件，还记得上一篇文章提到的作为查询条件的MealQueryDto类嘛，在上一篇文章我们只定义了一个空类，现在我们查询功能就需要用到查询条件，就需要在MealQueryDto类中定义属性了。

在后端发往前端的Json格式的数据中，关于商品的描述是meal_desc,使用我们在类中定义meal_desc变量来放查询条件。
代码如下：

public class MealQueryDto extends PageParam {
    private String meal_desc;
    public String getMeal_desc(){
        return meal_desc;
    }
    public void setMeal_desc(String meal_desc){
        this.eal_desc=meal_desc;
    }
}

接下来就是修改原来MealServleet类里面的getList函数。
要在数据库里进行模糊查询我们要修改sql语句，以及做一些判断。
代码如下：

    private void mealList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String sql = "select * from t_meal";
        MealQueryDto mealQueryDto = MyWeb.getBeanFromRequest(MealQueryDto.class, req);

        List<Object> argList = new ArrayList<>();
        if (mealQueryDto != null && mealQueryDto.getMeal_desc() != null && !mealQueryDto.getMeal_desc().equals("")) {
            sql += " where meal_desc like ?";
            argList.add("%" + mealQueryDto.getMeal_desc() + "%");
        }
        Page page = PageFactory.getMySqlPage(Meal.class, mealQueryDto, DaoCreater.currentDao(), sql, argList.toArray());
        MyWeb.printJson(resp, R.OK(page));//以Json格式向前端发送数据

    }

依旧是从请求中获取MealQueryDto的实体对象
创建一个集合对象，用来存放参数的集合，由于我们只有一个参数，在这里可以不写集合，这里用集合是表示可以以后扩展的。
判断条件的说明，要求获取MealQueryDto的实体对象不是空，且查询条件不为空，也不能为空字符串。
sql语句的修改，原来是对表的所有数据进行查询，现在是有条件的进行查询，所以要对sql语句进行拼接条件，？是占位符，最终在数据库里会与查询条件拼接在一起，组成完整的sql语句。
如果mealQueryDto.getMeal_desc() 是“肉”，
那么完整的sql语句：select * from t_meal where meal_desc like '%肉%'
最后在PageFactory.getMySqlPage方法中添加新的参数查询条件，在向前端发送查询后的Json格式的数据。

2.2前端

后端的功能逻辑已经完成，现在就需要前端把参数通过请求把数据传回后端了
先在查询的板块，添加点击属性，调用getList函数，参数是1。

  <button class="btn btn-danger" type="button" onclick="getMealList(1)">查询</button>

其次修改查询条件，添加meal_desc变量，用来存放输入的查询条件。

    const query = {
        page: 1,
        rows: 8,
        meal_desc:""
    };

在修改fetch方法添加&meal_desc=${query.meal_desc}，把输入的查询条件存放在meal_desc变量中返回后端。

const response = await fetch(`./meal/list?page=${query.page}&rows=${query.rows}&meal_desc=${query.meal_desc}`);

到这里功能大致就实现完成了。
重启项目，输入查询，看页面是否是按条件的查询结果，可以打开开发人员工具，看看，有没有信息。

在这里我的项目页面查询成功，响应中也也获取到了查询条件。

三、查看大图

在这里我们需要引进一个模态框，用于显示商品大图。
这是bootstrap的模态框，感兴趣可以自行去了解。

<div class="modal fade" id="myModal" tabindex="-1" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close"onclick="myModal.hide()" ></button>
            </div>
            <img id="bigImg" src="" class="object-fit-contain" style="height:500px;"></img>
        </div>
    </div>
</div>

放入我们的index.html文件中后修改合适的id，模态框的id和img标签的id,便于接下来的使用。
在模态框的button标签中添加点击属性，调用myModal.hide()隐藏模态框，当点击X时关闭模态框。
由于模态框是一个属性或者元素，我们需要变量，所以我们要创建一个变量。

const myModal = new bootstrap.Modal(document.querySelector(`#myModal`));

document.querySelector()方法是在当前文档中查找指定参数的id。这里查找的是模态框，所以传入的参数是模态框的 id。
然后在getList函数中，修改卡片，为模态框图片标签获取图片的路径。
在img标签中添加点击属性 ，将当前图片的路径赋值给模态框的路径，在调用myModal.show()方法，用来显示大图。到这里基本就完成了。

<img  onclick="document.querySelector('#bigImg').src=this.src;myModal.show();" src="/meal/pic?meal_pic=${meal.meal_pic}" class="h-75 object-fit-cover card-img-top rounded-1" alt="...">

修改后的卡片：

  let card = `
                    <div class="card border-0 p-2" style="width: 23%;margin-bottom: 20px;" >
            <img  οnclick="document.querySelector('#bigImg').src=this.src;myModal.show();
            " src="/meal/pic?meal_pic=${meal.meal_pic}" class="h-75 object-fit-cover card-img-top rounded-1" alt="...">
            <div class="card-body px-0 pb-0" >
                <h5 class="card-title fw-bold text-secondary">${meal.meal_desc}</h5>
                <div class="card-text d-flex justify-content-between mb-2">
                    <span class="text-body-tertiary fs-6">已售 ${meal.sm_sale}</span>
                    <span class="text-body-tertiary fs-6">库存 ${meal.sm_store}</span>
                    <span class="text-body-tertiary fs-6">点击 ${meal.sm_click}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center" >
                    <span class="text-danger fs-5 fw-bold">￥${meal.meal_price}</span>
                    <img  src="./images/shopping-cart.png" style="height:35px;cursor: pointer;" class="pe-1">
                </div>
            </div>
        </div>
`;

在getList函数循环中，就可以每一张图片都可以实现查看大图 的功能了，
刷新点击页面的商品图片，看是否实现成功。