后台管理系统（进阶，含权限控制、分页、接口整合）

后台管理系统是企业级应用开发中的重要组成部分。在该项目中，我们将实现一个简单的后台管理系统，包含用户权限控制、分页显示、以及与后端 API 的整合。通过该项目，开发者可以掌握如何构建一个可扩展、可维护的后台管理系统。

1. 项目结构

项目涉及以下主要功能模块：

• 用户管理：管理系统用户的增删改查及权限控制。
• 分页显示：为数据列表添加分页功能。
• 权限控制：根据用户角色管理不同权限的访问。
• 接口整合：与后端接口对接，获取和提交数据。

目录结构

src/
  ├── components/
  │   ├── UserList.js
  │   ├── UserForm.js
  │   ├── Pagination.js
  │   └── Login.js
  ├── services/
  │   ├── api.js
  │   └── auth.js
  ├── App.js
  └── index.js

2. 设置 API 模拟

在开发过程中，后端接口通过 api.js 进行模拟。我们将创建用户管理的接口，包括获取用户列表、分页数据、添加用户等操作。

// services/api.js
export const getUsers = async (page = 1, pageSize = 10) => {
  // 模拟分页数据
  const users = Array.from({ length: 100 }, (_, index) => ({
    id: index + 1,
    name: `用户${index + 1}`,
    role: index % 2 === 0 ? 'admin' : 'user',
  }));
  const paginatedUsers = users.slice((page - 1) * pageSize, page * pageSize);
  return {
    data: paginatedUsers,
    total: users.length,
  };
};

export const addUser = async (user) => {
  console.log(`添加用户：${user.name}`);
};

export const login = async (username, password) => {
  // 模拟登录
  if (username === 'admin' && password === '1234') {
    return { token: 'fake-token' };
  }
  throw new Error('用户名或密码错误');
};

3. 实现用户列表与分页组件

首先实现一个 UserList 组件，用于展示用户列表数据，并加入分页功能。分页组件 Pagination.js 用于切换不同页的数据。

UserList.js 示例

import React, { useState, useEffect } from 'react';
import { getUsers } from '../services/api';
import Pagination from './Pagination';

function UserList() {
  const [users, setUsers] = useState([]);
  const [total, setTotal] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    const fetchUsers = async () => {
      const { data, total } = await getUsers(currentPage, 10);
      setUsers(data);
      setTotal(total);
    };
    fetchUsers();
  }, [currentPage]);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <h2>用户列表</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>角色</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.role}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Pagination
        total={total}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
}

export default UserList;

Pagination.js 示例

import React from 'react';

function Pagination({ total, currentPage, onPageChange }) {
  const totalPages = Math.ceil(total / 10);

  const handleClick = (page) => {
    if (page !== currentPage) {
      onPageChange(page);
    }
  };

  const pageNumbers = [];
  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  return (
    <div>
      <button onClick={() => handleClick(currentPage - 1)} disabled={currentPage === 1}>
        上一页
      </button>
      {pageNumbers.map((page) => (
        <button key={page} onClick={() => handleClick(page)}>{page}</button>
      ))}
      <button onClick={() => handleClick(currentPage + 1)} disabled={currentPage === totalPages}>
        下一页
      </button>
    </div>
  );
}

export default Pagination;

4. 权限控制

权限控制可以通过简单的条件渲染来实现。用户的角色信息存储在 localStorage 中，通过登录时获取的 token 来判断用户的权限。

Login.js 示例

import React, { useState } from 'react';
import { login } from '../services/api';
import { useNavigate } from 'react-router-dom';

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

  const handleLogin = async () => {
    try {
      const { token } = await login(username, password);
      localStorage.setItem('token', token);
      navigate('/');
    } catch (error) {
      alert('登录失败');
    }
  };

  return (
    <div>
      <h2>登录</h2>
      <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 onClick={handleLogin}>登录</button>
    </div>
  );
}

export default Login;

5. 路由与权限控制

在 App.js 中配置路由。根据用户是否登录以及其角色信息来决定访问权限。

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import UserList from './components/UserList';
import Login from './components/Login';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      setIsAuthenticated(true);
    }
  }, []);

  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/"
          element={isAuthenticated ? <UserList /> : <Navigate to="/login" />}
        />
      </Routes>
    </Router>
  );
}

export default App;

6. 总结

通过实现一个简单的后台管理系统，开发者可以掌握权限控制、分页功能、数据接口整合等核心技术。这些功能不仅增强了项目的复杂度，还提升了开发者对 React 高级功能的理解与运用。此项目为开发更复杂的管理系统打下了坚实的基础。