第二十章：商品详情与页面静态化

此博客用于个人学习，来源于网上，对知识点进行一个整理。

1. 商品详情页面逻辑：

1.1 渲染面包屑：

在商品展示页的顶部，有一个商品分类、品牌、标题的面包屑。

其数据有3部分：

• 商品分类
• 商品品牌
• spu标题

我们的模型中都有，所以直接渲染即可

<div class="crumb-wrap">
    <ul class="sui-breadcrumb">
        <li th:each="category : ${categories}">
            <a href="#" th:text="${category.name}">手机</a>
        </li>
        <li>
            <a href="#" th:text="${brand.name}">Apple</a>
        </li>
        <li class="active" th:text="${spu.title}">Apple iPhone 6s</li>
    </ul>
</div>

1.2 渲染商品列表：

先看下整体效果：

这个部分需要渲染的数据有5块：

• sku 图片
• sku 标题
• 副标题
• sku 价格
• 特有规格属性列表

其中，sku 的图片、标题、价格，都必须在用户选中一个具体 sku 后，才能渲染。而特有规格属性列表可以在 spuDetail 中查询到。而副标题则是在 spu 中，直接可以在页面渲染。因此，我们先对特有规格属性列表进行渲染。等用户选择一个 sku，再通过js对其它 sku 属性渲染。

1）副标题：

副标题是在 spu 中，所以我们直接通过 Thymeleaf 渲染，副标题中可能会有超链接，因此这里也用 th:utext 来展示。

<div class="news"><span th:utext="${spu.subTitle}"></span></div>

2）渲染规格属性列表：

规格属性列表将来会有事件和动态效果。我们需要有 js 代码参与，不能使用 Thymeleaf 来渲染了。因此，这里我们用 vue，不过需要先把数据放到 js 对象中，方便 vue 使用。

我们在页面的 head 中，定义一个 js 标签，然后在里面定义变量，保存与 sku 相关的一些数据：

<script th:inline="javascript">
    // sku集合
    const skus = /*[[${skus}]]*/ [];
    // 规格参数id与name对
	const paramMap = /*[[${params}]]*/ {
    };
    // 特有规格参数集合
    const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ "");
</script>

• specialSpec：这是 SpuDetail 中唯一与 Sku 相关的数据，我们并没有保存整个 spuDetail，而是只保留了这个属性，而且需要手动转为 js 对象

• paramMap：规格参数的 id 和 name 键值对，方便页面根据 id 获取参数名

• skus：sku 集合

把刚才获得的几个变量保存在 Vue 实例中：

然后在页面中渲染：

<div id="specification" class="summary-wrap clearfix">
    <dl v-for="(v,k) in specialSpec" :key="k">
        <dt>
            <div class="fl title">
                <i>{
  {paramMap[k]}}</i>
            </div>
        </dt