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

       

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

        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>