脚把脚带你撸一个简易 React 后台管理系统

前端

2024-02-05 10:37:47

前言

在本文中，我们将从头开始构建一个简易的 React 后台管理系统。我们将使用 React 作为前端框架，Node.js 和 Express.js 作为后端，以及 MongoDB 作为数据库。

我们希望通过本教程，帮助你理解 React 后端开发的基础知识，并能够轻松构建自己的后端应用程序。

前提条件

在继续之前，请确保你具备以下先决条件：

对 JavaScript 和 React 有基本的了解
已安装 Node.js 和 npm
已安装 MongoDB

搭建后端

首先，我们来搭建后端。

1. 安装依赖项

在你的终端中，导航到你的项目目录并运行以下命令：

npm install express body-parser mongoose passport passport-local passport-jwt jsonwebtoken cors

这些依赖项将用于构建我们的后端服务器。

2. 创建服务器

在项目目录中创建一个名为 server.js 的文件，并添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const passport = require('passport');
const passportLocal = require('passport-local').Strategy;
const passportJWT = require('passport-jwt').Strategy;
const jwt = require('jsonwebtoken');
const cors = require('cors');

const app = express();
app.use(cors());

// 使用 body-parser 中间件解析请求体
app.use(bodyParser.json());

// 连接到 MongoDB 数据库
mongoose.connect('mongodb://localhost:27017/react-backend', { useNewUrlParser: true, useUnifiedTopology: true });

// Passport.js 中间件
app.use(passport.initialize());

// 定义本地身份验证策略
passport.use(new passportLocal({
  usernameField: 'username',
  passwordField: 'password'
}, (username, password, done) => {
  // 这里应该查询数据库并验证用户凭证
  if (username === 'admin' && password === 'password') {
    return done(null, { username });
  } else {
    return done(null, false);
  }
}));

// 定义 JWT 身份验证策略
passport.use(new passportJWT({
  secretOrKey: 'your_secret_key',
  jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken()
}, (token, done) => {
  try {
    // 这里应该查询数据库并验证 JWT 令牌
    return done(null, token.user);
  } catch (error) {
    return done(error);
  }
}));

// 定义 API 路由
app.post('/api/login', (req, res, next) => {
  passport.authenticate('local', { session: false }, (err, user, info) => {
    if (err || !user) {
      return res.status(401).json({
        error: '用户名或密码错误'
      });
    }
    const token = jwt.sign({ user }, 'your_secret_key');
    res.json({ token });
  })(req, res, next);
});

app.get('/api/protected', passport.authenticate('jwt', { session: false }), (req, res) => {
  res.json({ message: '恭喜你，你已成功访问受保护的资源！' });
});

// 启动服务器
app.listen(3001, () => {
  console.log('服务器已启动，监听端口 3001');
});

在上面的代码中，我们首先设置了 Express 服务器并配置了必要的中间件。然后，我们配置了 Passport.js 用于本地和 JWT 身份验证。最后，我们定义了 API 路由，包括登录和受保护的资源。

搭建前端

接下来，我们来搭建前端。

1. 安装依赖项

在你的终端中，导航到你的项目目录并运行以下命令：

npx create-react-app frontend

这将创建一个新的 React 应用程序。

2. 创建组件

在 src 目录中，创建一个名为 App.js 的文件，并添加以下代码：

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import axios from 'axios';

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('/api/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(res => {
        setUser(res.data.user);
      })
      .catch(err => {
        console.error(err);
      });
    }
  }, []);

  const login = (username, password) => {
    axios.post('/api/login', { username, password })
    .then(res => {
      localStorage.setItem('token', res.data.token);
      setUser(res.data.user);
    })
    .catch(err => {
      console.error(err);
    });
  }

  const logout = () => {
    localStorage.removeItem('token');
    setUser(null);
  }

  return (
    <Router>
      <Switch>
        <Route exact path="/">
          { user ? <h1>欢迎，{user.username}！</h1> : <h1>请先登录</h1> }
        </Route>
        <Route path="/login">
          <LoginForm onSubmit={login} />
        </Route>
        <Route path="/logout">
          <LogoutButton onClick={logout} />
        </Route>
      </Switch>
    </Router>
  );
};

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

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(username, password);
  }

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

const LogoutButton = ({ onClick }) => {
  return (
    <button onClick={onClick}>注销</button>
  );
}

export default App;