项目结构

目录结构

kevi_blog-v2/
├── app/                          # 前端应用 (Nuxt页面、组件、样式等)
│   ├── components/               # 全局Vue组件
│   │   ├── BackToTop.vue         # 返回顶部组件
│   │   ├── Footer.vue            # 页脚组件，包含联系信息和链接
│   │   └── Header.vue            # 导航头组件，支持主题切换
│   ├── composables/              # 组合式函数
│   │   ├── useApi.ts             # API请求封装
│   │   ├── useAuth.ts            # 认证相关逻辑
│   │   └── useAutoHandle.ts      # 自动处理逻辑
│   ├── layouts/                  # 布局模板
│   │   ├── admin.vue             # 管理后台布局
│   │   ├── default.vue           # 默认布局
│   │   └── project.vue           # 项目详情布局
│   ├── middleware/               # 路由中间件
│   ├── pages/                    # 页面组件 (完整的前台+后台)
│   │   ├── admin/                # 管理后台页面 (12个模块)
│   │   ├── home/                 # 首页模块
│   │   ├── projects/             # 项目展示页面
│   │   ├── articles/             # 文章展示页面
│   │   └── ...
│   ├── plugins/                  # 插件
│   ├── styles/                   # 全局样式
│   └── types/                    # TypeScript 类型定义
├── server/                       # 后端 API (100+个接口)
│   ├── api/                      # API 路由
│   │   ├── admin/                # 管理接口
│   │   │   ├── articles/         # 文章管理API
│   │   │   ├── projects/         # 项目管理API
│   │   │   ├── categories/       # 分类管理API
│   │   │   ├── galleries/        # 图库管理API
│   │   │   ├── resources/        # 资源管理API
│   │   │   ├── skills/           # 技能管理API
│   │   │   ├── carousels/        # 轮播图管理API
│   │   │   ├── settings/         # 系统设置API
│   │   │   ├── analytics/        # 数据分析API
│   │   │   ├── users/            # 用户管理API
│   │   │   ├── wall-messages/    # 留言管理API
│   │   │   ├── technologies/     # 技术标签API
│   │   │   ├── stats.get.ts      # 统计数据
│   │   │   └── system.get.ts     # 系统信息
│   │   ├── auth/                 # 认证相关API
│   │   │   ├── login.post.ts     # 用户登录
│   │   │   ├── logout.post.ts    # 用户登出
│   │   │   ├── me.get.ts         # 获取当前用户信息
│   │   │   ├── forgetPassword.post.ts # 忘记密码
│   │   │   ├── verifyCode.post.ts # 验证码验证
│   │   │   ├── verify-token.get.ts # 验证Token
│   │   │   └── reset.ts          # 密码重置
│   │   ├── articles/             # 文章公开API
│   │   │   ├── index.get.ts      # 获取文章列表
│   │   │   └── [slug].get.ts     # 获取文章详情
│   │   ├── projects/             # 项目公开API
│   │   │   ├── [slug].get.ts     # 获取项目详情
│   │   │   ├── related.get.ts    # 相关项目推荐
│   │   │   └── like.post.ts      # 项目点赞
│   │   ├── home/                 # 首页数据API
│   │   │   ├── about-me.get.ts
│   │   │   ├── analytics.get.ts
│   │   │   ├── carousels.get.ts
│   │   │   ├── contact-info.get.ts
│   │   │   ├── footer.get.ts
│   │   │   ├── galleries.get.ts
│   │   │   ├── heroSection.get.ts
│   │   │   ├── projects.get.ts
│   │   │   ├── resume.get.ts
│   │   │   ├── stats.get.ts
│   │   │   ├── visits.get.ts
│   │   │   └── visits.post.ts
│   │   ├── upload/               # 文件上传API
│   │   │   └── index.post.ts
│   │   ├── files/                # 文件管理API
│   │   ├── galleries/            # 图库API
│   │   ├── resources/            # 资源API
│   │   ├── wall-messages/        # 留言API
│   │   ├── skills/               # 技能API
│   │   ├── skill-categories/     # 技能分类API
│   │   ├── technologies/         # 技术标签API
│   │   └── categories/           # 分类API
│   ├── database/                 # 数据库配置
│   │   ├── config.ts             # 数据库配置
│   │   ├── healthCheck.ts        # 健康检查
│   │   └── schema.sql            # 完整数据库结构 (14个表)
│   ├── middleware/               # 服务端中间件
│   │   ├── auth.ts               # 认证中间件
│   │   └── fileServer.ts         # 文件服务中间件
│   ├── models/                   # 数据模型 (14个核心模型)
│   │   ├── User.ts               # 用户模型
│   │   ├── Article.ts            # 文章模型
│   │   ├── Category.ts           # 分类模型
│   │   ├── Project.ts            # 项目模型
│   │   ├── Gallery.ts            # 图库模型
│   │   ├── Resource.ts           # 资源模型
│   │   ├── File.ts               # 文件模型
│   │   ├── Carousel.ts           # 轮播图模型
│   │   ├── Setting.ts            # 设置模型
│   │   ├── Skill.ts              # 技能模型
│   │   ├── SkillCategory.ts      # 技能分类模型
│   │   ├── WallMessage.ts        # 留言模型
│   │   ├── VisitHourlyStatistics.ts # 访问统计模型
│   │   └── GalleryImage.ts       # 图库图片模型
│   ├── plugins/                  # 服务端插件
│   │   ├── mysql.ts              # MySQL 插件
│   │   └── redis.ts              # Redis 插件
│   ├── services/                 # 业务服务层
│   │   ├── cacheService.ts       # 缓存服务
│   │   ├── emailService.ts       # 邮件服务
│   │   ├── rateLimitService.ts   # 限流服务
│   │   ├── resetTokenService.ts  # 密码重置服务
│   │   ├── slideVerifyService.ts # 滑动验证码服务
│   │   ├── taskManager.ts        # 任务管理服务
│   │   ├── verificationCodeService.ts # 验证码服务
│   │   ├── visitStatsTask.ts     # 访问统计任务
│   │   └── FileUploadService/   # 文件上传服务
│   │       └── index.ts
│   └── utils/                    # 工具函数
│       ├── auth.ts               # 认证工具
│       ├── response.ts          # 响应工具
│       ├── slug.ts               # Slug 生成工具
│       └── ...
├── public/                       # 静态资源
│   ├── favicon.ico               # 网站图标
│   ├── logo.png                  # Logo
│   └── ...
├── scripts/                      # 脚本文件
│   └── init-db.js                # 数据库初始化脚本
├── uploads/                       # 上传文件目录（本地存储）
├── .env.example                  # 环境变量示例
├── nuxt.config.ts                # Nuxt 配置文件
├── package.json                  # 项目依赖配置
├── tsconfig.json                 # TypeScript 配置
├── tailwind.config.js            # Tailwind CSS 配置
├── eslint.config.mjs             # ESLint 配置
├── docker-compose.yml            # Docker 容器化配置（Redis + 应用）
├── docker-compose.1panel.yml     # 1Panel 面板专用配置
├── Dockerfile                    # 应用容器构建文件
└── README.md                     # 项目说明文档

核心目录说明

app/ - 前端应用

这是 Nuxt 3 的核心目录，包含了所有的前端代码：

components/: 全局 Vue 组件，可以在任何页面中使用
pages/: 页面组件，自动生成路由
layouts/: 布局模板，定义页面的整体结构
composables/: 组合式函数，用于复用逻辑
middleware/: 路由中间件，在路由切换前执行
plugins/: Vue 插件，用于扩展 Vue 功能
styles/: 全局样式文件
types/: TypeScript 类型定义

server/ - 后端 API

Nuxt 3 的服务器端代码目录，包含所有的 API 接口：

api/: API 路由，遵循文件系统路由规则
models/: 数据模型，对应数据库表
services/: 业务服务层，封装复杂业务逻辑
utils/: 工具函数，提供通用功能
middleware/: 服务端中间件
plugins/: 服务端插件
database/: 数据库相关配置和脚本

public/ - 静态资源

静态文件目录，这些文件会被直接映射到根路径：

favicon.ico、logo.png 等静态资源
可以直接通过 /filename 访问

API 路由规则

Nuxt 3 使用文件系统路由，API 文件自动映射为路由：

文件路径	API 路径	HTTP 方法
`server/api/auth/login.post.ts`	`/api/auth/login`	POST
`server/api/articles/index.get.ts`	`/api/articles`	GET
`server/api/articles/[id].get.ts`	`/api/articles/:id`	GET
`server/api/admin/articles/index.get.ts`	`/api/admin/articles`	GET

数据库表结构

数据库包含 14 个核心表：

表名	说明
users	用户表
categories	分类表
articles	文章表
projects	项目表
galleries	图库表
gallery_images	图库图片表
resources	资源表
resource_categories	资源分类表
files	文件管理表
carousels	轮播图表
skills	技能项表
skill_categories	技能分类表
wall_messages	留言表
settings	系统设置表
visit_hourly_statistics	小时级访问统计表

详细字段说明请参考数据库文档。

项目结构 ​

目录结构 ​

核心目录说明 ​

app/ - 前端应用 ​

server/ - 后端 API ​

public/ - 静态资源 ​

API 路由规则 ​

数据库表结构 ​

项目结构

目录结构

核心目录说明

app/ - 前端应用

server/ - 后端 API

public/ - 静态资源

API 路由规则

数据库表结构