- 前端 (HTML/CSS/JavaScript + React/Vue/Angular)4er.cn
HTML + CSS (仅作页面结构示例)
html
我的购物商城
商品列表
jsx
import React from ‘react’;
const ProductList = ({ products }) => (
{products.map(product => (
{product.name} - ${product.price}
))}
);
export default ProductList;
2. 后端 (Node.js/Express + Python/Django + PHP/Laravel)
Node.js/Express 示例 (API 路由)
javascript
const express = require(‘express’);
const app = express();
const PORT = 3000;
app.get(‘/products’, (req, res) => {
// 假设从数据库获取数据
const products = [
{ id: 1, name: ‘Apple’, price: 1.50 },
{ id: 2, name: ‘Banana’, price: 0.75 },
];
res.json(products);
});
app.listen(PORT, () => {
console.log(Server running on port ${PORT}
);
});
Python/Django 示例 (视图)
python
views.py
from django.http import JsonResponse
from .models import Product # 假设有一个Product模型
def get_products(request):
products = Product.objects.all().values(‘id’, ‘name’, ‘price’)
return JsonResponse(list(products), safe=False)
PHP/Laravel 示例 (控制器)
php
// ProductController.php
public function index()
{
p
r
o
d
u
c
t
s
=
P
r
o
d
u
c
t
:
:
a
l
l
(
[
′
i
d
′
,
′
n
a
m
e
′
,
′
p
r
i
c
e
′
]
)
;
r
e
t
u
r
n
r
e
s
p
o
n
s
e
(
)
−
>
j
s
o
n
(
products = Product::all(['id', 'name', 'price']); return response()->json(
products=Product::all([′id′,′name′,′price′]);returnresponse()−>json(products);
}
3. 数据库 (SQL)
创建商品表 SQL 示例
sql
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
price DECIMAL(10, 2) NOT NULL
);
INSERT INTO products (name, price) VALUES (‘Apple’, 1.50), (‘Banana’, 0.75);
注意
上述代码仅为示例,实际项目中需要更复杂的逻辑,如用户认证、支付处理、订单管理等。
前端部分可能需要使用状态管理库(如Redux、Vuex、NgRx)来处理全局状态。
后端应实现适当的错误处理和验证,并可能需要使用数据库迁移工具(如Migrations for Django, Sequelize for Node.js)。
安全措施(如HTTPS、SQL注入防护、CSRF保护)在实际项目中也非常重要。