构建一个电商网站需要多种技术和框架，包括前端、后端、数据库等。下面是一个简单的电商网站的基础代码示例，覆盖了基本的功能模块，包括商品展示、购物车和用户注册/登录。请注意，代码只是示例，生产环境还需要考虑安全性、性能等问题。

前端 (HTML/CSS/JavaScript)

1. 商品展示页面 (index.html)

html

商品列表

2. CSS样式 (styles.css)

css

body {

font-family: Arial, sans-serif;

}

#product-list {

display: flex;

flex-wrap: wrap;

}

.product {

border: 1px solid #ccc;

margin: 10px;

padding: 10px;

width: 200px;

text-align: center;

}

3. JavaScript (script.js)

javascript

const products = [

{ id: 1, name: "商品 A", price: 100 },

{ id: 2, name: "商品 B", price: 200 },

{ id: 3, name: "商品 C", price: 300 },

];

function displayProducts() {

const productList = document.getElementById('product-list');

products.forEach(product => {

const productDiv = document.createElement('div');

productDiv.className = 'product';

productDiv.innerHTML = `

${product.name}

价格: $${product.price}

加入购物车

`;

productList.appendChild(productDiv);

});

}

function addToCart(productId) {

alert(`商品 ${productId} 加入购物车`);

}

displayProducts();

后端 (Node.js + Express)

环境准备

确保你已经安装了 Node.js 和 npm。

1. 安装依赖

bash

mkdir ecommerce-site

cd ecommerce-site

npm init -y

npm install express body-parser cors

2. 创建后端服务器 (server.js)

javascript

const express = require('express');

const bodyParser = require('body-parser');

const cors = require('cors');

const app = express();

app.use(cors());

app.use(bodyParser.json());

let users = [];

let products = [

{ id: 1, name: "商品 A", price: 100 },

{ id: 2, name: "商品 B", price: 200 },

{ id: 3, name: "商品 C", price: 300 },

];

// 注册用户

app.post('/register', (req, res) => {

const { username, password } = req.body;

users.push({ username, password });

res.send({ message: '用户注册成功' });

});

// 登录用户

app.post('/login', (req, res) => {

const { username, password } = req.body;

const user = users.find(u => u.username === username && u.password === password);

if (user) {

res.send({ message: '登录成功' });

} else {

res.status(401).send({ message: '用户名或密码错误' });

}

});

// 获取产品列表

app.get('/products', (req, res) => {

res.send(products);

});

app.listen(3000, () => {

console.log('服务器在 http://localhost:3000 上运行');

});

数据库 (MongoDB)

数据库连接示例 (db.js)

javascript

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/ecommerce', {

useNewUrlParser: true,

useUnifiedTopology: true,

});

const UserSchema = new mongoose.Schema({

username: String,

password: String,

});

const ProductSchema = new mongoose.Schema({

name: String,

price: Number,

});

const User = mongoose.model('User', UserSchema);

const Product = mongoose.model('Product', ProductSchema);

module.exports = { User, Product };

整合

在生产环境中，你可能还需要做以下工作：

- 优化前端界面和用户体验。

- 实现用户身份验证，并使用 JWT 或 session 管理用户会话。

- 对数据进行验证与清理，防止 SQL 注入等安全问题。

- 部署到服务器或使用云服务进行托管。

以上代码只是一个简单的示例，你可以在此基础上不断扩展，添加支付功能、订单管理、用户评论等特性。