- Thymeleaf的介绍
- Thymeleaf的入门
- Thymeleaf的语法及标签
- 搜索页面渲染
- 商品详情页静态化功能实现
1动态页面：
通过执行asp、php、jsp和.net等程序生成客户端网页代码的网页。通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能。也是我们常见的。 常见的扩展名有：.asp、php、jsp、cgi和aspx 等。 注意：动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面。
A．交互性好。
B．动态网页的信息都需要从数据库中读取，每打开一个一面就需要去获取一次数据库，如果访问人数很多，也就会对服务器增加很大的荷载，从而影响这个网站的运行速度。
2静态页面：
最早的时候，网站内容是通过在主机空间中放置大量的静态网页实现的。为了方便对这些分散在不同目录的静态网页的管理，（一般是通过FTP)，象frontpage/dreamweaver这样软件甚至直接提供了向主页空间以FTP方式直接访问文件的功能。以静态网页为主的网站最大的困难在于对网页的管理，在这种框架里，网页框架和网页中的内容混杂在一起，很大程度地加大了内容管理的难度。为了减轻这种管理的成本，发展出了一系列的技术，甚至连css本身，原本也是针对这种乱七八糟的网页维护而设计的，目的就是把网页表达的框架和内容本身抽象分离出来。
A．静态网页的内容稳定，页面加载速度快。
B．静态网页的没有数据库支持，在网站制作和维护方面的工作量较大。
C．静态网页的交互性差，有很大的局限性。
3为什么需要动态页面静态化：
- 搜索引擎的优化
尽管搜索机器人有点讨厌，各个网站不但不会再象从前一样把它封起来，反而热情无比地搞SEO，所谓的面向搜索引擎的优化，其中就包括访问地址的改写，令动态网页看上去是静态网页，以便更多更大量地被搜索引擎收录，从而最大限度地提高自已的内容被目标接收的机会。但是，在完全以动态技术开发的网站，转眼中要求变换成静态网页提供，同时，无论如何，动态网页的内容管理功能也是必须保留的；就如同一辆飞驶的奔驰忽然要求180度转弯，要付出的成本代价是非常大的，是否真的值得，也确实让人怀疑。
- 提高程序性能
很多大型网站，进去的时候看它很复杂的页面，但是加载也没有耗费多长时间，除了其它必要原因以外，静态化也是其中必需考虑的技术之一。
先于用户获取资源或数据库数据进而通过静态化处理，生成静态页面，所有人都访问这一个静态页面，而静态化处理的页面本身的访问速度要较动态页面快很多倍，因此程序性能会有大大的提升。
静态化在页面上的体现为：访问速度加快，用户体验性明显提升；在后台体现为：访问脱离数据库，减轻了数据库访问压力。
模板+数据=文本
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有效地作为模板处理。
4Thymeleaf介绍
1概念：XML/XHTML/HTML5模板引擎。
2其他模板引擎：Velocity、FreeMarker、jsp
3为什么使用它：springboot内置支持
4特点：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：
- XML
- 有效的XML
- XHTML
- 有效的XHTML
- HTML5
- 旧版HTML5
使用springboot 来集成使用Thymeleaf可以大大减少单纯使用thymleaf的代码量，所以我们接下来使用springboot集成使用thymeleaf.
实现的步骤为：
- 创建一个sprinboot项目
- 添加thymeleaf的起步依赖
- 添加spring web的起步依赖
- 编写html 使用thymleaf的语法获取变量对应后台传递的值
- 编写controller 设置变量的值到model中
(1)创建工程
创建一个独立的工程springboot-thymeleaf,该工程为案例工程，不需要放到changgou工程中。
pom.xml依赖
(2)创建包com.itheima.thymeleaf.并创建启动类ThymeleafApplication
(3)创建application.yml
设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试。
(4)控制层
创建controller用于测试后台 设置数据到model中。
创建com.itheima.controller.TestController，代码如下：
(2)创建html
在resources中创建templates目录，在templates目录创建 demo.html,代码如下：
解释：
``:这句声明使用thymeleaf标签
:这句使用 th:text="${变量名}" 表示 使用thymeleaf获取文本数据，类似于EL表达式。(5)测试
启动系统，并在浏览器访问
(1)th:action
定义后台控制器路径，类似标签的action属性。
例如：
action
(2)th:each
对象遍历，功能类似jstl中的<c:forEach>标签。
创建com.itheima.model.User,代码如下：
Controller添加数据
demo.html
(3) map取值
1action
2 demo.html
3测试 启动工程 访问 http://localhost:8080/demo/hello
1action
2demo.html
3测试 启动工程 访问 http://localhost:8080/demo/test
1action
2demo.html
(6)th:if条件
1action
2demo.html
(7)th:fragment 模块声明与页面包含
1 新建footer.html
2 demo.html
4.1 搜索分析
搜索页面要显示的内容主要分为3块。
1)搜索的数据结果
2)筛选出的数据搜索条件
3)用户已经勾选的数据条件
4.2 搜索实现
4.2.1 搜索工程搭建
(1)search搜索服务 添加依赖
在changgou-service_search工程中的pom.xml中引入如下依赖
(2)静态资源导入
4.2.1 基础数据渲染
需求：以前前端json，前端渲染。现在跳转到项目页面，服务器端页面渲染出来。
(1)com.changgou.search.controller添加方法
类注解改为Controller,sear方法添加ResponseBody
浏览器访问 http://localhost:9009/search/list
3测试 访问 http://localhost:9009/search/list?keywords=手机&brand=华为&spec_网络制式=移动4G
(2.2)品牌信息显示
2修改search.html页面
3 测试 访问 http://localhost:9009/search/list?keywords=手机
访问 http://localhost:9009/search/list?keywords=手机&brand=华为
(2.3)规格信息数据转换
规格数据不好在前端展示。所以要转成map。
颜色：红色 黑色蓝色
版本：3+32 4+32 20=128
2 SearchServiceImpl 增加方法
3在封装规格信息时，调用
(2.4)规格与价格显示
1修改search.html页面 规格
2修改search.html页面 价格
3测试： http://localhost:9009/search/list?keywords=手机
http://localhost:9009/search/list?keywords=电视
(2.5)数据列表展示
3测试：http://localhost:9009/search/list?keywords=电视
4.3 关键字搜索
3测试：http://localhost:9009/search/list?keywords=电视
修改输入框
4.4 条件搜索实现
- 用户搜索：拼接url /search/list?keywords=手机
- 点击新规格：拼接 “url /search/list?keywords=手机&spec_网络=移动3G”+spec__颜色=红色
(1)后台记录搜索URL
com.changgou.search.controller SearchController list方法中新增
(2)前端url拼接跳转
用户点击相应品牌、规格、价格，跳转请求后端接口。
2修改search.html页面
3测试：http://localhost:9009/search/list?keywords=手机
依次点击品牌、规格、价格信息
4.5 移除搜索条件
用户点击X去除刚才的搜索条件。
2修改search.html页面
3测试：http://localhost:9009/search/list?keywords=手机
添加搜索条件，去除搜索条件。
4.6 排序
用户点击排序字段，返回排序好的内容。
2修改search.html页面
3测试：http://localhost:9009/search/list?keywords=手机
点击价格升序、降序查看结果
4.7 分页
真实的分页应该像百度那样，如下图：
分页后端实现
2将资料Page.java 放到common工程entity下
3com.changgou.search.controller SearchController list方法中新增
分页前端实现
1修改search.html页面
2测试：http://localhost:9009/search/list?keywords=手机
分页 上一页下一页
5.1 需求分析
此处MQ我们使用Rabbitmq即可。
流程：
1商品上架->商品服务发送spuid->mq
2mq->静态页服务
3静态页服务->调商品服务获取spu->生成静态页面
5.2 商品静态化微服务创建
5.2.1 需求分析
该微服务只用于生成商品静态页，不做其他事情。
5.2.2 搭建项目
1 创建 静态页服务changgou_service_page
2依赖
3配置文件application.yml
4启动类 com.changgou.page.PageApplication
5.3 生成静态页
5.3.1 需求分析
上图是要生成的商品详情页，从图片上可以看出需要查询SPU的3个分类作为面包屑显示，同时还需要查询SKU和SPU信息。
5.3.2 Feign创建
需求：查出3部分数据 资源/静态原型/前台/item.html
- 分类
- spu
- sku
1goods-api中 com.changgou.goods.feign
2goods服务 spuController添加
3com.changgou.goods.feign
5.3.3 静态页生成代码-重点掌握
thymleaf页面静态化 数据+模板=静态html
1将资料的item.html放到项目templates下。作为详情页模板。
2page模块 service层 com.changgou.page.service
3 实现类 com.changgou.page.service.impl
静态页服务监听
1com.changgou.page.config 粘贴canal服务中的配置
2 com.changgou.page.listener
数据监控服务
1RabbitMQConfig 拷贝page服务配置
2SpuListener 新增
5.3.4 模板填充
(1)面包屑数据
(2)商品图片
修改item.html，将商品图片信息输出，在真实工作中需要做空判断，代码如下：
(4)默认SKU显示
(5)记录选中的Sku
在当前Spu的所有Sku中spec值是唯一的，我们可以根据spec来判断用户选中的是哪个Sku，我们可以在Vue中添加代码来实现，代码如下：
(6)样式切换
点击不同规格后，实现样式选中，我们可以根据每个规格判断该规格是否在当前选中的Sku规格中，如果在，则返回true添加selected样式，否则返回false不添加selected样式。
Vue添加代码：
5.3.5 启动测试
1page 服务com.changgou.page.service.impl.PageServiceImpl类getItemData方法中新增
2测试启动所有服务 修改goods表中一条数据 status 0->1
3生成文件 D:/items/10000000616300.h tml
4打开有数据，没样式
5将静态原型中的css,js,image,data,fonts包拷贝至D盘，刷新页面。
5.3.6 基于nginx完成静态页访问
1将10000000616300.html页面放入ngixn下。
/usr/local/openresty/nginx/html/10000000616300.html
2重启ngixn
3访问 http://192.168.200.128/10000000616300.html
4修改search服务中的search.html
5 访问搜索页面http://localhost:9009/search/list?keywords=电视