用户登录

🎉 8 周年订阅优惠

在 flutter 应用里发出网络请求可以使用一个叫 http 的 pacakge,打开项目的 pubspec.yaml 文件,在 dependencies 里面,添加一个 http ,然后设置一下要使用的版本号。 ^0.12.0+2,保存一下这个文件,编辑器会自动执行 flutter pub get,为项目准备好这个新的依赖。

下面可以找个地方去用一下这个 http 包提供的功能,去请求我们的后端服务接口。比如先打开 signup_form.dart ,这个文件里现在定义的是一个注册用户用的表单。 在文件的顶部,先导入 package:http/http.dart as http 。 给导入的东西添加一个 http 前缀。

然后在这个小部件里添加一个方法,名字可以叫 signup,用 async 标记一下,因为方法里会有一些异步的动作。方法里面添加一个 response ,await 等待执行 http 上的 post 方法返回的结果。

这个 post 可以发出一个使用 HTTP 的 POST 方法的请求,先把要请求的接口地址告诉这个方法。在我们的后端服务,处理注册新用户请求用的接口地址是 users,地址要加上应用的主机名, http://localhost:3000/users

因为暂时我们请求的是在本地主机上运行的服务接口,所以应用的主机名就是 localhost,另外还需要指定一下要使用的具体的端口号,这里就是 3000 这个端口。

请求里要带的数据,可以放在 body 属性里面,需要准备好一个 json 数据,添加一个 'name',对应的值就是用户在用户名表单字段里输入的值,这个值可以在 _formData.name 里获取到。

再添加一个 'password',对应的值是 _formData.password。 下面可以用一个 print,在控制台上输出请求得到的响应里的数据,输出的是 response 里的 body 属性的值。 根据响应的状态码一般就可以判断得到的是响应是什么,用 print ,输出 response 里的 statusCode 。

执行
定义的这个 singup 方法,可以在用户按了注册按钮以后执行一下,打开 _submitForm,在方法里面,用一下 signup。

测试

选中用户名这个文本字段,输入要注册的用户名,再输入一个密码,按一下 注册新用户。 出现了一个错误,提示 Connection refused,连接被拒绝了。

这是因为,现在我们是在一台真实的设备上运行的应用,在刚才定义的 signup 这个方法里,请求的地址设置成了 localhost,这个主机名表示的是本地主机,所以这种地址只能用在模拟器上。

如果想让我们的真实的设备也能访问到在我的这台电脑上运行的后端服务,可以使用局域网内的 IP 地址,也就是你可以让电脑跟手机使用同一个 WIFI,这样它们就会在同一个局域网内,也就可以相互使用各种在局域网内的 IP 地址访问。

查看电脑的局域网地址,在 macOS 系统上,可以打开 系统的偏好设备,然后打开 网络。 在这里会显示电脑在局 域网内的 IP 地址。 复制一下这个地址,用这个 IP 地址,替换一下 localhost。

然后打开调试,按几下继续。

打开编辑器的控制台,重新再按一下注册页面上的注册新用户按钮。

这次在控制台上输出的是一个异常信息,提示要注册的用户已经存在了。 在数据库客户端可以观察一下应用里的 user 这个数据表,现在这里已经有了一个 wanghao 数据记录。右键点击这个数据表,选择 Truncate ,勾选一一下 disable foreign key check ,然后按一下 ok 。

回到项目,重新再按一下 注册新用户, 这次控制台上输出的服务端响应回来的数据就是一个新注册的用户。

再到数据库客户端观察一下,刷新一下,在 user 表里又会出现一条新的数据记录。 这条数据记录是通过我们应用的注册界面,向服务端发出请求之后,然后由服务端创建的。

网络请求(注册新用户)《 Flutter 应用案例: 用户注册 》

统计

11440
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点