好的！让我们一步一步地实现一个简单的全栈 Web 应用，包含以下功能：
- 用户注册
- 用户登录
- 储存并读取用户偏好数据
在本教程中：
- 前端 使用
React 框架
- 后端 使用
Node.js（借助 Express 框架）
- 数据库 使用
MongoDB
一、设置开发环境
前端
- 确保安装了最新版本的
Node.js 和 npm。
- 创建 React 应用：
npx create-react-app my-fullstack-app
cd my-fullstack-app
- 安装 axios（HTTP 请求库）：
npm install axios
后端
-
创建后端项目目录，进入项目并初始化：
mkdir backend
cd backend
npm init -y
-
安装以下依赖：
npm install express body-parser mongoose cors jsonwebtoken bcrypt
-
开发时安装 Nodemon 用于自动重启服务器：
npm install --save-dev nodemon
-
添加启动脚本到 package.json：
"scripts": {
"start": "nodemon index.js"
}
二、创建后端
1. 建立后端的基本结构和数据库连接
创建 index.js 文件（后端入口点）：
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cors = require("cors");
const app = express();
const PORT = 5000;
// Middlewares
app.use(cors());
app.use(bodyParser.json());
// MongoDB connection
mongoose
.connect("mongodb://localhost:27017/fullstackapp", { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log("MongoDB connected"))
.catch((err) => console.log(err));
// Start the server
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
2. 创建用户模型
在 models/User.js 中定义用户模式：
const mongoose = require("mongoose");
const bcrypt = require("bcrypt");
const UserSchema = new mongoose.Schema({
username: { type: String, required: true, unique: true },
password: { type: String, required: true },
preferences: { type: Array, default: [] }
});
// Password hashing (middleware)
UserSchema.pre("save", async function(next) {
if (!this.isModified("password")) return next();
this.password = await bcrypt.hash(this.password, 10);
next();
});
// Compare password
UserSchema.methods.comparePassword = async function(candidatePassword) {
return bcrypt.compare(candidatePassword, this.password);
};
module.exports = mongoose.model("User", UserSchema);
3. 创建用户身份验证 API
在 routes/auth.js 中定义路由：
const express = require("express");
const jwt = require("jsonwebtoken");
const User = require("../models/User");
const router = express.Router();
const SECRET_KEY = "my_secret_key"; // Use an environment variable in production
// Register
router.post("/register", async (req, res) => {
try {
const { username, password } = req.body;
if (!username || !password) {
return res.status(400).json({ message: "Both fields are required" });
}
const existingUser = await User.findOne({ username });
if (existingUser) {
return res.status(400).json({ message: "Username already exists" });
}
const user = new User({ username, password });
await user.save();
res.status(201).json({ message: "User registered successfully" });
} catch (err) {
res.status(500).json({ message: "Server error" });
}
});
// Login
router.post("/login", async (req, res) => {
try {
const { username, password } = req.body;
const user = await User.findOne({ username });
if (!user || !(await user.comparePassword(password))) {
return res.status(401).json({ message: "Invalid credentials" });
}
const token = jwt.sign({ id: user._id }, SECRET_KEY, { expiresIn: "1h" });
res.status(200).json({ message: "Login successful", token });
} catch (err) {
res.status(500).json({ message: "Server error" });
}
});
// Get user preferences
router.get("/preferences", async (req, res) => {
const { token } = req.headers;
try {
const decoded = jwt.verify(token, SECRET_KEY);
const user = await User.findById(decoded.id);
res.json(user.preferences);
} catch (err) {
res.status(401).json({ message: "Unauthorized" });
}
});
// Update user preferences
router.post("/preferences", async (req, res) => {
const { token } = req.headers;
const { preferences } = req.body;
try {
const decoded = jwt.verify(token, SECRET_KEY);
const user = await User.findById(decoded.id);
user.preferences = preferences;
await user.save();
res.status(200).json({ message: "Preferences updated successfully" });
} catch (err) {
res.status(401).json({ message: "Unauthorized" });
}
});
module.exports = router;
在 index.js 中引入此路由：
const authRoutes = require("./routes/auth");
app.use("/api/auth", authRoutes);
三、创建前端
1. 用户注册和登录界面
分别创建 Register.js 和 Login.js 组件。
Register.js：
import React, { useState } from "react";
import axios from "axios";
function Register() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post("http://localhost:5000/api/auth/register", { username, password });
alert(response.data.message);
} catch (err) {
alert(err.response.data.message);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
<input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
<button type="submit">Register</button>
</form>
);
}
export default Register;
Login.js：
import React, { useState } from "react";
import axios from "axios";
function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post("http://localhost:5000/api/auth/login", { username, password });
localStorage.setItem("token", response.data.token);
alert(response.data.message);
} catch (err) {
alert(err.response.data.message);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
<input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
<button type="submit">Login</button>
</form>
);
}
export default Login;
四、运行应用
-
启动后端服务器：
cd backend
npm start
-
运行前端：
cd my-fullstack-app
npm start
通过浏览器访问 React 应用程序页面，测试注册、登录以及存储和读取用户偏好数据。
扩展改进：
- 添加
.env 文件存储敏感信息（如 SECRET_KEY 和 MongoDB URI）。
- 使用 HTTPS 和
Helmet 中间件提升安全性。
- 为后端 API 添加更详细的验证逻辑和错误处理逻辑。
