谷粒商城实战笔记-137-商城业务-首页-整合dev-tools渲染一级分类数据

小手追梦

于 2024-08-06 14:33:04 发布

阅读量326

点赞数 9

分类专栏：谷粒商城文章标签：笔记谷粒商城

本文链接：https://blog.csdn.net/epitomizelu/article/details/140951908

版权

谷粒商城专栏收录该内容

123 篇文章 1 订阅

订阅专栏

文章目录

一，使用热加载工具spring-boot-devtools
- 1，引入devtools依赖
- 2，ctrl+shift+f9 编译静态资源
二，thymeleaf原理
三，渲染一级分类

一，使用热加载工具spring-boot-devtools

因为我们采用的前后端一体的开发模式，前端页面会频繁修改，如果每次修改都要重启服务，效率就会受到很大影响。

可以引入spring-boot-devtools这个开发工具，避免每次修改都要重启服务。

1，引入devtools依赖

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

引入了devtools的服务，在Idea的Services模块下，服务名后会有标识。

在这里插入图片描述

2，ctrl+shift+f9 编译静态资源

修改静态资源后，使用ctrl+shift+f9编译静态资源，之后浏览器请求的资源就是最新的了。

需要注意的是，如果修改了配置文件和Java文件，最好还是重新启动服务，否则可能导致修改的代码未生效。

二，thymeleaf原理

在这里插入图片描述
如图所示，当Controller的返回值是一个String类型时，thymeleaf将介入。

当用户访问 “localhost:10000/index.html” 这个URL时，Spring会执行以下步骤：

路由到控制器：Spring的DispatcherServlet首先捕获这个请求，并根据请求的URL和HTTP方法找到合适的处理器（在这个例子中是一个名为IndexController的类）。
注入服务层对象：在IndexController类中，有一个CategoryService对象被自动注入。这是通过@Autowired注解实现的，该注解告诉Spring将已配置的服务实例注入到控制器中。
处理请求：当请求到达IndexController后，indexPage()方法会被调用。这个方法接收一个Model参数，用于存储要传递给视图的数据。
获取数据：在indexPage()方法内部，调用了categoryService.getLevel1Categoris()方法来查询所有的1级分类。这些数据将会被添加到Model对象中。
返回视图名：最后，indexPage()方法返回了一个字符串 “index”，这表示要渲染的视图名称。Spring的视图解析器会将此字符串与默认的前缀（在这种情况下可能是"classpath:/templates/“）和后缀（”.html"）组合起来，形成实际的视图路径。
渲染视图：现在，Spring将控制权交给Thymeleaf模板引擎，后者负责使用Model中的数据填充HTML模板并生成最终的HTML响应。
发送响应：最后，Spring将生成的HTML响应发送回客户端浏览器进行展示。

三，渲染一级分类

前端请求首页时，url是http://localhost:10000/，后端对应的Controller接口如下：

	@GetMapping(value = {"/","index.html"})
    private String indexPage(Model model) {

        //1、查出所有的一级分类
        List<CategoryEntity> categoryEntities = categoryService.getLevel1Categorys();
        model.addAttribute("categories",categoryEntities);

        return "index";
    }

这个接口首先查出所有的一级分类数据，并将存储在Model中，返回字符串index。

因为返回的是字符串，所以响应会被thymeleaf拦截，thymeleaf从classpath:/templates/找到index.html，把index.html作为模板，结合存储在Model中数据进行编译，将Model中的数据填充到index.html中，再将index.html返回给浏览器，由浏览器展示对应的页面。

显然，index.html中必须符合thymeleaf规范。

首先，要标明命名空间。

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

在这里插入图片描述

其次，要使用thymeleaf语法。

			<ul>
            <li th:each="category : ${categories}">
              <a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}" ><b th:text="${category.name}">家用电器</b></a>
            </li>
          </ul>

这段代码是使用 Thymeleaf 模板引擎编写的 HTML 代码，用于动态生成一个包含多个列表项 (<li>) 的无序列表 (<ul>). 每个列表项 (<li>) 都代表一个类别，并且其中包含一个链接 (<a>)，该链接显示类别的名称。

<ul>: 开始一个无序列表标签。
<li th:each="category : ${categories}">: 这一行定义了一个列表项，并使用 Thymeleaf 的 th:each 属性来遍历一个名为 categories 的模型属性。这里的 category 是迭代变量，它代表列表中的每一个元素。每次迭代时，category 变量都会取 categories 列表中的一个值。
<a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}">: 这是一个链接标签，其 href 属性默认设置为 "#"，但实际应用中可能会通过 JavaScript 或其他方式修改。th:attr 属性用来动态地设置链接的一个自定义属性 ctg-data，其值为当前 category 对象的 catId 属性值。
<b th:text="${category.name}">家用电器</b>: 这是一个加粗标签 (<b>)，它使用 th:text 属性来动态设置显示的文本内容。这里文本内容是当前 category 对象的 name 属性值。如果 category.name 没有值，则默认显示 "家用电器"。
</a>: 关闭链接标签。
</li>: 关闭列表项标签。
</ul>: 关闭无序列表标签。

当这段代码由 Thymeleaf 渲染时，它会根据传入的 categories 列表生成相应数量的 <li> 元素，并为每个元素填充相应的数据。例如，如果 categories 包含三个元素，那么最终的 HTML 输出将包含三个 <li> 元素，每个元素中都有一个带有正确 ctg-data 值的链接以及显示正确类名的文本。

小手追梦

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
谷粒商城实战笔记-137-商城业务-首页-整合dev-tools渲染一级分类数据

Spring的视图解析器会将此字符串与默认的前缀（在这种情况下可能是"classpath:/templates/“）和后缀（”.html"）组合起来，形成实际的视图路径。：Spring的DispatcherServlet首先捕获这个请求，并根据请求的URL和HTTP方法找到合适的处理器（在这个例子中是一个名为。因为我们采用的前后端一体的开发模式，前端页面会频繁修改，如果每次修改都要重启服务，效率就会受到很大影响。引入了devtools的服务，在Idea的Services模块下，服务名后会有标识。
复制链接

扫一扫