Flutter 与 PHP 后端交互实现手机号存在性校验的完整实践-php教程-PHP中文网

Flutter 与 PHP 后端交互实现手机号存在性校验的完整实践

本文详解如何在 Flutter 应用中通过 HTTP 请求调用 PHP 接口，解析 JSON 响应并根据 "found" 或 "not found" 状态执行对应 UI 提示或业务逻辑，涵盖请求封装、状态判断、错误处理及实际应用建议。

本文详解如何在 flutter 应用中通过 http 请求调用 php 接口，解析 json 响应并根据 `"found"` 或 `"not found"` 状态执行对应 ui 提示或业务逻辑，涵盖请求封装、状态判断、错误处理及实际应用建议。

在 Flutter 中与 PHP 后端（如 checkphone.php）进行数据交互，核心在于：发起 POST 请求 → 正确传递参数 → 安全解析 JSON 响应 → 基于业务状态执行差异化逻辑。你已实现了基础通信，但需完善健壮性与可扩展性。以下是推荐的完整实践方案：

✅ 1. 优化 PHP 接口（增强安全性与规范性）

当前 PHP 脚本缺少跨域头、输入过滤和 JSON 标准化输出。建议更新为：

<?php header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *'); // 开发阶段允许跨域；上线请限制域名
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

include "config.php";

// 使用 filter_var 防止恶意输入
$phone_login = filter_var($_POST['login_phone'] ?? '', FILTER_SANITIZE_STRING);

if (empty($phone_login)) {
    echo json_encode(['status' => 'error', 'message' => 'Phone number is required']);
    exit;
}

try {
    $stmt = $connect->prepare("SELECT id, name FROM profile WHERE phone = ?");
    $stmt->execute([$phone_login]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user) {
        echo json_encode(['status' => 'found', 'data' => $user]);
    } else {
        echo json_encode(['status' => 'not_found']);
    }
} catch (PDOException $e) {
    error_log("DB Error: " . $e->getMessage());
    echo json_encode(['status' => 'error', 'message' => 'Server error']);
}
?>

? 安全提示：生产环境务必禁用 Access-Control-Allow-Origin: *，改用白名单；对手机号增加正则校验（如 ^1[3-9]\d{9}$）；使用预处理语句已正确防范 SQL 注入。

btpanel phpsite 宝塔面板PHP网站
宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

✅ 2. 完善 Flutter 请求与响应处理

你的 JsonAPI.postRequest() 应返回 Map<string dynamic></string>，但必须添加 HTTP 状态码校验与 JSON 解析容错。推荐重构 login() 方法如下：

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

Future<void> login() async {
  final url = Uri.parse('$linkServerName/checkphone.php');
  final body = {'login_phone': mobileNumTF_login.text.trim()};

  try {
    final response = await http.post(
      url,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: body,
    );

    // ✅ 第一步：检查 HTTP 状态码
    if (response.statusCode != 200) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('网络错误：${response.statusCode}')),
      );
      return;
    }

    // ✅ 第二步：解析 JSON，含空值/格式异常保护
    final Map<string dynamic> data = json.decode(response.body);

    // ✅ 第三步：基于 status 字段执行业务逻辑
    switch (data['status']) {
      case 'found':
        // ✅ 成功场景：跳转页面、显示用户信息等
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('✅ 手机号已注册，正在登录...')),
        );
        // 示例：导航到主页
        // Navigator.pushReplacementNamed(context, '/home');
        break;

      case 'not_found':
        // ✅ 未找到：引导注册或提示
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('⚠️ 该手机号未注册，请先注册')),
        );
        // 可选：跳转注册页
        // Navigator.pushNamed(context, '/register');
        break;

      case 'error':
        // ✅ 服务端异常：显示具体消息（开发时启用，线上建议隐藏细节）
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('❌ ${data['message'] ?? '未知错误'}')),
        );
        break;

      default:
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('⚠️ 服务器返回无效响应')),
        );
    }
  } on Exception catch (e) {
    // ✅ 网络异常（如无网络、超时）
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('? 连接失败：${e.toString()}')),
    );
  }
}</string></void>

✅ 3. 关键注意事项总结

永远不要仅依赖 response['status'] 判断：必须先验证 response.statusCode == 200，再解析 JSON，否则网络错误时 json.decode() 可能抛出异常。
避免硬编码字符串：将 'found' / 'not_found' 定义为常量（如 const String kStatusFound = 'found';），提升可维护性。
UI 反馈要明确：使用 ScaffoldMessenger（而非已弃用的 Scaffold.of().showSnackBar()）确保在任意子组件中可靠显示提示。
调试技巧：在 print(response.body) 前添加日志，确认 PHP 返回的是纯 JSON（无 HTML/空白字符），常见问题如 config.php 输出了 BOM 或警告信息会导致解析失败。