SpringBoot构建电商基础秒杀项目总结-商品列表

最新推荐文章于 2024-04-10 18:22:52 发布
最新推荐文章于 2024-04-10 18:22:52 发布
阅读量316 收藏 5
点赞数
分类专栏： springboot maven mysql 文章标签： spring boot mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hequnwang10/article/details/117307448
版权
springboot 同时被 3 个专栏收录
22 篇文章 2 订阅
订阅专栏
mysql
14 篇文章 0 订阅
订阅专栏
maven
8 篇文章 0 订阅
订阅专栏

商品列表

我们需要展示商品的列表

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">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <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 = 
			"<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'>\
			<td>"+itemVO.title+"</td>\
			<td><img style='width:100px;heigth: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>
</html>

在这里插入图片描述

2、getitem.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <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使用到了后面的东西，跟视频节奏不一样，可以自行修改。不影响使用

hequnwang10
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
SpringBoot秒杀系统实战12-商品列表页
程序鹏
05-08 282
文章目录 1、先创建商品的服务类GoodsService ，注入GoodsDao 2、创建GoodsDao 3、前端goods_list.html页面代码： 4、效果 1、先创建商品的服务类GoodsService ，注入GoodsDao @Service public class GoodsService { public stati...
商城秒杀项目，基于springboot开发，使用redis和rocketmq技术增加高并发能力
02-16
5. 项目总结 在"項目總結"文档中，开发团队会详述项目实施过程中遇到的问题、解决方案以及性能优化的策略，为后续的维护和升级提供参考。 通过这样的架构设计，我们可以实现一个高效、稳定的商城秒杀系统，满足高...
【SpringBoot商城秒杀系统项目实战12】商品列表页
pitt1997的博客
05-28 2239
先创建商品的服务类GoodsService ，注入GoodsDao @Service public class GoodsService { public static final String COOKIE1_NAME_TOKEN="token"; @Autowired GoodsDao goodsDao; @Autowired RedisService redisServic...
基于Spring Boot的网上商城购物系统设计与实现
wudixiuluo的博客
04-10 850
随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，网上商城购物系统当然也不能排除在外。网上商城购物系统是以实际运用为开发背景，运用软件工程原理和开发方法，采用springboot框架构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；
Spring Boot电商项目42：商品模块八：前台的【商品列表】接口；（这篇博客比较重要；包括：【构建Query查询对象】、【明确限制排序条件】等；）
小枯林的博客
03-11 4748
说明： （1） 一：前台的【商品列表】接口说明； 1.前台的【商品列表】接口文档； 2.前台的【商品列表】接口，在界面上的表现；
[springboot 开发单体web shop] 7. 多种形式提供商品列表
Isaac-Zhang
11-22 1064
上文回顾 上节 我们实现了仿jd的轮播广告以及商品分类的功能，并且讲解了不同的注入方式，本节我们将继续实现我们的电商主业务，商品信息的展示。 需求分析 首先，在我们开始本节编码之前，我们先来分析一下都有哪些地方会对商品进行展示，打开jd首页，鼠标下拉可以看到如下： 可以看到，在大类型下查询了部分商品在首页进行展示（可以是最新的，也可以是网站推荐等等），然后点击任何一个分类，可以看到如下： 我们一般...
6.SpringBoot简易项目商品模块之在mapper层service层前台list.html如何实现商品列表的展示
ADbyCool的博客
08-07 600
SpringBoot简易项目商品模块之如何创建SpringBoot项目？ 完成：第一遍
基于SpringBoot+MyBatis+Redis的秒杀系统-源码
10-02
本项目基于SpringBoot、MyBatis和Redis技术栈，构建了一个高效、可靠的秒杀系统，旨在解决高并发场景下的秒杀业务挑战。下面将详细介绍这三大技术在秒杀系统中的应用以及相关知识点。 **SpringBoot** SpringBoot是...
基于 SpringBoot+Mybatis+Redis+RabbitMQ 秒杀系统
05-29
总结，本项目通过综合运用各种技术手段，构建了一套完整的秒杀系统，既提高了系统的并发处理能力，又保证了业务的稳定性和数据的一致性。SpringBoot提供了快速开发框架，Mybatis简化了数据库操作，Redis提供了高效...
springboot193基于SpringBoot的秒杀系统设计与实现.zip
最新发布
05-26
总结，本项目“springboot193”通过SpringBoot构建的秒杀系统，展示了如何在高并发环境下实现稳定、高效、公平的秒杀服务。通过合理的架构设计和技术选型，实现了秒杀过程中的数据一致性、防刷策略以及系统稳定性。...
基于Springboot+Vue的秒杀系统设计与实现源码案例设计带文档说明.zip
04-20
总结，基于Springboot+Vue的秒杀系统是一个综合性的实战项目，涵盖了现代Web开发的众多核心技术，对于学习和提升Java Web开发技能具有很高的参考价值。通过深入理解和实践这个项目，开发者不仅能掌握相关技术，还能...
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
基于SpringBoot电商平台的设计与实现
ITbiyesheji的博客
03-16 907
传统处理数据，必须是一张张纸，然后处理完毕又是统计在一张张纸上面，不断的重复处理，最终有个结果给最高层作为参考，这个模式在互联网没有出现之前，是一种常见的事情，信息管理的效率提不上去，人多不一定力量大，因为人多肯定更加消耗资源，并且因为人类需要休息，需要管理，思想会不统一，会偷懒，所以人们研究出专门帮助人们计算的机器，就是计算机的前身，到了互联网时代，人们发现完全可以让程序供应商提供解决方案，自己挑选自己合适的方案来提高自己的产出比。如果正常操作都会出现问题，那设计就是不稳定的，这一点肯定不行。
基于SpringBoot的特色农产品销售设计与实现
各类程序设计成品、文档、学习资料
05-21 6146
目前市场上众多的特色农产品销售系统存在种种不足，比如系统无需登录即可查看农产品卖家的联系方式，并且交易大多为线下交易，很难实现线上购买、物流配送、线上收货收款的功能。本系统提供线上购买服务，使用数据库进行订单管理，设计优化交互界面，进一步提升用户体验。本特色农产品销售系统采用Springboot、Tomcat、Vue以及MySQL等相关软件技术，完成了用户注册登录、商品浏览、购买商品、查看商品订单、查询特色农产品、查看特色农产品商品信息、后台管理等功能模块。
电商系统前后端开发（Vue+Springboot）(21) - 添加商品
一角残叶的博客
09-07 700
1 添加路由 2 商品列表页面 3 后端接口 @RequestMapping(value="/addproduct",method = RequestMethod.POST) public String addProductById(TProduct tProduct){ tProduct.setCreateTime(new Date()); tProduct.setCreateUser(1L); tProduct.setTypeId(1L)
商品列表展示（SpringBoot+SSM框架+Thymeleaf）
weixin_47119452的博客
03-23 1432
1 介绍 1.1 SpringBoot SpringBoot是由Pivotal团队在2013年开始研发、2014年4月发布第一个版本的全新开源的轻量级框架。它基于Spring4.0设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。另外SpringBoot通过集成大量的框架使得依赖包的版本冲突，以及引用的不稳定性等问题得到了很好的解决。 1.2 SSM框架 SSM（Spring+SpringMVC+MyBatis）框架集由Spring、Spr
JavaBean+JSP添加商品页面
sinHYQ的博客
04-16 3266
1.新建一个商品JavaBean为Product，属性有商品名称、商品价格、商品分类、库存量、商品描述 package JavaBean; public class Product { private String pname; private double price; private String[] fenlei; private double shuliang; private String describle; public String getPname() { return p
ideaspringboot项目上传服务器_淘淘商城项目学习日记-02-商品添加相关实现
weixin_39704066的博客
11-22 176
商品添加实现1.实现内容完成商品添加功能商品类目选择（商品种类确定）图片上传图片服务器搭建kindEditor富文本编辑器的使用商品添加功能2.实现商品类目选择功能需求分析：在商品添加页面，点击“选择类目”显示商品类目列表：实现步骤：按钮添加点击事件，弹出窗口，加载数据显示tree将选择类目的组件封装起来，通过TT.iniit()初始化，最终调用initItemCat()方法进行初始化创建数据库、...
springboot vue电商类项目
03-16
您好，SpringBoot Vue电商类项目是一种基于SpringBoot和Vue框架开发的电商类项目。该项目主要包括前端和后端两部分，前端使用Vue框架实现页面展示和交互，后端使用SpringBoot框架实现业务逻辑和数据处理。该项目可以实现商品展示、购物车管理、订单管理、用户管理等功能，是一种常见的电商类项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值