商品详情页面模板,商品详情页跳出率怎么分析

商品详情页。。点击商品图片之后。将商品的spuId（也就是88）传到服务器后台中进行处理查询。将需要的数据封装成一个map返回。

Spring官方支持的服务的渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等

使用页面静态化（乐优14天第2节）：静态化是指把动态生成的HTML页面变为静态内容保存，以后用户的请求到来，直接访问静态页面，不再经过服务的渲染，而静态的HTML页面可以部署在nginx中，从而大大提高并发能力，减小tomcat压力。类似于缓存技术，但是数据量较大，缓存会奔溃。所以用页面静态化。

public class GoodsService { @Autowired private BrandClient brandClient; @Autowired private CategoryClient categoryClient; @Autowired private GoodsClient goodsClient; @Autowired private SpecificationClient specificationClient; public Map<String,Object> loadData(Long spuId){ Map<String,Object> model = new HashMap<>();..... // 查询规格参数组 List<SpecGroup> groups = this.specificationClient.queryGroupsWithParam(spu.getCid3()); // 查询特殊的规格参数的map List<SpecParam> params = this.specificationClient.queryParams(null, spu.getCid3(), false, null);。。。。。。。。model.put("spu",spu); model.put("spuDetail",spuDetail); model.put("categories",categories); model.put("brand",brand); model.put("skus",skus); model.put("groups",groups); model.put("paramMap",paramMap); return model;

　　然后在controller中调用loadData()方法。这里的controller是用来控制视图的跳转的类似于springmvc中的jsp页面跳转，只不过这里跳转的thymeleaf中的html页面。

　

　注意：把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示。Theymeleaf的主要作用是把model中的数据渲染到html中，因此其语法主要是如何解析model中的数据。Model和ModelAndView的区别

@Controllerpublic class GoodsController { @Autowired private GoodsService goodsService; @GetMapping("item/{id}.html") public String toItempage(@PathVariable("id")Long id , Model model){ Map<String,Object> map = this.goodsService.loadData(id); model.addAllAttributes(map); return "item"; }}

　　在ht在script标签中通过th:inline="javascript"来声明这是要特殊处理的js脚本，使用Thymeleaf语法来获取model中的值。检查前面的过程是否能正常获取到值。

<script th:inline="javascript">const a = /*[[${groups}]]*/ [];const b = /*[[${params}]]*/ [];const c = /*[[${categories}]]*/ [];const d = /*[[${spu}]]*/ {};const e = /*[[${spuDetail}]]*/ {};const f = /*[[${skus}]]*/ [];const g = /*[[${brand}]]*/ {};</script>

　　

 注意： 

 

（1） const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ "");//因为在specialSpec在数据库中是json字符串保存的，所以需要将数据转换成json对象。（2）Object.keys(specialSpec);//取出specialSpec对象中的所有的属性。(3)Object.values(specialSpec);//取出specialSpec对象中的所有value值。（4） const index = Object.values(this.indexes).join("_"); //其中join：表示使用“_”进行连接。　　　　　　而split(","); //表示用,进行分割。        return this.skus.find(sku => sku.indexes == index); //s.index==index这个值返回true的时候，返回相应的对象sku;