目录
1.用户需求
2.数据库设计
3.Java后台实现
3.1Mybatis对应的配置文件GoodsCollectDao.xml
3.2 GoodsCollectDao实现
3.3 Service接口及实现
4.微信小程序实现
4.1index.wxml
4.2 index.wxss
5.我的收藏效果
1.用户需求
我的收藏需求如下：
1).在小程序的底部菜单中，新增“我的收藏”，显示收藏商品列表。点收藏某个商品后，跳转到商品详情
2).商品详情页面，可以收藏和取消收藏。
3).商品下架后，自动删除用户收藏的商品。
2.数据库设计
数据库表结构，比较简单，把用户id和商品id保存即可，如下：
CREATE TABLE `goods_collect` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',`gmt_create` datetime NOT NULL COMMENT '创建时间',`goods_id` int(11) NOT NULL COMMENT '商品id',`member_id` int(11) DEFAULT NULL COMMENT '用户id',PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 comment="收藏商品";
3.Java后台实现
3.1Mybatis对应的配置文件GoodsCollectDao.xml
内容如下：
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-////DTD Mapper 3.0//EN" "/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.ddc.dao.goods.GoodsCollectDao"><resultMap id="BaseResultMap" type="com.ddc.model.goods.GoodsCollect"><id column="id" jdbcType="INTEGER" property="id"/><result column="gmt_create" jdbcType="TIMESTAMP" property="gmtCreate"/><result column="goods_id" jdbcType="INTEGER" property="goodsId"/><result column="member_id" jdbcType="INTEGER" property="memberId"/></resultMap><sql id="Base_Column_List">id, gmt_create, goods_id, member_id</sql><select id="queryApilistPage" resultType="map" parameterType="object">select c.id AS catId,g.main_img as imgUrl, g.goods_name as goodsName, g.id as goodsId, g.goods_price as price,wholesale_price as wholePrice,DATE_FORMAT(g.gmt_create,'%Y-%m-%d') as createTime,g.goods_sales AS goodsSales,c.cat_name AS catName,g.goods_status AS goodStatusFROM goods_info gLEFT JOIN goods_cat c ON g.cat_id = c.idLEFT JOIN goods_collect d ON d.goods_id=g.idwhere d.member_id=${pd.memberId}<if test="pd.goodsName != null and pd.goodsName != ''">and g.goods_name like CONCAT('%',#{pd.goodsName},'%')</if><if test="pd.orderBy != null and pd.orderBy != ''">${pd.orderBy}</if></select><select id="queryByGoodIdAndMemberId" resultMap="BaseResultMap" parameterType="com.ddc.model.goods.GoodsCollect">select id, gmt_create, goods_id, member_id from goods_collectwhere goods_id = #{goodsId} and member_id=#{memberId}</select><delete id="delete" parameterType="com.ddc.model.goods.GoodsCollect">delete from goods_collect where goods_id = #{goodsId} and member_id=#{memberId}</delete><insert id="insert" keyColumn="id" keyProperty="id" parameterType="com.ddc.model.goods.GoodsCollect" useGeneratedKeys="true">insert into goods_collect (gmt_create, goods_id, member_id) values (now(), #{goodsId}, #{memberId})</insert></mapper>
3.2 GoodsCollectDao实现
代码如下：
public interface GoodsCollectDao {//我的收藏商品列表List<Map<String, Object>> queryApilistPage(Page pages);//收藏int insert(GoodsCollect goodsCollect);//取消收藏int delete(GoodsCollect goodsCollect);//查询商品是否被用户收藏GoodsCollect queryByGoodIdAndMemberId(GoodsCollect goodsCollect);}
3.3 Service接口及实现
接口代码如下：
public interface GoodsCollectService {//我的收藏商品列表List<Map<String, Object>> queryApilistPage(Page pages);//收藏void insert(GoodsCollect goodsCollect);//取消收藏void delete(GoodsCollect goodsCollect);//查询商品是否被用户收藏GoodsCollect queryByGoodIdAndMemberId(GoodsCollect goodsCollect);}
实现代码如下：
@Servicepublic class GoodsCollectServiceImpl implements GoodsCollectService {@Resourceprivate GoodsCollectDao goodsCollectDao;//我的收藏商品列表public List<Map<String, Object>> queryApilistPage(Page pages){return goodsCollectDao.queryApilistPage(pages);}//收藏public void insert(GoodsCollect goodsCollect){goodsCollectDao.insert(goodsCollect);}//取消收藏public void delete(GoodsCollect goodsCollect){goodsCollectDao.delete(goodsCollect);}//查询商品是否被用户收藏public GoodsCollect queryByGoodIdAndMemberId(GoodsCollect goodsCollect){return goodsCollectDao.queryByGoodIdAndMemberId(goodsCollect);}}
4.微信小程序实现
4.1index.wxml
<view class='ddc-search-box'><view class='inp'><input value='{{searchKey}}' type='text' bindinput="searchInput" placeholder='搜索' /></view><view class='search-btn' bindtap='searchBtn'>搜索</view></view><scroll-view scroll-y='true' style="height:{{scrollViewHeight}}px" bindscrolltolower='getGoodList'><view class='ddc-category-box'><block wx:if='{{goodsList.length!=0}}'><view class='active-wrap' wx:for='{{goodsList}}' wx:key='index'><view class='pic'><image src='{{item.imgUrl}}' data-src="{{item.imgUrl}}" bindtap="enlarge" /></view><view class='txt' data-goodsid='{{item.goodsId}}' data-goodstatus='{{item.goodStatus}}' bindtap='viewDetail'><view class='title'>{{item.goodsName}}</view><view class='ddc-info'><view>￥{{item.price}}</view><view>已售{{item.goodsSales==null?'0':item.goodsSales}}</view><view><text>了解详情</text></view></view></view></view></block><view class='no-data' wx:if='{{goodsList.length==0}}'>暂无数据</view></view></scroll-view>
4.2 index.wxss
page{background: #fff;}.ddc-category-box{ margin-top: 10px}.active-wrap{margin: 5px 15px; background: #f5f5f5; padding: 8px 5px 5px 5px}.active-wrap.recom-area { margin-bottom: 30px;}.active-wrap{display: flex;border-radius: 5px;}.active-wrap .pic{flex:1;}.active-wrap .pic image{ width:100px;height: 60px}.active-wrap .txt{flex:4; padding-left: 10px}.active-wrap .txt .title{font-size: 14px}.active-wrap .ddc-info{display: flex; font-size: 14px; padding-top: 10px}.active-wrap .ddc-info view{ flex: 1}.active-wrap .ddc-info view:nth-of-type(1){ color: #fc6737}.active-wrap .ddc-info view:nth-of-type(3) text{ background: #07c160; font-size: 12px; color: #ffffff; border-radius: 5px; padding: 2px 0px}#tab-title .icon-sort image{ width: 8px; height: 6px; }.ddc-search-box{margin-top: 10px; display: flex; padding: 0px 20px}/* .ddc-search-box view{ flex: 1} */.ddc-search-box .inp{ width: 100%; height: 32px; border: 1px solid #e5e5e5; font-size: 14px; padding-left: 10px; border-radius: 5px;vertical-align:middle;}.search-btn{ width: 80px;font-size: 14px; background:#07c160;border-radius: 5px; color: #ffffff; text-align: center; line-height: 32px; margin-left: 10px}.no-data{ font-size: 14px; text-align: center;}.titlenotshow{display:none}.titleshow{display:block}.backHome{ height: 30px;background:#07c160; color: #ffffff;font-size: 14px; display: flex;flex-direction:center;justify-content: center;align-items: center; }.backHome .backtext{width: 33%;}.backHome .gwtitle{text-align:center;font-size: 16px; }
5.我的收藏效果
微信小程序中的收藏功能（包含用户需求 数据库设计 后台功能 微信小程序功能 效果截图等）
