购物车的开发原理

逃离我推掉我的手 2023-02-14 02:17 5阅读 0赞

# 一、传统购物车实现 #

原理：在数据库中设置一个存储购物车信息的数据表。

### 1、涉及到的数据表： ###

<table> 
 <thead> 
  <tr> 
   <th>商品/product</th> 
   <th>proId</th> 
   <th>brand</th> 
   <th>name</th> 
   <th>num</th> 
   <th>address</th> 
   <th>pic</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>商品id</td> 
   <td>品牌</td> 
   <td>品名</td> 
   <td>库存数量</td> 
   <td>单价</td> 
   <td>产地</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>购物车/car</th> 
   <th>carId</th> 
   <th>proId</th> 
   <th>num</th> 
   <th>userId</th> 
   <th>ispay</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>购物车id</td> 
   <td>商品id</td> 
   <td>购买数量</td> 
   <td>客户id</td> 
   <td>是否支付</td> 
  </tr> 
 </tbody> 
</table>

ispay：通过标志变量表示购物车条目是否有效，不删除购物车条目的原因是巍峨进行购买习惯的分析。

注意car表将存储所有客户的购物车数据。  
加入购物车：增。  
删除购物车商品、购物车结算：删。  
修改商品在购物车中的购买数量：改。  
查询购物车数据、查询所有狗哦无车数据（userId、ispay=0）  
订单表orders（）  
订单详情（）

# 二、利用本地存储来构建购物车 #

特点：后台具备永久存储购物车的表，而购物车操作不在后台进行。

### 1、前端使用下列技术对购物车数据进行存储： ###

cookie、storage、vuex

### 2、当用户登陆成功时： ###

从后台获取购物车数据并放入vuex。

### 3、vuex: ###

state:\{userId、carData=\[\{\},\{\}\]\}

### 4、当用户退出时： ###

将vuex中保存购物车的数据调取接口传递给后台，由后台更新购物车表，清楚vuex中有关购物车的数据。