谷粒商城–商城主页(类目)–高级篇笔记三
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()));
}
9.4 修改请求
gulimall-product/src/main/resources/static/index/js/catalogLoader.js
修改请求路径为章节9新增的接口路径index/catalog.json
9.5 重启服务并测试
数据库修改三级分类名
页面刷新后也相应改变,说明使用的是后台来的数据
