Flutter之get/post网络请求数据并渲染页面 |
您所在的位置：网站首页 › json数据怎么显示到页面上 › Flutter之get/post网络请求数据并渲染页面 |
Flutter之get/post网络请求数据并渲染页面
|
1、Flutter Json与Map类型转换 import 'dart:convetr' json.encode();//Map转Json json.decode();//Json转Map2、Utf8解决乱码 Utf8Decoder decode = new Utf8Decoder(); decode.convert(response.bodyBytes)3、Http组件 http: ^0.12.0+44、Http之get、post请求数据渲染页面完整demo get请求我们使用的ListView组件,post请求使用了ListView.builder 两者效果一样。 import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; class RequestPage extends StatefulWidget { RequestPage({Key key}) : super(key: key); @override _RequestPageState createState() => _RequestPageState(); } class _RequestPageState extends State { List getList = []; List postList = []; String name; String password; String login="登录"; _getData() async { var response = await http.get("https://api.apiopen.top/videoHomeTab"); if (response.statusCode == 200) { Map map = json.decode(response.body); List listJsonMap = map['result']; setState(() { getList = listJsonMap; }); } else { getList = ['code', 500]; } } _postData() async { var response = await http.post("https://api.apiopen.top/videoHomeTab"); if (response.statusCode == 200) { Map map = json.decode(response.body); List listJsonMap = map['result']; setState(() { postList = listJsonMap; }); } else { getList = ['code', 500]; } } _login() async { var response = await http.post("http://localhost:8080/user/login", body: {"userName": name, "password": password}); Utf8Decoder decode = new Utf8Decoder(); if (response.statusCode == 200) { Map map = json.decode(decode.convert(response.bodyBytes)); print(map); String code = map['code']; if(code=="E19999"){ setState(() { login=map['msg']; }); }else{ setState(() { login="登录成功"; }); } } else { setState(() { login = "网络错误"; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("网络请求"), ), body: Container( child: Column( children: [ RaisedButton( child: Text("get请求数据"), onPressed: () { _getData(); }, ), RaisedButton( child: Text("post请求数据"), onPressed: () { _postData(); }, ), Text("get请求的数据"), Container( child: getList.length>0?ListView(children:getList.map((e){return ListTile(title: Text(e['name']),subtitle: Text(e['apiUrl']),);}).toList(),):Text(""), height: 200, ), Divider(), Text("post请求的数据"), Container( child: postList.length>0?ListView.builder(itemBuilder: (context,index){ return ListTile(title: Text(postList[index]['name']),subtitle: Text(postList[index]['apiUrl']),); },itemCount: postList.length,):Text(""), height: 200, ), TextField( decoration: InputDecoration(hintText: "请输入用户名"), onChanged: (String userName) { setState(() { name = userName; }); }, ), TextField( decoration: InputDecoration(hintText: "请输入密码"), obscureText: true, onChanged: (String passWord) { setState(() { password = passWord; }); }, ), FlatButton( child: Text(login), onPressed: () => _login(), ), ], ), ), ); } }上边包括了一个get和post请求页面数据以及post请求登录的接口。post请求登录接口是我本地的springboot项目，代码在这github。
后端部分代码 package com.main.flutter.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.Map; /** * @author MrWang * @version v1.0 * @date 2020/3/16 * @Description */ @RestController @RequestMapping("/user") public class LoginController { @RequestMapping("/login") public Map login(String userName,String password){ Map returnData = new HashMap(8); if (userName==null||password==null){ returnData.put("code","E19999"); returnData.put("msg","用户名或密码不能为空"); }else if (!"admin".equals(userName)||!"admin".equals(password)){ returnData.put("code","E19999"); returnData.put("msg","用户名或密码错误"); }else { returnData.put("code","S10000"); returnData.put("msg","登录成功"); } return returnData; } }5、更强大的Dio网络请求组件 简介:dio是一个强大的Dart Http请求库，支持Restful API FromData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等。 组件地址:https://pub.flutter-io.cn/packages/dio 使用起来和http类似，不过比http更加强大，这里不再过多介绍，demo示例移步点这里 |
【本文地址】
今日新闻 |
推荐新闻 |