以如下這個產品明細頁面為例：

http://localhost:4200/electronics-spa/en/USD/product/553637/nv10

![](https://img-blog.csdnimg.cn/img_convert/7ce476b06fe24ce78e7e50a7ab53f322.png)

觀察瀏覽器 url 的格式：/product/553637/nv10

在 default-routing-config.ts 裡，得知 product/ 後的 553637 代表 productCode，而 nv10 則是 product name.
![](https://img-blog.csdnimg.cn/img_convert/579cc88fb47f5b4bf8f0dea4cc83f243.png)

因為我使用的是預設的 CSR 即客戶端渲染模式，所以首先看到一個只包含 loading 的 HTML 頁面。

![](https://img-blog.csdnimg.cn/img_convert/60f784927974a739d1b18b443e09186c.png)

然後看到第一個和該產品資訊相關的 HTTP 請求：/occ/v2/electronics-spa/orgProducts/553637?fields=name,categories,purchasable,baseOptions(DEFAULT),baseProduct,variantOptions(DEFAULT),variantType&lang=en&curr=USD

![](https://img-blog.csdnimg.cn/img_convert/e8daa5767ede8bcf3e3fb67387c1423d.png)

返回的請求響應，從中可以看到，PDP - Product Detail Page 內的很多資料，都不包含在這個響應裡。

![](https://img-blog.csdnimg.cn/img_convert/40baab102e8093159db70b6edaecc9e9.png)

接下來這個請求才是我們要查詢的 PDP 明細資料請求：
![](https://img-blog.csdnimg.cn/img_convert/06db81c18644904748c3a6c2362e509a.png)

```json
{
 "availableForPickup" : true,
 "averageRating" : 4.541666666666667,
 "categories" : [ {
 "code" : "576",
 "name" : "Digital Compacts",
 "url" : "/Open-Catalogue/Cameras/Digital-Cameras/Digital-Compacts/c/576"
 }, {
 "code" : "brand_26",
 "name" : "Samsung",
 "url" : "/Brands/Samsung/c/brand_26"
 } ],
 "code" : "553637",
 "configurable" : false,
 "description" : "10.1 mega-pixel 1/1.8\"\"CCD high resolution The NV10 comes in an 18.5mm thin black aluminium body with Samsung's unique blue ring on its expendable lens barrel, and a pop-up flash. A 10.1 mega pixels, 1/1.8\"\" CCD, not normally used in slim cameras, is used to give better detail. Smart Touch + Large 2.5\"\" LCD The new Smart Touch user interface makes it possible to quickly navigate and set menu items or view pictures. The unique makeup of the Smart Touch buttons with large 2.5 inch LCD on the back of the camera is expected to be great fun for users, giving them an experience unlike anything they have tried before. The superior Schneider-KREUZNACH lens The superior Schneider-KREUZNACH lens produces crystal clear images. Bright lens that start at f2.8 delivers even resolution from the centre to the edges. For more natural-looking pictures, each lens surface is multi-coated to minimize the \"\"ghost\"\" or \"\"flare\"\" phenomenon. Pop-Up Flash The most distinctive feature of the new NV Series is the built-in pop-up flash. The use of a pop-up mechanism made the overall design simple yet luxurious, and its location, right above the lens, hugely improved light diffusion angles and transmission rates. The lens location is also ideal for delivering the flashlight as intended, since it prevents accidental blocking of the flash by a hand. Advanced Shake Reduction The ASR technology prevents the degradation of image clarity and colour common to flash photography. With ASR the effects of camera shake are reduced in lower light conditions. You can even take well exposed, sharper pictures in low light without using a flash at all. It guarantees brighter and more natural pictures. ISO1000 Standards in Action NV series has an auto sensitivity feature that automatically adjusts sensitivity according to the ambient exposure conditions up to ISO 1000. The high sensitivity setting of ISO 1000 enables you to take clear indoor pictures in the dark without camera shake and the resulting image blurring. Photo Gallery function This is an upgraded version of the photo album, which used to let you access the Menu only from Play Back. Now, this new UI lets you go directly to the album. Pictures are grouped and stored by date for easier access. Multiple ways to Recharge Recharging can be done using a cradle or a 24 pin USB cable, as well as by using a detachable cable. Connect the camera to a PC using a 24 pin USB cable, use the adaptor cable to plug it into a power supply, or use any other convenient method to recharge your camera. Advanced Movie Function The NV series supports MPEG-4 VGA (640x480, 30fps) and TVD (720x480, 20fps - NV3) size for an enhanced video shooting experience. You can even edit your movies on the camera itself, making these clever models brilliantly portable but powerful movie-makers. Scene Mode 11 Scene Modes and Text Recognition capability NV series have various scene modes to obtain the best picture result in a variety of settings. The scene modes provided are Night Scene, Portrait, Children, Landscape, Text Recognition, Sunset, Dawn, Backlight, Fireworks, Beach and Snow.",
 "images" : [ {
 "altText" : "NV10",
 "format" : "zoom",
 "imageType" : "PRIMARY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjQ0MHxpbWFnZS9qcGVnfGg4OC9oNzQvODc5NzQzMTY5MzM0Mnw2ZTBiODI5M2Q0MmVkNDA3NzU2MGRiMmFkNmVjYzA3ZjQzYmUzYWU4YTM5ZGFlMWU0NTRjYjY0ZTg1OTE5NTBj"
 }, {
 "altText" : "NV10",
 "format" : "product",
 "imageType" : "PRIMARY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMjA0MHxpbWFnZS9qcGVnfGg5Yy9oNTMvODc5NzQ1Nzg3NDk3NHxjNTc2ZmRjYzJkODZjNGRmZjM1NTM5Zjc5OGE1NWE2MWYyZThiMjg0NmQ1OGI5ZDg0ZTY0M2YxM2Q5YWYxY2Vh"
 }, {
 "altText" : "NV10",
 "format" : "thumbnail",
 "imageType" : "PRIMARY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjEzfGltYWdlL2pwZWd8aGU3L2hjOS84Nzk3NDg0Mjg1OTgyfDQxODAyMWNjMWYwOGQwYWM2NzU0ZGNjZjkxNDhlNmQ2MTk2NTlmNWU2ZTZlOTcxYTlmZWQ5ODUwZWQ1ZDNkMTU"
 }, {
 "altText" : "NV10",
 "format" : "cartIcon",
 "imageType" : "PRIMARY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxNjk2fGltYWdlL2pwZWd8aDViL2hhYS84Nzk3NTEwNjY0MjIyfGZiNzIxZDAzMzcwYWE5MzJlYzZhYWMwZGY3NWI0MDFjNzg1YTEyODk1ZmQwZjQ5MGNmNzAyMmMzOTVlNWZhY2M"
 }, {
 "altText" : "NV10",
 "format" : "zoom",
 "galleryIndex" : 0,
 "imageType" : "GALLERY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjQ0MHxpbWFnZS9qcGVnfGg4OC9oNzQvODc5NzQzMTY5MzM0Mnw2ZTBiODI5M2Q0MmVkNDA3NzU2MGRiMmFkNmVjYzA3ZjQzYmUzYWU4YTM5ZGFlMWU0NTRjYjY0ZTg1OTE5NTBj"
 }, {
 "altText" : "NV10",
 "format" : "product",
 "galleryIndex" : 0,
 "imageType" : "GALLERY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wxMjA0MHxpbWFnZS9qcGVnfGg5Yy9oNTMvODc5NzQ1Nzg3NDk3NHxjNTc2ZmRjYzJkODZjNGRmZjM1NTM5Zjc5OGE1NWE2MWYyZThiMjg0NmQ1OGI5ZDg0ZTY0M2YxM2Q5YWYxY2Vh"
 }, {
 "altText" : "NV10",
 "format" : "thumbnail",
 "galleryIndex" : 0,
 "imageType" : "GALLERY",
 "url" : "/medias/?context=bWFzdGVyfGltYWdlc3wyNjEzfGltYWdlL2pwZWd8aGU3L2hjOS84Nzk3NDg0Mjg1OTgyfDQxODAyMWNjMWYwOGQwYWM2NzU0ZGNjZjkxNDhlNmQ2MTk2NTlmNWU2ZTZlOTcxYTlmZWQ5ODUwZWQ1ZDNkMTU"
 } ],
 "manufacturer" : "Samsung",
 "name" : "NV10",
 "numberOfReviews" : 24,
 "price" : {
 "currencyIso" : "USD",
 "formattedValue" : "$264.69",
 "priceType" : "BUY",
 "value" : 264.69
 },
 "priceRange" : {
 },
 "stock" : {
 "isValueRounded" : false,
 "stockLevel" : 240,
 "stockLevelStatus" : "inStock"
 },
 "summary" : "The NV10 comes in an 18.5mm thin black aluminium body with Samsung's unique blue ring on its extendable lens barrel, and a pop-up flash.",
 "url" : "/electronics-spa/products/553637"
}
```

url: /occ/v2/electronics-spa/products/553637?fields=code,configurable,configuratorType,name,summary,price(formattedValue,DEFAULT),images(galleryIndex,FULL),baseProduct,averageRating,stock(DEFAULT),description,availableForPickup,url,numberOfReviews,manufacturer,categories(FULL),priceRange,multidimensional,tags&lang=en&curr=USD

在 Chrome 開發者工具 network 標籤頁裡選中這個 HTTP 請求，把滑鼠放在 Initiator colume 上，會彈出呼叫棧：

![](https://img-blog.csdnimg.cn/img_convert/5e5454829c7fe273cdd843533bec6d06.png)

耐心往下瀏覽呼叫棧列表，直至找到 product-loading.service.ts:

![](https://img-blog.csdnimg.cn/img_convert/dcdd17e681b799b1b61bffd02c7b572d.png)

單擊該檔案，自動跳轉到第116行，設定一個斷點，按 F5 重新整理, 斷點觸發。第 117 行程式碼，傳送了一個新的 action 到 ngrx Store，型別為：ProductActions.LoadProduct:

![](https://img-blog.csdnimg.cn/img_convert/ec48e6adf449909035ff4a829343b82e.png)

斷點觸發：
![](https://img-blog.csdnimg.cn/img_convert/f0c244f7576452bcf6347c28cd6e2e75.png)

![](https://img-blog.csdnimg.cn/img_convert/c9ae42d64701cad073dbaf465c2cf344.png)

根據關鍵字 ProductActions.LoadProduct 搜尋，即可找到處理這個 action 的 effect 實現：product.effect.ts 檔案：

![](https://img-blog.csdnimg.cn/img_convert/4856ae5912c5109140db787621589a25.png)

在下圖第 40 行設定斷點：
![](https://img-blog.csdnimg.cn/img_convert/66ae4354001ece80dc5113092c450473.png)

![](https://img-blog.csdnimg.cn/img_convert/a9ff120f6addaa1ef03d0e74c22a98f7.png)

下圖就是我們最終要找到程式碼，SAP Spartacus 最終還是透過 http client, 請求對應 url 代表的資源：
![](https://img-blog.csdnimg.cn/img_convert/e1b45cf36bec99abd55614ca341b0d1a.png)

url :

"https://api.cg79x9wuu9-eccommerc1-p5-public.model-t.myhybris.cloud/occ/v2/electronics-spa/orgProducts/553637?fields=name,categories,purchasable,baseOptions(DEFAULT),baseProduct,variantOptions(DEFAULT),variantType"

更多細節，請檢視下列原始碼：

projects\core\src\product\connectors\product\product.connector.ts

![](https://img-blog.csdnimg.cn/img_convert/0d0ad37518ba9f0ca38e0c68d08163d4.png)

如何找出 SAP電商雲產品明細頁面讀取後臺資料的程式碼具體位置

相關文章