Development Guide

Project Structure

Backend Project Structure

backend/
├── src/
│   ├── main/
│   │   ├── java/com/lumenglover/yuemupicturebackend/
│   │   │   ├── annotation/          # Custom annotations
│   │   │   ├── aop/                 # AOP implementation
│   │   │   ├── config/              # Configuration files
│   │   │   ├── constant/            # Constant definitions
│   │   │   ├── controller/          # Controller layer
│   │   │   ├── exception/           # Exception handling
│   │   │   ├── interceptor/         # Interceptors
│   │   │   ├── manager/             # Business logic managers
│   │   │   ├── mapper/              # Data access layer
│   │   │   ├── model/               # Data models
│   │   │   ├── service/             # Business logic layer
│   │   │   ├── utils/               # Utility classes
│   │   │   └── YuemuPictureBackendApplication.java
│   │   └── resources/
│   │       ├── mapper/              # MyBatis mapping files
│   │       ├── application.yml      # Main config
│   │       ├── application-dev.yml  # Dev config
│   │       ├── application-test.yml # Test config
│   │       └── application-prod.yml # Prod config
│   └── test/
│       └── java/                    # Test code
├── pom.xml                          # Maven config
└── sql/
    └── create_table.sql             # DB table creation script

Frontend Project Structure

frontend/
├── public/                          # Static resources
├── src/
│   ├── api/                         # API definitions
│   ├── assets/                      # Asset files
│   ├── components/                  # Public components
│   ├── constants/                   # Constants
│   ├── layouts/                     # Page layouts
│   ├── pages/                       # Page components
│   ├── router/                      # Routing config
│   ├── stores/                      # State management (Pinia)
│   ├── styles/                      # Global styles
│   ├── utils/                       # Utility functions
│   ├── views/                       # View components
│   ├── App.vue                      # Root component
│   ├── main.ts                      # Entry file
│   └── request.ts                   # Request wrappers
├── .env.*                           # Environment variables
├── index.html                       # HTML template
├── package.json                     # Dependency management
├── tsconfig.json                    # TypeScript config
└── vite.config.ts                   # Vite config

Setup Development Environment

Backend Environment

1. Requirements

• Java 8 (OpenJDK 1.8)
• Maven 3.6+
• MySQL 5.7+
• Redis
• Elasticsearch 8.0+ (Required for search)
• Tencent Cloud COS (Required for file storage)
• Node.js 22+ (For frontend)

2. Database Initialization

# Create database
CREATE DATABASE yuemu_picture CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# Execute table script
mysql -u root -p yuemu_picture < sql/create_table.sql

3. Configuration

Copy and modify the dev environment config:

# Modify database connection info
vim src/main/resources/application-dev.yml

4. Start Backend Service

# Compile project
mvn clean compile

# Run project
mvn spring-boot:run

Frontend Environment

1. Install Dependencies

cd frontend
npm install

2. Environment Variables

Create .env.development file:

VITE_API_BASE_URL=http://localhost:8123/api
VITE_BASE_URL=http://localhost:8123
VITE_APP_TITLE=yuemutuku

3. Start Development Server

npm run dev

Coding Standards

Java Code Standards

1. Naming Conventions

• Classes: PascalCase, e.g., UserController
• Methods: camelCase, e.g., getUserById
• Constants: UPPER_SNAKE_CASE, e.g., MAX_RETRY_COUNT
• Variables: camelCase

2. Commenting

/**
 * User Controller
 * Handles user-related HTTP requests
 */
@RestController
@RequestMapping("/api/user")
public class UserController {
    
    /**
     * Get user info
     * 
     * @param userId User ID
     * @return User info
     */
    @GetMapping("/{userId}")
    public BaseResponse<UserVO> getUser(@PathVariable Long userId) {
        // Implementation
    }
}

3. Style

• Use Lombok to reduce boilerplate.
• Follow the Single Responsibility Principle.
• Use design patterns appropriately.

TypeScript Code Standards

1. Naming Conventions

• Components: PascalCase, e.g., UserProfile.vue
• Functions: camelCase
• Constants: UPPER_SNAKE_CASE

2. Style

// Type definition
interface User {
  id: number
  name: string
  email: string
}

// Component definition
const UserProfile = defineComponent({
  name: 'UserProfile',
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    // Logic
  }
})

Database Design Guidelines

1. Table Naming

• Use lowercase and underscores.
• Use plural forms, e.g., users, pictures.
• Avoid reserved keywords.

2. Field Naming

• Use lowercase and underscores.
• Use meaningful names.
• ID field is uniformly named id.

3. Indexes

• Create indexes for primary and foreign keys.
• Create indexes for frequently queried fields.
• Avoid over-indexing.

API Design Guidelines

1. RESTful API

GET    /api/users          # Get user list
POST   /api/users          # Create user
GET    /api/users/{id}     # Get specific user
PUT    /api/users/{id}     # Update user
DELETE /api/users/{id}     # Delete user

2. Response Format

{
  "code": 0,
  "message": "success",
  "data": {},
  "timestamp": 1640995200000
}

3. Error Codes

• 0: Success
• 1-999: System error
• 1000-1999: User error
• 2000-2999: Content error
• 3000-3999: Permission error

Security Guidelines

1. Input Validation

• All inputs must be validated.
• Use whitelist validation.
• Prevent SQL injection and XSS.

2. Access Control

• Implement Principle of Least Privilege.
• Sensitive operations require 2FA/Confirmation.
• Log operational actions.

3. Data Protection

• Encrypt sensitive data.
• Implement data backup strategies.
• Comply with data privacy regulations.

Deployment Guidelines

1. CI/CD Process

• Automated builds.
• Code quality checks.
• Automated testing.

2. Deployment Process

• Canary releases.
• Rollback mechanisms.
• Monitoring and alerts.

Contribution Guide

1. Branch Management

• main: Production branch
• develop: Development branch
• feature/*: Feature development
• hotfix/*: Emergency fixes

2. Commit Standards

feat: Add image upload
fix: Fix user login
docs: Update API docs
style: Format code
refactor: Refactor user service
test: Add unit tests
chore: Update dependencies

3. Pull Requests

• Clearly describe changes.
• Include relevant tests.
• Follow code standards.
• Pass CI checks.