商品详情页静态化功能实现

最新推荐文章于 2022-01-20 16:53:47 发布

@邢先生

最新推荐文章于 2022-01-20 16:53:47 发布

阅读量558

点赞数

分类专栏： JAVA实战项目

本文链接：https://blog.csdn.net/xghchina/article/details/115038499

版权

本文介绍了如何使用Thymeleaf作为模板引擎实现商品详情页的静态化功能。首先，概述了Thymeleaf的基本概念、特点和应用场景。接着，展示了在Springboot项目中整合Thymeleaf的步骤，包括创建工程、编写HTML和Controller。然后，详细讲解了Thymeleaf的基本语法，如th:action、th:each等。最后，讨论了商品搜索页面的渲染过程，包括搜索条件的回显、商品属性显示、分页和排序。文章还涉及到了商品静态页的生成，包括监听MQ消息、生成静态文件和使用Vue进行交互。

摘要由CSDN通过智能技术生成

第8章 Thymeleaf
学习目标
Thymeleaf的介绍
Thymeleaf的入门
Thymeleaf的语法及标签
搜索页面渲染
商品详情页静态化功能实现

1.Thymeleaf介绍
thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。

Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。

它的特点便是：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

XML
有效的XML
XHTML
有效的XHTML
HTML5
旧版HTML5
所有这些模式都指的是格式良好的XML文件，但Legacy HTML5模式除外，它允许您处理HTML5文件，其中包含独立（非关闭）标记，没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件，Thymeleaf将首先执行转换，将您的文件转换为格式良好的XML文件，这些文件仍然是完全有效的HTML5（实际上是创建HTML5代码的推荐方法）1。

另请注意，验证仅适用于XML和XHTML模板。

然而，这些并不是Thymeleaf可以处理的唯一模板类型，并且用户始终能够通过指定在此模式下解析模板的方法和编写结果的方式来定义他/她自己的模式。这样，任何可以建模为DOM树（无论是否为XML）的东西都可以被Thymeleaf有效地作为模板处理。

2.Springboot整合thymeleaf
使用springboot 来集成使用Thymeleaf可以大大减少单纯使用thymleaf的代码量，所以我们接下来使用springboot集成使用thymeleaf.

实现的步骤为：

创建一个sprinboot项目
添加thymeleaf的起步依赖
添加spring web的起步依赖
编写html 使用thymleaf的语法获取变量对应后台传递的值
编写controller 设置变量的值到model中

(1)创建工程

创建一个独立的工程springboot-thymeleaf,该工程为案例工程，不需要放到changgou工程中。

pom.xml依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.itheima</groupId>
    <artifactId>springboot-thymeleaf</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
    </parent>

    <dependencies>
        <!--web起步依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--thymeleaf配置-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
</project>
(2)创建包com.itheima.thymeleaf.并创建启动类ThymeleafApplication

@SpringBootApplication
public class ThymeleafApplication {
   

    public static void main(String[] args) {
   
        SpringApplication.run(ThymeleafApplication.class,args);
    }
}
 

(3)创建application.yml

设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试。

spring:
  thymeleaf:
    cache: false
 

(4)控制层

创建controller用于测试后台 设置数据到model中。

创建com.itheima.controller.TestController，代码如下：

@Controller
@RequestMapping("/test")
public class TestController {
   

    /***
     * 访问/test/hello  跳转到demo1页面
     * @param model
     * @return
     */
    @RequestMapping("/hello")
    public String hello(Model model){
   
        model.addAttribute("hello","hello welcome");
        return "demo";
    }
}

(2)创建html

在resources中创建templates目录，在templates目录创建 demo.html,代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf的入门</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--输出hello数据-->
<p th:text="${hello}"></p>
</body>
</html>
解释：

<html xmlns:th="http://www.thymeleaf.org">:这句声明使用thymeleaf标签

<p th:text="${hello}"></p>:这句使用 th:text="${变量名}" 表示 使用thymeleaf获取文本数据，类似于EL表达式。

(5)测试

启动系统，并在浏览器访问

http://localhost:8080/test/hello

3 Thymeleaf基本语法
(1)th:action

定义后台控制器路径，类似标签的action属性。

例如：

提交

(2)th:each

对象遍历，功能类似jstl中的<c:forEach>标签。

创建com.itheima.model.User,代码如下：

public class User {
private Integer id;
private String name;
private String address;
//…get…set
}

Controller添加数据

/***

访问/test/hello 跳转到demo1页面
@param model
@return
*/
@RequestMapping("/hello")
public String hello(Model model){
model.addAttribute(“hello”,“hello welcome”);

//集合数据
List users = new ArrayList();
users.add(new User(1,“张三”,“深圳”));
users.add(new User(2,“李四”,“北京”));
users.add(new User(3,“王五”,“武汉”));
model.addAttribute(“users”,users);
return “demo1”;
}

页面输出

下标	编号	姓名	住址
下标:,

测试效果

(3)Map输出

后台添加Map

//Map定义
Map<String,Object> dataMap = new HashMap<String,Object>();
dataMap.put(“No”,“123”);
dataMap.put(“address”,“深圳”);
model.addAttribute(“dataMap”,dataMap);

页面输出

key:
value:
==============================================

测试效果

(4)数组输出

后台添加数组

//存储一个数组
String[] names = {“张三”,“李四”,“王五”};
model.addAttribute(“names”,names);
页面输出

==============================================

测试效果

(5)Date输出

后台添加日期

//日期
model.addAttribute(“now”,new Date());
页面输出

测试效果

(6)th:if条件

后台添加年龄

//if条件
model.addAttribute(“age”,22);

页面输出

终于长大了！

测试效果

(7)th:fragment 定义一个模块

可以定义一个独立的模块，创建一个footer.html代码如下：

fragment

关于我们

(8)th:include

可以直接引入th:fragment,在demo1.html中引入如下代码：

效果如下：

4 搜索页面渲染
4.1 搜索分析

搜索页面要显示的内容主要分为3块。

1)搜索的数据结果

2)筛选出的数据搜索条件

3)用户已经勾选的数据条件

4.2 搜索实现

搜索的业务流程如上图，用户每次搜索的时候，先经过搜索业务工程，搜索业务工程调用搜索微服务工程。

4.2.1 搜索工程搭建
(1)引入依赖

在changgou-service_search工程中的pom.xml中引入如下依赖：

org.springframework.boot spring-boot-starter-thymeleaf

(2)静态资源导入

将资源中的页面资源/所有内容拷贝到工程的resources目录下如下图：

(3) 更改配置文件,在spring下添加内容

thymeleaf:
cache: false

4.2.1 基础数据渲染
(1)更新SearchController,定义跳转搜索结果页面方法

代码如下：

//搜索页面   http://localhost:9009/search/list?keywords=手机&brand=三星&spec_颜色=粉色&
//入参：Map
//返回值 Map
//由于页面是thymeleaf 完成的 属于服务器内页面渲染 跳转页面
@GetMapping("/list")
public String search(@RequestParam Map<String, String> searchMap, Model model) throws Exception {

//特殊符号处理
handlerSearchMap(searchMap);

//执行查询返回值
Map<String, Object> resultMap = searchService.search(searchMap);

model.addAttribute(“searchMap”, searchMap);
model.addAttribute(“result”, resultMap);
return “search”;
}

}

(2) 搜索结果页面渲染

(2.1)用户选择条件回显