校园论坛管理后台

基于 React + Ant Design 的管理后台系统，用于管理校园论坛的举报内容。

🏗️ 技术架构

┌─────────────┐         ┌──────────────┐         ┌─────────────┐
│   Browser   │  HTTP   │ Proxy Server │  API    │  Cloudbase  │
│  (React)    │ ◄─────► │  (Express)   │ ◄─────► │  (Tencent)  │
│  Port 3000  │         │  Port 3001   │         │   云开发     │
└─────────────┘         └──────────────┘         └─────────────┘

核心技术栈

• 前端: React 18 + Ant Design 5 + React Router 6
• 代理服务器: Express + @cloudbase/node-sdk
• 云服务: 腾讯云云开发 (Cloudbase)

---

🚀 快速开始

1️⃣ 环境要求

• Node.js >= 14.0.0
• npm >= 6.0.0
• 腾讯云账号（已开通云开发服务）

2️⃣ 安装依赖

cd campus-admin
npm install

---

🔐 环境配置（重要）

创建config.json文件

campus-admin/config.json

云开发环境 ID

REACT_APP_TCB_ENV_ID=your-env-id

腾讯云 API 密钥（从腾讯云控制台获取）

REACT_APP_SECRET_ID=your-secret-id REACT_APP_SECRET_KEY=your-secret-key

🔑 获取腾讯云密钥步骤

1. 登录腾讯云控制台
   https://console.cloud.tencent.com/

2. 进入 API 密钥管理
   https://console.cloud.tencent.com/cam/capi

3. 点击「新建密钥」

   • 系统会生成 SecretId 和 SecretKey
   • ⚠️ SecretKey 只显示一次，请立即保存

4. 获取云开发环境 ID

   • 进入云开发控制台：https://console.cloud.tencent.com/tcb
   • 选择你的环境
   • 在「设置」中找到「环境 ID」

📁 文件结构示例

campus-admin/
├── .env.local              # ❌ 不提交到 Git（包含密钥）
├── .env.example            # ✅ 提交到 Git（示例模板）
├── .gitignore              # ✅ 确保包含 .env.local
├── package.json
├── server/
│   └── proxy.js            # 代理服务器
└── src/
    ├── App.js
    ├── pages/
    ├── services/
    └── utils/
        └── cloudbase.js

---

⚙️ 启动服务

方式一：一键启动（推荐）⭐

(~/WxProject-ad/campus-admin)

npm run dev

这会同时启动：

• 🔧 代理服务器（端口 3001）
• 🌐 前端开发服务器（端口 3000）

方式二：分别启动

终端 1 - 启动代理服务器：

npm run proxy

终端 2 - 启动前端：

npm start

启动成功标志

[0] ==================================================
[0] 🎉 代理服务器启动成功！
[0] 📍 监听端口: 3001
[0] ==================================================
[1] 
[1] Compiled successfully!
[1] Local:            http://localhost:3000

---

🔑 登录信息

访问 http://localhost:3000 后使用以下凭据登录：

• 用户名: admin
• 密码: admin123

⚠️ 生产环境请务必修改默认密码

---

📦 可用命令

命令	说明
npm run dev	一键启动代理和前端（推荐）
npm run proxy	仅启动代理服务器
npm start	仅启动前端
npm run build	构建生产版本
npm test	运行测试

---

🛑 停止服务

在运行 npm run dev 的终端按 Ctrl + C，会同时停止两个服务。

---

🔧 故障排查

❌ 端口被占用

# 查看端口占用
lsof -i :3000
lsof -i :3001

# 杀死进程
kill -9 <PID>

❌ 无法连接代理服务器

错误信息:

Failed to fetch
无法连接到代理服务器

解决方案:

1. 确保代理服务器已启动（npm run proxy）
2. 检查端口 3001 是否被其他程序占用
3. 查看终端是否有代理服务器的错误信息

❌ 云开发调用失败

错误信息:

AuthFailure
Signature expired

解决方案:

1. 检查 .env.local 中的密钥是否正确
2. 确认密钥未过期
3. 验证环境 ID 是否正确

❌ 模块找不到

# 清除缓存并重新安装
rm -rf node_modules package-lock.json
npm install

---

🔒 安全注意事项

⚠️ 绝对不要提交到 Git 的文件

• ❌ .env.local - 包含密钥
• ❌ .env - 包含密钥
• ❌ node_modules/ - 依赖包
• ❌ build/ - 构建产物

✅ 确保 .gitignore 包含

# 环境变量
.env
.env.local
.env.*.local

# 依赖
node_modules/

# 构建
/build

🔐 密钥泄露处理

如果不小心提交了密钥到 Git：

1. 立即删除密钥
   在腾讯云控制台删除泄露的密钥

2. 生成新密钥
   创建新的 SecretId/SecretKey

3. 清除 Git 历史

   # 从历史记录中移除敏感文件
   git filter-branch --force --index-filter \
     "git rm --cached --ignore-unmatch .env.local" \
     --prune-empty --tag-name-filter cat -- --all
   
   # 强制推送
   git push origin --force --all

4. 更新本地配置
   修改 .env.local 使用新密钥

---

📂 项目结构

campus-admin/
├── public/                 # 静态资源
├── server/                 # 后端代理服务器
│   └── proxy.js           # Express 服务器 + Cloudbase SDK
├── src/
│   ├── App.js             # 主应用（路由、布局）
│   ├── pages/             # 页面组件
│   │   ├── Login.jsx      # 登录页
│   │   ├── Dashboard.jsx  # 首页（数据概览）
│   │   └── ReportList.jsx # 举报管理页
│   ├── services/          # API 服务
│   │   └── report.js      # 举报相关 API
│   └── utils/             # 工具函数
│       └── cloudbase.js   # 云开发客户端
├── .env.local             # 环境变量（包含密钥，不提交）
├── .env.example           # 环境变量示例
├── .gitignore             # Git 忽略配置
├── package.json           # 项目配置
└── README.md              # 项目文档

---

🌐 API 接口

代理服务器端点

端点	方法	说明
/api/health	GET	健康检查
/api/callFunction	POST	调用云函数

云函数列表

云函数名	说明	参数
getReportsList	获取举报列表	{page, pageSize, status, content_type}
handleReport	处理举报	{report_id, action, admin_note}

---

👥 团队协作

克隆项目

git clone <repository-url>
cd campus-admin

配置环境

1. 复制环境变量示例：

   cp .env.example .env.local

2. 填写实际的密钥和环境 ID

3. 安装依赖并启动：

   npm install
   npm run dev

---

📝 开发规范

Git 提交信息格式

feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
test: 测试相关
chore: 构建/工具相关

示例

git commit -m "feat: add report filtering by status"
git commit -m "fix: resolve proxy connection timeout issue"
git commit -m "docs: update environment setup instructions"

---

📄 许可证

MIT License

---

🆘 需要帮助？

• 📧 联系开发者：[[email protected]]
• 📚 腾讯云文档：https://cloud.tencent.com/document/product/876
• 🐛 提交 Issue：[GitHub Issues]

---

⚠️ 重要提醒：生产部署前请务必修改默认管理员密码，并启用更安全的认证机制（如 JWT）。