Day99 Java项目 (SSM+Dubbo)商城(八) 模板渲染解决方案

1.模板引擎thymeleaf

一.thymeleaf简介

1. Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎。
2. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的HTML，也可以用作静态原型，从而在开发团队中实现更强大的协作。通过Spring Framework模块，与您喜欢的工具的大量集成，以及插入您自己的功能的能力，Thymeleaf是现代HTML5 JVM Web开发的理想选择。
3. 官网：https://www.thymeleaf.org/
   官方文档：https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#preface

二.为什么使用thymeleaf

1. thymeleaf PK Vue.js
   1.         首先说这两种技术本质上属于不同类型的产品。vue.js属于前端框架，而thymeleaf 属于模板引擎。虽然它们可以实现相同的功能（比如一个列表），但是它们的工作过程却是不同： vue.js通过异步方式请求数据，后端给前端返回json，前端通过vue指令循环渲染列表。thymeleaf 则是在后端实现页面的渲染，将渲染后的页面直接给浏览器展示。
   2.        那什么时候使用vue.js，什么使用thymeleaf 呢？一般来说，管理后台我们会使用前端框架，而网站前台的部分有些页面会使用thymeleaf。原因有两点：
      （1）因为使用vue.js由于是异步请求，从页面打开到信息的展示会出现延迟，而使用thymeleaf，页面打开会立刻看到页面的信息。
      （2）异步加载的数据不会被搜索引擎抓取。所以当我们希望数据被搜索引擎收录，就需要使用thymeleaf这样的模板引擎。
2. thymeleaf PK JSP
   thymeleaf 目前所作的工作和jsp有相似之处，thymeleaf和jsp都是属于服务端渲染技术。thymeleaf比jsp功能强大许多，它的强大已经超出你的想象。我们在此项目后会学习一个新的框架叫spring boot ，thymeleaf就是spring boot 官方推荐使用的模板引擎。

三.thymeleaf快速入门

1. 简单案例
   1. 创建测试工程，引入依赖
      
   2. 创建模板。在resources目录下创建test.html
      
   3. 创建测试类，编写代码
      
2. 常用th标签
   

2.首页广告轮播图渲染

一.需求分析

1. 使用Thymeleaf实现首页广告轮播图的渲染

二.表结构分析

1. tb_ad （广告表）
   
   position：系统定义的广告位置
   index_lb 首页轮播图
   index_amusing 有趣区
   index_ea_lb 家用电器楼层轮播图
   index_ea 家用电器楼层广告
   index_mobile_lb 手机通讯楼层轮播图
   index_mobile 手机通讯楼层广告
   .......

三.搭建网站前台工程

1. 新建qingcheng_web_portal工程，此工程为网站前台工程，pom.xml参照qingcheng_web_manager工程，另外再添加thymeleaf-spring5依赖：
   
2. qingcheng_web_portal工程新建web.xml
   
   
   
3. qingcheng_web_portal工程resources下新建配置文件dubbo.properties
   
4. qingcheng_web_portal工程resources下新建配置文件applicationContext-thymeleaf.xml
   
   SpringResourceTemplateResolver：spring资源模板解析器
   SpringTemplateEngine： spring整合的模板引擎
   ThymeleafViewResolver：Thymeleaf视图解析器
5. webapp/WEB-INF下创建templates文件夹用于存放模板文件
6. 将资源\静态原型\网站前台下的文件夹拷贝到webapp下

四.渲染广告轮播图

1. 服务接口AdService新增方法定义
   
2. 服务类AdServiceImpl实现方法
   
3. qingcheng_web_portal工程新建包com.qingcheng.controller，包下创建类
   
4. 模板编写：将资源\静态原型\网站前台下的index.html拷贝到qingcheng_web_portal工程的WEB-INF/templates下。将更改为 ，修改广告轮播图部分代码
   
   iterStat是状态变量，有 index,count,size,current,even,odd,first,last等属性，如果没有显示设置状态变量.thymeleaf会默认给个“变量名+Stat"的状态变量。

3.首页分类导航渲染

一.需求分析

1. 使用Thymeleaf实现首页分类导航渲染
   

二.表结构分析

1. tb_category （商品分类表）
   

三.实现思路

1. 后端代码，查询is_show为1的记录，使用递归逻辑转换为树状数据，结构如下：
   
2. 模板使用th:each循环菜单数据（三层嵌套）

四.代码实现

1. CategoryService接口新增方法定义
   
2. CategoryServiceImpl是实现此方法
   
3. 修改IndexController的index方法
   
4. 修改模板文件index.html
   

4.商品详细页静态渲染

一.需求分析

1. 商品详细页通过thymeleaf静态渲染为html页面。
   为什么要静态渲染为html页面而不是动态渲染呢？
   （1） 避免在每次打开商品详细页都查询数据库，可以极大减轻数据的访问压力。
   （2）可把生成的html放入nginx运行。nginx可以高达五万并发， 极大提升网站的访问速度 ，解决电商网站高并发的问题。
2. 我们是将每一个spu生成一个页面，还是将每个sku生成一个页面呢？京东的做法是每个sku一个页面，点击规格后跳转页面。

二.基本信息

1. 需求：生成SKU名称、SPU副标题、价格、商品介绍、售后服务等信息
2. qingcheng_web_portal工程创建ItemController
   
   
   
   
3. resources下添加配置文件config.properties
   
4. 将资源/静态原型/网站前台/item.html拷贝到 templates文件夹 ，修改部分代码

三.商品分类

1. 修改createPage方法，添加代码，根据分类id查询分类名称
   
2. 将三级分类放入到数据模型中
   
3. 修改模板商品分类部分
   

四.商品图片

1. 需求：商品详细页的图片列表为SKU的图片列表+SPU的图片列表
2. 修改createPage方法，为数据模型添加SKU图片列表和SPU图片列表
   
3. 修改模板图片列表部分
   
   

五.规格参数列表

1. 需求：商品的显示规格和参数列表
2. 修改createPage方法，为数据模型添加规格和参数
   
3. 修改模板item.html规格参数部分
   

六.规格面板

1. 需求：渲染规格面板，当前SKU的规格呈现于选中的状态
   实现思路：
   （1）规格面板的数据来自spu的specItems
   （2）逻辑较为复杂，我们可以分步骤来写。第一步先实现规格和规格选项的显示，第二步再考虑选中状态的处理。
2. 规格面板显示
   1. 修改createPage方法，为数据模型添加规格和参数
      
   2. 修改模板item.html规格面板部分
      
3. 选中状态处理
   1. 思路分析：
      如果页面上要呈现每个规格选项的选中状态，必然要存在这个属性，而我们刚才返回的数据只有规格选项的文本，所以我们需要在代码中循环每个规格选项，判断是否为当前sku的规格选项，补充是否选中的属性。模板拿到这个属性就可以通过三元运算符来处理规格选项的样式。
   2. 修改createPage方法，为数据模型添加规格和参数
      
   3. 修改模板item.html规格面板部分
      

七.页面跳转

1. url列表创建与提取
   1. 需求：点击规格面板的规格选项，实现商品详细页之间的跳转。
      思路分析：
      我们在模板中要渲染URL，数据模型中就必须有URL，与选中状态的思路类似，我们要在循环规格选项时添加url属性。那么如果获取这个URL呢？我们可以先创建一个SKU地址列表（MAP），以规格的JSON字符串作为KEY，以URL地址作为值。然后我们在循环规格选项时就可以从SKU地址列表中取出我们要的URL。
   2. 修改createPage方法，在创建页面的循环前添加以下代码
      
      此代码的作用是生成SKU地址的列表，以规格JSON字符串作为KEY，商品详细页的地址(id)作为值。为了能够保证规格JSON字符串能够在查询的时候匹配，需要使用SerializerFeature.SortField.MapSortField进行排序。
   3. 修改createPage方法，在创建页面的循环体中添加代码
      
   4. 修改模板item.html的规格面板部分，添加链接
      
2. 不可选规格组合
   1. 需求：有的规格组合不存在，我们需要让其显示为不可选样式。
      思路分析：生成url列表时判断SKU状态，只生成状态为1的。模板判断如果url为null则显示为不可选样式。
   2. 添加判断，筛选有效sku
      
   3. 修改模板：