(1)快速入门
SpringBoot形式创建
Maven形式创建:
加入依赖:
创建启动类:
设置头文件
就想Jsp的<%@Page %>一样 ,Thymeleaf的也要引入标签规范。不加这个虽然不影响程序运行,但是你的idea会认不出标签,不方便开发。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
赋值字符串拼接
request.setAttribute("name","刘德华");
<p th:text="’hello’ + ${name}" th:value="${name}"></p>
遍历循环:
<!--测试循环-->
<table>
<!--s 表示集合中的元素 ${slist}表示后台存储的集合 -->
<tr th:each="s,stat: ${arrayList}">
<td th:text="${s}"></td>
<td th:text="${stat.index}"></td>
<td th:text="${stat.count}"></td>
<td th:text="${stat.size}"></td>
<td th:text="${stat.even}"></td>
<td th:text="${stat.odd}"></td>
<td th:text="${stat.first}"></td>
<td th:text="${stat.last}"></td>
</tr>
</table>
stat 称作状态变量,属性有
index:当前迭代对象的 index(从 0 开始计算)
count:当前迭代对象的 index(从 1 开始计算)
size:被迭代对象的大小
even/odd:布尔值,当前循环是否是偶数/奇数
first:布尔值,当前循环是否是第一个
last:布尔值,当前循环是否是最后一个
判断
th:if 条件成立显示
th:unless 条件不成立的时候才会显示内容
取session中的属性
httpSession.setAttribute("addr","北京中南海");
<div th:text="${session.addr}"> </div>
引用内嵌页
<div th:include="itemInner"/>
th:utext :解析样式
th:utext:识别html中的标签
点击链接传值
在index 控制器中先存储一个category1Id
/*保存 category1Id*/
request.setAttribute("category1Id","2");
<a th:href="@{http://localhost:8080/list.html?category1Id={category1Id}(category1Id=${category1Id})}">点我带你飞</a>
@RequestMapping("list.html")
@ResponseBody
public String list(String category1Id){
// 接收传递过来的数据
System.out.println("获取到的数据:\t"+category1Id);
return category1Id;
}
多种存储方式
model.addAttribute("addr","北京昌平区");
hashMap.put("id","101");
HashMap<String, Object> map = new HashMap<>();
map.put("stuNo","1000");
map.put("stuName","张三");
model.addAllAttributes(map);
<h2> 多种方式存储数据1 </h2>
<div th:text="${addr}"></div>
<div th:text="${id}"></div>
<h2> 多种方式存储数据2 </h2>
<div th:text="${stuNo}"></div>
<div th:text="${stuName}"></div>
(2)详情渲染功能介绍
商品详情所需构建的数据如下:
- Sku基本信息
- Sku图片信息
- Sku分类信息
- Sku销售属性相关信息
- Sku价格信息(平台可以单独修改价格,sku后续会放入缓存,为了回显最新价格,所以单独获取)
- 展示商品的海报
- 获取skuId 对应的商品规格参数
...
(3)详情模块规划
模块规划思路:
- service-item微服务模块封装详情页面所需数据接口;
- service-item通过feign client调用其他微服务数据接口进行数据汇总;
- pc端前台页面通过web-all调用service-item数据接口渲染页面;
- service-item可以为pc端、H5、安卓与ios等前端应用提供数据接口,web-all为pc端页面渲染形式
- service-item获取商品信息需要调用service-product服务sku信息等;
- 由于service各微服务可能会相互调用,调用方式都是通过feign client调用,所以我们把feign client api接口单独封装出来,需要时直接引用feign client api模块接口即可,即需创建service-client父模块,管理各service微服务feign client api接口。