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

淩亂°似流年 2022-08-29 05:54 11阅读 0赞

**目录**

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 "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/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 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}
            <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_collect
            where 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);
    }

实现代码如下：

@Service
    public class GoodsCollectServiceImpl implements GoodsCollectService {
    
        @Resource
        private 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.我的收藏效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pscV9kaWxpZ2VuY2U_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pscV9kaWxpZ2VuY2U_size_16_color_FFFFFF_t_70]: /images/20220829/1d268d1aab744f08976911e66e3c508c.png