商品详情页局部静态化实例分析以及技术点

流程简述：

1.商品后台进行商品导入，导入后发异步消息流生成局部静态模板页（图文详情介绍说明之类的----变化不大的内容）。

2.模板页的生成，可以利用ob缓存渲染html模板之类的，然后将模板文件上传到指定的服务器，这里对文件名的规则有一定的要求( https://image-shop.chuchujie.com/culiu.cdn/shop_staticHtml/detail/18/67/1100240643278_detail.html )，基于商品id进行hash运算得到的/18/67目录，所有调用端保持一致即可。

3.上传到七牛服务器需要注意的地方，七牛开启cdn加速，在多个地区开启多个节点，将文件上传到源站进行分发，除了源站外的其他地方直接访问的是cdn缓存，如果源站发生改变，需要主动提交刷新缓存请求或者通过携带随机 URL 参数刷新。这里使用通过携带随机 URL 参数刷新。

例如，如果 http://odum9helk.qnssl.com/resource/gogopher.jpg 这个图片资源没有更新，可以在该 URL 后面加上问号随机参数的形式来让 CDN 强制刷新： http://odum9helk.qnssl.com/resource/gogopher.jpg?v=1234567 ，CDN 拿到这个 URL 后会强制回源站中取回最新的资源。

如果域名没有开启忽略 URL 参数，那么在 CDN 节点上，对于：

( http://odum9helk.qnssl.com/resource/gogopher.jpg )

( http://odum9helk.qnssl.com/resource/gogopher.jpg?v=1 )

( http://odum9helk.qnssl.com/resource/gogopher.jpg?v=2 )

这三个 URL 是独立缓存的。所以，如果携带之前没用过的参数访问，CDN 会强制回源站中取回最新的资源。

① 关闭忽略 URL 缓存的域名，才可以使用这种方法刷新。

本项目中采用nginx缓存一段时间的方法，来控制url的参数 https://image-shop.chuchujie.com/culiu.cdn/shop_staticHtml/detail/18/67/1100240643278_detail.html?v=15484108912&is_cct=0&is_oversea=0&delivery_type=0

参数v通过访问接口的时间戳来变化，来强制CDN更新。

还有一种好的方法是，更新模板的时候，主动提交刷新缓存请求，来使CDN更新所有缓存内容和源站同步。

4.然后是商品详情页接口，里面有需要的动态变化的数据，例如价格数量 sku,spu，活动时间以及优惠券等信息，也包含局部静态模板文件地址，ios/安卓可以拿到相应的地址开启web view进行展示，h5拿到地址进行get请求得到模板html,然后加载到商品详情页。

5.商品详情页接口里分多级缓存，这里使用memcache。然后使用nginx的fastcgi_cache缓存整个商品详情页接口，减少了nginx与php服务的请求，在高并发的情况下性能极佳。

6.这里需要注意的是更新商品内容时需要更新模板，以及nginx更新fastcgi_cache缓存的内容。（我的想法是，在知道更新了商品内容并且更新了模板后，则删除之前在nginx缓存该商品详情接口的内容，重新进行缓存，因为直接修改nginx的缓存比较困难，但是删除比较方便，直接根据规则删除对应的文件）

7.主要利用七牛上传文件，使用里面的刷新缓存功能来更新模板信息。

使其他的CDN缓存回源更新源站最新的内容然后进行缓存。

8.通过nginx配合lua，对特殊的fastcgi_cache缓存的内容进行实时修改数据，比如商品详情页里可能含有活动的倒计时时间，这个倒计时时间需要当前的服务时间与活动结束时间实时比较得到，这时候通过ngx.location.capture发起一个当前缓存页的请求，如果拿到的是缓存的数据，则将数据进行对应的修改local currentTime = os.time()，最后再response响应，ngx.say(response.body)

ngx.exit(ngx.HTTP_OK)。

当然一些无需变化的数据，直接走fastcgi_cache缓存的数据即可。

我们在网店上买东西的时候，可以看到宝贝最多相关信息的地方就是商品的详情页，所以说在淘宝店铺中，淘宝宝贝的详情页是吸引买家是否购物的一个重要因素。很多精明的卖家朋友也注意到了这一点，因此都会对商品的详情页比较重；而这些卖家中，很多卖家现在都会在不同平台中有着店铺，那么在新开一个店铺的时候又要另外开始设计这个商品的详情页，大量的时间将会浪费在这重复的工作中。甩手工具箱的店铺功能可以通过抓取淘宝、天猫、QQ网购、拍拍、阿里巴巴的店铺来制作成不同平台的数据包，从而实现多个网店快速同步的效果，为卖家朋友们节省更多的时间来做销售的事情！下面介绍如何快捷网店搬家，解决要重复做电脑端详情页和制作手机淘宝详情页难的问题！用到店铺复制功能来抓取店铺中的商品来一键为网店搬家；店铺复制还可以抓取淘宝、天猫、QQ网购、拍拍、阿里巴巴中店铺的商品来生成数据包，并在这个过程中可以完成手机淘宝详情页的一键制作进入选择要复制的店铺所属平台，然后输入店铺的首页网址或者店铺的相关帐号，下一步选择要复制商所属的分类，然后再找到要复制的商品，全部复制直接全选待复制的商品选择完成，需要将商品先下载下来；待复制的商品越多，下载时间越长；选择处理方式为导出淘宝助理数据包；目前只有淘宝平台有手机详情页，所以只有选择导出淘宝助理数据包才可以一键生成手机详情页转换商品详情的步骤：这个步骤就可以完成一键生成手机

详情页是用来向买家详细展示商品的，主要包含这几点：设计风格、卖点展示、文案、附加服务信息等几大块吧。展开来说会比较多，简单说一下吧。

设计风格：这个是和产品相对应的，什么样的产品适合什么样的设计风格。就好比昂贵的数码产品或者奢侈品，其设计风格自然要显得高端大气，这样买家看了一眼就会觉得你的产品是符合这种调性的。像农副产品、水果这种自然要贴近真实感，风格不易花哨，重点要体现出产品本身的闪光灯，而非视觉效果上的高大上。其次就是详情页的设计逻辑，要有章法调理，不能东一榔头西一棒锤。从上到下要按照自己设计好的逻辑来做，先让买家看到什么，再让买家看什么，最后抛出一个决定性的购买理由。有逻辑就会显得循序渐进，不会让人看了就觉得乱。

卖点展示：卖点是需要提炼的，要对自己的产品有足够的了解，知道在竞品面前你的产品具备怎样的优势。找不到怎么办？去看看竞品都在说产品什么好，别人没有的你可以发掘，别人有的你要去优化，一个宗旨就是人无我有人有我优。卖点不在多，通篇的卖点堆砌会让买家看了之后觉得你在自吹，完全就成了自嗨。把精炼的卖点通过好的视觉效果传达出来。

文案：文案是配合图片来增加买家对产品的理解的，文案不易过长，不要去堆砌专业词汇，像用了什么什么科技材料这种，不懂的买家压根不知道你在说什么。试着换用表达效果的词汇去描述，让买家知道你的产品能给他带来什么价值，能提供什么样的便利。

附加服务信息：这里可以放关于店铺的优惠信息，用优惠券去打动买家，或者用限时活动去引导买家下单。还有像包邮、七天无理由、运费险等等一系列店铺附加的服务都可以明确提出。

最后，详情页不会做的可以试试易尚货智能美工机器人，上传图片选好模板，就能自动生成详情页。

---