如何使用 Dio 包将数据发送到后端（heroku）以获取多页注册页面？

Question

我正在尝试使用 Flutter 的 Dio 包编写一个注册页面。它是多页的，包括：选择您的电子邮件、学校、兴趣类别和出生日期。用户将在完成上一页后进入下一页。一旦用户完成最后一页，即 dob 页面，我希望将所有数据发布到用户 API 的 /user/register API。我应该如何实现这样的注册页面？有没有例子？我需要你的帮助。谢谢。

Answer 1

如果您可以分享更多关于您想要的内容的详细信息或屏幕截图，您可以获得更健康、更准确的答案。我仍然会尽力提供帮助。

点击注册页面的'Save'按钮即可触发以下代码

  Future<bool> userSave(String email, String school, String interestCategories,
  DateTime dateOfBirth) async {
try {
  const String apiUrl = "your-api-url";
  var params = {
    "email": email,
    "school": school,
    "interestCategories": interestCategories,
    "dateOfBirth": dateOfBirth
  };
  Response response = await Dio().post(
    apiUrl,
    options: Options(headers: {
      HttpHeaders.contentTypeHeader: "application/json",
    }),
    data: jsonEncode(params),
  );
  if (response.statusCode == 200) {
    return true;
  } else {
    return false;
  }
} catch (e) {
  return false;
}
}

我准备了一个兼容你的屏幕的例子，你可以从这里得到你需要的地方

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController interestCategoriesController = TextEditingController();
  TextEditingController emailController = TextEditingController();
  TextEditingController schoolController = TextEditingController();
  DateTime dateOfBirth = DateTime.now();
  bool apiResponse = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: mainArea(),
    );
  }

  Widget mainArea() {
    return Center(
      child: ElevatedButton(
        child: const Text("Save"),
        onPressed: () async {
          apiResponse = await userSave(
              emailController.text,
              schoolController.text,
              interestCategoriesController.text,
              dateOfBirth);
          if (apiResponse == true) {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondPage()),
            );
          } else {
            //You can show alerDialog for response is false
          }
        },
      ),
    );
  }

  Future<bool> userSave(String email, String school, String interestCategories,
      DateTime dateOfBirth) async {
    try {
      const String apiUrl = "your-api-url";
      var params = {
        "email": email,
        "school": school,
        "interestCategories": interestCategories,
        "dateOfBirth": dateOfBirth
      };
      Response response = await Dio().post(
        apiUrl,
        options: Options(headers: {
          HttpHeaders.contentTypeHeader: "application/json",
        }),
        data: jsonEncode(params),
      );
      if (response.statusCode == 200) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      return false;
    }
  }
}

如何使用 Dio 包将数据发送到后端（heroku）以获取多页注册页面？

How to send data to backend (heroku) for a multi-page signup page using Dio package?

android

flutter

dart

dio