个人app开发(一个人也能开发属于自己的APP【第二篇】)

　　用户信息对App的业务模式提供最基础的数据支撑，有着非常重要的价值，因此如何设计好用户账号信息，关系到业务后续是否能顺利开展。

　　在【上一篇文章】https://www.bjmm360.com/news/hyzx/205.html我们介绍了如何搭建APP的账号管理，实现了APP的注册、登录功能。但仅仅有账号显然是不够的，用户的账号信息往往还需要有头像、昵称、邮箱等等。

　　本章我们就详细介绍如何以YesAPI为后台为APP扩展丰富的用户信息数据，并通过Flutter客户端实现用户资料的保存和修改。

　　先上效果：

　　用户信息扩展

　　添加用户信息其实很简单，YesAPI已经为我们提供了扩展用户信息的接口

　　查看请求参数，可以看到我们只需要传递一个Json

　　在本示例中，我们为用户新增4个属性，分别为头像、昵称、手机、邮箱：

　　{"ext_info": {    "yesapi_avatar":"",    "yesapi_nickname":"",    "yesapi_mobile":"",    "yesapi_email":""    }}

　　你可以为用户添加任何key-value，对于常规的属性我们使用YesAPI预设的key（‘yesapi_’开头），这样在后台可以被自动解析显示出来，方便在后台查看和编辑：

　　上传图片

　　用户信息只能保存文本，因此头像的图片我们需要通过另一个接口上传：

　　通过Flutter封装图片的上传功能，把对头像图片进行压缩，再上传至YesAPI后台，这里图片压缩使用第三方库flutter_native_image

　　代码实现：

　　class FileUploader {  static var url = BASE_URL + '/App/CDN/UploadImg';  //上传图片到服务器  static FutureuploadImage(BuildContext context, String filePath) async {    String token = Provider.of(context, listen: false).token;    String uuid = Provider.of(context, listen: false).uuid;    if (token == null) {      throw HttpException('No Auth User');    }    if (filePath.isEmpty) {      CommonFunctions.showToast(S.of(context).tips_11);      return null;    }    // 图片压缩    File compressedFile = await FlutterNativeImage.compressImage(filePath,        quality: 50, percentage: 50);    String fileName = filePath.split('/').last;    FormData formData = FormData.fromMap({      "app_key": APP_KEY,      "token": token,      "uuid": uuid,      "file": await MultipartFile.fromFile(compressedFile.path, filename: fileName),    });    var response =    await Dio().post(url, data: formData);    print(response);    if (response.statusCode == 200) {      Map responseMap = response.data;      print("upload---------------> ${responseMap['data']['url']}");      return responseMap['data']['url'];    } else {      CommonFunctions.showToast('Error：${response.statusCode}');      return null;    }  }}

　　上传成功可以在后台查看：

　　保存用户信息

　　上传完成，后台将返回一个图片的url，我们再将该url设置在用户信息表。通过UpdateExtInfo，和其他信息一起保存到后台。

　　代码实现：

　　Future doEditProfile(String name, String email, String phone, String icon, BuildContext context) async {  try {    String token = Provider.of(context, listen: false).token;    String uuid = Provider.of(context, listen: false).uuid;    if (token == null) {      throw HttpException('No Auth User');    }    Mapjson = Provider.of(context, listen: false).user.toJson();    var url = BASE_URL + '/App/User/UpdateExtInfo';    print(url);    json["yesapi_avatar"] = icon;    json["yesapi_nickname"] = name;    json["yesapi_mobile"] = phone;    json["yesapi_email"] = email;    var jsonStr = jsonEncode(json);    print("json: " + jsonStr);    FormData formData = FormData.fromMap({      "app_key": APP_KEY,      "token": token,      "uuid": uuid,      "ext_info": jsonStr    });    var response = await Dio().post(url, data: formData);    if (response.data['ret'] != 200) {      print(response.data);      throw HttpException('No Data');    }    return true;  } catch (error) {    throw (error);  }}

　　现在我们可以在用户列表看到，test5这个用户，已经有了头像、昵称、手机、邮箱了。

　　获取用户信息

　　我们再通过/App/User/Profile接口把当前用户信息拉去下来，再对Json进行解析和UI展示。

　　代码实现：

　　FuturegetUserInfo(BuildContext context) async {  try {    if (token == null) {      bool res = await tryAutoLogin(context);      print("getUserInfo: No Auth User!!!");      if (!res)        throw HttpException('No Auth User');    }    var url = BASE_URL + '/App/User/Profile';    MapjsonData = {      "uuid":"$uuid",      "token":"$token",      "app_key":"$APP_KEY",    };    final response = await http.post(      Uri.parse(url),      headers:{        'Content-Type': 'application/json; charset=UTF-8',      },      body: jsonEncode(jsonData),    );    final responseData = json.decode(response.body);    print('getUserInfo user: ${responseData['data']['info']['ext_info']}');    _user = Profile.fromJson(responseData['data']['info']['ext_info']);    print("nickname: ${_user.yesapi_nickname}");    notifyListeners();    // 通知UI更新    Provider.of(context, listen: false).doRequest(context);  //跳转回首页  } catch (error) {   print('getUserinfo error: ${error.toString()}');    throw (error);  }}

　　用户信息更新结果

　　后记

　　用户信息虽然重要，但并非可以随意获取。随着政策的收紧，用户信息如果处理不当将直接影响APP的上线和运营。开发者应该根据自己的业务形态，以最小必要原则获取数据，并为用户展示隐私协议。