Skip to content

rn1024/nextjs-cms-template

BranchesTags

Repository files navigation

Next.js CMS 管理系统

基于 Next.js 14 + TypeScript + Ant Design 的现代化企业级 CMS 管理系统，专注于后台管理功能。

✨ 特性

  • 🚀 Next.js 14 - 使用 App Router 的现代 React 框架
  • 🎯 TypeScript - 完整的类型安全支持
  • 🎨 Ant Design - 企业级 UI 设计语言
  • 🌍 国际化 - 支持中英文切换
  • 🔐 安全认证 - JWT + Redis 的安全认证系统
  • 👥 权限管理 - 基于角色的权限控制系统 (RBAC)
  • 📱 响应式设计 - 适配移动端和桌面端
  • 🛡️ 安全加固 - 多层安全防护机制
  • 📊 日志审计 - 完整的操作日志记录
  • ☁️ 文件存储 - 阿里云 OSS 文件管理
  • 🔧 现代工具链 - pnpm + Prisma + Redis

📁 项目结构

nextjs-cms-template/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── api/v1/               # API 路由
│   │   │   ├── auth/             # 认证相关接口
│   │   │   ├── accounts/         # 账户管理接口
│   │   │   ├── roles/            # 角色管理接口
│   │   │   ├── logs/             # 日志查询接口
│   │   │   └── upload/           # 文件上传接口
│   │   ├── dashboard/            # 仪表板页面
│   │   ├── login/                # 登录页面
│   │   ├── system/               # 系统管理
│   │   │   ├── accounts/         # 账户管理
│   │   │   └── roles/            # 角色管理
│   │   └── files/                # 文件管理
│   ├── components/               # 共享组件
│   │   ├── admin-layout.tsx      # 管理后台布局
│   │   ├── permission.tsx        # 权限控制组件
│   │   ├── search-user.tsx       # 用户搜索组件
│   │   ├── upload-drawer.tsx     # 文件上传抽屉
│   │   └── table-cell/           # 表格单元格组件
│   ├── lib/                      # 核心库
│   │   ├── auth.ts               # JWT 认证工具
│   │   ├── db.ts                 # 数据库连接
│   │   ├── redis.ts              # Redis 连接
│   │   ├── oss.ts                # 阿里云 OSS 配置
│   │   ├── security.ts           # 安全工具库
│   │   └── middleware.ts         # 中间件工具
│   ├── services/                 # API 服务层
│   │   ├── auth.ts               # 认证服务
│   │   ├── account.ts            # 账户管理服务
│   │   ├── roles.ts              # 角色管理服务
│   │   ├── logs.ts               # 日志管理服务
│   │   └── common.ts             # 通用服务
│   ├── types/                    # TypeScript 类型定义
│   │   └── api.ts                # API 类型定义
│   ├── locales/                  # 国际化文件
│   │   ├── zh-CN/                # 中文语言包
│   │   └── en-US/                # 英文语言包
│   ├── store/                    # Zustand 状态管理
│   └── const/                    # 常量定义
├── prisma/                       # 数据库相关
│   ├── schema.prisma             # 数据库模型定义
│   └── seed.ts                   # 数据库种子数据
├── docs/                         # 项目文档
│   ├── API_INTERFACES.md         # API 接口文档
│   ├── SECURITY_HARDENING.md     # 安全加固指南
│   └── DEPLOYMENT_SECURITY_CHECKLIST.md # 部署安全检查清单
├── middleware.ts                 # Next.js 中间件
├── next.config.js                # Next.js 配置
└── package.json                  # 项目配置

🚀 快速开始

环境要求

  • Node.js 18+
  • pnpm 8+
  • MySQL 8.0+
  • Redis 6.0+

安装依赖

pnpm install

环境配置

复制环境变量文件：

cp .env.example .env.local

配置必要的环境变量：

# 数据库配置
DATABASE_URL="mysql://username:password@localhost:3306/nextjs_cms"

# JWT 配置
JWT_SECRET="your-super-secret-jwt-key-256-bits-long"

# Redis 配置
REDIS_HOST="localhost"
REDIS_PORT="6379"

# 阿里云 OSS 配置
OSS_ACCESS_KEY_ID="your-access-key-id"
OSS_ACCESS_KEY_SECRET="your-access-key-secret"
OSS_BUCKET="your-bucket-name"

数据库初始化

# 生成 Prisma 客户端
npx prisma generate

# 推送数据库结构
npx prisma db push

# 初始化种子数据
npx prisma db seed

启动开发服务器

pnpm dev

访问 http://localhost:3000

默认管理员账户：

  • 用户名：admin
  • 密码：admin123456

构建生产版本

pnpm build
pnpm start

🏗️ 核心功能

1. 安全认证系统

  • 多因素认证 - 用户名+密码+验证码
  • JWT 令牌 - 安全的身份验证机制
  • 登录限制 - IP 和用户级别的登录尝试限制
  • 会话管理 - 基于 Redis 的会话存储
  • 安全日志 - 完整的认证事件记录

2. 权限管理系统

  • 角色管理 - 灵活的角色定义和分配
  • 权限控制 - 细粒度的权限管理
  • RBAC 模型 - 基于角色的访问控制
  • 权限验证 - 组件级和路由级权限控制

3. 账户管理

  • 账户 CRUD - 完整的账户生命周期管理
  • 状态控制 - 账户启用/禁用功能
  • 密码策略 - 强密码要求和定期更换
  • 批量操作 - 高效的批量管理功能

4. 文件管理

  • 安全上传 - 文件类型和大小验证
  • 云存储 - 阿里云 OSS 集成
  • 访问控制 - 基于权限的文件访问
  • 批量处理 - 文件批量上传和管理

5. 日志审计

  • 操作日志 - 所有用户操作的完整记录
  • 安全事件 - 安全相关事件的专门记录
  • 日志查询 - 多维度的日志检索功能
  • 审计报告 - 定期的安全审计报告

6. 系统监控

  • 性能监控 - 系统性能指标监控
  • 安全监控 - 异常行为检测和告警
  • 健康检查 - 系统组件健康状态监控
  • 告警机制 - 多渠道的告警通知

🛡️ 安全特性

认证安全

  • ✅ JWT 令牌认证
  • ✅ 刷新令牌机制
  • ✅ 登录失败次数限制
  • ✅ 验证码防暴力破解
  • ✅ 会话超时管理

数据安全

  • ✅ 密码 bcrypt 加密
  • ✅ 敏感数据脱敏
  • ✅ SQL 注入防护
  • ✅ XSS 攻击防护
  • ✅ CSRF 攻击防护

网络安全

  • ✅ HTTPS 强制重定向
  • ✅ 安全响应头配置
  • ✅ CORS 跨域控制
  • ✅ 速率限制
  • ✅ IP 白名单

文件安全

  • ✅ 文件类型白名单
  • ✅ 文件大小限制
  • ✅ 文件名安全化
  • ✅ 病毒扫描集成
  • ✅ 访问权限控制

🔧 技术架构

核心技术栈

技术 版本 说明
Next.js 14.2.15 React 全栈框架
React 18.3.1 UI 库
TypeScript 5.x 类型系统
Ant Design 5.x UI 组件库
Prisma 6.x ORM 数据库工具
Redis 6.0+ 缓存和会话存储
MySQL 8.0+ 关系型数据库
JWT 9.x 身份验证
bcryptjs 3.x 密码加密
Ali OSS 6.x 文件存储

数据库设计

-- 核心表结构
accounts          -- 管理员账户表
roles             -- 角色表
permissions       -- 权限表
account_roles     -- 账户角色关联表
role_permissions  -- 角色权限关联表
logs              -- 系统日志表
export_records    -- 导出记录表

API 设计规范

  • RESTful API - 标准的 REST 接口设计
  • 统一响应格式 - 标准化的数据返回格式
  • 错误处理 - 完善的错误处理机制
  • 分页支持 - 标准分页查询
  • 版本控制 - API 版本管理

📖 开发指南

代码规范

  • ESLint - 代码质量检查
  • Prettier - 代码格式化
  • TypeScript - 严格类型检查
  • 命名约定 - 统一的命名规范

开发流程

  1. 需求分析 - 明确功能需求和技术方案
  2. 数据库设计 - 设计或更新数据库表结构
  3. API 开发 - 实现后端接口
  4. 前端开发 - 实现用户界面
  5. 测试验证 - 单元测试和集成测试
  6. 安全检查 - 安全漏洞扫描和修复
  7. 部署上线 - 生产环境部署

安全开发

📚 文档

🚀 部署

生产环境部署

  1. 环境准备

    # 安装 Node.js 18+
# 安装 MySQL 8.0+
# 安装 Redis 6.0+
# 配置反向代理 (Nginx)

  2. 应用部署

    # 克隆代码
git clone <repository-url>
cd nextjs-cms-template

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env.production

# 数据库初始化
npx prisma generate
npx prisma db push
npx prisma db seed

# 构建应用
pnpm build

# 启动应用
pnpm start

  3. 安全配置

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进项目。

开发流程

  1. Fork 项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🆘 支持

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

  • 查看项目文档
  • 提交 GitHub Issue
  • 联系维护团队

最后更新: 2024年12月24日

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages