Flutter与Spring Boot后端集成教程

Flutter与Spring Boot后端集成教程

3 回复

找本全栈开发书,或搜博客,讲这个的不多,自己动手整合吧。

更多关于Flutter与Spring Boot后端集成教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


抱歉,作为屌丝程序员,我还没研究这么高大上的东西呢。

Flutter与Spring Boot的集成主要涉及前后端的数据交互,通常通过RESTful API实现。以下是简要的集成步骤:

1. 创建Spring Boot后端服务

首先,创建一个简单的Spring Boot项目,并实现一个RESTful API。

@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/hello")
    public String sayHello() {
        return "Hello from Spring Boot!";
    }
}

确保Spring Boot应用运行在某个端口上(如8080),并且可以通过http://localhost:8080/api/hello访问。

2. 创建Flutter前端应用

在Flutter中,使用http包来调用后端API。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter with Spring Boot'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text('Response: ${snapshot.data}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('http://localhost:8080/api/hello'));

    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }
}

3. 运行应用

确保Spring Boot后端服务正在运行,然后启动Flutter应用。Flutter应用将调用Spring Boot的API并显示返回的数据。

4. 处理跨域问题(如果需要)

如果Flutter应用和后端服务不在同一个域名下,可能会遇到跨域问题。可以在Spring Boot中配置CORS:

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
        }
    };
}

通过以上步骤,你就可以实现Flutter与Spring Boot的基本集成。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!