题目
设计电商系统的商品详情页数据获取流程
信息
- 类型：问答
- 难度：⭐
考点
RESTful API设计, 前后端数据交互, 基础数据库查询
快速回答
实现商品详情页数据获取的核心步骤：
- 设计RESTful API端点：
GET /api/products/{id} - 后端从数据库查询商品数据
- 返回JSON格式的商品信息
- 前端通过AJAX请求获取并渲染数据
关键响应字段：商品ID、名称、价格、描述、库存状态。
解析
1. 原理说明
电商商品详情页需要展示商品的详细信息。核心流程是前端通过API请求商品数据，后端从数据库检索对应ID的商品信息，并以JSON格式返回。
2. 代码示例
数据库表设计（MySQL）
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
price DECIMAL(10,2) NOT NULL,
description TEXT,
stock INT DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);后端API示例（Node.js/Express）
// 商品详情API端点
app.get('/api/products/:id', async (req, res) => {
try {
const productId = req.params.id;
// 数据库查询
const [rows] = await db.query(
'SELECT id, name, price, description, stock FROM products WHERE id = ?',
[productId]
);
if (rows.length === 0) {
return res.status(404).json({ error: 'Product not found' });
}
res.json(rows[0]);
} catch (err) {
res.status(500).json({ error: 'Server error' });
}
});前端数据获取（JavaScript）
// 获取商品ID=123的数据
fetch('/api/products/123')
.then(response => response.json())
.then(product => {
console.log('商品数据:', product);
// 渲染到页面
document.getElementById('product-name').textContent = product.name;
document.getElementById('product-price').textContent = `¥${product.price}`;
})
.catch(error => console.error('请求失败:', error));3. 最佳实践
- API设计：遵循RESTful规范，使用名词复数形式，GET方法
- 数据安全：永远不要返回整个数据库对象（如密码字段）
- 错误处理：返回标准HTTP状态码（404资源不存在，500服务器错误）
- 性能优化：只查询必要字段（避免SELECT *）
4. 常见错误
- ❌ 未验证商品ID导致SQL注入（应使用参数化查询）
- ❌ 返回敏感字段（如成本价、供应商信息）
- ❌ 缺少错误处理导致前端页面崩溃
- ❌ 使用POST获取数据（违反REST规范）
5. 扩展知识
- 缓存机制：高频访问商品可添加Redis缓存
- API版本控制：
/api/v1/products/{id}便于后续迭代 - 限流：防止恶意请求（如Express-rate-limit中间件）
- 数据聚合：后续可扩展返回关联数据（如商家信息、评论统计）
