Se connecter à Flutter avec Node js MySQL

flutter create flutter_login_app

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5

const express = require('express');
const db = require('./db');
const app = express();

// Middleware JSON
app.use(express.json());

// CORS
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  next();
});

// Route OPTIONS pour pré-vol CORS
app.options('/clients/update', (req, res) => {
  res.sendStatus(200);
});

// Route POST pour mettre à jour un client
app.post('/clients/update', (req, res) => {
  const { id, name, family, age } = req.body;

  // Validation
  if (!id || id <= 0) {
    return res.json({ success: false, message: "ID invalide" });
  }

  const sql = "UPDATE client SET name = ?, family = ?, age = ? WHERE id = ?";
  db.query(sql, [name, family, age, id], (err, result) => {
    if (err) {
      return res.status(500).json({ success: false, message: "Erreur de mise à jour" });
    }

    const updated = result.affectedRows > 0;
    res.json({
      success: updated,
      message: updated ? "Mis à jour avec succès" : "Aucune modification"
    });
  });
});

app.listen(3000, () => console.log("API mise à jour client en écoute sur http://localhost:3000"));

const express = require('express');
const db = require('./db');
const app = express();

// Middleware JSON
app.use(express.json());

// CORS
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  next();
});

// Route OPTIONS pour le pré-vol CORS
app.options('/clients/delete', (req, res) => {
  res.sendStatus(200);
});

// Route POST pour supprimer un client
app.post('/clients/delete', (req, res) => {
  const { id } = req.body;

  // Vérification de l'ID
  if (!id || id <= 0) {
    return res.json({ success: false, message: "ID invalide" });
  }

  const sql = "DELETE FROM client WHERE id = ?";
  db.query(sql, [id], (err, result) => {
    if (err) {
      return res.status(500).json({ success: false, message: "Erreur de suppression" });
    }

    const deleted = result.affectedRows > 0;
    res.json({
      success: deleted,
      message: deleted ? "Supprimé avec succès" : "Aucun client supprimé"
    });
  });
});

app.listen(3000, () => console.log("API suppression client en écoute sur http://localhost:3000"));

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State createState() => _HomePageState();
}

class _HomePageState extends State {
  final _nameCtrl = TextEditingController();
  final _familyCtrl = TextEditingController();
  final _ageCtrl = TextEditingController();

  String serverMsg = '';
  final List _clientsList = [];

  final String baseUrl = "http://10.0.2.2:3000"; // Remplacez par votre IP et port Node.js si nécessaire

  Future _postRequest() async {
  try {
    final response = await http.post(
      Uri.parse("$baseUrl/add-client"),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        'name': _nameCtrl.text.trim(),
        'family': _familyCtrl.text.trim(),
        'age': int.tryParse(_ageCtrl.text) ?? 0,
      }),
    );

    final responseData = jsonDecode(response.body);
    
    _clearForm();

    if (response.statusCode == 201 && responseData['success']) {
      serverMsg = "Ajouté avec ID: ${responseData['id']}";
    } else {
      serverMsg = "Erreur: ${responseData['message']}";
    }
  } on http.ClientException catch (e) {
    serverMsg = "Erreur réseau: ${e.message}";
  } on FormatException {
    serverMsg = "Réponse serveur invalide";
  } catch (e) {
    serverMsg = "Erreur inattendue: $e";
  }
  setState(() {});
  _getRequest();
}

  Future _getRequest() async {
    try {
      final response = await http.get(Uri.parse("$baseUrl/clients"));

      if (response.statusCode == 200 || response.statusCode == 201) {
        final List jsonData = jsonDecode(response.body);
        _clientsList.clear();
        _clientsList.addAll(jsonData.map((e) => Client.fromJson(e)));
        serverMsg = "Données chargées";
      } else {
        serverMsg = "Échec du chargement";
      }
    } catch (e) {
      serverMsg = "Erreur: $e";
    }
    setState(() {});
  }

  Future _deleteRequest(int id) async {
    try {
      final response = await http.delete(
        Uri.parse("$baseUrl/clients/$id"),
      );

      if (response.statusCode == 200) {
        serverMsg = "Supprimé avec succès";
        _getRequest();
      } else {
        serverMsg = "Échec de la suppression";
      }
    } catch (e) {
      serverMsg = "Erreur: $e";
    }
    setState(() {});
  }

  Future _updateRequest(Client client) async {
    try {
      final response = await http.put(
        Uri.parse("$baseUrl/clients/${client.id}"),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode(client.toJson()),
      );

      if (response.statusCode == 200) {
        serverMsg = "Mis à jour avec succès";
        _getRequest();
      } else {
        serverMsg = "Échec de la mise à jour";
      }
    } catch (e) {
      serverMsg = "Erreur: $e";
    }
    setState(() {});
  }

  void _clearForm() {
    _nameCtrl.clear();
    _familyCtrl.clear();
    _ageCtrl.clear();
  }

  @override
  void initState() {
    super.initState();
    _getRequest();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("CRUD Node.js")),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              height: 300,
              color: Colors.grey[200],
              padding: const EdgeInsets.all(20),
              child: Column(
                children: [
                  TextField(
                    controller: _nameCtrl,
                    decoration: const InputDecoration(labelText: 'Name'),
                  ),
                  TextField(
                    controller: _familyCtrl,
                    decoration: const InputDecoration(labelText: 'Family'),
                  ),
                  TextField(
                    controller: _ageCtrl,
                    decoration: const InputDecoration(labelText: 'Age'),
                    keyboardType: TextInputType.number,
                  ),
                  const SizedBox(height: 16),
                  Text(
                    serverMsg,
                    style: const TextStyle(color: Colors.blue),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _clientsList.length,
                itemBuilder: (context, index) {
                  final client = _clientsList[index];
                  return ListTile(
                    title: Text("${client.name} ${client.family}"),
                    subtitle: Text("Age: ${client.age}"),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: const Icon(Icons.edit, color: Colors.green),
                          onPressed: () {
                            _nameCtrl.text = client.name;
                            _familyCtrl.text = client.family;
                            _ageCtrl.text = client.age.toString();

                            showDialog(
                              context: context,
                              builder: (_) {
                                return AlertDialog(
                                  title: const Text("Modifier le client"),
                                  content: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      TextField(
                                        controller: _nameCtrl,
                                        decoration: const InputDecoration(labelText: "Name"),
                                      ),
                                      TextField(
                                        controller: _familyCtrl,
                                        decoration: const InputDecoration(labelText: "Family"),
                                      ),
                                      TextField(
                                        controller: _ageCtrl,
                                        decoration: const InputDecoration(labelText: "Age"),
                                      ),
                                    ],
                                  ),
                                  actions: [
                                    TextButton(
                                      child: const Text("Annuler"),
                                      onPressed: () => Navigator.pop(context),
                                    ),
                                    ElevatedButton(
                                      child: const Text("Mettre à jour"),
                                      onPressed: () {
                                        _updateRequest(Client(
                                          id: client.id,
                                          name: _nameCtrl.text,
                                          family: _familyCtrl.text,
                                          age: int.tryParse(_ageCtrl.text) ?? 0,
                                        ));
                                        Navigator.pop(context);
                                      },
                                    ),
                                  ],
                                );
                              },
                            );
                          },
                        ),
                        IconButton(
                          icon: const Icon(Icons.delete, color: Colors.red),
                          onPressed: () {
                            _deleteRequest(client.id);
                          },
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _postRequest,
        child: const Icon(Icons.add),
      ),
    );
  }
}