如何在 post api 中传递对象以在 flutter 中创建帐户

how to pass object in post api to create account in flutter

我创建了一个带有电子邮件、密码和登录按钮的登录表单。我是 flutter、dart 和 web 的新手。

如何使用 JSON 作为对象集成 JSON Restfull API 以进行登录和注册。

假设您是 Flutter 和 dart 的新手,有几个步骤可以完成 RESTful API 调用。

首先,您需要提供来自 pub.dev named http 的依赖项。

在 pubspec.yaml 文件中添加依赖后,进入终端,然后 运行 命令 pub get.

现在,在您的登录表单中,我假设您正在尝试 post 某个端点的用户名和密码。

让我们创建一个名为 networking_helper.dart 的单独文件,只是为了将 RESTful API 的所有内容保存在 well-mannered 结构中。您可以在 FORM 屏幕中保留 API 实现,但我强烈建议不要将 UI 代码与后端代码混合。

现在,在networking_helper.dart文件中创建一个class来绑定所有API方法。创建一个方法,该方法将包含所有 API-related 代码和登录端点。例如:


class NetworkingHelper{
  Future<bool> login(String email, String password) async {
    //api implementation will be here
  }
}

现在,仔细看这里,我在这里创建了一个名为 NetworkingHelper 的 class 来封装我的 API 方法。在 NetworkingHelper class 中有一个名为 login 的方法。 login 方法根据需要需要一些参数。 login 方法声明为 async,以在后台执行作业。

让我们准备一些数据以完成 API 调用。

假设您将使用 POST 方法来执行登录表单的数据,让我们像这样声明 String 键和 dynamic 值的映射:

    final Map<String, String> bodyParams = {
      "username": username,
      "password": password,
      "grant_type": "password",
    };

请不要担心我为什么选择使用“用户名”、“密码”和“grant_type”键。我的登录端点需要这些值。与您的 API 开发人员沟通他们的需求,并将您需要的密钥替换为 above-mentioned 密钥。

要使用所需数据建立 HTTP 连接并等待响应,请执行以下步骤:

final Response response = await post(Uri.parse(<url>), body: bodyParams);

典型的异步方法return是一个有延迟的值,所以我们必须等到它完成工作。所以我们用await键来表示等待期。

之后就很简单了。只需根据您的需要实施几个 if/else 即可确保您的数据有效并且 HTTP 调用成功。示例:

    if (response.statusCode == 200) {
      return true;
    } else {
      return false;
    }

还记得上面声明的方法的 return 类型吗?它以前如何? 这是 Future<bool?>。让我们也分解一下。让我们从印象开始。我们的 return 类型是一个布尔值,将来会提供,因为我们的方法被声明为 async。有道理!!!

这就是我们在完成 API 呼叫等待阶段后 return 判断真假的原因。

为了给出 API 调用的完整结构,这里是完整的代码:

class NetworkingHelper{
  Future<bool> login(String email, String password) async {
    final Map<String, String> bodyParams = {
      "username": username,
      "password": password,
      "grant_type": "password",
    };

    final Response response = await post(Uri.parse(<url>), body: bodyParams);

    if (response.statusCode == 200) {
      return true;
    } else {
      return false;
    }
  }
}

希望对您有所帮助。编码愉快 :D

这是一个非常简单的例子。

我已经在我的 github 帐户中创建了。

请试一试:https://github.com/JayswalViraj/Flutter-Login-With-Rest-API

注意:登录和注册的工作过程相同。只有您需要更改 api url 以进行注册过程。登录apiurl注册apiurl.