仅当产品id匹配时，才能添加到购物车？

在电子商务应用中，确保只有当产品ID匹配时才能将商品添加到购物车是一个常见的需求。这有助于防止用户错误地将不相关的商品添加到购物车中，同时也能确保购物车中的商品信息准确无误。

基础概念

产品ID（Product ID）是每个商品的唯一标识符。在数据库中，每个商品通常都会有一个唯一的ID，用于区分不同的商品。

类型

前端验证：在用户界面层面进行验证。
后端验证：在服务器端进行验证。

应用场景

在线商店：用户在浏览商品时，点击“添加到购物车”按钮。
移动应用：用户在移动设备上浏览并添加商品到购物车。

实现方法

前端实现

在前端，可以通过JavaScript来实现这一功能。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add to Cart</title>
</head>
<body>
    <form id="addToCartForm">
        <input type="hidden" id="productId" value="12345">
        <button type="submit">Add to Cart</button>
    </form>

    <script>
        document.getElementById('addToCartForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const productId = document.getElementById('productId').value;
            if (productId && productId === '12345') { // 这里假设12345是有效的Product ID
                // 发送请求到服务器
                fetch('/api/add-to-cart', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ productId: productId })
                }).then(response => response.json())
                  .then(data => {
                      if (data.success) {
                          alert('Product added to cart!');
                      } else {
                          alert('Failed to add product to cart.');
                      }
                  });
            } else {
                alert('Invalid product ID.');
            }
        });
    </script>
</body>
</html>

后端实现

在后端，可以使用各种编程语言和框架来实现验证逻辑。以下是一个使用Node.js和Express的示例：

const express = require('express');
const app = express();
app.use(express.json());

app.post('/api/add-to-cart', (req, res) => {
    const productId = req.body.productId;
    if (productId && productId === '12345') { // 这里假设12345是有效的Product ID
        // 处理添加到购物车的逻辑
        res.json({ success: true });
    } else {
        res.status(400).json({ success: false, message: 'Invalid product ID.' });
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});