谷粒商城--商城主页(类目)--高级篇笔记三

最新推荐文章于 2024-08-06 11:16:07 发布

_院长大人_

最新推荐文章于 2024-08-06 11:16:07 发布

阅读量1.4k

点赞数 2

分类专栏：谷粒商城文章标签： java spring boot intellij-idea

本文链接：https://blog.csdn.net/qq_31745863/article/details/121331717

版权

谷粒商城专栏收录该内容

23 篇文章 57 订阅

订阅专栏

谷粒商城–商城主页(类目)–高级篇笔记三

1. 首页代码

2. 导入thymeleaf依赖

gulimall-product/pom.xml

 <!--模板引擎thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

3. 首页与静态资源复制

4. 重启gulimall-product服务

访问gulimall-product服务

此页面为静态有页面

5. 编写查询一级目录列表接口

因为使用的thymeleaf,所以直接返回的页面,新建一个web包,用来专门存储thymeleaf相关controller

将原来的controller包修改为app包

新增gulimall-product/src/main/java/site/zhourui/gulimall/product/web/IndexController.java

package site.zhourui.gulimall.product.web;

import org.bouncycastle.math.raw.Mod;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import site.zhourui.gulimall.product.entity.CategoryEntity;
import site.zhourui.gulimall.product.service.CategoryService;

import java.util.List;

/**
 * @author zr
 * @date 2021/10/27 15:23
 */
@Controller
public class IndexController {
    @Autowired
    CategoryService categoryService;

    @GetMapping({"/","index.html"})
    public String indexPage(Model model){
        // TODO 1、查出所有1级分类
        List<CategoryEntity> categoryEntitys = categoryService.getLevel1Categorys();
        return "index";
    }
}

gulimall-product/src/main/java/site/zhourui/gulimall/product/service/CategoryService.java

新增接口

    List<CategoryEntity> getLevel1Categorys();

gulimall-product/src/main/java/site/zhourui/gulimall/product/service/impl/CategoryServiceImpl.java

实现新增接口

  /**
     * 查询一级分类。
     * 父ID是0， 或者  层级是1
     */
    @Override
    public List<CategoryEntity> getLevel1Categorys() {
        System.out.println("调用了 getLevel1Categorys  查询了数据库........【一级分类】");
        return baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", 0));
    }

6. 修改首页

首页使用thymeleaf

html标签上加上xmlns:th="http://www.thymeleaf.org"

<html lang="en" xmlns:th="http://www.thymeleaf.org">

遍历IndexController 传过来的categorys

       <div class="header_main_left">
          <ul>
            <li th:each=" category : ${categorys}">
              <a href="http://search.gulimall.com/" class="header_main_left_a" th:attr="ctg-data=${category.catId}"><b th:text="${category.name}">家用电器</b></a>
            </li>
          </ul>

        </div>

重启商品服务

一级目录变为数据库查询出的目录

7. devtools

导入依赖

<optional>true</optional>才会生效

	<!--devtools-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

关闭thymeleaf缓存

含有thymeleaf的html页面修改后可以单独重新编译此页面,也可以编译整个项目

8. 商品二级分类三级分类结构分析

商品二级三级分类的数据在gulimall-product/src/main/resources/static/index/json/catalog.json

我们需要封装与catalog.json结构相同的数据

将catalog.json格式化

发现是一个map类型的结构 key为一级类目id的值,value为一级类目下的所有二级目录的数组

打开二级目录数组

发现一个对象数组,每一个对象代表一个二级分类,catalog3List就是该二级分类的三级分类的集合

打开catalog3List

是一个一个的三级分类

9. 新增根据一级类目id查询二级三级分类

发现gulimall-product/src/main/resources/static/index/js/catalogLoader.js处调用了catalog.json

9.1 新增Catalog2Vo实体类

按照章节8分析的结构创建

package site.zhourui.gulimall.product.vo;

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

import java.util.List;

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Catalog2Vo {

    private String catalog1Id;  // 1级父分类ID
    private List<Catalog3Vo> catalog3List;// 3级子分类集合
    private String id;  // 2级分类ID
    private String name;  // 2级分类name

    /**
     * 三级分类Vo
     */
    @NoArgsConstructor
    @AllArgsConstructor
    @Data
    public static class Catalog3Vo {
        private String catalog2Id;  // 2级父分类ID
        private String id;  // 3级分类ID
        private String name;  // 3级分类name
    }
}

9.2 新增接口

/**
 * 查出三级分类
 * 1级分类作为key，2级引用List
 */
@ResponseBody
@GetMapping("/index/catalog.json")
public Map<String, List<Catalog2Vo>> getCatalogJson() {
    Map<String, List<Catalog2Vo>> map = categoryService.getCatalogJson();
    return map;
}

gulimall-product/src/main/java/com/atguigu/gulimall/product/service/CategoryService.java

    Map<String, List<Catalog2Vo>> getCatalogJson();

gulimall-product/src/main/java/com/atguigu/gulimall/product/service/impl/CategoryServiceImpl.java

@Override
    public Map<String, List<Catalog2Vo>> getCatalogJson() {
        // 一次性获取所有 数据
        List<CategoryEntity> selectList = baseMapper.selectList(null);
        System.out.println("调用了 getCatalogJson  查询了数据库........【三级分类】");
        // 1）、所有1级分类
        List<CategoryEntity> level1Categorys = getParent_cid(selectList, 0L);

        // 2）、封装数据
        Map<String, List<Catalog2Vo>> collect = level1Categorys.stream().collect(Collectors.toMap(k -> k.getCatId().toString(), level1 -> {
            // 查到当前1级分类的2级分类
            List<CategoryEntity> category2level = getParent_cid(selectList, level1.getCatId());
            List<Catalog2Vo> catalog2Vos = null;
            if (category2level != null) {
                catalog2Vos = category2level.stream().map(level12 -> {
                    // 查询当前2级分类的3级分类
                    List<CategoryEntity> category3level = getParent_cid(selectList, level12.getCatId());
                    List<Catalog2Vo.Catalog3Vo> catalog3Vos = null;
                    if (category3level != null) {
                        catalog3Vos = category3level.stream().map(level13 -> {
                            return new Catalog2Vo.Catalog3Vo(level12.getCatId().toString(), level13.getCatId().toString(), level13.getName());
                        }).collect(Collectors.toList());
                    }
                    return new Catalog2Vo(level1.getCatId().toString(), catalog3Vos, level12.getCatId().toString(), level12.getName());
                }).collect(Collectors.toList());
            }
            return catalog2Vos;
        }));
        return collect;
    }

9.3 新增查询出父ID为 parent_cid的List集合

gulimall-product/src/main/java/com/atguigu/gulimall/product/service/impl/CategoryServiceImpl.java

/**
     * 查询出父ID为 parent_cid的List集合
     */
    private List<CategoryEntity> getParent_cid(List<CategoryEntity> selectList, Long parent_cid) {
        return selectList.stream().filter(item -> item.getParentCid() == parent_cid).collect(Collectors.toList());
        //return baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", level.getCatId()));
    }