我如何为我的 MERN Stack 作品集构建动态管理面板

Source: Dev.to

为什么为你的作品集构建管理面板？

起初，我只有一个展示静态内容的简单 React 作品集。但很快，每次更新都需要修改代码并重新部署，既耗时又容易出错。

通过构建管理后台，我实现了：

• 实时内容更新： 通过 UI 添加、更新或删除项目、技能及其他个人资料数据。
• 安全访问： 仅我自己可以登录并使用 JWT 进行身份验证来管理内容。
• 可扩展性： 可以轻松添加新章节或数据类型，而无需修改前端代码。
• 更好的组织方式： 将作品集内容存储在数据库中，而不是硬编码在文件里。

技术栈概览

管理面板的关键功能

• 个人资料部分: 更新个人简介、头像、联系信息。
• 技能: 动态添加、更新或删除编程技能。
• 项目: 对项目进行增删改查（标题、描述、图片、链接）。
• 简历: 上传和更新简历文件。
• 身份验证: 使用电子邮件和密码的安全登录，使用 JWT 保护路由。

工作原理 — 架构拆解

1. 后端 API 设计

我创建了 RESTful API 来处理所有作品集数据的 CRUD 操作。

示例路由

GET    /api/projects          // 获取所有项目
POST   /api/projects          // 添加新项目
PUT    /api/projects/:id      // 根据 ID 更新项目
DELETE /api/projects/:id      // 根据 ID 删除项目

这些 API 会验证请求，并使用 Mongoose 模型与 MongoDB 集合交互。认证中间件保护敏感端点。

2. 使用 JWT 的身份验证

为了保护后台管理面板，我构建了一个登录系统，包含：

• 使用 bcrypt 进行密码哈希。
• 登录时生成 JWT 令牌。
• 前后端受保护的路由均需有效令牌。

3. React 管理仪表盘 UI

通过 React Hook 和 axios 进行 API 调用，我构建了以下组件：

• 登录页面： 进行身份验证并将 JWT 存入 localStorage。
• 仪表盘： 概览作品集内容。
• 表单： 受控表单用于添加/编辑技能和项目。
• 文件上传： 集成 Cloudinary API 实现图片和简历上传。

条件渲染和加载状态提供了流畅的用户体验。

代码片段 — 示例：在管理面板中获取项目

import React, { useEffect, useState } from "react";
import axios from "axios";

const AdminProjects = () => {
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const token = localStorage.getItem("authToken");
        const response = await axios.get("/api/projects", {
          headers: { Authorization: `Bearer ${token}` },
        });
        setProjects(response.data);
      } catch (error) {
        console.error("Error fetching projects:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchProjects();
  }, []);

  if (loading) return <p>Loading projects...</p>;

  return (
    <div>
      <h2>Manage Projects</h2>
      {projects.length === 0 ? (
        <p>No projects found.</p>
      ) : (
        projects.map((project) => (
          <div key={project._id}>
            <h3>{project.title}</h3>
            <p>{project.description}</p>
            {/* Buttons for Edit/Delete can go here */}
          </div>
        ))
      )}
    </div>
  );
};

export default AdminProjects;

挑战与经验教训

• 处理文件上传: 集成 Cloudinary 的签名 URL 并管理上传状态需要额外的注意。
• 状态管理: 在实时 CRUD 更新后保持管理员 UI 与后端数据同步，需要对 React 状态和副作用进行深思熟虑的使用。
• 认证流程: 保护路由并管理 JWT 令牌至关重要，以防止未授权访问。
• 用户体验考虑: 简洁有效的表单和明确的反馈信息显著提升了管理员的可用性。

最后思考

构建一个动态的管理面板将我的作品集从静态网页转变为一个强大的内容管理系统，我可以在不重新部署的情况下进行控制。这让我获得了全栈开发、API 设计、安全认证和文件管理的实战经验——这些都是现代网页开发者必备的技能。

如果你计划构建或改进你的作品集，我强烈建议添加一个管理员仪表盘。它不仅能展示你的技术能力，还能在长期内为你节省大量时间和精力。

查看我的作品集实际效果：
[http://your-portfolio-link.com]（请替换为你的实际 URL）

---

https://adithyan-phi.vercel.app

有问题或想分享你的经验？请在下方留言！

---

编码愉快！