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

程序员文章站 2022-03-25 14:04:47

...

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

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>
        <dd v-for="(str,j) in v" :key="j">
            <a href="javascript:;" class="selected">
                {{str}}<span title="点击取消选择">&nbsp;</span>
            </a>
        </dd>
    </dl>
</div>

然后刷新页面查看：

第二十章：商品详情与页面静态化
数据成功渲染了，不过我们发现所有的规格都被勾选了。这是因为现在，每一个规格都有样式： selected ，我们应该只选中一个，让它的 class 样式为 selected。

3）规格属性的筛选：

每一个规格项是数组中的一个元素，因此我们只要保存被选择的规格项的索引，就能判断哪个是用户选择的了。我们需要一个对象来保存用户选择的索引，格式如下：

{
    "4":0,
    "12":0,
    "13":0
}

第一次进入页面时，用户并未选择任何参数。因此索引应该有一个默认值，我们将默认值设置为0，在 head 的 script 标签中，对索引对象进行初始化：

第二十章：商品详情与页面静态化
然后在 vue 中保存：

第二十章：商品详情与页面静态化
我们在页面中，通过判断 indexes 的值来判断当前规格是否被选中，并且给规格绑定点击事件，点击规格项后，修改 indexes 中的对应值：

<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>
        <dd v-for="(str,j) in v" :key="j">
            <a href="javascript:;" :class="{selected: j===indexes[k]}" @click="indexes[k]=j">
                {{str}}<span v-if="j===indexes[k]" title="点击取消选择">&nbsp;</span>
            </a>
        </dd>
    </dl>
</div>

4）确定 SKU：

设计 sku 数据的时候，就已经添加了一个字段：indexes，这其实就是规格参数的索引组合。而我们在页面中，用户点击选择规格后，就会把对应的索引保存起来。因此，我们可以根据这个 indexes 来确定用户要选择的 sku，我们在 vue 中定义一个计算属性，来计算与索引匹配的 sku：

computed:{
    sku(){
        const index = Object.values(this.indexes).join("_");
        return this.skus.find(s => s.indexes == index);
    }
}

5）渲染 sku 列表：

既然已经拿到了用户选中的 sku，接下来，就可以在页面渲染数据了。

商品图片是一个字符串，以,分割，页面展示比较麻烦，所以我们编写一个计算属性：images()，将图片字符串变成数组：

computed: {
    sku(){
        const index = Object.values(this.indexes).join("_");
        return this.skus.find(s=>s.indexes==index);
    },
    images(){
        return this.sku.images ? this.sku.images.split(",") : [''];
    }
},

页面改造：

<div class="zoom">
   <!--默认第一个预览-->
   <div id="preview" class="spec-preview">
      <span class="jqzoom">
         <img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
      </span>
   </div>
   <!--下方的缩略图-->
   <div class="spec-scroll">
      <a class="prev">&lt;</a>
      <!--左右按钮-->
      <div class="items">
         <ul>
            <li v-for="(image, i) in images" :key="i">
               <img :src="image" :bimg="image" onmousemove="preview(this)" />
            </li>
         </ul>
      </div>
      <a class="next">&gt;</a>
   </div>
</div>

标题和价格：

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

1.3 商品详情：

商品详情是 HTML 代码，我们不能使用 th:text，应该使用 th:utext：

<!--商品详情-->
<div class="intro-detail" th:utext="${spuDetail.description}">
</div>

1.4 规格包装：

规格包装分成两部分：

规格参数
包装列表

而且规格参数需要按照组来显示。

1）规格参数：

我们模型中有一个 groups，跟这个数据结果很像，分成8个组，组内都有 params，里面是所有的参数。不过，这些参数都没有值。

规格参数的值分为两部分：

通用规格参数：保存在 SpuDetail 中的 genericSpec 中
特有规格参数：保存在 sku 的 ownSpec 中

我们需要把这两部分值取出来，放到 groups 中。

从 spuDetail 中取出 genericSpec 并取出 groups：

第二十章：商品详情与页面静态化
把 genericSpec 引入到 Vue 实例：

第二十章：商品详情与页面静态化
因为 sku 是动态的，所以我们编写一个计算属性，来进行值的组合：

groups(){
    groups.forEach(group => {
        group.params.forEach(param => {
            if(param.generic){
                // 通用属性，去spu的genericSpec中获取
                param.v = this.genericSpec[param.id] || '其它';
            }else{
                // 特有属性值，去SKU中获取
                param.v = JSON.parse(this.sku.ownSpec)[param.id]
            }
        })
    })
    return groups;
}

然后在页面渲染：

<div class="Ptable">
    <div class="Ptable-item" v-for="group in groups" :key="group.name">
        <h3>{{group.name}}</h3>
        <dl>
            <div v-for="p in group.params">
                <dt>{{p.name}}</dt><dd>{{p.v + (p.unit || '')}}</dd>
            </div>
        </dl>
    </div>
</div>

2）包装列表：

包装列表在商品详情中，我们一开始并没有赋值到 Vue 实例中，但是可以通过 Thymeleaf 来渲染。

<div class="package-list">
    <h3>包装清单</h3>
    <p th:text="${spuDetail.packingList}"></p>
</div>

1.5 售后服务：

售后服务也可以通过 Thymeleaf 进行渲染：

<div id="three" class="tab-pane">
    <p>售后保障</p>
    <p th:text="${spuDetail.afterService}"></p>
</div>

2. 页面静态化：

2.1 简介：

现在，我们的页面是通过 Thymeleaf 模板引擎渲染后返回到客户端。在后台需要大量的数据查询，而后渲染得到 HTML 页面。会对数据库造成压力，并且请求的响应时间过长，并发能力不高。首先能想到的就是缓存技术，比如之前学习过的 Redis。不过 Redis 适合数据规模比较小的情况。假如数据量比较大，例如我们的商品详情页。每个页面如果10kb，100万商品，就是10GB空间，对内存占用比较大。此时就给缓存系统带来极大压力，如果缓存崩溃，接下来倒霉的就是数据库了。所以缓存并不是万能的，某些场景需要其它技术来解决，比如静态化。

静态化是指把动态生成的 HTML 页面变为静态内容保存，以后用户的请求到来，直接访问静态页面，不再经过服务的渲染。而静态的 HTML 页面可以部署在 nginx 中，从而大大提高并发能力，减小 tomcat 压力。

之前就使用的 Thymeleaf，来渲染 html 返回给用户。Thymeleaf 除了可以把渲染结果写入 Response，也可以写到本地文件，从而实现静态化。

2.2 Thymeleaf 实现静态化：

1）概念：

Thymeleaf 中的几个概念：

Context：运行上下文，上下文：用来保存模型数据，当模板引擎渲染时，可以从 Context 上下文中获取数据用于渲染。当与 SpringBoot 结合使用时，我们放入 Model 的数据就会被处理到 Context，作为模板渲染的数据使用。
TemplateResolver：模板解析器，用来读取模板相关的配置，例如：模板存放的位置信息，模板文件名称，模板文件的类型等等。当与 SpringBoot 结合时，TemplateResolver 已经由其创建完成，并且各种配置也都有默认值，比如模板存放位置，其默认值就是：templates。比如模板文件类型，其默认值就是 html。
TemplateEngine：模板引擎，用来解析模板的引擎，需要使用到上下文、模板解析器。分别从两者中获取模板中需要的数据，模板文件。然后利用内置的语法规则解析，从而输出解析后的文件。

来看下模板引擎进行处理的函数：

templateEngine.process("模板名", context, writer);

三个参数：

模板名称
上下文：里面包含模型数据
writer：输出目的地的流

在输出时，我们可以指定输出的目的地，如果目的地是 Response 的流，那就是网络响应。如果目的地是本地文件，那就实现静态化了。

2）具体实现：

@Service
public class GoodsHtmlService {

    @Autowired
    private TemplateEngine engine;

    @Autowired
    private GoodsService goodsService;

    public void createHtml(Long spuId){

        //初始化运行上下文
        Context context = new Context();
        //设置数据模型
        context.setVariables(this.goodsService.loadData(spuId));

        PrintWriter printWriter = null;
        try {
            File file = new File("D:\\JavaTools\\nginx-1.14.0\\html\\item\\"+spuId+".html");
            printWriter = new PrintWriter(file);

            this.engine.process("item",context,printWriter);
        }catch (FileNotFoundException e){
            e.printStackTrace();
        }finally {
            if (printWriter != null){
                printWriter.close();
            }
        }

    }

    public void deleteHtml(Long id) {
        File file = new File("D:\\JavaTools\\nginx-1.14.0\\html\\item\\" + id + ".html");
        file.deleteOnExit();
    }
}

3）创建静态文件的时间：

假如大部分的商品都有了静态页面。那么用户的请求都会被 nginx 拦截下来，根本不会到达我们的 leyou-goods-web 服务。只有那些还没有页面的请求，才可能会到达这里。因此，如果请求到达了这里，我们除了返回页面视图外，还应该创建一个静态页面，那么下次就不会再来麻烦我们了。

所以，我们在 GoodsController 中添加逻辑，去生成静态 html 文件：

@Controller
public class GoodsController {

    @Autowired
    private GoodsService goodsService;

    @Autowired
    private GoodsHtmlService goodsHtmlService;

    @GetMapping("item/{id}.html")
    public String toItemPage(@PathVariable("id")Long id, Model model){

        Map<String, Object> map = this.goodsService.loadData(id);

        model.addAttribute(map);

        this.goodsHtmlService.createHtml(id);
        return "item";
    }
}

注意：生成 html 的代码不能对用户请求产生影响，所以这里我们使用额外的线程进行异步创建。

2.3 nginx 代理静态页面：

修改 nginx，让它对商品请求进行监听，指向本地静态页面，如果本地没找到，才进行反向代理：

server {
    listen       80;
    server_name  www.leyou.com;

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location /item {
        # 先找本地
        root html;
        if (!-f $request_filename) { #请求的文件不存在，就反向代理
            proxy_pass http://127.0.0.1:8084;
            break;
        }
    }

    location / {
        proxy_pass http://127.0.0.1:9002;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}