购物车实现大揭秘：让你秒懂网购背后的技术！

于 2024-08-02 09:25:35 发布
阅读量339 收藏 6
点赞数 5
文章标签： 数据库 oracle
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hulianwangjike/article/details/140863673
版权

一、购物车分析

1、购物车需求分析

首先搭建好数据库
	1、考虑客户端传来的商品数据有哪些
	2、考虑添加到购物车中商品的信息有哪些
	3、是根据哪个字段进行查找购物车商品

Copy

2、购物车实现思路

使用redis存储购物车数据，每次查看购物车的时候直接从Redis中获取。

130eb202312121625318623.png

3、表结构分析

1.订单表参考样例

CREATE TABLE `tb_order_item` (
  `id` varchar(20) COLLATE utf8_bin NOT NULL COMMENT 'ID',
  `category_id1` int(11) DEFAULT NULL COMMENT '1级分类',
  `category_id2` int(11) DEFAULT NULL COMMENT '2级分类',
  `category_id3` int(11) DEFAULT NULL COMMENT '3级分类',
  `spu_id` varchar(20) COLLATE utf8_bin DEFAULT NULL COMMENT 'SPU_ID',
  `sku_id` bigint(20) NOT NULL COMMENT 'SKU_ID',
  `order_id` bigint(20) NOT NULL COMMENT '订单ID',
  `name` varchar(200) COLLATE utf8_bin DEFAULT NULL COMMENT '商品名称',
  `price` int(20) DEFAULT NULL COMMENT '单价',
  `num` int(10) DEFAULT NULL COMMENT '数量',
  `money` int(20) DEFAULT NULL COMMENT '总金额',
  `pay_money` int(11) DEFAULT NULL COMMENT '实付金额',
  `image` varchar(200) COLLATE utf8_bin DEFAULT NULL COMMENT '图片地址',
  `weight` int(11) DEFAULT NULL COMMENT '重量',
  `post_fee` int(11) DEFAULT NULL COMMENT '运费',
  `is_return` char(1) COLLATE utf8_bin DEFAULT NULL COMMENT '是否退货',
  PRIMARY KEY (`id`),
  KEY `item_id` (`sku_id`),
  KEY `order_id` (`order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Copy

购物车详情表其实就是订单详情表结构，只是目前临时存储数据到Redis，等用户下单后才将数据从Redis取出存入到MySQL中。

2.折扣表

CREATE TABLE `tb_pref` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `cate_id` int(11) DEFAULT NULL COMMENT '分类ID',
  `buy_money` int(11) DEFAULT NULL COMMENT '消费金额',
  `pre_money` int(11) DEFAULT NULL COMMENT '优惠金额',
  `start_time` date DEFAULT NULL COMMENT '活动开始日期',
  `end_time` date DEFAULT NULL COMMENT '活动截至日期',
  `type` char(1) DEFAULT NULL COMMENT '类型,1:普通订单，2：限时活动',
  `state` char(1) DEFAULT NULL COMMENT '状态,1:有效，0：无效',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

Copy

二、订单购物车微服务搭建

1、引入依赖
2、通过逆向工程创建实体类，server，serverlmp，controller
3、application.yml文件完善配置（eureka、feign、redis、jdbc）

Copy

1、添加商品到redis

1.1、实现思路

(1).用户添加购物车，只需要将要加入购物车的商品存入到Redis中即可。一个用户可以将多件商品加入购物车，存储到Redis中的数据可以采用Hash类型。

(2).选Hash类型可以将用户的用户名作为namespace的一部分，将指定商品加入购物车，则往对应的namespace中增加一个key和value，key是商品ID，value是加入购物车的商品详情，如下图：

5ee76202312121628083720.png

1.2、代码实现将数据存入redis
1、需要使用feign来调用商品服务的接口来获取商品的信息——需要在订单服务开启客户端@EnableFeignClients
2、order服务的业务层添加add（商品数量，商品id，用户名）方法来实现将商品添加到redis
		a、根据id查询库存表sku，判断该商品库存数量和是否上架出售
		b、从sku表中查出来的信息中获取spu的id到spu表中查询商品的其他信息（如销售价格，优惠）
		c、将查到的两个商品对象，创建一个实体类其包含了购物车所需的属性，用这个实体类将他们封装起来
3、将封装好的对象存储到redis中

Copy

1.2.1、feign
  • sku库存
/***
 * 根据ID查询SKU信息
 * @param id : sku的ID
 */
@GetMapping(value = "/{id}")
public Result<Sku> findById(@PathVariable(value = "id", required = true) Long id);

Copy

  • spu商品销售的信息表
/***
 * 根据SpuID查询Spu信息
 * @param id
 * @return
 */
@GetMapping("/{id}")
public Result<Spu> findById(@PathVariable(name = "id") Long id);

Copy

1.2.2、业务层

添加到redis中数据的格式

redisTemplate.boundHashOps().put();

Copy

@Service
public class CartServiceImpl implements CartService {

    @Autowired
    private RedisTemplate redisTemplate;

    @Autowired
    private SkuFeign skuFeign;

    @Autowired
    private SpuFeign spuFeign;


    /***
     * 加入购物车
     * @param num:购买商品数量
     * @param id：购买ID
     * @param username：购买用户
     * @return
     */
    @Override
    public void add(Integer num, Long id, String username) {
        //查询SKU
        Result<Sku> resultSku = skuFeign.findById(id);
        if(resultSku!=null && resultSku.isFlag()){
            //获取SKU
            Sku sku = resultSku.getData();
            //获取SPU
            Result<Spu> resultSpu = spuFeign.findById(sku.getSpuId());

            //将SKU转换成OrderItem
            OrderItem orderItem = sku2OrderItem(sku,resultSpu.getData(), num);

            /******
             * 购物车数据存入到Redis
             * namespace = Cart_[username]
             * key=id(sku)
             * value=OrderItem
             */
            redisTemplate.boundHashOps("Cart_"+username).put(id,orderItem);
        }
    }

    /***
     * SKU转成OrderItem
     * @param sku
     * @param num
     * @return
     */
    private OrderItem sku2OrderItem(Sku sku,Spu spu,Integer num){
        OrderItem orderItem = new OrderItem();
        orderItem.setSpuId(sku.getSpuId());
        orderItem.setSkuId(sku.getId());
        orderItem.setName(sku.getName());
        orderItem.setPrice(sku.getPrice());
        orderItem.setNum(num);
        orderItem.setMoney(num*orderItem.getPrice());       //单价*数量
        orderItem.setPayMoney(num*orderItem.getPrice());    //实付金额
        orderItem.setImage(sku.getImage());
        orderItem.setWeight(sku.getWeight()*num);           //重量=单个重量*数量

        //分类ID设置
        orderItem.setCategoryId1(spu.getCategory1Id());
        orderItem.setCategoryId2(spu.getCategory2Id());
        orderItem.setCategoryId3(spu.getCategory3Id());
        return orderItem;
    }
}

Copy

1.2.3、控制层
@RestController
@CrossOrigin
@RequestMapping(value = "/cart")
public class CartController {

    @Autowired
    private CartService cartService;

    /***
     * 加入购物车
     * @param num:购买的数量
     * @param id：购买的商品(SKU)ID
     * @return
     */
    @RequestMapping(value = "/add")
    public Result add(Integer num, Long id){
        //用户名
        String username="szitheima";
        //将商品加入购物车
        cartService.add(num,id,username);
        return new Result(true, StatusCode.OK,"加入购物车成功！");
    }
}

Copy

注意：此处的用户名是写死的，如何获取用户名成为一个问题

2、从redis中获取商品数据

2.1、思路分析

存入数据时是以hash的形式存储的，且键位“Cart_”+用户名，值为商品详情对象，因此

2.2、业务层

redis中拿去数据的方法：注入redisTemplate，调用boundHashOps（键值）.value()获取值

/***
 * 查询用户购物车数据
 * @param username
 * @return
 */
@Override
public List<OrderItem> list(String username) {
    //查询所有购物车数据
    List<OrderItem> orderItems = redisTemplate.boundHashOps("Cart_"+username).values();
    return orderItems;
}

Copy

3、存在的问题

3.1、商品数量正负问题

我们发现个问题，就是用户将商品加入购物车，无论数量是正负，都会执行添加购物车，如果数量<=0，应该移除该商品的。

  • 修改方法
  • 只需在添加商品到购物车的方法中增加一条判断逻辑商品数量为负便return
注意：在判断为负时，若redis存在该值，则需redisTemplate.boundHashOps(“Cart_”+username).delete(id)；删除redis中的记录，这样便在查询购物车列表时不会出现该数据
3.2、数据精度丢失问题

SkuId是Long类型，在页面输出的时候会存在精度丢失问题，我们只需要在OrderItem的SkuId上加上字符串序列化类型（即@JsonSerialize）就可以了，代码如下

bb2d1202312121631213659.png

三、用户身份识别

互联网极客 赵老师
关注
购物车实现原理
03-29
web开发中购物出功能实现原理,实现购物车的关键在于服务器识别每一个用户并维持与他们的联系。但是HTTP协议是一种“无状态(Stateless)”的协议，因而服务器不能记住是谁在购买商品，当把商品加入购物车时，服务器也不知道购物车里原先有些什么，使得用户在不同页面间跳转时购物车无法“随身携带”，这都给购物车的实现造成了一定的困难。      目前购物车的实现主要是通过cookie、session或结合数据库的方式
购物车的实现原理
weixin_34019929的博客
10-20 233
       购物车相当于现实中超市的购物车，不同的是一个是实体车，一个是虚拟车而已。用户可以在购物网站的不同页面之间跳转，以选购自己喜爱的商品，点击购买时，该商品就自动保存到你的购物车中，重复选购后，最后将选中的所有商品放在购物车中统一到付款台结账，这也是尽量让客户体验到现实生活中购物的感觉。服务器通过追踪每个用户的行动，以保证在结账时每件商品都物有其主。      购物车的功能包括以下几项...
购物车的实现
m0_65545927的博客
03-10 2018
用户添加购物车，只需要将要加入购物车的商品存入到Redis中即可。一个用户可以将多件商品加入购物车，存储到Redis中的数据可以采用Hash类型。我们发现个问题，就是用户将商品加入购物车，无论数量是正负，都会执行添加购物车，如果数量
购物车实现
记录学习，共同进步
04-12 1250
使用redis的hash结构实现购物车
购物车功能实现
Emporor的博客
11-02 3022
当用户点击“添加到购物车”按钮时，我们需要将该商品添加到购物车的数据结构中。例如，如果用户已经将一个商品添加到购物车中，我们只需要增加商品的数量；它允许用户浏览商品，选择他们想要购买的商品，并将它们添加到购物车中，然后在准备结账时一次性支付。为了方便用户查看他们的购物车中总共有多少商品，我们需要实现一个函数来计算购物车的总价。当用户点击“从购物车中移除”按钮时，我们需要从购物车的数据结构中删除相应的商品。当用户更改购物车中商品的数量时，我们需要更新购物车数据结构中的相应部分。
session技术实现网上商城购物车
05-14
**Session技术实现网上商城购物车** 在Web开发中，实现用户购物车功能是电商系统不可或缺的一部分。购物车允许用户在不立即购买商品的情况下，选择多个商品并存储它们以供后续结账。在这个小例子中，我们将探讨如何...
JSP技术实现的网上购物车系统
最新发布
06-22
总的来说，"JSP技术实现的网上购物车系统"是一个典型的Web应用实例，结合了JSP的动态页面渲染能力和SQL Server的数据库管理功能，为用户提供了一个完整的在线购物体验。对于学习JSP和Java Web开发的学生来说，这是一...
asp.net基于session实现购物车的方法
01-02
本文实例讲述了asp.net基于session实现购物车的方法。分享给大家供大家参考，具体如下： //加入购物车 protected void LinkButton2_Click(object sender, EventArgs e) { DataTable dt = null; //用户购买商品 ...
购物车功能的实现
07-21
对购物车功能的基本实现，比如购物车的增删改查等等 对大家的学习起到一个参考的作用。
购物车功能实现(小兔鲜儿)【Vue3】
weixin_53943447的博客
07-27 1871
注意事项: v-model双向绑定指令不方便进行命令式的操作(因为后续还需要调用接口), 所以把v-model回退到一般模式,也就是。：通过skuId找到要进行单选操作的商品，把控制是否选中的selected字段修改为当前单选框的状态。,剩下的事情就是在action中做登录状态的分支判断,1- store中定义action和计算属性。2- 组件中触发aciton和使用计算属性。核心思路: 单选的核心思路就是始终把。2- action中适配登录和非登录。2- action中适配登录和非登录。
简易购物车实现
热门推荐
dream_s_a的博客
04-12 1万+
将购物车实现分成三部分分别实现： 第一部分：简单购物车功能实现； 第二部分：将商品序号改为勾选框； 第三部分：添加商店对商品进行分类。
购物车功能如何实现
y_dzaichirou的博客
12-22 2979
之前没有接触过购物车的东东，也不知道购物车应该怎么做，所以在查询了很多资料，总结一下购物车的功能实现。 查询的资料，找到三种方法： 1.用cookie实现购物车； 2.用session实现购物车； 3.用cookie和数据库(购物车信息持久化)实现购物车； ========================================================
简易购物车的实现
Wendy
09-09 7676
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。   第一步：首先是进行html页面的设计，我用一个大的div将所有商品包含，然后用不同的div将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中设计到都是网上随
购物车实现过程
weixin_56149599的博客
05-04 710
购物车： 1.购物车跟用户的关系？ a）一个用户必须对应一个购物车【一个用户不管买多少商品，都会存在属于自己的购物车中。】 b）单点登录一定在购物车之前。 2.跟购物车有关的操作有哪些？ a）添加购物车。 i.用户未登录状态. 1. 添加到什么地方？未登录将数据保存到什么地方？ ......
Android购物车动画揭秘：贝塞尔曲线实现
在Android开发中，实现商品添加到购物车的动画效果常常采用贝塞尔曲线来增加用户体验的流畅感。这种动画通常用于模拟抛物线路径，让用户直观地看到商品从屏幕外滑入购物车的过程。以下是实现该动画的详细步骤和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值