thymeleaf 部署首页

微服务项目部署

将静态资源部署到nginx中以减轻微服务的并发压力
根据nginx反向代理将请求转发到网关中
这样做的好处是增强了安全性避免暴露网关接口和减轻微服务的压力

渲染首页

由以下操作:

导入thymeleaf模板引擎
关闭thymeleaf cache并导入静态资源和html 静态资源先由tomcat管理之后在做静态分离操作
根据后台接口渲染一级分类
根据后台接口渲染二级分类

具体操作

1. 导入模板引擎

        <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2. 关闭cache 导入静态资源和html

spring:
  thymeleaf:
    cache: false

在默认情况下在resource中有两个文件夹一个是static 用于存放静态资源另一个templates 用于存储模板引擎
这些属性都可以在yaml中自定义

将html和静态资源放入这两个文件夹即可

因为在yaml中定义了前缀后缀 spring boot 会进行拼接返回如我们设置以下路由
当用户进行访问/ 或 /index.html 时会自动跳转至/template/index.html中

    @RequestMapping(value = {"/index.html", "/"})
    public String index() {
        return "index";
    }

3. 渲染一级分类

我们首先查看一下表结构我们可以了解到由两种方法找到一级分类分别是parent_cid为0和cat_level为1 我们任取一种方法获取

直接调用mybatos plus 进行单表查询然后返回就行了没什么好说的

model中可以存储模板引擎所解析的数据我们将之前查出的数据保存至model中即可

    @RequestMapping(value = {"/index.html", "/"})
    public String index(Model model) {
        List<PmsCategory> categories = categoryService.findCategoryByFirstCategory();
        model.addAttribute("categoryList", categories);

        return "index";
    }

现在可以使用模板引擎了
首先导入模板引擎自定义前缀信息

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

th:text 渲染标签的主体内容上下文数据是之前controller中在model总保存的数据
th:attr 可以渲染自定义属性如以下例子若catId = 0 在html如会 <a href="#" class="header_main_left_a"" ctg-data="0"><b>家用电器</b></a>

<a href="#" class="header_main_left_a" ctg-data="3" th:attr="ctg-data=${category.getCatId()}"><b th:text="${category.getName()}">家用电器</b></a>

th:each 和java中的for echah语法没什么区别

            <li th:each="category : ${categoryList}">
              <a href="#" class="header_main_left_a" ctg-data="3" th:attr="ctg-data=${category.getCatId()}"><b th:text="${category.getName()}">家用电器</b></a>
            </li>

4. 渲染二三级分类

根据前端的接口建立vo对象 Catalog2VO 存储二级分类 Catalog3 存储三级分类


public class Catalog2VO {
    private String catalog1Id;
    private String id;
    private String name;

    private List<Catalog3> catalog3List;
    public static class Catalog3 {
        private String catalog2Id;
        private String id;
        private String name;

        public Catalog3(String catalog2Id, String id, String name) {
            this.catalog2Id = catalog2Id;
            this.id = id;
            this.name = name;
        }

        public Catalog3() {
        }

        public String getCatalog2Id() {
            return catalog2Id;
        }

        public void setCatalog2Id(String catalog2Id) {
            this.catalog2Id = catalog2Id;
        }

        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }

    public String getCatalog1Id() {
        return catalog1Id;
    }

    public void setCatalog1Id(String catalog1Id) {
        this.catalog1Id = catalog1Id;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<Catalog3> getCatalog3List() {
        return catalog3List;
    }

    public void setCatalog3List(List<Catalog3> catalog3List) {
        this.catalog3List = catalog3List;
    }
}

业务逻辑很简单之前conttoler写过查找一级分类的方法之后将查出的数据进行组装即可 map key为一级分类id

    @Override
    public Map<String, List<Catalog2VO>> getCatalogJson() {
        // 查询一级分类
        List<PmsCategory> categoryByFirstCategory = findCategoryByFirstCategory();

        return categoryByFirstCategory.stream().collect(Collectors.toMap((item) -> item.getCatId().toString(), (item) -> {
            List<PmsCategory> category2List = categoryMapper.selectList(new QueryWrapper<PmsCategory>().eq("parent_cid", item.getCatId()));

            // 根据一级分类id 查询二级分类
            return category2List.stream().map((category2) -> {
                Catalog2VO catalog2VO = new Catalog2VO();
                catalog2VO.setCatalog1Id(item.getCatId().toString());
                catalog2VO.setId(category2.getCatId().toString());
                catalog2VO.setName(category2.getName());

                List<PmsCategory> category3List = categoryMapper.selectList(new QueryWrapper<PmsCategory>().eq("parent_cid", category2.getCatId()));

                // 根据二级分类id 查询三级分类
                List<Catalog2VO.Catalog3> catalog3s = category3List.stream().map((category3) -> {
                    Catalog2VO.Catalog3 catalog3 = new Catalog2VO.Catalog3();
                    catalog3.setCatalog2Id(category3.getParentCid().toString());
                    catalog3.setId(category3.getCatId().toString());
                    catalog3.setName(category3.getName());
                    return catalog3;
                }).collect(Collectors.toList());
                catalog2VO.setCatalog3List(catalog3s);

                return catalog2VO;
            }).collect(Collectors.toList());
        }));
    }