如何查看京东上新的品都有哪些？-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45534626/article/details/145309160

**
解析上传的 .har 文件，提取出京东商品的 skuId、skuName、skuImg 和 jdPrice，并将提取的结果显示在网页表格中。以下是通俗易懂的代码分解：**

HTML 结构
主要内容
标题：显示页面标题“京东新品上线查询工具”。
按钮和文件上传：
用户可以点击按钮选择一个 .har 文件。
选择完成后，点击“解析文件”按钮触发解析操作。
表格：
用来展示解析后的商品数据，包括：
序号（#）
商品 ID（skuId）
商品名称（skuName）
商品图片（skuImg）
商品价格（jdPrice）
解析逻辑 (JavaScript)
函数：parseHarFile()
这个函数负责读取用户上传的 HAR 文件，并提取其中的商品数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东新品查询工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #4CAF50;
            text-align: center;
        }
        .buttons {
            display: flex;
            justify-content: center;
            margin: 20px;
            gap: 10px;
        }
        button, input[type="file"] + label {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover, input[type="file"] + label:hover {
            background-color: #45a049;
        }
        input[type="file"] {
            display: none;
        }
        table {
            width: 100%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #fff;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        td img {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
</head>
<body>

<h1>京东新品上线查询工具-</h1>

<div class="buttons">
    <input type="file" id="fileInput" accept=".har">
    <label for="fileInput">选择 执行文件</label>
    <button onclick="parseHarFile()">解析文件</button>
</div>

<table id="resultTable">
    <thead>
        <tr>
            <th>#</th>
            <th>SkuId</th>
            <th>SkuName</th>
            <th>SkuImg</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    function parseHarFile() {
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择一个 HAR 文件。');
            return;
        }

        const reader = new FileReader();
        reader.onload = function (event) {
            try {
                const harData = JSON.parse(event.target.result);
                const parsedData = [];
                const entries = harData.log.entries;

                // Recursively extract SKU data
                function extractSkus(jsonObject, results) {
                    if (typeof jsonObject === 'object' && jsonObject !== null) {
                        // Check for SKU fields
                        if (
                            jsonObject.skuId &&
                            jsonObject.skuName &&
                            jsonObject.skuImg &&
                            jsonObject.jdPrice
                        ) {
                            results.push({
                                skuId: jsonObject.skuId,
                                skuName: jsonObject.skuName,
                                skuImg: jsonObject.skuImg,
                                price: jsonObject.jdPrice,
                            });
                        }
                        // Recursively check objects and arrays
                        Object.values(jsonObject).forEach((value) =>
                            extractSkus(value, results)
                        );
                    }
                }

                // Process each entry in the HAR file
                entries.forEach((entry) => {
                    const responseText =
                        entry.response?.content?.text || '';
                    if (responseText) {
                        try {
                            const jsonResponse = JSON.parse(responseText);
                            extractSkus(jsonResponse, parsedData);
                        } catch (e) {
                            console.error('解析 JSON 出错:', e);
                        }
                    }
                });

                // Display the extracted results
                displayResults(parsedData);
            } catch (error) {
                alert('解析文件出错：' + error.message);
            }
        };

        reader.readAsText(file);
    }

    function displayResults(data) {
        const tableBody = document.querySelector('#resultTable tbody');
        tableBody.innerHTML = '';

        data.forEach((item, index) => {
            const row = document.createElement('tr');

            // Add sequence number
            const seqCell = document.createElement('td');
            seqCell.textContent = index + 1;
            row.appendChild(seqCell);

            const skuIdCell = document.createElement('td');
            skuIdCell.textContent = item.skuId;
            row.appendChild(skuIdCell);

            const skuNameCell = document.createElement('td');
            skuNameCell.textContent = item.skuName;
            row.appendChild(skuNameCell);

            const skuImgCell = document.createElement('td');
            if (item.skuImg) {
                const imgElement = document.createElement('img');
                imgElement.src = item.skuImg;
                imgElement.alt = "SKU Image";
                skuImgCell.appendChild(imgElement);
            }
            row.appendChild(skuImgCell);

            const priceCell = document.createElement('td');
            priceCell.textContent = item.price;
            row.appendChild(priceCell);

            tableBody.appendChild(row);
        });
    }
</script>

</body>
</html>


读取文件：

获取用户上传的文件 (fileInput.files[0])。
用 FileReader 将文件读取为文本。
解析数据：

将文件内容解析为 JSON 对象。
遍历 HAR 文件的每个 entry 条目。
从每个条目的 response.content.text 提取 JSON 数据。
递归提取商品数据：

使用 extractSkus 函数递归解析 JSON 数据：
如果对象中包含 skuId、skuName、skuImg 和 jdPrice，将其存入结果数组。
遍历嵌套的对象和数组，确保不会遗漏任何商品数据。
展示结果：

调用 displayResults 函数将提取的商品数据以表格形式展示。
函数：extractSkus(jsonObject, results)
这是一个递归函数，用来从复杂嵌套的 JSON 数据中提取商品信息：
如果对象中存在 skuId、skuName、skuImg 和 jdPrice，保存这些数据。
如果对象或数组中嵌套了其他数据，递归继续解析，确保不会遗漏。
函数：displayResults(data)
这个函数负责将提取的商品数据展示在 HTML 表格中：
清空表格的旧数据。
遍历商品数据，将每条记录生成一行表格内容：
序号列：显示每条记录的编号。
skuId、skuName 列：直接显示文本内容。
skuImg 列：显示商品图片。
jdPrice 列：显示商品价格。
3. 核心功能点
文件上传：

用户上传 .har 文件（浏览器支持的网络请求记录文件）。
递归解析 JSON：

通过递归提取商品数据，确保无论嵌套层级多深，数据都能被提取。
表格展示：

数据通过 HTML 表格清晰地展示出来，支持显示商品图片和其他信息。
4. 用户体验流程
打开网页，点击“选择执行文件”按钮，上传一个 .har 文件。
点击“解析文件”按钮，解析文件中的网络请求。
页面会展示商品数据表格，包括商品图片、名称、价格等信息。
5. 适合的场景
如果您需要从京东等电商平台的 HAR 文件中快速提取商品信息并分析，这个工具非常适用。
适合用户对商品信息进行整理、对比和分析。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f16fc2dd7994404b8059f77f4429b1ef.png)