SpringBoot构建电商基础秒杀项目总结-商品列表
商品列表
我们需要展示商品的列表
1、ItemDOMapper.xml
<select id="listItem" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
/*通过销量倒序排序*/
from item ORDER BY sales DESC;
</select>
2、ItemDOMapper接口
List<ItemDO> listItem();
3、ItemServiceImpl.java
@Override
public List<ItemModel> listItem() {
List<ItemDO> itemDOList = itemDOMapper.listItem();
//使用Java8的stream API
List<ItemModel> itemModelList = itemDOList.stream().map(itemDO -> {
ItemStockDO itemStockDO = itemStockDOMapper.selectByItemId(itemDO.getId());
ItemModel itemModel = this.convertModelFromDataObject(itemDO, itemStockDO);
return itemModel;
}).collect(Collectors.toList());
return itemModelList;
}
4、ItemController.java
//商品列表页面浏览
@RequestMapping(value = "/list", method = {
RequestMethod.GET})
@ResponseBody
public CommonReturnType listItem() {
List<ItemModel> itemModelList = itemService.listItem();
//使用stream API将list内的itemModel转化为itemVO；
List<ItemVO> itemVOList = itemModelList.stream().map(itemModel -> {
ItemVO itemVO = this.convertVOFromModel(itemModel);
return itemVO;
}).collect(Collectors.toList());
return CommonReturnType.create(itemVOList);
}
5、 运行测试
6、 商品列表页面
1、listitem.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
tbody>
table>
div>
div>
body>
<script>
// 定义全局商品数组信息
var g_itemList = [];
$(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 =
"\
"+itemVO.title+" \
![]("</span><span class="token operator">+</span>itemVO<span class="token punctuation">.</span>imgUrl<span class="token operator">+</span><span class="token string">")
"+itemVO.description+" \
"+itemVO.price+" \
"+itemVO.stock+" \
"+itemVO.sales+" \
";
$("#container").append($(dom));
//点击一行任意的位置 跳转到商品详情页
$("#itemDetail"+itemVO.id).on("click", function(e) {
window.location.href="getitem.html?id="+$(this).data("id");
});
}
}
script>
html>
2、getitem.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 class="login">
<div class="content">
<h3 class="form-title">商品详情h3>
<div id="promoStartDateContainer" class="form-group">
<label style="color:blue" id="promoStatus" class="control-label">秒杀开始时间label>
<div>
<label style="color:red" class="control-label" id="promoStartDate" />
div>
div>
<div class="form-group">
<div>
<label class="control-label" id="title" />
div>
div>
<div class="form-group">
<div>
<img style="width:200px;height:auto;" id="imgUrl">
div>
div>
<div class="form-group">
<label class="control-label">商品描述label>
<div>
<label class="control-label" id="description" />
div>
div>
<div id="normalPriceContainer" class="form-group">
<label class="control-label">商品价格label>
<div>
<label class="control-label" id="price" />
div>
div>
<div id="promoPriceContainer" class="form-group">
<label style="color:red" class="control-label">秒杀价格label>
<div>
<label style="color:red" class="control-label" id="promoPrice" />
div>
div>
<div class="form-group">
<label class="control-label">商品库存label>
<div>
<label class="control-label" id="stock" />
div>
div>
<div class="form-group">
<label class="control-label">商品销量label>
<div>
<label class="control-label" id="sales" />
div>
div>
<div class="form-actions">
<button class="btn blue" id="createOrder" type="submit">
立即购买
button>
div>
div>
body>
<script>
var g_itemVO = {
};
$(document).ready(function() {
// 获取商品详情
$.ajax({
type: "GET",
url: "http://localhost:8090/item/get",
data: {
"id": getParam("id"),
},
xhrFields:{
withCredentials:true
},
success: function(data) {
if (data.status == "success") {
g_itemVO = data.data;
reloadDom();
setInterval(reloadDom, 1000);
} else {
alert("获取信息失败，原因为" + data.data.errMsg);
}
},
error: function(data) {
alert("获取信息失败，原因为" + data.responseText);
}
});
$("#createOrder").on("click", function() {
$.ajax({
type: "POST",
url: "http://localhost:8090/order/createorder",
contentType: "application/x-www-form-urlencoded",
data: {
"itemId": g_itemVO.id,
"promoId": g_itemVO.promoId,
"amount": 1,
},
xhrFields:{
withCredentials:true
},
success: function(data) {
if (data.status == "success") {
alert("下单成功");
window.location.reload();
} else {
alert("下单失败，原因为" + data.data.errMsg + data.data.errCode);
if (data.data.errCode == 20003) {
window.location.href="login.html";
}
}
},
error: function(data) {
alert("下单失败，原因为" + data.responseText);
}
});
});
});
function reloadDom() {
$("#title").text(g_itemVO.title);
$("#imgUrl").attr("src", g_itemVO.imgUrl);
$("#description").text(g_itemVO.description);
$("#price").text(g_itemVO.price);
$("#stock").text(g_itemVO.stock);
$("#sales").text(g_itemVO.sales);
if (g_itemVO.promoStatus == 1) {
// 秒杀活动还未开始
console.log(g_itemVO.startDate);
var startTime = g_itemVO.startDate.replace(new RegExp("-", "gm"), "/");
startTime = (new Date(startTime)).getTime();
var nowTime = Date.parse(new Date());
var delta = (startTime - nowTime) / 1000;
if (delta <= 0) {
// 活动开始了
g_itemVO.promoStatus = 2;
reloadDom();
}
$("#promoStartDate").text("秒杀活动将于："+g_itemVO.startDate+" 开始售卖 倒计时："+delta+" 秒");
$("#promoPrice").text(g_itemVO.promoPrice);
$("#createOrder").attr("disabled", true);
} else if (g_itemVO.promoStatus == 2) {
// 秒杀活动进行中
$("#promoStartDate").text("秒杀活动进行中");
$("#promoPrice").text(g_itemVO.promoPrice);
$("#createOrder").attr("disabled", false);
$("#normalPriceContainer").hide();
}
}
function getParam(paramName) {
paramValue = "", isFound = !1;
if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
while (i < arrSource.length && !isFound)
arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
}
return paramValue == "" && (paramValue = null), paramValue
}
script>
html>
这里的getitem.html使用到了后面的东西，跟视频节奏不一样，可以自行修改。不影响使用