Flutter与Node.js后端集成教程

Flutter与Node.js后端的集成通常涉及通过HTTP请求与后端API进行通信。以下是一个简单的教程，展示如何在Flutter应用中与Node.js后端进行交互。

1. 创建Node.js后端

首先，创建一个简单的Node.js后端，使用Express框架来构建API。

mkdir nodejs-backend
cd nodejs-backend
npm init -y
npm install express body-parser cors

然后，创建 index.js 文件：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3000;

app.use(cors());
app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js backend!' });
});

app.post('/api/data', (req, res) => {
  const data = req.body;
  res.json({ message: 'Data received', data });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

启动服务器：

node index.js

2. 创建Flutter应用

在Flutter应用中，使用 http 包来发送HTTP请求。

首先，在 pubspec.yaml 中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

然后，创建一个简单的Flutter应用来与Node.js后端通信：

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: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _response = '';

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('http://localhost:3000/api/data'));

    if (response.statusCode == 200) {
      setState(() {
        _response = jsonDecode(response.body)['message'];
      });
    } else {
      throw Exception('Failed to load data');
    }
  }

  Future<void> sendData() async {
    final response = await http.post(
      Uri.parse('http://localhost:3000/api/data'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({'name': 'Flutter', 'message': 'Hello from Flutter!'}),
    );

    if (response.statusCode == 200) {
      setState(() {
        _response = jsonDecode(response.body)['message'];
      });
    } else {
      throw Exception('Failed to send data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter & Node.js Integration'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_response),
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Fetch Data'),
            ),
            ElevatedButton(
              onPressed: sendData,
              child: Text('Send Data'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行Flutter应用

确保Node.js后端正在运行，然后启动Flutter应用。点击按钮来获取或发送数据，Flutter应用将与Node.js后端进行通信。

总结

通过HTTP请求，Flutter应用可以轻松地与Node.js后端进行集成。你可以根据需要扩展后端的API和Flutter应用的功能。