商品收藏模块的功能设计实现

最新推荐文章于 2025-07-03 10:32:25 发布

No-way

最新推荐文章于 2025-07-03 10:32:25 发布

阅读量3.3w

点赞数 13

CC 4.0 BY-SA版权

分类专栏： JAVA技术类文章标签：收藏功能 SpringMVC ajax 电商

本文链接：https://blog.youkuaiyun.com/qq_38797181/article/details/72725198

JAVA技术类专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种电商网站上实现商品收藏功能的方法。通过创建收藏表并利用前端JavaScript和AJAX技术，实现了用户对商品的收藏与取消收藏操作。文章详细展示了如何根据用户ID和商品ID动态更新收藏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

电商网站的商品收藏功能实现

商品收藏的功能描述：用户对一件商品重复的进行收藏与取消收藏操作。点击收藏，将商品收藏成功，并且图标变为已收藏；点击已收藏，则取消对该商品的收藏，并且图标变为收藏。这个操作可以重复进行！

下面是我设计此功能的步骤以及关键代码：

1.首先创建一张收藏表：我的收藏表只有三个字段：id；userID（用户id）；productID（产品id）；

2.写添加收藏与取消收藏的方法（要根据userID和productID两个参数来实现收藏与取消收藏的）；

3.我的收藏图标是在商品详情页，所以要在进入商品详情页的时候进行判断，判断该用户有没有收藏该商品！如果该用户已收藏该商品，则图标显示已收藏，反之，则显示收藏。

4.在进入商品详情页，根据点击图标所显示的文字来判断你所进行的操作，如果点击的文字是收藏，则触发收藏事件，通过ajax进行该用户对该产品的收藏方法；如果点击的文字是已收藏，则触发取消收藏事件，也是通过ajax进行该用户对该产品的取消收藏方法。（注意：这里要先获取到该用户的userID和该商品的productID，这两个参数都可以在进入商品详情的那个方法中获取；“collection.do” 添加收藏的方法，“deleteUcByUPId.do”取消收藏的方法。）

商品详情页关键代码如下：

<div id="mir"  class="right clearfloat fr" style="text-align: center;">
     <i id="shoucang" class="iconfont icon-shoucang"></i>
     <p style="cursor: pointer;" id="btn" class=""><a style="color: #8f8f94;" href="Javascript:window.external.addFavorite(document.location.href,document.title)">收藏</a></p>
</div>

<script type="text/javascript">
	   
	   var productID = ${requestScope.productID};
	   var userID = ${requestScope.userID};
	   function addbtn(){
			$("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang');
			$("#btn").text('已收藏');
		};
		
		function dedlebtn(){
			$("#btn").text('收藏');
			$("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1');
		};
		
		$(document).ready(function () {
		if (${message.type} == 0){
				dedlebtn();
			}else{
				addbtn();
			}
		});
		$("#mir").click(function() {
			if ($("#btn").text() == '收藏' ) {
				$("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang');
				$("#btn").text('已收藏');
			} else {
				$("#btn").text('收藏');
				$("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1');
			}
			if($("#btn").text() == '收藏'){
				deleteCollection(productID,userID);
			}
			else{
				addUserCollection(productID,userID);
				
			}
		});
       

		function addUserCollection(productID){
			$.ajax({
				type: "POST",
				url: "collection.do",
				data:{"productID":productID,"userID":userID},
				dataType: "text",
				success:function(data){
					if(data=="1"){
						$("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang');
						$("#btn").text('已收藏');
						
					}else{
						$("#btn").text('收藏');
						$("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1');
					}

				}
			})
		}

		function deleteCollection(productID,userID){
			$.ajax({
				type: "POST",
				url: "deleteUcByUPId.do",
				data:{"productID":productID,"userID":userID},
				dataType: "text",
				success:function(data){
					if(data=="1"){
						$("#btn").text('收藏');
						$("#shoucang").addClass('icon-shoucang').removeClass('icon-shoucang1');
					}else{
						$("#shoucang").addClass('icon-shoucang1').removeClass('icon-shoucang');
						$("#btn").text('已收藏');

					}

				}
			})
		}
	   
	</script>