Thiết kế website giá rẻ

Question

“I can successfully pass the product ID and return the corresponding information, but I am unable to convert the JSON into HTML.

json return like below:

{"id":3,"name":"聯想天逸510S","price":3099.0,"description":"聯想（Lenovo）天逸510S商用台式辦公電腦整機（i3-7100 4G 1T 集顯 WiFi 藍牙 三年上門 win10）19.5英吋","brand":"聯想（Lenovo）","cpuBrand":"Intel","cpuType":"Intel i3","memoryCapacity":"4G","hdCapacity":"1T","cardModel":"集成顯卡","image":"5a6e946eNd622e938.jpg","displaysize":""}

goodcontroller use postman to test it return json data

@GetMapping("/goods_detail")
public ResponseEntity<Goods> getGoods(@RequestParam("goodsId") Integer goodsId){
    Goods goods = goodsService.getGoodsById(goodsId);

    if(goods != null){
        return ResponseEntity.status(HttpStatus.OK).body(goods);
    }else {
        return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
    }
}

here is my goods_detail.html

I try use html to catch Json value. But it dose not work.

<!doctype html>
<html lang="zh-Hant">
<head>
    <meta charset="utf-8">
    <title>商品詳細</title>
    <link rel="stylesheet" type="text/css" href="css/public.css">
    <style type="text/css">
        .title {
            font-size: 20px;
            color: #FF6600;
            font-style: italic;
        }
        .text3, .text4, .text5, .text6 {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
<header>
    <h1>商品詳情</h1>
    <img src="images/info.jpg" alt="商品圖片" />
</header>
<hr width="100%"/>
<div class="text3" align="center" id="description"></div>
<table width="100%" border="0" align="center">
    <tr>
        <td width="40%" align="right">
            <div>
                <img id="product-image" src="" width="360px" height="360px" alt="商品圖片"/>
            </div>
            <br>
        </td>
        <td>
            <div align="center" class="text4">一口價：<span class="title" id="price">￥0元</span></div>
            <br>
            <table width="80%" height="200" border="0">
                <tbody>
                <tr>
                    <td width="25%" class="text5">電腦品牌：</td>
                    <td width="25%" class="text6" id="brand"></td>
                    <td width="25%" class="text5">CPU品牌：</td>
                    <td width="25%" class="text6" id="cpuBrand"></td>
                </tr>
                <tr>
                    <td class="text5">內存容量：</td>
                    <td class="text6" id="memoryCapacity"></td>
                    <td class="text5">CPU型號：</td>
                    <td class="text6" id="cpuType"></td>
                </tr>
                <tr>
                    <td class="text5">硬盤容量：</td>
                    <td class="text6" id="hdCapacity"></td>
                    <td class="text5">顯卡類型：</td>
                    <td class="text6" id="cardModel"></td>
                </tr>
                <tr>
                    <td class="text5">顯示器尺寸：</td>
                    <td class="text6" id="displaySize"></td>
                    <td class="text5"> </td>
                    <td class="text6"> </td>
                </tr>
                </tbody>
            </table>
            <br>
            <br>
            <div>
                <a id="add-to-cart" href="#"><img src="images/button.jpg" alt="添加到購物車"/></a>
            </div>
        </td>
    </tr>
</table>
<footer>
    <p>© 2024 商品詳情頁面</p>
</footer>

<script>
    async function fetchGoods() {
        const params = new URLSearchParams(window.location.search);
        const goodsId = params.get('goodsId'); // 從 URL 獲取 goodsId

        if (!goodsId) {
            alert('商品 ID 不存在');
            return;
        }

        try {
            const response = await fetch(`/goods_detail?goodsId=${goodsId}`);
            if (!response.ok) {
                throw new Error('獲取商品數據失敗');
            }

            const goods = await response.json();
            // 填充商品數據
            document.getElementById("description").textContent = goods.description || '無描述';
            document.getElementById("product-image").src = goods.image || 'default.jpg';
            document.getElementById("price").textContent = `$${goods.price}元`;
            document.getElementById("brand").textContent = goods.brand || '未知';
            document.getElementById("cpuBrand").textContent = goods.cpuBrand || '未知';
            document.getElementById("memoryCapacity").textContent = goods.memoryCapacity || '未知';
            document.getElementById("cpuType").textContent = goods.cpuType || '未知';
            document.getElementById("hdCapacity").textContent = goods.hdCapacity || '未知';
            document.getElementById("cardModel").textContent = goods.cardModel || '未知';
            document.getElementById("displaySize").textContent = goods.displaySize || '未知';
        } catch (error) {
            console.error(error.message);
            alert('無法獲取商品數據，請稍後重試。');
        }
    }

    window.onload = fetchGoods;
</script>
</body>
</html>

here is my goods_list.html

<!doctype html>
<html lang="zh-Hant">
<head>
    <meta charset="utf-8">
    <title>商品列表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #b4c8ed;
        }
        .even-row {
            background-color: #ffffff;
        }
        .odd-row {
            background-color: #edf8ff;
        }
        .pagination {
            list-style-type: none;
            padding: 0;
            text-align: center;
        }
        .pagination li {
            display: inline;
            margin: 0 5px;
        }
        .pagination a {
            text-decoration: none;
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .pagination .active {
            background-color: #b4c8ed;
            color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 align="center">請從商品列表中選擇您喜愛的商品</h2>
    <table id="goodsTable" border="0" align="center">
        <thead>
        <tr>
            <th>商品名稱</th>
            <th width="15%">商品價格</th>
            <th width="20%">添加到購物車</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(goods, index) in goodsList" :key="goods.id" :class="index % 2 === 0 ? 'even-row' : 'odd-row'">
            <td><a :href="`/goods_detail?goodsId=${goods.id}`">{{ goods.name }}</a></td>
            <td>${{ goods.price }}</td>
            <td><a :href="`/goods/add?id=${goods.id}&name=${goods.name}&price=${goods.price}`">添加到購物車</a></td>
        </tr>
        </tbody>
    </table>
    <div align="center" id="pagination">
        <ul class="pagination">
            <li><a href="#" @click.prevent="goToPage(1)">«</a></li>
            <li v-for="page in totalPages" :key="page">
                <a href="#" @click.prevent="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</a>
            </li>
            <li><a href="#" @click.prevent="goToPage(totalPages)">»</a></li>
        </ul>
    </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                goodsList: [],
                currentPage: 1,
                limit: 5,
                totalItems: 0,
            };
        },
        computed: {
            totalPages() {
                return Math.ceil(this.totalItems / this.limit);
            },
        },
        methods: {
            async fetchGoods(page = 1) {
                const response = await fetch(`/goods?page=${page}`);
                const data = await response.json();
                this.goodsList = data.result;
                this.totalItems = data.total;
            },
            goToPage(page) {
                this.currentPage = page;
                this.fetchGoods(page);
            },
        },
        mounted() {
            this.fetchGoods(this.currentPage);
        },
    });

    app.mount('#app');
</script>
</body>
</html>

I hope the returned JSON can be correctly retrieved by goods_detail.

Thiết kế website giá rẻ

Danh mục

The data returned from Java web is in JSON format instead of HTML