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