Project Structure
Directory Structure
kevi_blog-v2/
├── app/ # Frontend application (Nuxt pages, components, styles, etc.)
│ ├── components/ # Global Vue components
│ │ ├── BackToTop.vue # Back to top component
│ │ ├── Footer.vue # Footer component with contact info and links
│ │ └── Header.vue # Navigation header component with theme switching
│ ├── composables/ # Composable functions
│ │ ├── useApi.ts # API request wrapper
│ │ ├── useAuth.ts # Authentication related logic
│ │ └── useAutoHandle.ts # Auto-handling logic
│ ├── layouts/ # Layout templates
│ │ ├── admin.vue # Admin panel layout
│ │ ├── default.vue # Default layout
│ │ └── project.vue # Project detail layout
│ ├── middleware/ # Route middleware
│ ├── pages/ # Page components (complete frontend + backend)
│ │ ├── admin/ # Admin panel pages (12 modules)
│ │ ├── home/ # Homepage module
│ │ ├── projects/ # Project showcase pages
│ │ ├── articles/ # Article showcase pages
│ │ └── ...
│ ├── plugins/ # Plugins
│ ├── styles/ # Global styles
│ └── types/ # TypeScript type definitions
├── server/ # Backend API (100+ endpoints)
│ ├── api/ # API routes
│ │ ├── admin/ # Admin interfaces
│ │ │ ├── articles/ # Article management API
│ │ │ ├── projects/ # Project management API
│ │ │ ├── categories/ # Category management API
│ │ │ ├── galleries/ # Gallery management API
│ │ │ ├── resources/ # Resource management API
│ │ │ ├── skills/ # Skill management API
│ │ │ ├── carousels/ # Carousel management API
│ │ │ ├── settings/ # System settings API
│ │ │ ├── analytics/ # Data analysis API
│ │ │ ├── users/ # User management API
│ │ │ ├── wall-messages/ # Message management API
│ │ │ ├── technologies/ # Technology tag API
│ │ │ ├── stats.get.ts # Statistics data
│ │ │ └── system.get.ts # System information
│ │ ├── auth/ # Authentication related API
│ │ │ ├── login.post.ts # User login
│ │ │ ├── logout.post.ts # User logout
│ │ │ ├── me.get.ts # Get current user information
│ │ │ ├── forgetPassword.post.ts # Forget password
│ │ │ ├── verifyCode.post.ts # Verification code validation
│ │ │ ├── verify-token.get.ts # Token verification
│ │ │ └── reset.ts # Password reset
│ │ ├── articles/ # Public article API
│ │ │ ├── index.get.ts # Get article list
│ │ │ └── [slug].get.ts # Get article details
│ │ ├── projects/ # Public project API
│ │ │ ├── [slug].get.ts # Get project details
│ │ │ ├── related.get.ts # Related project recommendations
│ │ │ └── like.post.ts # Project like
│ │ ├── home/ # Homepage data 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/ # File upload API
│ │ │ └── index.post.ts
│ │ ├── files/ # File management API
│ │ ├── galleries/ # Gallery API
│ │ ├── resources/ # Resource API
│ │ ├── wall-messages/ # Message API
│ │ ├── skills/ # Skill API
│ │ ├── skill-categories/ # Skill category API
│ │ ├── technologies/ # Technology tag API
│ │ └── categories/ # Category API
│ ├── database/ # Database configuration
│ │ ├── config.ts # Database configuration
│ │ ├── healthCheck.ts # Health check
│ │ └── schema.sql # Complete database structure (14 tables)
│ ├── middleware/ # Server middleware
│ │ ├── auth.ts # Authentication middleware
│ │ └── fileServer.ts # File service middleware
│ ├── models/ # Data models (14 core models)
│ │ ├── User.ts # User model
│ │ ├── Article.ts # Article model
│ │ ├── Category.ts # Category model
│ │ ├── Project.ts # Project model
│ │ ├── Gallery.ts # Gallery model
│ │ ├── Resource.ts # Resource model
│ │ ├── File.ts # File model
│ │ ├── Carousel.ts # Carousel model
│ │ ├── Setting.ts # Settings model
│ │ ├── Skill.ts # Skill model
│ │ ├── SkillCategory.ts # Skill category model
│ │ ├── WallMessage.ts # Message model
│ │ ├── VisitHourlyStatistics.ts # Visit statistics model
│ │ └── GalleryImage.ts # Gallery image model
│ ├── plugins/ # Server plugins
│ │ ├── mysql.ts # MySQL plugin
│ │ └── redis.ts # Redis plugin
│ ├── services/ # Business service layer
│ │ ├── cacheService.ts # Cache service
│ │ ├── emailService.ts # Email service
│ │ ├── rateLimitService.ts # Rate limiting service
│ │ ├── resetTokenService.ts # Password reset service
│ │ ├── slideVerifyService.ts # Slide captcha service
│ │ ├── taskManager.ts # Task management service
│ │ ├── verificationCodeService.ts # Verification code service
│ │ ├── visitStatsTask.ts # Visit statistics task
│ │ └── FileUploadService/ # File upload service
│ │ └── index.ts
│ └── utils/ # Utility functions
│ ├── auth.ts # Authentication utilities
│ ├── response.ts # Response utilities
│ ├── slug.ts # Slug generation utilities
│ └── ...
├── public/ # Static resources
│ ├── favicon.ico # Website icon
│ ├── logo.png # Logo
│ └── ...
├── scripts/ # Script files
│ └── init-db.js # Database initialization script
├── uploads/ # Upload directory (local storage)
├── .env.example # Environment variable example
├── nuxt.config.ts # Nuxt configuration file
├── package.json # Project dependency configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # Tailwind CSS configuration
├── eslint.config.mjs # ESLint configuration
├── docker-compose.yml # Docker container configuration (Redis + application)
├── docker-compose.1panel.yml # 1Panel panel specific configuration
├── Dockerfile # Application container build file
└── README.md # Project documentationCore Directory Description
app/ - Frontend Application
This is the core directory of Nuxt 3, containing all frontend code:
- components/: Global Vue components that can be used in any page
- pages/: Page components that automatically generate routes
- layouts/: Layout templates defining the overall structure of pages
- composables/: Composable functions for logic reuse
- middleware/: Route middleware executed before route switching
- plugins/: Vue plugins for extending Vue functionality
- styles/: Global style files
- types/: TypeScript type definitions
server/ - Backend API
Nuxt 3 server-side code directory containing all API endpoints:
- api/: API routes following file system routing rules
- models/: Data models corresponding to database tables
- services/: Business service layer encapsulating complex business logic
- utils/: Utility functions providing common functionality
- middleware/: Server middleware
- plugins/: Server plugins
- database/: Database related configuration and scripts
public/ - Static Resources
Static file directory, these files are directly mapped to root paths:
- favicon.ico, logo.png and other static resources
- Can be directly accessed via
/filename
API Routing Rules
Nuxt 3 uses file system routing, API files are automatically mapped to routes:
| File Path | API Path | HTTP Method |
|---|---|---|
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 |
Database Table Structure
The database contains 14 core tables:
| Table Name | Description |
|---|---|
| users | User table |
| categories | Category table |
| articles | Article table |
| projects | Project table |
| galleries | Gallery table |
| gallery_images | Gallery image table |
| resources | Resource table |
| resource_categories | Resource category table |
| files | File management table |
| carousels | Carousel table |
| skills | Skill item table |
| skill_categories | Skill category table |
| wall_messages | Message table |
| settings | System settings table |
| visit_hourly_statistics | Hourly visit statistics table |
For detailed field descriptions, please refer to Database Documentation.