乐优商城笔记六：商品详情页
生活随笔
收集整理的這篇文章主要介紹了
乐优商城笔记六：商品详情页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用模板引擎 Thymeleaf + nginx 完成商品詳情頁靜態化
完成樂優商城商品詳情頁
搭建商品詳情頁微服務
創建子工程
- GroupId：com.leyou.service
- ArtifactId：ly-page
編寫pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>parent</artifactId><groupId>com.leyou</groupId><version>1.0.0-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><groupId>com.leyou.service</groupId><artifactId>ly-page</artifactId><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>com.leyou.service</groupId><artifactId>ly-item-interface</artifactId><version>${leyou.latest.version}</version></dependency></dependencies> </project>編寫application.yml
server:port: 8004 spring:application:name: page-servicethymeleaf:cache: false # 關閉thymeleaf緩存 eureka:client:service-url:defaultZone: http://127.0.0.1:9999/eurekainstance:lease-renewal-interval-in-seconds: 5 # 每隔5秒發送一次心跳lease-expiration-duration-in-seconds: 10 # 10秒不發送就過期編寫啟動類
package com.leyou;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cloud.client.discovery.EnableDiscoveryClient; import org.springframework.cloud.openfeign.EnableFeignClients;@SpringBootApplication @EnableDiscoveryClient @EnableFeignClients public class LyPageService {public static void main(String[] args) {SpringApplication.run(LyPageService.class, args);} }導入thymeleaf模板
將下面的代碼放入resources/templates下。
item.html
這個模板為最終模板，即內部邏輯已經全部完成，只需要放入數據即可。
<!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>樂優商城--商品詳情頁</title><link rel="icon" href="/assets/img/favicon.ico"><link rel="stylesheet" type="text/css" href="/css/webbase.css" /><link rel="stylesheet" type="text/css" href="/css/pages-item.css" /><link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" /><link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" /><style type="text/css">.goods-intro-list li {display: inline-block;width: 300px;}.Ptable {margin: 10px 0;}.Ptable-item {padding: 12px 0;line-height: 220%;color: #999;font-size: 12px;border-bottom: 1px solid #eee;}.Ptable-item h3 {width: 110px;text-align: right;}.Ptable-item h3, .package-list h3 {font-weight: 400;font-size: 12px;float: left;}h3 {display: block;font-size: 1.17em;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;}.Ptable-item dl {margin-left: 110px;}dl {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}.Ptable-item dt {width: 160px;float: left;text-align: right;padding-right: 5px;}.Ptable-item dd {margin-left: 210px;}dd {display: block;-webkit-margin-start: 40px;}.package-list {padding: 12px 0;line-height: 220%;color: #999;font-size: 12px;margin-top: -1px;}.package-list h3 {width: 130px;text-align: right;}.package-list p {margin-left: 155px;padding-right: 50px;} </style></head><body><!-- 頭部欄位 --> <!--頁面頂部，由js動態加載--> <div id="itemApp"><div id="nav-bottom"><ly-top /></div><div class="py-container"><div id="item"><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><!--product-info--><div class="product-info"><div class="fl preview-wrap"><!--放大鏡效果--><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"><</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">></a></div></div></div><div class="fr itemInfo-wrap"><div class="sku-name"><h4 v-text="sku.title"></h4></div><div class="news"><span th:utext="${spu.subTitle}"></span></div><div class="summary"><div class="summary-wrap"><div class="fl title"><i>價 格</i></div><div class="fl price"><i>￥</i><em v-text="ly.formatPrice(sku.price)"></em><span>降價通知</span></div><div class="fr remark"><i>累計評價</i><em>612188</em></div></div><div class="summary-wrap"><div class="fl title"><i>促 銷</i></div><div class="fl fix-width"><i class="red-bg">加價購</i><em class="t-gray">滿999.00另加20.00元，或滿1999.00另加30.00元，或滿2999.00另加40.00元，即可在購物車換 購熱銷商品</em></div></div></div><div class="support"><div class="summary-wrap"><div class="fl title"><i>支 持</i></div><div class="fl fix-width"><em class="t-gray">以舊換新，閑置手機回收 4G套餐超值搶 禮品購</em></div></div><div class="summary-wrap"><div class="fl title"><i>配 送 至</i></div><div class="fl fix-width"><em class="t-gray">上海 <span>有貨</span></em></div></div></div><div class="clearfix choose"><div id="specification" class="summary-wrap clearfix"><dl v-for="(value,key) in specialSpec" :key="key"><dt><div class="fl title"><i>{{key}}</i></div></dt><dd v-for="(str, index) in value" :key="index"><a href="javascript:;" :class="{selected: index===indexes[key]}" @click="indexes[key]=index">{{str}}<span v-if="index===indexes[key]" title="點擊取消選擇"> </span></a></dd></dl></div><div class="summary-wrap"><div class="fl title"><div class="control-group"><div class="controls"><input autocomplete="off" type="text" disabled value="1" minnum="1" class="itxt" /><a href="javascript:void(0)" class="increment plus">+</a><a href="javascript:void(0)" class="increment mins">-</a></div></div></div><div class="fl"><ul class="btn-choose unstyled"><li><a href="success-cart.html" target="_blank" class="sui-btn btn-danger addshopcar">加入購物車</a></li></ul></div></div></div></div></div><!--product-detail--><div class="clearfix product-detail"><div class="fl aside"><ul class="sui-nav nav-tabs tab-wraped"><li class="active"><a href="#index" data-toggle="tab"><span>相關分類</span></a></li><li><a href="#profile" data-toggle="tab"><span>推薦品牌</span></a></li></ul><div class="tab-content tab-wraped"><div id="index" class="tab-pane active"><ul class="part-list unstyled"><li>手機</li><li>手機殼</li><li>內存卡</li><li>Iphone配件</li><li>貼膜</li><li>手機耳機</li><li>移動電源</li><li>平板電腦</li></ul><ul class="goods-list unstyled"><li><div class="list-wrap"><div class="p-img"><img src="/img/_/part01.png" /></div><div class="attr"><em>Apple蘋果iPhone 6s (A1699)</em></div><div class="price"><strong><em>￥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入購物車</a></div></div></li><li><div class="list-wrap"><div class="p-img"><img src="/img/_/part02.png" /></div><div class="attr"><em>Apple蘋果iPhone 6s (A1699)</em></div><div class="price"><strong><em>￥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入購物車</a></div></div></li><li><div class="list-wrap"><div class="p-img"><img src="/img/_/part03.png" /></div><div class="attr"><em>Apple蘋果iPhone 6s (A1699)</em></div><div class="price"><strong><em>￥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入購物車</a></div></div><div class="list-wrap"><div class="p-img"><img src="/img/_/part02.png" /></div><div class="attr"><em>Apple蘋果iPhone 6s (A1699)</em></div><div class="price"><strong><em>￥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入購物車</a></div></div><div class="list-wrap"><div class="p-img"><img src="/img/_/part03.png" /></div><div class="attr"><em>Apple蘋果iPhone 6s (A1699)</em></div><div class="price"><strong><em>￥</em><i>6088.00</i></strong></div><div class="operate"><a href="javascript:void(0);" class="sui-btn btn-bordered">加入購物車</a></div></div></li></ul></div><div id="profile" class="tab-pane"><p>推薦品牌</p></div></div></div><div class="fr detail"><div class="clearfix fitting"><h4 class="kt">選擇搭配</h4><div class="good-suits"><div class="fl master"><div class="list-wrap"><div class="p-img"><img src="/img/_/l-m01.png" /></div><em>￥5299</em><i>+</i></div></div><div class="fl suits"><ul class="suit-list"><li class=""><div id=""><img src="/img/_/dp01.png" /></div><i>Feless費勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>39</span></label></li><li class=""><div id=""><img src="/img/_/dp02.png" /> </div><i>Feless費勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>50</span></label></li><li class=""><div id=""><img src="/img/_/dp03.png" /></div><i>Feless費勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>59</span></label></li><li class=""><div id=""><img src="/img/_/dp04.png" /></div><i>Feless費勒斯VR</i><label data-toggle="checkbox" class="checkbox-pretty"><input type="checkbox"><span>99</span></label></li></ul></div><div class="fr result"><div class="num">已選購0件商品</div><div class="price-tit"><strong>套餐價</strong></div><div class="price">￥5299</div><button class="sui-btn btn-danger addshopcar">加入購物車</button></div></div></div><div class="tab-main intro"><ul class="sui-nav nav-tabs tab-wraped"><li class="active"><a href="#one" data-toggle="tab"><span>商品介紹</span></a></li><li><a href="#two" data-toggle="tab"><span>規格與包裝</span></a></li><li><a href="#three" data-toggle="tab"><span>售后保障</span></a></li><li><a href="#four" data-toggle="tab"><span>商品評價</span></a></li><li><a href="#five" data-toggle="tab"><span>手機社區</span></a></li></ul><div class="clearfix"></div><div class="tab-content tab-wraped"><div id="one" class="tab-pane active"><!--商品詳情--><div class="intro-detail"><div th:utext="${detail.description}"></div></div></div><div id="two" class="tab-pane"><div class="Ptable"><div class="Ptable-item" v-for="(group, i) in specs" :key="i"><h3 v-text="group.group"></h3><dl><span v-for="(param,j) in group.params" :key="j"><dt v-text="param.k"></dt><dd v-text="param.v ? param.v + (param.unit || '') : JSON.parse(sku.ownSpec)[param.k]"></dd></span></dl></div></div><div class="package-list"><h3>包裝清單</h3><p th:text="${detail.packingList}"></p></div></div><div id="three" class="tab-pane"><p>售后保障</p><p th:text="${detail.afterService}"></p></div><div id="four" class="tab-pane"><p>商品評價</p></div><div id="five" class="tab-pane"><p>手機社區</p></div></div></div></div></div><!--like--><div class="clearfix"></div><div class="like"><h4 class="kt">猜你喜歡</h4><div class="like-list"><ul class="yui3-g"><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="/img/_/itemlike01.png" /></div><div class="attr"><em>DELL戴爾Ins 15MR-7528SS 15英寸 銀色 筆記本</em></div><div class="price"><strong><em>￥</em><i>3699.00</i></strong></div><div class="commit"><i class="command">已有6人評價</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="/img/_/itemlike02.png" /></div><div class="attr"><em>Apple蘋果iPhone 6s/6s Plus 16G 64G 128G</em></div><div class="price"><strong><em>￥</em><i>4388.00</i></strong></div><div class="commit"><i class="command">已有700人評價</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="/img/_/itemlike03.png" /></div><div class="attr"><em>DELL戴爾Ins 15MR-7528SS 15英寸 銀色 筆記本</em></div><div class="price"><strong><em>￥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人評價</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="/img/_/itemlike04.png" /></div><div class="attr"><em>DELL戴爾Ins 15MR-7528SS 15英寸 銀色 筆記本</em></div><div class="price"><strong><em>￥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人評價</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="/img/_/itemlike05.png" /></div><div class="attr"><em>DELL戴爾Ins 15MR-7528SS 15英寸 銀色 筆記本</em></div><div class="price"><strong><em>￥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人評價</i></div></div></li><li class="yui3-u-1-6"><div class="list-wrap"><div class="p-img"><img src="/img/_/itemlike06.png" /></div><div class="attr"><em>DELL戴爾Ins 15MR-7528SS 15英寸 銀色 筆記本</em></div><div class="price"><strong><em>￥</em><i>4088.00</i></strong></div><div class="commit"><i class="command">已有700人評價</i></div></div></li></ul></div></div></div></div></div> <script src="/js/vue/vue.js"></script> <script src="/js/axios.min.js"></script> <script src="/js/common.js"></script><script th:inline="javascript">// sku集合const skus = /*[[${skus}]]*/ [];// 規格參數id與name對const paramMap = /*[[${specs}]]*/ {};// 特有規格參數集合const specialSpec = JSON.parse(/*[[${detail.specTemplate}]]*/ "");// 初始化特有規格參數默認選中一個const indexes = {};const initIndex = skus[0].indexes.split("_");Object.keys(specialSpec).forEach((key, i) => {indexes[key] = parseInt(initIndex[i]);});const indexArr = skus.map(s => s.indexes);const specs = JSON.parse(/*[[${detail.specifications}]]*/ "");</script><script>var itemVm = new Vue({el:"#itemApp",data:{ly,skus,paramMap,specialSpec,indexes,specs},components:{lyTop: () => import('/js/pages/top.js')},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(",") : [''];}},}); </script><script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script> <script type="text/javascript"> $(function(){$("#service").hover(function(){$(".service").show();},function(){$(".service").hide();});$("#shopcar").hover(function(){$("#shopcarlist").show();},function(){$("#shopcarlist").hide();});}) </script> <script type="text/javascript" src="/js/model/cartModel.js"></script> <script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script> <script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script> <script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script> <script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script> <script type="text/javascript" src="index/index.js"></script> </body></html>使用thymeleaf渲染頁面
創建FeignClient
-
分別創建 BrandClient，CategoryClient，GoodsClient和SpecificationClient接口并繼承item-interface中對應的API接口類即可。
-
提供api，基本上所有的api已經在之前就準備好了，只需要在GoodsController中新增一個api。
/*** 查詢spu信息** @param spuId 商品ID* @return Spu*/@GetMapping("/{spuId}")public ResponseEntity<SpuBO> queryGoodsById(@PathVariable("spuId") Long spuId) {return ResponseEntity.ok(goodsService.queryGoodsById(spuId));}goodsService.queryGoodsById(spuId)在之前已經實現，只需要將api對外提供即可。
PageServiceConstants
這是我的常量類，PageService用到的一些字符串常量，我都定義在這里面的
package com.leyou.page.util;/*** page service 常量類*/ public final class PageServiceConstants {/*** template name*/public static final String TEMPLATE_NAME_ITEM = "item";/*** Model field*/public static final String MODEL_CATEGORIES = "categories";public static final String MODEL_BRAND = "brand";public static final String MODEL_SPU = "spu";public static final String MODEL_DETAIL = "detail";public static final String MODEL_SKUS = "skus";public static final String MODEL_SPECS = "specs";}Controller代碼
package com.leyou.page.controller;import com.leyou.page.service.PageService; import com.leyou.page.util.PageServiceConstants; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable;import java.util.Map;@Controller public class PageController {@Autowiredprivate PageService pageService;/*** 生成數據并返回到item視圖*/@GetMapping("item/{id}.html")public String spuPageInfo(@PathVariable("id") Long spuId, Model model) {// 獲取數據Map<String, Object> attributes = pageService.loadModel(spuId);// 封裝數據model.addAllAttributes(attributes);return PageServiceConstants.TEMPLATE_NAME_ITEM;} }Service代碼
package com.leyou.page.service;import com.alibaba.fastjson.JSON; import com.leyou.BO.SpuBO; import com.leyou.client.item.BrandClient; import com.leyou.client.item.CategoryClient; import com.leyou.client.item.GoodsClient; import com.leyou.client.item.SpecificationClient; import com.leyou.page.util.PageServiceConstants; import com.leyou.pojo.Brand; import com.leyou.pojo.Category; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import java.util.Arrays; import java.util.HashMap; import java.util.List; import java.util.Map;@Service public class PageService {@Autowiredprivate GoodsClient goodsClient;@Autowiredprivate CategoryClient categoryClient;@Autowiredprivate BrandClient brandClient;@Autowiredprivate SpecificationClient specificationClient;public Map<String, Object> loadModel(Long spuId) {Map<String, Object> model = new HashMap<>();// 獲取spu信息SpuBO spuBO = goodsClient.queryGoodsById(spuId);// 分類數據List<Category> categories = categoryClient.queryCategoryListByIds(Arrays.asList(spuBO.getCid1(), spuBO.getCid2(), spuBO.getCid3()));// 品牌數據Brand brand = brandClient.queryBrandById(spuBO.getBrandId());model.put(PageServiceConstants.MODEL_BRAND, brand);model.put(PageServiceConstants.MODEL_CATEGORIES, categories);model.put(PageServiceConstants.MODEL_DETAIL, spuBO.getSpuDetail());model.put(PageServiceConstants.MODEL_SKUS, spuBO.getSkuList());model.put(PageServiceConstants.MODEL_SPECS, JSON.parseObject(spuBO.getSpuDetail().getSpecTemplate()));model.put(PageServiceConstants.MODEL_SPU, spuBO);return model;}}運行前的工作
修改搜索頁的跳轉
修改nginx配置
之前所有的www.leyou.com域名下的地址都會轉發到9002端口，現在我們需要將/item的請求轉發到8004端口，也就是我們的page-service的端口
啟動nginx，即可測試啦。
網頁靜態化
什么是靜態化
靜態化是指把動態生成的HTML頁面變為靜態內容保存，以后用戶的請求到來，直接訪問靜態頁面，不再經過服務的渲染。
而靜態的HTML頁面可以部署在nginx中，從而大大提高并發能力，減小服務器訪問壓力。
如何實現靜態化
目前，靜態化頁面都是通過模板引擎來生成，而后保存到nginx服務器來部署。常用的模板引擎比如：
- Freemarker
- Velocity
- Thymeleaf
我們之前就使用的Thymeleaf，來渲染html返回給用戶。Thymeleaf除了可以把渲染結果寫入Response，也可以寫到本地文件，從而實現靜態化。
thymeleaf重要角色
Context：運行上下文
用來保存模型數據，當模板引擎渲染時，可以從Context上下文中獲取數據用于渲染。
當與SpringBoot結合使用時，我們放入Model的數據就會被處理到Context，作為模板渲染的數據使用。
TemplateResolver：模板解析器
用來讀取模板相關的配置，例如：模板存放的位置信息，模板文件名稱，模板文件的類型等等。
當與SpringBoot結合時，TemplateResolver已經由其創建完成，并且各種配置也都有默認值，比如模板存放位置，其默認值就是：templates。比如模板文件類型，其默認值就是html。
TemplateEngine：模板引擎
模板引擎：用來解析模板的引擎，需要使用到上下文、模板解析器。分別從兩者中獲取模板中需要的數據，模板文件。然后利用內置的語法規則解析，從而輸出解析后的文件。
通過templateEngine.process方法執行解析和頁面生成過程
代碼實現
Service代碼
在PageService中新增代碼
@Autowiredprivate TemplateEngine templateEngine;@Value("ly.page.destPath")private String pagePath;/*** 生成商品詳情頁并保存到指定目錄** @param spuId 商品ID*/public void createHtml(Long spuId) {Context context = new Context();context.setVariables(loadModel(spuId));// 輸出流File file = new File(pagePath + "/" + spuId + ".html");try(PrintWriter printWriter = new PrintWriter(file)) {// 生成頁面templateEngine.process(PageServiceConstants.TEMPLATE_NAME_ITEM, context, printWriter);} catch (FileNotFoundException e) {log.error("[生成商品詳情頁失敗，商品ID = {}]", spuId, e);}}Controller代碼
修改PageController中的spuPageInfo方法
配置nginx代理靜態資源
修改之前代理到8004端口的配置信息
采用靜態頁和tomcat加載兩種方式，靜態頁目錄未找到該靜態頁，就從數據庫加載數據。
性能優化
生成商品詳情頁，使用線程池去執行生成靜態頁，進一步提高效率。
新增工具類
package com.leyou.page.util;import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors;public class ThreadUtils {private static final ExecutorService es = Executors.newFixedThreadPool(10);public static void execute(Runnable runnable) {es.submit(runnable);} }PageService新增方法
/*** 新建線程處理頁面靜態化** @param spuId 商品ID*/public void asyncExcute(Long spuId) {ThreadUtils.execute(() -> createHtml(spuId));}然后修改controller中的生成靜態頁方法的調用為 asyncExcute(spuId)即可。
遺留問題
做到這里，會想到，這個靜態頁生成了就一直不會變了，萬一我的商品有了修改，或者下架了怎么辦，怎么去完成商品信息的同步呢？使用服務間的調用？還是其他方式？
這個問題在下一個筆記中詳細處理，會使用到消息中間件去完成商品信息的一個同步過程。
總結
以上是生活随笔為你收集整理的乐优商城笔记六：商品详情页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓手机安装使用linux，手机linu
- 下一篇： 电源空间辐射CDN余量低_CDN法测试与