一、項目結構設計

my-project/
├── backend/          # Spring Boot 3.2 后端
├── frontend/         # Vue3 前端
└── docker-compose.yml # 容器化部署

二、后端搭建（Spring Boot 3.2）

1. 快速初始化（使用 Spring Initializr）

• 依賴選擇：
  • Spring Web
  • Spring Data JPA
  • Lombok
  • Spring Security
  • MySQL Driver
  • Spring Boot DevTools

2. 核心配置

application.yml

server:port: 8080servlet:context-path: /apispring:datasource:url: jdbc:mysql://localhost:3306/app_db?useSSL=falseusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Driverjpa:hibernate:ddl-auto: updateshow-sql: trueproperties:hibernate.format_sql: truesecurity:oauth2:resourceserver:jwt:issuer-uri: http://localhost:8080

跨域配置 CorsConfig.java

@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOriginPattern("*");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

3. 安全配置

SecurityConfig.java

@Configuration
@EnableWebSecurity
public class SecurityConfig {@Beanpublic SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {http.csrf().disable().authorizeHttpRequests(auth -> auth.requestMatchers("/api/auth/**").permitAll().anyRequest().authenticated()).sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS));return http.build();}
}

4. JWT認證模塊

JwtUtils.java

public class JwtUtils {private static final String SECRET_KEY = "mySecretKey";private static final long EXPIRATION_TIME = 86400000; // 24小時public static String generateToken(UserDetails userDetails) {return Jwts.builder().setSubject(userDetails.getUsername()).setIssuedAt(new Date()).setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME)).signWith(SignatureAlgorithm.HS256, SECRET_KEY).compact();}public static String extractUsername(String token) {return Jwts.parser().setSigningKey(SECRET_KEY).parseClaimsJws(token).getBody().getSubject();}
}

三、前端搭建（Vue3 + Vite）

1. 創建Vue項目

npm create vite@latest frontend -- --template vue-ts
cd frontend
npm install

2. 安裝必要依賴

npm install axios vue-router@4 pinia @element-plus/icons-vue
npm install -D sass

3. 項目結構優化

src/
├── api/           # API請求封裝
├── assets/         # 靜態資源
├── components/     # 通用組件
├── router/         # 路由配置
├── store/          # 狀態管理
├── views/          # 頁面組件
├── utils/          # 工具函數
└── App.vue

4. 核心配置

axios 封裝 (api/index.ts)

import axios from 'axios';const api = axios.create({baseURL: import.meta.env.DEV ? 'http://localhost:8080/api' : '/api',timeout: 10000,
});// 請求攔截器
api.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});// 響應攔截器
api.interceptors.response.use(response => response.data,error => {if (error.response?.status === 401) {localStorage.removeItem('token');window.location.href = '/login';}return Promise.reject(error);}
);export default api;

路由配置 (router/index.ts)

import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'Home',component: () => import('@/views/HomeView.vue'),meta: { requiresAuth: true }},{path: '/login',name: 'Login',component: () => import('@/views/LoginView.vue')}
];const router = createRouter({history: createWebHistory(),routes
});router.beforeEach((to, from, next) => {const token = localStorage.getItem('token');if (to.meta.requiresAuth && !token) {next('/login');} else {next();}
});export default router;

四、前后端聯調配置

1. 開發環境代理 (Vite)

// vite.config.js
export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

2. 生產環境整合

// Spring Boot 配置 (WebMvcConfig.java)
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/**").addResourceLocations("classpath:/static/").resourceChain(true).addResolver(new PathResourceResolver() {@Overrideprotected Resource getResource(String resourcePath, Resource location) throws IOException {Resource requestedResource = location.createRelative(resourcePath);return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");}});}
}

五、一鍵啟動腳本

start-dev.sh (開發環境)

#!/bin/bash# 啟動后端
cd backend && ./mvnw spring-boot:run &# 啟動前端
cd frontend && npm run dev

build-prod.sh (生產構建)

#!/bin/bash# 構建前端
cd frontend
npm run build# 復制前端構建文件到后端
rm -rf ../backend/src/main/resources/static/*
cp -r dist/* ../backend/src/main/resources/static/# 構建后端JAR
cd ../backend
./mvnw clean package -DskipTests

六、Docker 容器化

Dockerfile (后端)

FROM openjdk:17-jdk-slim
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

docker-compose.yml

version: '3.8'services:backend:build: ./backendports:- "8080:8080"environment:SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/app_dbSPRING_DATASOURCE_USERNAME: rootSPRING_DATASOURCE_PASSWORD: rootdepends_on:db:condition: service_healthyfrontend:image: nginx:alpineports:- "80:80"volumes:- ./frontend/dist:/usr/share/nginx/htmldepends_on:- backenddb:image: mysql:8.0environment:MYSQL_ROOT_PASSWORD: rootMYSQL_DATABASE: app_dbvolumes:- mysql-data:/var/lib/mysqlhealthcheck:test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]interval: 5stimeout: 10sretries: 5volumes:mysql-data:

七、模板功能清單

1. 后端功能：
   • JWT認證
   • 統一異常處理
   • 數據驗證
   • 分頁查詢
   • 文件上傳
   • API文檔 (SpringDoc OpenAPI)
2. 前端功能：
   • 響應式布局
   • 路由守衛
   • 狀態管理
   • 主題切換
   • 國際化
   • 權限控制

八、性能優化配置

前端優化 (Vite)

// vite.config.js
export default defineConfig({build: {rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return 'vendor';}}}}}
})

后端優化

# application.yml
spring:jpa:properties:hibernate:jdbc:batch_size: 50fetch_size: 100order_inserts: trueorder_updates: true

九、擴展功能集成

1. 代碼生成器

# 安裝MyBatis Plus代碼生成器
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.5.3</version>
</dependency>

2. 監控端點

management:endpoints:web:exposure:include: health,info,metrics,prometheusendpoint:health:show-details: always

十、使用說明

1. 開發模式：

./start-dev.sh

1. 生產構建：

./build-prod.sh

1. 容器部署：

docker-compose up -d --build

該模板已集成企業級開發所需的核心功能，10分鐘內即可啟動開發，適合作為微服務架構的基礎模板。