Thymeleaf 搭建家居网首页

文章目录

- 1.引入Thymeleaf sunliving-commodity模块
- - - 1.在resources目录下引入Thymeleaf 所需资源
    - 2.pom.xml引入Thymeleaf依赖
    - 3.application.yml 关闭缓存，使页面实时刷新
    - 4.在application-prod.yml开启缓存
    - 5.编写com/sun/sunliving/commodity/web/IndexController.java响应templates/index.html
    - 6.index.html和list.html引入thymeleaf的命名空间
    - 7.效果展示
- 2.首页显示分类
- - - 1.显示一级分类
    - - 1.后端 sunliving-commodity模块
      - 1.CategoryService.java 获取一级分类
        2.CategoryServiceImpl.java
        3.IndexController.java 首先测试是否得到一级分类
        4.完整 IndexController.java
      - 2.index.html 展示一级菜单
      - 3.结果演示
    - 2.流式计算将集合转为Map
    - - 1.实例代码
      - 2.结果
      - 3.解析
    - 3.显示二级和三级分类
    - - 1.前端要求的数据格式
      - 2.vo设计Catalog2Vo.java
      - 3.CategoryService.java 根据父id获取节点
      - 4.CategoryServiceImpl.java 实现方法
      - 5.CategoryService.java 获取二级和三级分类，按照前端需要的格式返回
      - 6.CategoryServiceImpl.java 实现方法
      - 7.分析前端请求 static/index/js/catalogLoader.js
      - 1.前端发送请求的代码片段
        2.解析
        3.为了部署，将这个请求进行多环境的区分，使用环境变量 + 资源路径的方式，上线的时候要手动修改env的值，必须走网关，否则会跨域
      - 8.编写后端的接口
      - 9.测试
      - 1.可以获取数据，但是没有正确展示
        2.在index.html加一句话
        3.重启访问，成功显示！

1.引入Thymeleaf sunliving-commodity模块

1.在resources目录下引入Thymeleaf 所需资源

2.pom.xml引入Thymeleaf依赖

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

3.application.yml 关闭缓存，使页面实时刷新

4.在application-prod.yml开启缓存

5.编写com/sun/sunliving/commodity/web/IndexController.java响应templates/index.html

package com.sun.sunliving.commodity.web;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;/*** Description:** @Author sun* @Create 2024/4/25 17:50* @Version 1.0*/
@Controller
public class IndexController {// 响应templates/index.html// 当请求路径为http://localhost:8080/ 或 http://localhost:8080/index时，返回index.html页面@GetMapping({"/", "/index.html"})public String index() {return "index";}}

6.index.html和list.html引入thymeleaf的命名空间

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

7.效果展示

2.首页显示分类

1.显示一级分类

1.后端 sunliving-commodity模块

1.CategoryService.java 获取一级分类

    /*** 获取一级分类* @return*/List<CategoryEntity> getLevel1Category();

2.CategoryServiceImpl.java

    @Overridepublic List<CategoryEntity> getLevel1Category() {// 查询一级分类List<CategoryEntity> categoryEntities = categoryDao.selectList(new QueryWrapper<CategoryEntity>().eq("parent_id", 0));return categoryEntities;}

3.IndexController.java 首先测试是否得到一级分类

4.完整 IndexController.java

@Controller
public class IndexController {@Resourceprivate CategoryService categoryService;// 响应templates/index.html// 当请求路径为http://localhost:8080/ 或 http://localhost:8080/index时，返回index.html页面@GetMapping({"/", "/index.html"})public String index(Model model) {// 获取一级分类List<CategoryEntity> categoryEntities = categoryService.getLevel1Category();// 将一级分类放到model中model.addAttribute("categotries", categoryEntities);return "index";}}

2.index.html 展示一级菜单

3.结果演示

2.流式计算将集合转为Map

1.实例代码

import lombok.Data;import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;/*** Description:** @Author sun* @Create 2024/4/26 9:59* @Version 1.0*/
public class Test {public static void main(String[] args) {List<Stu> stus = new ArrayList<>();// 添加元素stus.add(new Stu(1, "张三", "北京", "篮球"));stus.add(new Stu(2, "李四", "上海", "足球"));stus.add(new Stu(3, "王五", "广州", "乒乓球"));// 将List转为Map,key为name,value为Stu2对象的列表Map<String, ArrayList<Stu2>> collect = stus.stream().collect(Collectors.toMap(k -> {// 这个k代表每一个Stu对象return k.getName();}, v -> {// 这个v代表Stu2对象的列表Stu2 stu2 = new Stu2();stu2.setHobby(v.getHobby());stu2.setName(v.getName());Stu2 stu21 = new Stu2();stu21.setHobby(v.getHobby());stu21.setName(v.getName() + "克隆");ArrayList<Stu2> stu2s = new ArrayList<>();stu2s.addAll(Arrays.asList(stu2, stu21));return stu2s;}));// 输出collectSystem.out.println(collect);}
}@Data
class Stu {private Integer id;private String name;private String address;private String hobby;// 全参构造public Stu(Integer id, String name, String address, String hobby) {this.id = id;this.name = name;this.address = address;this.hobby = hobby;}
}@Data
class Stu2 {private String name;private String hobby;
}

2.结果

3.解析

流式计算就是对每一个遍历的List对象进行操作，在这里就是将其转化为Map
其中的k，v指的都是List中的每一个对象
用语言描述就是，将List化为流，收集每一个元素作为Map

3.显示二级和三级分类

1.前端要求的数据格式

2.vo设计Catalog2Vo.java

package com.sun.sunliving.commodity.vo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.List;/*** Description:** @Author sun* @Create 2024/4/26 9:33* @Version 1.0*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Catalog2Vo {// 一级分类idprivate String catalog1Id;// 三级分类信息的集合List<Category3Vo> catalog3List;// 二级分类的id和名称private String id;private String name;// 三级分类信息@Data@NoArgsConstructor@AllArgsConstructorpublic static class Category3Vo {// 二级分类idprivate String catalog2Id;// 三级分类idprivate String id;// 三级分类名称private String name;}
}

3.CategoryService.java 根据父id获取节点

    /*** 根据父id获取所有节点** @param selectList* @param parentCId* @return*/List<CategoryEntity> getParent_cid(List<CategoryEntity> selectList, Long parentCId);

4.CategoryServiceImpl.java 实现方法

    @Overridepublic List<CategoryEntity> getParent_cid(List<CategoryEntity> selectList, Long parentCId) {List<CategoryEntity> collect = selectList.stream().filter(item -> {return item.getParentId().equals(parentCId);}).collect(Collectors.toList());return collect;}

5.CategoryService.java 获取二级和三级分类，按照前端需要的格式返回

    /*** 获取二级和三级分类，按照前端需要的格式返回* @return*/Map<String, List<Catalog2Vo>> getCatalogJson();

6.CategoryServiceImpl.java 实现方法

    @Overridepublic Map<String, List<Catalog2Vo>> getCatalogJson() {// 首先查询所有分类List<CategoryEntity> categoryEntities = categoryDao.selectList(null);// 然后使用辅助方法获取一级分类List<CategoryEntity> parentCid = getParent_cid(categoryEntities, 0L);// 使用streamapi 将一级分类转换为MapMap<String, List<Catalog2Vo>> collect = parentCid.stream().collect(Collectors.toMap(// key 为一级分类的iditem -> {return item.getId().toString();},// value 为二级分类的集合item -> {// 获取所有二级分类List<CategoryEntity> catalog2 = getParent_cid(categoryEntities, item.getId());// 将二级分类转换为 Catalog2VoList<Catalog2Vo> catalog2Vos = catalog2.stream().map(catalog2Item -> {// 将二级分类转换为 Catalog2VoCatalog2Vo catalog2Vo = new Catalog2Vo();// 一级分类idcatalog2Vo.setCatalog1Id(item.getId().toString());// 二级分类id和名称catalog2Vo.setId(catalog2Item.getId().toString());catalog2Vo.setName(catalog2Item.getName());// 获取三级分类List<CategoryEntity> catalog3 = getParent_cid(categoryEntities, catalog2Item.getId());List<Catalog2Vo.Category3Vo> category3Vos = catalog3.stream().map(catalog3Item -> {// 将三级分类转换为 Catalog2Vo.Category3VoCatalog2Vo.Category3Vo category3Vo = new Catalog2Vo.Category3Vo();category3Vo.setId(catalog3Item.getId().toString());category3Vo.setName(catalog3Item.getName());category3Vo.setCatalog2Id(catalog3Item.getParentId().toString());return category3Vo;}).collect(Collectors.toList());catalog2Vo.setCatalog3List(category3Vos);return catalog2Vo;}).collect(Collectors.toList());return catalog2Vos;}));return collect;}

7.分析前端请求 static/index/js/catalogLoader.js

1.前端发送请求的代码片段

2.解析

可以看出使用的是相对当前页面的路径
查看当前页面的路径 http://localhost:5050/api/sunliving-commodity/index.html#
这样，这个请求就会向http://localhost:5050/api/sunliving-commodity/index/catalog.json

3.为了部署，将这个请求进行多环境的区分，使用环境变量 + 资源路径的方式，上线的时候要手动修改env的值，必须走网关，否则会跨域

8.编写后端的接口

    // static/index/catalog.json@ResponseBody@GetMapping("/index/catalog.json")public Map<String, List<Catalog2Vo>> getCatalogJson() {Map<String, List<Catalog2Vo>> catalogJson = categoryService.getCatalogJson();return catalogJson;}