流萤的秘密基地 🌟

一个现代化的论坛系统，采用前后端分离架构，具有美观的淡蓝色主题和高斯模糊效果。

✨ 特性

• 🎨 现代化设计 - 淡蓝色主题，高斯模糊效果，美观的UI
• 📱 响应式布局 - 完美适配桌面端和移动端设备
• 🔐 完整的用户系统 - 注册、登录、找回密码、用户封禁
• 📝 论坛功能 - 发帖、回复、点赞、分类、标签
• 🏷️ 分区系统 - 摄影、美食、游戏、音乐、读书、生活等多个分区
• 📊 统计功能 - 浏览量、点赞数、回复数等数据统计
• 👮 管理面板 - 用户管理、帖子管理、数据统计
• 🚀 前后端分离 - Next.js + Express.js + MongoDB
• 🛡️ 安全可靠 - JWT认证、密码加密、请求限流

🏗️ 技术栈

前端

• Next.js 15 - React 框架
• React 19 - UI库
• TypeScript - 类型安全
• Tailwind CSS - CSS 框架
• shadcn/ui - UI 组件库
• Ant Design - 管理界面组件
• Lucide React - 图标库
• React Markdown - Markdown渲染
• Crypto-JS - 加密工具

后端

• Node.js - 运行环境
• Express.js - Web 框架
• MongoDB - 数据库
• Mongoose - ODM
• JWT - 身份认证
• bcryptjs - 密码加密
• Nodemailer - 邮件服务
• Jimp - 图片处理

🚀 快速开始

前端部署

1. 克隆仓库

   git clone https://github.com/ChuxinNeko/firefly_bbs.git
   cd firefly_bbs

2. 安装依赖

   npm install

3. 配置环境变量

   # 创建 .env.local 文件
   echo "NEXT_PUBLIC_API_URL=http://localhost:4000" > .env.local
   echo "NEXT_PUBLIC_API_KEY=your-api-key" >> .env.local

4. 启动开发服务器

   npm run dev

5. 访问应用

   http://localhost:3000
   

后端部署

1. 进入后端目录

   cd backend

2. 安装依赖

   npm install

3. 配置

4. 启动

📁 项目结构

firefly_bbs/
├── app/                    # Next.js 应用目录
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页
│   ├── admin/             # 管理页面
│   ├── login/             # 登录页面
│   ├── register/          # 注册页面
│   ├── profile/           # 用户资料页
│   ├── create-post/       # 发帖页面
│   ├── post/[id]/         # 帖子详情页
│   ├── category/          # 分类页面
│   ├── trending/          # 热门帖子页
│   ├── latest/            # 最新帖子页
│   ├── forgot-password/   # 找回密码页
│   ├── reset-password/    # 重置密码页
│   ├── chat/              # 聊天页面
│   ├── components/        # 页面专用组件
│   └── utils/             # 工具函数
├── components/            # 全局共享组件
│   ├── layout/           # 布局组件
│   └── ui/               # UI 组件
├── hooks/                 # 自定义 Hooks
├── lib/                   # 工具库
├── public/                # 静态资源
├── styles/                # 额外样式
├── backend/               # 后端服务
│   ├── index.js          # 主服务文件
│   ├── mail.js           # 邮件服务
│   ├── imageHandler.js   # 图片处理
│   ├── uploads/          # 上传文件存储
│   └── package.json      # 后端依赖
└── README.md              # 项目文档

🔧 配置说明

环境变量

前端环境变量 (.env.local)

变量名	描述	默认值
NEXT_PUBLIC_API_URL	后端API地址	http://localhost:4000
NEXT_PUBLIC_API_KEY	API密钥	-

API 接口

认证接口

• POST /api/register - 用户注册
• POST /api/login - 用户登录
• POST /api/auth/send-register-code - 发送注册验证码
• POST /api/auth/forgot-password - 发送找回密码验证码
• POST /api/auth/reset-password - 重置密码

帖子接口

• GET /api/posts/latest - 获取最新帖子列表
• GET /api/posts/:id - 获取帖子详情
• GET /api/post/list - 获取随机帖子列表
• GET /api/post/trending - 获取热门帖子列表
• GET /api/post/:category - 获取分类帖子列表
• POST /api/posts - 创建帖子（需登录）
• POST /api/posts/:id/like - 点赞帖子（需登录）
• POST /api/posts/:id/comment - 回复帖子（需登录）
• POST /api/posts/:id/view - 增加帖子浏览量
• GET /api/post/total - 获取统计信息

用户接口

• GET /api/user/profile - 获取用户信息（需登录）
• POST /api/user/change-username - 修改用户名（需登录）
• GET /api/user/created-at - 获取用户注册时间（需登录）

管理接口

• POST /api/admin/users - 获取用户列表（需管理员）
• POST /api/admin/user/update - 更新用户信息（需管理员）
• POST /api/admin/posts - 获取帖子列表（需管理员）
• POST /api/admin/post/update - 更新帖子信息（需管理员）
• POST /api/admin/post/delete - 删除帖子（需管理员）

🛡️ 安全特性

• 密码加密：使用 bcryptjs 加密存储
• 邮箱验证：注册和找回密码需验证邮箱
• JWT 认证：安全的用户身份验证
• 用户封禁：管理员可封禁违规用户
• CORS 配置：跨域请求安全控制
• 静态资源缓存：图片文件合理缓存策略

🗄️ 数据存储

项目使用 MongoDB 作为数据库，通过 Mongoose ODM 进行操作。主要数据模型包括：

用户模型

const userSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ["Admin", "Moderator", "Member"], default: "Member" },
  likedPosts: [{ type: Number }],
  avatar: { type: String, default: "" },
  createdAt: { type: Date, default: Date.now },
  banned: { type: Boolean, default: false }
});

帖子模型

const postSchema = new mongoose.Schema({
  id: { type: Number, unique: true },
  title: { type: String, required: true },
  content: { type: String, required: true },
  author: {
    name: { type: String, required: true },
    avatar: { type: String, required: true },
  },
  email: { type: String, required: true },
  category: { type: String, required: true },
  tags: [{ type: String }],
  images: [{ 
    url: { type: String },
    thumbnail: { type: String }
  }],
  likes: { type: Number, default: 0 },
  replies: { type: Number, default: 0 },
  views: { type: Number, default: 0 },
  createdAt: { type: Date, default: Date.now },
  comments: [{
    username: String,
    email: String,
    role: String,
    content: String,
    createdAt: { type: Date, default: Date.now }
  }]
});

🙏 致谢

• Next.js - React 框架
• Tailwind CSS - CSS 框架
• shadcn/ui - UI 组件库
• Express.js - Node.js 框架
• MongoDB - 数据库
• Lucide React - 图标库

---

流萤的秘密基地 - 让分享变得更美好 ✨