Vue3实战：从零实现电商购物车功能（含完整代码）

一、功能需求分析

一个完整的购物车系统需要包含以下核心功能：

1. 商品展示模块

   • 商品列表展示（图片、名称、价格）
   • 商品规格选择（颜色、尺寸等）
   • 库存状态显示

2. 购物车操作模块

   • 添加商品到购物车
   • 修改商品数量（±操作）
   • 单选/全选商品
   • 删除单个商品
   • 清空购物车

3. 计算模块

   • 实时计算选中商品总价
   • 显示商品总数
   • 优惠券计算（可选）

4. 持久化存储

   • 本地存储购物车数据
   • 登录后同步服务端数据

---

二、技术方案选型

技术栈	用途说明	版本
Vue3	核心框架	3.4+
Pinia	状态管理	2.1+
Element Plus	UI组件库	2.4+
Vue-Router	路由管理	4.2+

---

三、项目结构设计

src/
├── stores/
│   └── cart.js       # 购物车状态管理
├── components/
│   ├── ProductList.vue  # 商品列表
│   └── CartPanel.vue    # 购物车面板
├── views/
│   ├── HomeView.vue     # 主页面
│   └── DetailView.vue   # 商品详情页
└── utils/
    └── storage.js       # 本地存储工具

---

四、核心代码实现

1. 创建Pinia Store（购物车状态管理）

// stores/cart.js
import { defineStore } from 'pinia'
import { useStorage } from '@/utils/storage'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: useStorage('cart_items', []), // 持久化存储
    selected: new Set() // 选中的商品ID
  }),
  actions: {
    // 添加商品
    addItem(product, specs = {}, quantity = 1) {
      const existing = this.items.find(
        item => item.id === product.id && 
        JSON.stringify(item.specs) === JSON.stringify(specs)
      )
      
      if (existing) {
        existing.quantity += quantity
      } else {
        this.items.push({
          ...product,
          specs,
          quantity,
          id: `${product.id}-${Date.now()}` // 生成唯一ID
        })
      }
    },

    // 更新数量
    updateQuantity(id, newQuantity) {
      const item = this.items.find(i => i.id === id)
      if (item) {
        item.quantity = Math.max(1, newQuantity)
      }
    },

    // 删除商品
    removeItem(id) {
      this.items = this.items.filter(i => i.id !== id)
      this.selected.delete(id)
    },

    // 切换选择状态
    toggleSelect(id) {
      if (this.selected.has(id)) {
        this.selected.delete(id)
      } else {
        this.selected.add(id)
      }
    },

    // 全选/取消全选
    toggleAll(checked) {
      if (checked) {
        this.items.forEach(i => this.selected.add(i.id))
      } else {
        this.selected.clear()
      }
    }
  },
  getters: {
    // 计算总金额
    totalAmount: (state) => {
      return state.items.reduce((sum, item) => {
        if (state.selected.has(item.id)) {
          return sum + item.price * item.quantity
        }
        return sum
      }, 0).toFixed(2)
    },
    
    // 选中商品总数
    selectedCount: (state) => state.selected.size
  }
})

2. 商品列表组件

<!-- components/ProductList.vue -->
<template>
  <div class="product-grid">
    <div v-for="product in products" :key="product.id" class="product-card">
      <img :src="product.image" class="product-image">
      <h3>{{ product.name }}</h3>
      <p class="price">¥{{ product.price }}</p>
      <el-input-number 
        v-model="quantity[product.id]" 
        :min="1" 
        :max="product.stock"
      />
      <el-button 
        type="primary" 
        @click="addToCart(product)"
      >
        加入购物车
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useCartStore } from '@/stores/cart'

const props = defineProps({
  products: Array
})

const cartStore = useCartStore()
const quantity = ref({})

const addToCart = (product) => {
  cartStore.addItem(product, {}, quantity.value[product.id] || 1)
  quantity.value[product.id] = 1
}
</script>

3. 购物车面板组件

<!-- components/CartPanel.vue -->
<template>
  <div class="cart-container">
    <div class="cart-header">
      <el-checkbox 
        v-model="allChecked" 
        @change="toggleAll"
      >
        全选（{{ selectedCount }}）
      </el-checkbox>
      <el-button @click="clearCart">清空购物车</el-button>
    </div>

    <div class="cart-items">
      <div v-for="item in items" :key="item.id" class="cart-item">
        <el-checkbox 
          :model-value="isSelected(item.id)" 
          @change="(val) => toggleSelect(item.id, val)"
        />
        <img :src="item.image" class="item-image">
        <div class="item-info">
          <h4>{{ item.name }}</h4>
          <p>规格：{{ formatSpecs(item.specs) }}</p>
        </div>
        <div class="item-operations">
          <el-input-number 
            v-model="item.quantity" 
            :min="1" 
            :max="item.stock"
            @change="(val) => updateQuantity(item.id, val)"
          />
          <el-button 
            type="danger" 
            icon="Delete" 
            @click="removeItem(item.id)"
          />
        </div>
        <div class="item-price">
          ¥{{ (item.price * item.quantity).toFixed(2) }}
        </div>
      </div>
    </div>

    <div class="cart-footer">
      <div class="total-amount">
        合计：¥{{ totalAmount }}
      </div>
      <el-button type="warning" size="large">去结算</el-button>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()

const { 
  items, 
  selected, 
  totalAmount, 
  selectedCount 
} = storeToRefs(cartStore)

const isSelected = (id) => selected.value.has(id)
const allChecked = computed({
  get: () => selected.value.size === items.value.length,
  set: (val) => cartStore.toggleAll(val)
})

const toggleSelect = (id, checked) => {
  cartStore.toggleSelect(id)
}

const updateQuantity = (id, val) => {
  cartStore.updateQuantity(id, val)
}

const removeItem = (id) => {
  cartStore.removeItem(id)
}

const clearCart = () => {
  cartStore.items = []
  cartStore.selected.clear()
}

const formatSpecs = (specs) => {
  return Object.values(specs).join(' / ')
}
</script>

---

五、关键实现细节

1. 数据持久化方案

// utils/storage.js
export const useStorage = (key, defaultValue) => {
  const val = ref(JSON.parse(localStorage.getItem(key)) 
  
  watch(val, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true })

  return val.value || defaultValue
}

2. 性能优化方案

• 防抖处理：商品数量修改时增加500ms防抖
• 虚拟滚动：商品列表超过100条时使用虚拟滚动
• 计算属性缓存：使用computed缓存计算结果

3. 异常处理

// 在store action中添加错误处理
try {
  // 业务逻辑
} catch (error) {
  ElNotification.error({
    title: '操作失败',
    message: error.message
  })
  throw error
}

---

六、扩展功能实现

1. 服务端同步（示例）

// 在store中添加
async syncCart() {
  const { data } = await axios.post('/api/cart/sync', {
    items: this.items
  })
  this.items = data.cartItems
}

2. 优惠券功能

// 在getters中添加
discountedAmount: (state) => (coupon) => {
  const total = state.totalAmount
  if (coupon.type === 'percent') {
    return total * (1 - coupon.value)
  }
  return total - coupon.value
}

---

七、最佳实践建议

1. 组件拆分原则

   • 保持单个组件代码不超过500行
   • 拆分展示型组件和容器组件
   • 使用<script setup>语法

2. 状态管理规范

   • 所有状态修改必须通过store actions
   • 使用TypeScript定义接口类型
   • 重要操作添加操作日志

3. 用户体验优化

   • 添加动画过渡效果
   • 重要操作二次确认
   • 实时库存校验

---

八、总结

通过本教程你可以掌握：
✅ Vue3组合式API开发模式
✅ Pinia状态管理实战技巧
✅ 电商购物车核心业务逻辑
✅ 前端性能优化常见手段

后续改进方向：
接入真实支付系统

在购物车前端实现支付系统通常需要多个步骤，涉及到界面设计、与后端交互以及集成第三方支付接口等。以下是一个详细的实现指南：

1. 界面设计

首先，你需要设计一个用户界面，让用户能够方便地选择支付方式并完成支付操作。以下是一个简单的 HTML 和 CSS 示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车支付</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .payment-container {
            width: 400px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .payment-method {
            margin-bottom: 15px;
        }

        .payment-method label {
            margin-left: 10px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="payment-container">
        <h2>支付页面</h2>
        <div class="payment-method">
            <input type="radio" id="alipay" name="payment" value="alipay">
            <label for="alipay">支付宝</label>
        </div>
        <div class="payment-method">
            <input type="radio" id="wechatpay" name="payment" value="wechatpay">
            <label for="wechatpay">微信支付</label>
        </div>
        <button id="pay-button">立即支付</button>
    </div>
    <script>
        document.getElementById('pay-button').addEventListener('click', function () {
            const paymentMethod = document.querySelector('input[name="payment"]:checked');
            if (paymentMethod) {
                // 调用后端接口进行支付处理
                console.log('选择的支付方式: ', paymentMethod.value);
                // 这里可以添加与后端交互的代码
            } else {
                alert('请选择支付方式');
            }
        });
    </script>
</body>

</html>

2. 与后端交互

前端需要与后端进行通信，将用户选择的支付方式和订单信息发送给后端。你可以使用 fetch API 来实现这一点：

document.getElementById('pay-button').addEventListener('click', async function () {
    const paymentMethod = document.querySelector('input[name="payment"]:checked');
    if (paymentMethod) {
        const orderData = {
            // 这里需要根据实际情况添加订单信息，如订单号、商品列表、总价等
            orderId: '123456',
            totalAmount: 100.00,
            paymentMethod: paymentMethod.value
        };
        try {
            const response = await fetch('/api/pay', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(orderData)
            });
            const result = await response.json();
            if (result.success) {
                // 支付请求成功，跳转到支付页面或处理支付结果
                window.location.href = result.paymentUrl;
            } else {
                alert('支付请求失败: ' + result.message);
            }
        } catch (error) {
            console.error('请求出错: ', error);
            alert('请求出错，请稍后重试');
        }
    } else {
        alert('请选择支付方式');
    }
});

3. 集成第三方支付接口

后端接收到前端的支付请求后，需要调用第三方支付接口来生成支付链接或支付二维码。常见的第三方支付平台有支付宝和微信支付，以下是集成它们的基本步骤：

支付宝

• 注册开发者账号：在支付宝开放平台注册开发者账号，并创建应用。
• 获取应用信息：获取应用的 AppID、私钥、公钥等信息。
• 调用支付宝接口：后端使用支付宝提供的 SDK 生成支付链接或二维码。

微信支付

• 注册商户账号：在微信支付商户平台注册商户账号，并完成相关认证。
• 获取商户信息：获取商户号、API 密钥等信息。
• 调用微信支付接口：后端使用微信支付提供的 SDK 生成支付链接或二维码。

4. 处理支付结果

支付完成后，第三方支付平台会将支付结果通知给后端。后端需要验证支付结果的有效性，并更新订单状态。同时，后端可以将支付结果返回给前端，前端根据结果提示用户支付成功或失败。

// 假设后端提供了一个接口用于查询支付结果
async function checkPaymentStatus(orderId) {
    try {
        const response = await fetch(`/api/payment-status?orderId=${orderId}`);
        const result = await response.json();
        if (result.success) {
            alert('支付成功');
            // 跳转到订单详情页或其他页面
            window.location.href = '/order-details?orderId=' + orderId;
        } else {
            alert('支付失败: ' + result.message);
        }
    } catch (error) {
        console.error('查询支付结果出错: ', error);
        alert('查询支付结果出错，请稍后重试');
    }
}

以上就是在购物车前端实现支付系统的基本步骤。需要注意的是，支付系统涉及到资金安全，建议在开发过程中遵循相关的安全规范，并进行充分的测试。
实现分布式购物车（多设备同步）
实现分布式购物车以支持多设备同步可以从架构设计、数据库选择、接口实现和缓存使用等方面综合考虑，下面为你详细介绍实现步骤及示例代码。

整体架构设计

为了实现分布式购物车多设备同步，可采用如下架构：

1. 前端：负责展示购物车界面，处理用户的添加、删除、修改商品等操作，并将操作请求发送到后端 API。
2. 后端 API 服务：接收前端请求，处理购物车的业务逻辑，与数据库和缓存进行交互。
3. 数据库：持久化存储购物车数据，确保数据的可靠性。
4. 缓存：使用缓存（如 Redis）来提高购物车数据的读写性能，并实现数据的实时同步。

数据库设计

假设使用 MySQL 数据库，可设计如下表结构来存储购物车信息：

-- 创建购物车表
CREATE TABLE shopping_cart (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(255) NOT NULL,
    product_id VARCHAR(255) NOT NULL,
    quantity INT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    UNIQUE KEY unique_user_product (user_id, product_id)
);

后端 API 实现（以 Python + Flask 为例）

以下是一个简单的 Flask 应用示例，实现了购物车的基本操作：

from flask import Flask, request, jsonify
import mysql.connector
import redis

app = Flask(__name__)

# 数据库配置
db_config = {
    'user': 'your_username',
    'password': 'your_password',
    'host': 'your_host',
    'database': 'your_database'
}

# Redis 配置
redis_client = redis.Redis(host='your_redis_host', port=6379, db=0)

# 添加商品到购物车
@app.route('/cart/add', methods=['POST'])
def add_to_cart():
    data = request.get_json()
    user_id = data.get('user_id')
    product_id = data.get('product_id')
    quantity = data.get('quantity', 1)

    try:
        # 连接数据库
        conn = mysql.connector.connect(**db_config)
        cursor = conn.cursor()

        # 检查商品是否已存在于购物车
        query = "SELECT quantity FROM shopping_cart WHERE user_id = %s AND product_id = %s"
        cursor.execute(query, (user_id, product_id))
        result = cursor.fetchone()

        if result:
            # 如果商品已存在，更新数量
            new_quantity = result[0] + quantity
            update_query = "UPDATE shopping_cart SET quantity = %s WHERE user_id = %s AND product_id = %s"
            cursor.execute(update_query, (new_quantity, user_id, product_id))
        else:
            # 如果商品不存在，插入新记录
            insert_query = "INSERT INTO shopping_cart (user_id, product_id, quantity) VALUES (%s, %s, %s)"
            cursor.execute(insert_query, (user_id, product_id, quantity))

        conn.commit()

        # 更新 Redis 缓存
        redis_key = f'cart:{user_id}'
        redis_client.hset(redis_key, product_id, quantity)

        return jsonify({'message': '商品已添加到购物车'}), 200

    except Exception as e:
        return jsonify({'error': str(e)}), 500
    finally:
        if conn.is_connected():
            cursor.close()
            conn.close()

# 获取购物车信息
@app.route('/cart/get', methods=['GET'])
def get_cart():
    user_id = request.args.get('user_id')

    try:
        # 先从 Redis 缓存中获取购物车信息
        redis_key = f'cart:{user_id}'
        cart_data = redis_client.hgetall(redis_key)

        if cart_data:
            cart = {product_id.decode(): int(quantity.decode()) for product_id, quantity in cart_data.items()}
        else:
            # 如果缓存中没有，从数据库中获取
            conn = mysql.connector.connect(**db_config)
            cursor = conn.cursor()

            query = "SELECT product_id, quantity FROM shopping_cart WHERE user_id = %s"
            cursor.execute(query, (user_id,))
            results = cursor.fetchall()

            cart = {product_id: quantity for product_id, quantity in results}

            # 更新 Redis 缓存
            if cart:
                redis_client.hmset(redis_key, cart)

            conn.close()

        return jsonify(cart), 200

    except Exception as e:
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)

前端实现（以 JavaScript 为例）

以下是一个简单的前端示例，使用 fetch API 与后端进行交互：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分布式购物车</title>
</head>

<body>
    <h1>分布式购物车</h1>
    <button onclick="addToCart('1', 1)">添加商品 1 到购物车</button>
    <button onclick="getCart()">获取购物车信息</button>
    <div id="cart-info"></div>

    <script>
        const userId = '123';

        async function addToCart(productId, quantity) {
            try {
                const response = await fetch('/cart/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        user_id: userId,
                        product_id: productId,
                        quantity: quantity
                    })
                });
                const data = await response.json();
                alert(data.message);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }

        async function getCart() {
            try {
                const response = await fetch(`/cart/get?user_id=${userId}`);
                const cart = await response.json();
                const cartInfoDiv = document.getElementById('cart-info');
                cartInfoDiv.innerHTML = JSON.stringify(cart);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }
    </script>
</body>

</html>

多设备同步原理

• 缓存更新：当用户在某一设备上对购物车进行操作时，后端在更新数据库的同时，也会更新 Redis 缓存。其他设备在获取购物车信息时，会优先从 Redis 缓存中读取数据，从而实现数据的实时同步。
• 定时刷新：前端可以设置定时任务，定期从后端获取最新的购物车信息，确保数据的一致性。

注意事项

• 数据一致性：由于涉及数据库和缓存的交互，需要确保数据的一致性。可以采用缓存失效策略或使用分布式锁来避免数据不一致的问题。
• 安全性：在处理用户的购物车数据时，需要注意数据的安全性，如对用户 ID 进行验证和加密，防止数据泄露和恶意攻击。

添加商品收藏功能
要在之前实现的分布式购物车系统基础上添加商品收藏功能，我们需要对数据库设计、后端 API 和前端界面进行相应的扩展。以下是详细的实现步骤和示例代码：

数据库设计扩展

我们需要新增一张表来存储用户的商品收藏信息。假设使用 MySQL 数据库，新增表的 SQL 语句如下：

-- 创建商品收藏表
CREATE TABLE product_favorites (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(255) NOT NULL,
    product_id VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE KEY unique_user_product (user_id, product_id)
);

后端 API 实现扩展（Python + Flask）

在原有的 Flask 应用基础上，添加商品收藏相关的 API 接口：

from flask import Flask, request, jsonify
import mysql.connector
import redis

app = Flask(__name__)

# 数据库配置
db_config = {
    'user': 'your_username',
    'password': 'your_password',
    'host': 'your_host',
    'database': 'your_database'
}

# Redis 配置
redis_client = redis.Redis(host='your_redis_host', port=6379, db=0)

# 原有的购物车 API 保持不变

# 添加商品到收藏
@app.route('/favorites/add', methods=['POST'])
def add_to_favorites():
    data = request.get_json()
    user_id = data.get('user_id')
    product_id = data.get('product_id')

    try:
        # 连接数据库
        conn = mysql.connector.connect(**db_config)
        cursor = conn.cursor()

        # 检查商品是否已收藏
        query = "SELECT id FROM product_favorites WHERE user_id = %s AND product_id = %s"
        cursor.execute(query, (user_id, product_id))
        result = cursor.fetchone()

        if not result:
            # 如果商品未收藏，插入新记录
            insert_query = "INSERT INTO product_favorites (user_id, product_id) VALUES (%s, %s)"
            cursor.execute(insert_query, (user_id, product_id))
            conn.commit()

            # 更新 Redis 缓存
            redis_key = f'favorites:{user_id}'
            redis_client.sadd(redis_key, product_id)

            return jsonify({'message': '商品已添加到收藏'}), 200
        else:
            return jsonify({'message': '商品已在收藏列表中'}), 200

    except Exception as e:
        return jsonify({'error': str(e)}), 500
    finally:
        if conn.is_connected():
            cursor.close()
            conn.close()

# 获取用户的收藏列表
@app.route('/favorites/get', methods=['GET'])
def get_favorites():
    user_id = request.args.get('user_id')

    try:
        # 先从 Redis 缓存中获取收藏列表
        redis_key = f'favorites:{user_id}'
        favorites_data = redis_client.smembers(redis_key)

        if favorites_data:
            favorites = [product_id.decode() for product_id in favorites_data]
        else:
            # 如果缓存中没有，从数据库中获取
            conn = mysql.connector.connect(**db_config)
            cursor = conn.cursor()

            query = "SELECT product_id FROM product_favorites WHERE user_id = %s"
            cursor.execute(query, (user_id,))
            results = cursor.fetchall()

            favorites = [product_id for (product_id,) in results]

            # 更新 Redis 缓存
            if favorites:
                redis_client.sadd(redis_key, *favorites)

            conn.close()

        return jsonify(favorites), 200

    except Exception as e:
        return jsonify({'error': str(e)}), 500

# 从收藏列表中移除商品
@app.route('/favorites/remove', methods=['POST'])
def remove_from_favorites():
    data = request.get_json()
    user_id = data.get('user_id')
    product_id = data.get('product_id')

    try:
        # 连接数据库
        conn = mysql.connector.connect(**db_config)
        cursor = conn.cursor()

        # 删除数据库中的记录
        delete_query = "DELETE FROM product_favorites WHERE user_id = %s AND product_id = %s"
        cursor.execute(delete_query, (user_id, product_id))
        conn.commit()

        # 更新 Redis 缓存
        redis_key = f'favorites:{user_id}'
        redis_client.srem(redis_key, product_id)

        return jsonify({'message': '商品已从收藏列表中移除'}), 200

    except Exception as e:
        return jsonify({'error': str(e)}), 500
    finally:
        if conn.is_connected():
            cursor.close()
            conn.close()

if __name__ == '__main__':
    app.run(debug=True)

前端实现扩展（JavaScript）

在原有的前端页面基础上，添加商品收藏相关的操作按钮和功能：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分布式购物车及商品收藏</title>
</head>

<body>
    <h1>分布式购物车及商品收藏</h1>
    <button onclick="addToCart('1', 1)">添加商品 1 到购物车</button>
    <button onclick="getCart()">获取购物车信息</button>
    <button onclick="addToFavorites('1')">收藏商品 1</button>
    <button onclick="getFavorites()">获取收藏列表</button>
    <button onclick="removeFromFavorites('1')">从收藏列表移除商品 1</button>
    <div id="cart-info"></div>
    <div id="favorites-info"></div>

    <script>
        const userId = '123';

        async function addToCart(productId, quantity) {
            try {
                const response = await fetch('/cart/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        user_id: userId,
                        product_id: productId,
                        quantity: quantity
                    })
                });
                const data = await response.json();
                alert(data.message);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }

        async function getCart() {
            try {
                const response = await fetch(`/cart/get?user_id=${userId}`);
                const cart = await response.json();
                const cartInfoDiv = document.getElementById('cart-info');
                cartInfoDiv.innerHTML = JSON.stringify(cart);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }

        async function addToFavorites(productId) {
            try {
                const response = await fetch('/favorites/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        user_id: userId,
                        product_id: productId
                    })
                });
                const data = await response.json();
                alert(data.message);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }

        async function getFavorites() {
            try {
                const response = await fetch(`/favorites/get?user_id=${userId}`);
                const favorites = await response.json();
                const favoritesInfoDiv = document.getElementById('favorites-info');
                favoritesInfoDiv.innerHTML = JSON.stringify(favorites);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }

        async function removeFromFavorites(productId) {
            try {
                const response = await fetch('/favorites/remove', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        user_id: userId,
                        product_id: productId
                    })
                });
                const data = await response.json();
                alert(data.message);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }
    </script>
</body>

</html>

多设备同步原理

与购物车功能类似，商品收藏功能的多设备同步也是通过 Redis 缓存实现的。当用户在某一设备上对商品收藏列表进行操作时，后端在更新数据库的同时，也会更新 Redis 缓存。其他设备在获取收藏列表信息时，会优先从 Redis 缓存中读取数据，从而实现数据的实时同步。

注意事项

• 数据一致性：同样需要确保数据库和缓存之间的数据一致性，可以采用缓存失效策略或使用分布式锁来避免数据不一致的问题。
• 安全性：对用户的操作请求进行严格的验证和权限检查，防止恶意攻击和数据泄露。

接入推荐算法系统
要在已有的分布式购物车及商品收藏系统中接入推荐算法系统，需要从以下几个方面进行考虑和实现，包括推荐算法的选择、数据准备、接口设计、系统集成等，下面为你详细介绍：

推荐算法选择

常见的推荐算法有基于内容的推荐、协同过滤推荐、基于模型的推荐等，这里以简单的基于用户行为的协同过滤推荐为例，它通过分析用户的历史行为（如商品收藏、购物车添加等）来找到相似用户，进而为目标用户推荐他们可能感兴趣的商品。

数据准备

为了让推荐算法能够正常工作，需要收集和整理用户的行为数据。在现有的系统中，购物车数据和商品收藏数据可以作为用户行为数据的重要来源。可以在数据库中添加相应的日志表来记录用户的操作，例如：

-- 创建用户行为日志表
CREATE TABLE user_action_log (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(255) NOT NULL,
    action_type ENUM('add_to_cart', 'add_to_favorites') NOT NULL,
    product_id VARCHAR(255) NOT NULL,
    action_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

在用户进行添加商品到购物车或收藏商品操作时，同时记录一条日志到该表中。

推荐算法实现（简单示例）

以下是一个简单的基于用户行为的协同过滤推荐算法的 Python 实现示例：

import pandas as pd

# 模拟从数据库中获取用户行为数据
def get_user_action_data():
    # 这里可以替换为实际的数据库查询代码
    data = [
        {'user_id': '1', 'action_type': 'add_to_cart', 'product_id': 'P1'},
        {'user_id': '1', 'action_type': 'add_to_favorites', 'product_id': 'P2'},
        {'user_id': '2', 'action_type': 'add_to_cart', 'product_id': 'P2'},
        {'user_id': '2', 'action_type': 'add_to_favorites', 'product_id': 'P3'},
        {'user_id': '3', 'action_type': 'add_to_cart', 'product_id': 'P1'},
        {'user_id': '3', 'action_type': 'add_to_favorites', 'product_id': 'P2'}
    ]
    return pd.DataFrame(data)

# 基于用户行为的协同过滤推荐
def collaborative_filtering_recommendation(user_id, top_n=3):
    data = get_user_action_data()
    # 创建用户 - 商品矩阵
    user_product_matrix = data.pivot_table(index='user_id', columns='product_id', values='action_type', aggfunc='count', fill_value=0)

    if user_id not in user_product_matrix.index:
        return []

    # 计算目标用户与其他用户的相似度（简单使用余弦相似度）
    target_user_vector = user_product_matrix.loc[user_id]
    similarities = user_product_matrix.dot(target_user_vector) / (
            (user_product_matrix * user_product_matrix).sum(axis=1) ** 0.5 * (target_user_vector * target_user_vector).sum() ** 0.5)

    # 找到最相似的用户
    similar_users = similarities.drop(user_id).sort_values(ascending=False).head()

    # 找出相似用户喜欢但目标用户未接触过的商品
    recommended_products = []
    for similar_user in similar_users.index:
        similar_user_products = user_product_matrix.loc[similar_user][user_product_matrix.loc[similar_user] > 0].index
        for product in similar_user_products:
            if user_product_matrix.loc[user_id][product] == 0 and product not in recommended_products:
                recommended_products.append(product)
                if len(recommended_products) >= top_n:
                    break
        if len(recommended_products) >= top_n:
            break

    return recommended_products

后端 API 扩展

在原有的 Flask 应用中添加推荐接口：

from flask import Flask, request, jsonify
import mysql.connector
import redis

app = Flask(__name__)

# 数据库配置
db_config = {
    'user': 'your_username',
    'password': 'your_password',
    'host': 'your_host',
    'database': 'your_database'
}

# Redis 配置
redis_client = redis.Redis(host='your_redis_host', port=6379, db=0)

# 原有的购物车和收藏 API 保持不变

# 获取商品推荐列表
@app.route('/recommendations/get', methods=['GET'])
def get_recommendations():
    user_id = request.args.get('user_id')
    try:
        recommended_products = collaborative_filtering_recommendation(user_id)
        return jsonify(recommended_products), 200
    except Exception as e:
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)

前端实现扩展

在前端页面中添加获取推荐商品的功能：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分布式购物车、商品收藏及推荐系统</title>
</head>

<body>
    <h1>分布式购物车、商品收藏及推荐系统</h1>
    <!-- 原有的购物车和收藏操作按钮保持不变 -->
    <button onclick="getRecommendations()">获取商品推荐</button>
    <div id="cart-info"></div>
    <div id="favorites-info"></div>
    <div id="recommendations-info"></div>

    <script>
        const userId = '123';

        // 原有的购物车和收藏操作函数保持不变

        async function getRecommendations() {
            try {
                const response = await fetch(`/recommendations/get?user_id=${userId}`);
                const recommendations = await response.json();
                const recommendationsInfoDiv = document.getElementById('recommendations-info');
                recommendationsInfoDiv.innerHTML = JSON.stringify(recommendations);
            } catch (error) {
                console.error('请求出错:', error);
            }
        }
    </script>
</body>

</html>

系统集成与优化

• 实时更新：为了保证推荐的实时性，当用户有新的行为（如添加商品到购物车、收藏商品）时，需要及时更新推荐算法所使用的数据。
• 性能优化：随着用户和商品数量的增加，推荐算法的计算量可能会变得很大。可以采用分布式计算、缓存等技术来提高推荐系统的性能。
• 算法优化：可以尝试使用更复杂的推荐算法，如深度学习推荐算法（如基于神经网络的推荐模型），以提高推荐的准确性和效果。

---

欢迎在评论区留下你的问题和建议！如果觉得有帮助，请点赞收藏支持作者～