“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.
1