Flutter 与 PHP 后端交互：基于 JSON 的手机号验证完整实现-php教程-PHP中文网

Flutter 与 PHP 后端交互：基于 JSON 的手机号验证完整实现

本文详解如何在 flutter 应用中调用 php 接口验证手机号是否存在，并根据返回的 json 结果（"found"/"not found"）执行对应 ui 提示或业务逻辑，涵盖请求封装、状态校验、错误处理与实际响应解析。

本文详解如何在 flutter 应用中调用 php 接口验证手机号是否存在，并根据返回的 json 结果（"found"/"not found"）执行对应 ui 提示或业务逻辑，涵盖请求封装、状态校验、错误处理与实际响应解析。

在 Flutter 中与 PHP 后端通信，核心在于安全发起 HTTP POST 请求 → 正确解析 JSON 响应 → 根据业务字段触发 UI 或逻辑分支。你已实现了基础通信和 PHP 端返回结构化 JSON（{"status": "found"}），但关键缺失环节是：未校验 HTTP 状态码、未处理网络异常、未将 JSON 字符串解析为 Dart Map、也未在 UI 层反馈结果。

下面提供一套生产就绪的完整实现方案：

✅ 1. 完善 `postRequest` 方法（推荐使用 `http` 包）

确保你的 JsonAPI 类内部使用 http.post 并正确解析响应：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

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

class JsonAPI {
  Future<map dynamic>> postRequest(String url, Map<string string> body) async {
    try {
      final response = await http.post(
        Uri.parse(url),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: body,
      );

      // ✅ 关键：检查 HTTP 状态码
      if (response.statusCode == 200) {
        // ✅ 关键：解析 JSON 字符串为 Map
        return json.decode(response.body);
      } else {
        throw Exception('HTTP ${response.statusCode}: ${response.reasonPhrase}');
      }
    } on http.ClientException catch (e) {
      throw Exception('Network error: ${e.message}');
    } on FormatException catch (e) {
      throw Exception('Invalid JSON response: ${e.message}');
    }
  }
}</string></map>

✅ 2. 在 `login()` 中安全处理响应并更新 UI

避免仅依赖 print()，应结合 setState 更新界面（如显示 SnackBar 或跳转页面）：

Future<void> login() async {
  if (mobileNumTF_login.text.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入手机号')),
    );
    return;
  }

  try {
    setState(() => _isLoading = true); // 显示加载态

    final response = await _tst.postRequest(linklogin, {
      "login_phone": mobileNumTF_login.text.trim(),
    });

    // ✅ 安全读取 status 字段（带 null check）
    final status = response['status'] as String?;

    if (status == 'found') {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('✅ 手机号已注册，正在跳转...')),
      );
      // 示例：跳转到主页面
      // Navigator.pushReplacementNamed(context, '/home');
    } else if (status == 'not found') {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('❌ 该手机号未注册，请先注册')),
      );
      // 示例：跳转注册页
      // Navigator.pushNamed(context, '/register');
    } else {
      throw Exception('未知响应状态: $status');
    }
  } catch (e) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('⚠️ 请求失败: ${e.toString()}')),
    );
    debugPrint('Login error: $e');
  } finally {
    setState(() => _isLoading = false);
  }
}</void>

⚠️ 注意事项与最佳实践

PHP 端加固：当前代码存在 SQL 风险隐患（虽已用 PDO 预处理，但未校验输入格式）。建议在 PHP 中添加手机号正则校验（如 ^1[3-9]\d{9}$）并返回统一错误结构（如 {"success": false, "message": "手机号格式错误"}）。

CORS 问题：若调试时遇到跨域错误，请在 PHP 文件开头添加：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

JSON 响应一致性：始终确保 PHP 返回标准 JSON（无额外空格、BOM、echo 冗余内容），可加 exit(); 防止意外输出：
```
// PHP 末尾添加
exit();
```
Flutter 端健壮性：永远不要直接访问 response['status'] 而不判空或类型校验；使用 as String? + ?? 或 response['status']?.toString() 更安全。