【全栈】SprintBoot+vue3迷你商城（11）

【全栈】SprintBoot+vue3迷你商城（11）

往期的文章都在这里啦，大家有兴趣可以看一下

后端部分：

【全栈】SprintBoot+vue3迷你商城（1）
【全栈】SprintBoot+vue3迷你商城（2）
【全栈】SprintBoot+vue3迷你商城-扩展：利用python爬虫爬取商品数据
【全栈】SprintBoot+vue3迷你商城（3）
【全栈】SprintBoot+vue3迷你商城（4）
【全栈】SprintBoot+vue3迷你商城（5）
【全栈】SprintBoot+vue3迷你商城（6）

前端部分：

【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

【全栈】SprintBoot+vue3迷你商城-扩展：vue3项目创建及目录介绍

【全栈】SprintBoot+vue3迷你商城（7）

【全栈】SprintBoot+vue3迷你商城（8）

【全栈】SprintBoot+vue3迷你商城（9）

【全栈】SprintBoot+vue3迷你商城（10）

细节解析部分：

【全栈】SprintBoot+vue3迷你商城-细节解析（1）：Token、Jwt令牌、Redis、ThreadLocal变量

本期主要完善迷你商城的分页与搜索部分，我们将使用 PageHelper写出分页接口，再结合前端的分页组件，完善迷你商城的分页以及搜索功能

本期只讲操作，一些细节会在后期的细节解析中详细讲解。

1.PageBean

首先需要构建pageBean模型来封装分页处理后的数据

package com.janium.minimallbe.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PageBean<T> {
    private Long total;
    private List<T> items;
}

2.PageHelper

然后使用PageHelper来对数据库中的数据进行分页查询并封装在PageBean中,并新增searchKey这一参数来完善搜索功能

GoodsController:

@GetMapping("/list")
    public Result<PageBean<GoodsShowModel>> getGoodsList(
            Integer pageNum ,
            Integer pageSize,
            @RequestParam(required = false) String searchKey
    ) {
        PageHelper.startPage(pageNum, pageSize);

        List<Goods> goodsList = goodsService.getGoodsList(searchKey);

        PageInfo<Goods> pageInfo = new PageInfo<>(goodsList);

        List<GoodsShowModel> goodsShowModelList = new ArrayList<>();
        for (Goods goods : goodsList) {
            User merchant = userService.findById(goods.getMerchantId());
            GoodsShowModel goodsShowModel = new GoodsShowModel(
                    goods.getId(),
                    goods.getGoodsName(),
                    goods.getGoodsImgUrl(),
                    goods.getGoodsPrice(),
                    merchant.getUsername(),
                    merchant.getUserPic()
            );
            goodsShowModelList.add(goodsShowModel);
        }

        PageBean<GoodsShowModel> pb = new PageBean<>();
        pb.setTotal(pageInfo.getTotal());
        pb.setItems(goodsShowModelList);

        return Result.success(pb);
    }

之后在service层以及mapper层做如下更改：

service层

    @Override
    public List<Goods> getGoodsList(String searchKey) {
        return goodsMapper.getGoodsList(searchKey);
    }

mapper层

    @Select("select * from goods where goodsName regexp CONCAT('.*', #{searchKey}, '.*')")
    List<Goods> getGoodsList(String searchKey);

如此操作后，后端的分页接口就完成了

利用postman测试，效果如下：

3.前端组件

前端部分则是搭建组件，绑定数据，调用接口即可。

搭建组件及绑定数据(GoodsList.vue)：

<template>
<div style="display: flex; justify-content: center;">
          <el-pagination background layout="prev, pager, next" :total="goodsCount" :page-size="pageSize"
          :current-page="currentPage"  @current-change="handlePageChange" />
        </div>
</template>

<script>
    
  const goodsList = async () => {
      let result = await getGoodsListService(currentPage.value,pageSize.value,searchKey.value);
      goodsListModel.value = result.data['items'];
      goodsCount.value = result.data['total']
      console.log(result.data['total'])
}
goodsList();
    
    const searchKey = ref('')
    const currentPage = ref(1);
    const pageSize = ref(12);
    const handlePageChange = (newPage) => {
  console.log(newPage)
  currentPage.value = newPage;
  goodsList();
};
</script>

调用接口(goods.js)：

export const getGoodsListService = (pageNum, pageSize, searchKey) => {
    return request.get('/goods/list', {
        params: {
            pageNum: pageNum,
            pageSize: pageSize,
            searchKey: searchKey
        }
    });
};

做到这些，前端的也就完成了，效果如下：

• 注意：这些商品信息都是从淘宝中爬取所得，爬取仅为练习、测试所用，这些商品的商家也不是Janium，如需购买，请到淘宝搜索对应商家的该商品进行购买

4.总结

本期我们完善了迷你商城的分页功能以及搜索功能，一些细节会在后期的细节解析中详细讲解。