Web全栈项目：网站后台管理系统

网站后台管理系统——全栈项目实现

随着互联网的发展，越来越多的企业及个人开始建设自己的在线平台。在这个过程中，后台管理系统作为支撑网站前端的重要组成部分，其重要性不可忽视。本文将以一个简单的后台管理系统为例，介绍如何实现一个基本的全栈项目。

项目结构

我们的项目使用以下技术栈：

• 前端：React.js
• 后端：Node.js + Express
• 数据库：MongoDB
• 认证：JWT（JSON Web Token）

后端实现

首先，我们需要搭建后端服务。以下是一个简单的Node.js + Express示例代码：

// server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const User = require('./models/User');

const app = express();
const PORT = process.env.PORT || 5000;

// 连接到MongoDB
mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true });

// 中间件
app.use(bodyParser.json());

// 用户注册
app.post('/api/register', async (req, res) => {
    const { username, password } = req.body;
    const user = new User({ username, password });
    await user.save();
    res.status(201).send('用户注册成功');
});

// 用户登录
app.post('/api/login', async (req, res) => {
    const { username, password } = req.body;
    const user = await User.findOne({ username });

    if (!user || user.password !== password) {
        return res.status(401).send('用户名或密码错误');
    }

    const token = jwt.sign({ id: user._id }, 'secret', { expiresIn: '1h' });
    res.send({ token });
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器已在 ${PORT} 上运行`);
});

以上代码实现了用户注册和登录功能。用户注册时，会将信息存入MongoDB数据库，登录后会生成一个JWT令牌以便后续身份认证。

数据模型

下面是一个简单的MongoDB模型，用于存储用户信息：

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    username: { type: String, required: true, unique: true },
    password: { type: String, required: true }
});

module.exports = mongoose.model('User', userSchema);

前端实现

接下来，我们需要用React实现一个简单的前端界面。以下是一个用户登录的简单组件：

// Login.js
import React, { useState } from 'react';
import axios from 'axios';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('/api/login', { username, password });
            localStorage.setItem('token', response.data.token);
            alert('登录成功');
        } catch (error) {
            alert('登录失败: ' + error.response.data);
        }
    };

    return (
        <form onSubmit={handleLogin}>
            <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="用户名" />
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="密码" />
            <button type="submit">登录</button>
        </form>
    );
};

export default Login;

认证保护

为了保护需要身份验证的路由，我们在后端实现了一个简单的中间件：

// middleware/auth.js
const jwt = require('jsonwebtoken');

const auth = (req, res, next) => {
    const token = req.headers['authorization'];

    if (!token) {
        return res.status(403).send('没有权限访问');
    }

    jwt.verify(token, 'secret', (err, user) => {
        if (err) {
            return res.sendStatus(403);
        }
        req.user = user;
        next();
    });
};

module.exports = auth;

结语

上述代码展示了一个简单的后台管理系统的基本框架。这只是一个入门级的示例，实际的后台管理系统往往更加复杂，包括用户角色管理、权限控制、数据分析等功能。通过学习和实践这些基础知识，您将在全栈开发的道路上越走越远。希望这篇文章对您有所帮助！