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

    @Override
    public 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 {
    @Resource
    private 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;
        }));
        // 输出collect
        System.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 {
    // 一级分类id
    private String catalog1Id;
    // 三级分类信息的集合
    List<Category3Vo> catalog3List;
    // 二级分类的id和名称
    private String id;
    private String name;
    // 三级分类信息
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public static class Category3Vo {
        // 二级分类id
        private String catalog2Id;
        // 三级分类id
        private 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 实现方法

    @Override
    public 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 实现方法

    @Override
    public Map<String, List<Catalog2Vo>> getCatalogJson() {
        // 首先查询所有分类
        List<CategoryEntity> categoryEntities = categoryDao.selectList(null);
        // 然后使用辅助方法获取一级分类
        List<CategoryEntity> parentCid = getParent_cid(categoryEntities, 0L);
        // 使用streamapi 将一级分类转换为Map
        Map<String, List<Catalog2Vo>> collect = parentCid.stream().collect(Collectors.toMap(
                // key 为一级分类的id
                item -> {
                    return item.getId().toString();
                },
                // value 为二级分类的集合
                item -> {
                    // 获取所有二级分类
                    List<CategoryEntity> catalog2 = getParent_cid(categoryEntities, item.getId());
                    // 将二级分类转换为 Catalog2Vo
                    List<Catalog2Vo> catalog2Vos = catalog2.stream().map(catalog2Item -> {
                        // 将二级分类转换为 Catalog2Vo
                        Catalog2Vo catalog2Vo = new Catalog2Vo();
                        // 一级分类id
                        catalog2Vo.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.Category3Vo
                            Catalog2Vo.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;
    }