thymeleaf 入门

thymeleaf ：模板引擎，可以实现前后端交互，前端动态加载。

引入thymeleaf：

1.引入依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId></dependency>

---

2.application.properties 的文件中配置Thymeleaf

server.port=8080
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML5

<div class="theme-options" th:each="specification:${specifications}">
    <div class="cart-title" th:text="${specification.specKey}"></div>
    <ul>
        <li class="sku-line" th:each="specVal:${specification.specVal}"
            th:text="${specVal.value}" th:id="'spec'+${specVal.key}"
            th:onclick="'selected(this)'"></li>
    </ul>
</div>

后台传Model，前端直接通过map字段中，用${XXXXXX}来拿到对象，th:each 实现循环，属性可以通过设置th:XXX来设置XXX属性。

后端代码：最后的结果放在ModelMap map里面。

//根据goodsId查询出所有的页面元素，加载到introduction界面
@RequestMapping(value = "/introduction/{goodsId}")
public String introduction(@PathVariable(value = "goodsId") Long goodsId, ModelMap map) {
    List<FormatDto> FormatDtos = new ArrayList<>();
    List<Format> formats = formatService.findFormatByGoodsId(goodsId);
    Set<Long> specificationSet = new HashSet<>();
    formats.forEach(format -> {
        //取出商品format，解析其中的SpecStr，得到此商品全部specificationId
        FormatDtos.add(new FormatDto(format.getSpecStr(), format.getPrice(), format.getCount(), format.getId()));
        String[] spec = format.getSpecStr().split(",");
        for (String s : spec
                ) {
            specificationSet.add(Long.valueOf(s));
        }
    });

    //取得某商品对应的specifications，然后将其转换为想要的数据格式
    List<Specification> specifications = specificationService.findByIds(specificationSet);
    Set<String> sets = new HashSet<>();
    //取得全部的规格种类
    specifications.forEach(specification -> sets.add(specification.getSpecKey()));

    List<SpecificationDto> specificationDtos = new ArrayList<>();
    sets.forEach(specKey -> {
        SpecificationDto specificationDto = new SpecificationDto();
        specificationDto.setSpecKey(specKey);
        Map vMap = new HashMap();
        specifications.forEach(specification -> {
            if (specification.getSpecKey().equals(specKey)) {
                vMap.put(specification.getId(), specification.getSpecVal());
            }
        });
        specificationDto.setSpecVal(vMap);
        specificationDtos.add(specificationDto);
    });

    Optional optional = goodsService.findById(goodsId);
    Goods goods = (Goods) optional.get();
    GoodsDto goodsDto = new GoodsDto(goods, true);

    map.put("goods", goodsDto);
    map.put("formats", FormatDtos);
    map.put("specifications", specificationDtos);
    return "home/introduction";
}

图片展示：${goods.imgUrls[0]}取得第一个元素

<div class="tb-booth tb-pic tb-s310" id="pic">
    <a><img th:src="${goods.imgUrls[0]}" alt="细节展示放大镜特效" th:rel="${goods.imgUrls[0]}"
            class="jqzoom"/></a>
</div>
<ul class="tb-thumb" id="thumblist">
    <li th:each="imgUrl:${goods.imgUrls}">
        <div class="tb-pic tb-s40">
            <a>
                <img th:src="${imgUrl}"
                     th:mid="${imgUrl}"
                     th:big="${imgUrl}">
            </a>
        </div>
    </li>
</ul>

<script th:inline="javascript"></script>

thymeleaf中使用js