- 前端 (HTML + CSS + JavaScript + React)
React 示例(仅界面部分):hotelcenter.cn
jsx
import React from ‘react’;
function ProductList({ products }) {
return (
产品列表
{products.map(product => (
{product.name} - ${product.price}
))}
);
}
export default ProductList;
2. 后端 (Node.js + Express)
Node.js 和 Express 示例(仅API部分):
javascript
const express = require(‘express’);
const app = express();
const port = 3000;
let products = [
{ id: 1, name: ‘苹果’, price: 1.5 },
{ id: 2, name: ‘香蕉’, price: 0.8 },
];
app.get(‘/products’, (req, res) => {
res.json(products);
});
app.listen(port, () => {
console.log(服务器运行在 http://localhost:${port}/
);
});
3. 数据库 (MongoDB + Mongoose)
MongoDB 和 Mongoose 示例(连接数据库和模型定义):
javascript
const mongoose = require(‘mongoose’);
// 连接数据库
mongoose.connect(‘mongodb://localhost:27017/shoppingmall’, {
useNewUrlParser: true,
useUnifiedTopology: true
});
// 定义产品模型
const productSchema = new mongoose.Schema({
name: String,
price: Number
});
const Product = mongoose.model(‘Product’, productSchema);
// 可以使用 Product 模型进行增删改查操作
4. Python (Flask)
Flask 示例(仅API部分):
python
from flask import Flask, jsonify
app = Flask(name)
products = [
{‘id’: 1, ‘name’: ‘苹果’, ‘price’: 1.5},
{‘id’: 2, ‘name’: ‘香蕉’, ‘price’: 0.8},
]
@app.route(‘/products’)
def get_products():
return jsonify(products)
if name == ‘main’:
app.run(debug=True)
5. Java (Spring Boot)
Spring Boot 示例(Controller层):
java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
@RestController
public class ProductController {
@GetMapping("/products")
public List<Map<String, Object>> getProducts() {
return Arrays.asList(
Map.of("id", 1, "name", "苹果", "price", 1.5),
Map.of("id", 2, "name", "香蕉", "price", 0.8)
);
}
}
这些代码示例只是各自技术栈的一个非常基础的起点。在真实项目中,你还需要考虑用户认证、支付集成、错误处理、数据库迁移、前端路由、状态管理(如 Redux)、后端路由、API 安全性(如 JWT 认证)、环境配置分离、代码测试等多个方面。创建一个完整的购物商城系统是一个复杂的项目,涉及前端用户界面、后端逻辑处理、数据库设计等多个方面。由于篇幅限制,我将分别用几种流行的编程语言和框架来简要概述如何开始搭建这样一个系统。
- 前端 (HTML + CSS + JavaScript + React)
React 示例(仅界面部分):
jsx
import React from ‘react’;
function ProductList({ products }) {
return (
产品列表
{products.map(product => (
{product.name} - ${product.price}
))}
);
}
export default ProductList;
2. 后端 (Node.js + Express)
Node.js 和 Express 示例(仅API部分):
javascript
const express = require(‘express’);
const app = express();
const port = 3000;
let products = [
{ id: 1, name: ‘苹果’, price: 1.5 },
{ id: 2, name: ‘香蕉’, price: 0.8 },
];
app.get(‘/products’, (req, res) => {
res.json(products);
});
app.listen(port, () => {
console.log(服务器运行在 http://localhost:${port}/
);
});
3. 数据库 (MongoDB + Mongoose)
MongoDB 和 Mongoose 示例(连接数据库和模型定义):
javascript
const mongoose = require(‘mongoose’);
// 连接数据库
mongoose.connect(‘mongodb://localhost:27017/shoppingmall’, {
useNewUrlParser: true,
useUnifiedTopology: true
});
// 定义产品模型
const productSchema = new mongoose.Schema({
name: String,
price: Number
});
const Product = mongoose.model(‘Product’, productSchema);
// 可以使用 Product 模型进行增删改查操作
4. Python (Flask)
Flask 示例(仅API部分):
python
from flask import Flask, jsonify
app = Flask(name)
products = [
{‘id’: 1, ‘name’: ‘苹果’, ‘price’: 1.5},
{‘id’: 2, ‘name’: ‘香蕉’, ‘price’: 0.8},
]
@app.route(‘/products’)
def get_products():
return jsonify(products)
if name == ‘main’:
app.run(debug=True)
5. Java (Spring Boot)
Spring Boot 示例(Controller层):
java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
@RestController
public class ProductController {
@GetMapping("/products")
public List<Map<String, Object>> getProducts() {
return Arrays.asList(
Map.of("id", 1, "name", "苹果", "price", 1.5),
Map.of("id", 2, "name", "香蕉", "price", 0.8)
);
}
}
这些代码示例只是各自技术栈的一个非常基础的起点。在真实项目中,你还需要考虑用户认证、支付集成、错误处理、数据库迁移、前端路由、状态管理(如 Redux)、后端路由、API 安全性(如 JWT 认证)、环境配置分离、代码测试等多个方面。