前言

本文档详细介绍了一个完整的 Flutter + Spring Boot 全栈项目，包含跨平台移动应用和后端服务的完整技术实现。

一、项目架构

技术栈

1
2
3
4
5
6
7
8
9
10
11
12
前端：Flutter 3.x
── 状态管理：Riverpod
── 路由：GoRouter
├── 网络：Dio
└── UI组件：Material Design 3

后端：Spring Boot 3.x
├── 框架：Spring WebFlux
├── 数据库：PostgreSQL
├── 缓存：Redis
├── 认证：JWT + Spring Security
└── API文档：Swagger/OpenAPI

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
project/
├── mobile/          # Flutter 移动应用
│   ├── lib/
│   │   ├── features/    # 功能模块
│   │   ├── core/        # 核心层
│   │   ── shared/      # 共享组件
│   └── test/
├── backend/         # Spring Boot 后端
│   ├── src/main/java/
│   │   ├── controller/
│   │   ├── service/
│   │   ├── repository/
│   │   └── model/
│   └── src/test/
└── docs/            # 文档

二、核心功能

2.1 用户认证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Flutter 端
final authProvider = Provider<AuthService>((ref) {
  return AuthService(dio: ref.watch(dioProvider));
});

class AuthService {
  Future<LoginResponse> login(String email, String password) async {
    final response = await dio.post('/auth/login', data: {
      'email': email,
      'password': password,
    });
    return LoginResponse.fromJson(response.data);
  }
}
1
2
3
4
5
6
7
8
9
10
11
// Spring Boot 端
@PostMapping("/auth/login")
public ResponseEntity<LoginResponse> login(@RequestBody LoginRequest request) {
    Authentication auth = authenticationManager.authenticate(
        new UsernamePasswordAuthenticationToken(
            request.getEmail(), request.getPassword()
        )
    );
    String token = jwtTokenProvider.generateToken(auth);
    return ResponseEntity.ok(new LoginResponse(token));
}

2.2 数据同步

1
2
3
4
5
6
7
8
9
10
// 离线优先架构
class SyncService {
  Future<void> syncData() async {
    final localData = await localDb.getAll();
    final serverData = await api.fetchUpdates();
    
    final merged = mergeData(localData, serverData);
    await localDb.saveAll(merged);
  }
}

三、部署方案

移动端部署

1
2
3
4
5
# Android
flutter build apk --release

# iOS
flutter build ios --release

后端部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# docker-compose.yml
version: '3'
services:
  api:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - DB_HOST=postgres
      - REDIS_HOST=redis
  postgres:
    image: postgres:15
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_PASSWORD=secret
  redis:
    image: redis:7-alpine

四、性能优化

Flutter 优化

  • 使用 const 构造函数
  • 避免在 build 方法中创建对象
  • 使用 ListView.builder 代替 ListView
  • 图片使用 cached_network_image

Spring Boot 优化

  • 使用 WebFlux 响应式编程
  • Redis 缓存热点数据
  • 数据库连接池优化
  • 异步处理耗时操作

总结

这是一个完整的全栈项目模板，包含：

  • ✅ 跨平台移动应用（iOS + Android）
  • ✅ RESTful API 后端
  • ✅ 离线优先架构
  • ✅ 完整的认证授权
  • ✅ 自动化部署配置

适合快速启动新的全栈项目。

本文档详细介绍了 Flutter + Spring Boot 全栈项目的技术实现和部署方案。