微信小程序中的收藏功能（包含用户需求，数据库设计，后台功能，微信小程序功能，效果截图等）

目录

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

内容如下：

id, gmt_create, goods_id, member_id

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 goodStatus

FROM goods_info g

LEFT JOIN goods_cat c ON g.cat_id = c.id

LEFT JOIN goods_collect d ON d.goods_id=g.id

where d.member_id=${pd.memberId}

and g.goods_name like CONCAT('%',#{pd.goodsName},'%')

${pd.orderBy}

select id, gmt_create, goods_id, member_id from goods_collect

where goods_id = #{goodsId} and member_id=#{memberId}

delete from goods_collect where goods_id = #{goodsId} and member_id=#{memberId}

insert into goods_collect (gmt_create, goods_id, member_id) values (now(), #{goodsId}, #{memberId})

3.2 GoodsCollectDao实现

代码如下：

public interface GoodsCollectDao {

//我的收藏商品列表

List> queryApilistPage(Page pages);

//收藏

int insert(GoodsCollect goodsCollect);

//取消收藏

int delete(GoodsCollect goodsCollect);

//查询商品是否被用户收藏

GoodsCollect queryByGoodIdAndMemberId(GoodsCollect goodsCollect);

}

3.3 Service接口及实现

接口代码如下：

public interface GoodsCollectService {

//我的收藏商品列表

List> queryApilistPage(Page pages);

//收藏

void insert(GoodsCollect goodsCollect);

//取消收藏

void delete(GoodsCollect goodsCollect);

//查询商品是否被用户收藏

GoodsCollect queryByGoodIdAndMemberId(GoodsCollect goodsCollect);

}

实现代码如下：

@Service

public class GoodsCollectServiceImpl implements GoodsCollectService {

@Resource

private GoodsCollectDao goodsCollectDao;

//我的收藏商品列表

public List> 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

搜索

{{item.goodsName}}

￥{{item.price}}

已售{{item.goodsSales==null?'0':item.goodsSales}}

了解详情

暂无数据

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.我的收藏效果