数据库设计：
- 用户表 (Users):
- UserID (主键)
- 用户名
- 密码
- 电子邮件
- 地址
- 电话号码
- 产品表 (Products):
- ProductID (主键)
- 产品名称
- 描述
- 价格
- 库存数量
- 分类ID (外键，连接到分类表)
- 分类表 (Categories):
- CategoryID (主键)
- 分类名称
- 订单表 (Orders):
- OrderID (主键)
- UserID (外键，连接到用户表)
- 订单日期
- 订单状态 (例如，已支付、已发货、已完成等)
- 订单详情表 (OrderDetails):
- OrderDetailID (主键)
- OrderID (外键，连接到订单表)
- ProductID (外键，连接到产品表)
- 数量
- 单价
- 支付表 (Payments):
- PaymentID (主键)
- OrderID (外键，连接到订单表)
- 付款日期
- 付款金额
- 付款状态 (例如，已支付、待支付)
- 购物车表 (ShoppingCart):
- CartID (主键)
- UserID (外键，连接到用户表)
- ProductID (外键，连接到产品表)
- 数量
HTML代码
当用户点击“添加到购物车”按钮时，相应的产品将被添加到购物车数组中，并且购物车的内容将被渲染到页面上。
<!DOCTYPE html> <html lang="zh-CN"> <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; margin: 20px; } header { text-align: center; padding: 10px; background-color: #f2f2f2; } h2 { color: #333; } #productList { display: flex; flex-wrap: wrap; justify-content: space-around; } .product { border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin: 10px; width: 200px; text-align: center; } #cart { margin-top: 20px; text-align: center; } </style> </head> <body> <header> <h2>在线商店</h2> </header> <section id="productList"> <!-- 产品项将在此动态添加 --> </section> <div id="cart"> <h3>购物车</h3> <ul id="cartItems"> <!-- 购物车中的项目将在此动态添加 --> </ul> </div> <script> // 示例产品数据（用实际的后端数据替换） const products = [ { id: 1, name: '商品 1', price: 29.99 }, { id: 2, name: '商品 2', price: 39.99 }, { id: 3, name: '商品 3', price: 49.99 } // 添加更多产品 ]; // 购物车数据 const cartItems = []; // 渲染产品到页面 function renderProducts() { const productList = document.getElementById('productList'); // 清除现有内容 productList.innerHTML = ''; // 遍历产品并创建HTML元素 products.forEach(product => { const productItem = document.createElement('div'); productItem.classList.add('product'); productItem.innerHTML = ` <h3>${product.name}</h3> <p>价格：￥${product.price.toFixed(2)}</p> <button onclick="addToCart(${product.id})">添加到购物车</button> `; productList.appendChild(productItem); }); } // 添加产品到购物车 function addToCart(productId) { const selectedProduct = products.find(product => product.id === productId); if (selectedProduct) { cartItems.push(selectedProduct); renderCart(); } } // 渲染购物车项目到页面 function renderCart() { const cartItemsList = document.getElementById('cartItems'); cartItemsList.innerHTML = ''; // 遍历购物车项目并创建HTML元素 cartItems.forEach(item => { const cartItem = document.createElement('li'); cartItem.textContent = `${item.name} - ￥${item.price.toFixed(2)}`; cartItemsList.appendChild(cartItem); }); } // 初始渲染产品 renderProducts(); </script> </body> </html>
SQL语句用于创建表、插入数据、查询数据等操作。以下是一个基本的SQL示例，包括创建表格、插入样本数据和查询产品的示例。
-- 创建用户表 CREATE TABLE Users ( UserID INT PRIMARY KEY, UserName VARCHAR(255), Password VARCHAR(255), Email VARCHAR(255), Address VARCHAR(255), PhoneNumber VARCHAR(20) ); -- 创建产品分类表 CREATE TABLE Categories ( CategoryID INT PRIMARY KEY, CategoryName VARCHAR(255) ); -- 创建产品表 CREATE TABLE Products ( ProductID INT PRIMARY KEY, ProductName VARCHAR(255), Description TEXT, Price DECIMAL(10, 2), StockQuantity INT, CategoryID INT, FOREIGN KEY (CategoryID) REFERENCES Categories(CategoryID) ); -- 创建订单表 CREATE TABLE Orders ( OrderID INT PRIMARY KEY, UserID INT, OrderDate DATE, OrderStatus VARCHAR(50), FOREIGN KEY (UserID) REFERENCES Users(UserID) ); -- 创建订单详情表 CREATE TABLE OrderDetails ( OrderDetailID INT PRIMARY KEY, OrderID INT, ProductID INT, Quantity INT, UnitPrice DECIMAL(10, 2), FOREIGN KEY (OrderID) REFERENCES Orders(OrderID), FOREIGN KEY (ProductID) REFERENCES Products(ProductID) ); -- 创建支付表 CREATE TABLE Payments ( PaymentID INT PRIMARY KEY, OrderID INT, PaymentDate DATE, Amount DECIMAL(10, 2), PaymentStatus VARCHAR(50), FOREIGN KEY (OrderID) REFERENCES Orders(OrderID) ); -- 创建购物车表 CREATE TABLE ShoppingCart ( CartID INT PRIMARY KEY, UserID INT, ProductID INT, Quantity INT, FOREIGN KEY (UserID) REFERENCES Users(UserID), FOREIGN KEY (ProductID) REFERENCES Products(ProductID) ); -- 插入样本用户数据 INSERT INTO Users (UserID, UserName, Password, Email, Address, PhoneNumber) VALUES (1, 'JohnDoe', 'password123', 'john@example.com', '123 Main St', '555-1234'); -- 插入样本产品分类数据 INSERT INTO Categories (CategoryID, CategoryName) VALUES (1, 'Electronics'), (2, 'Clothing'), (3, 'Home Goods'); -- 插入样本产品数据 INSERT INTO Products (ProductID, ProductName, Description, Price, StockQuantity, CategoryID) VALUES (1, 'Laptop', 'Powerful laptop for work and entertainment', 999.99, 50, 1), (2, 'T-shirt', 'Comfortable cotton T-shirt', 19.99, 100, 2), (3, 'Coffee Maker', 'Automatic coffee maker for your kitchen', 49.99, 30, 3); -- 插入样本订单数据 INSERT INTO Orders (OrderID, UserID, OrderDate, OrderStatus) VALUES (1, 1, '2024-01-27', 'Processing'); -- 插入样本订单详情数据 INSERT INTO OrderDetails (OrderDetailID, OrderID, ProductID, Quantity, UnitPrice) VALUES (1, 1, 1, 2, 999.99), (2, 1, 2, 3, 19.99); -- 插入样本支付数据 INSERT INTO Payments (PaymentID, OrderID, PaymentDate, Amount, PaymentStatus) VALUES (1, 1, '2024-01-28', 2219.94, 'Paid'); -- 插入样本购物车数据 INSERT INTO ShoppingCart (CartID, UserID, ProductID, Quantity) VALUES (1, 1, 3, 1);
