coder-xiaomo/flashsale
1
0
Fork 0
mirror of https://gitee.com/coder-xiaomo/flashsale synced 2025-01-10 11:48:14 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

商品列表浏览页面

Browse Source
This commit is contained in:
程序员小墨 2022-03-03 21:34:50 +08:00
parent 8feb8c078c
commit d3a21edbdc
1 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/listitem.html Normal file
View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
<link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<script src="./static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<h3 class="form-title">商品列表浏览</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>商品名</th>
<th>商品图片</th>
<th>商品描述</th>
<th>商品价格</th>
<th>商品库存</th>
<th>商品销量</th>
</tr>
</thead>
<tbody id="container">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// 定义全局商品信息
var g_itemList = [];
jQuery(document).ready(function () {
$.ajax({
type: "GET",
url: "http://localhost:8090/item/list",
xhrFields: {withCredentials: true},
success: function (data) {
if (data.status == "success") {
g_itemList = data.data;
reloadDom();
} else {
alert("获取商品信息失败，原因为" + data.data.errMsg);
}
},
error: function (data) {
alert("获取商品信息失败，原因为" + data.responseText);
}
})
})
function reloadDom() {
for (var i = 0; i < g_itemList.length; i++) {
var itemVO = g_itemList[i];
var dom = "<tr id='itemDetail" + itemVO.id + "' data-id='" + itemVO.id + "' style='cursor: pointer;'>" +
"<td>" + itemVO.title + "</td>" +
"<td><img style='width: 100px; height: auto;' src='" + itemVO.imgUrl + "'/></td>" +
"<td>" + itemVO.description + "</td>" +
"<td>" + itemVO.price + "</td>" +
"<td>" + itemVO.stock + "</td>" +
"<td>" + itemVO.sales + "</td>" +
"</tr>";
$("#container").append($(dom));
$("#itemDetail" + itemVO.id).on("click", function (e) {
window.location.href = "getItem.html?id=" + $(this).data("id");
})
}
}
</script>
</body>
</html>