前端开发

Flutter调用JSON序列化出现type 'String' is not a subtype of type 'MapString, dynamic'

问题情况

本来按照书上的思路都封装好了Dio,半自动生成了Json Model,结果在实际应用上出现了以下异常:

Unhandled Exception: type 'String' is not a subtype of type 'Map<String, dynamic>'

该异常指向了我进行Json Model化的代码:(User为自己编写的Json Model类)

Response res = await dio.get<String>(...);
return User.fromJson(res.data); // 异常指向了这一行

分析原因:

初步分析是User.fromJson()需要传入Map而res.data的数据类型是String,但是用User.fromJson(res.data as Map<String, dynamic>)这样的写法依然不行。

后来翻书找到了原因,在JSON序列化之前需要用json.decode(json)将String转换为Map,例如:

Map userMap = json.decode(json);
var user = new User.fromJson(userMap);

解决方法

对res.data进行jsonDecode,原代码改成以下代码解决:

return Recommender.fromJson(jsonDecode(res.data));

后续发现的真问题所在和避免方法

后续写的代码发现dio.get(...)不用泛型指明返回类型也会报错。

该异常情况主要是与dio.get方法的返回值有关,如果是dio.get(...)这样使用的话它可能返回String也可能返回Map,所以建议指定泛型来避免异常,例如指定返回String则这样使用:dio.get<String>(...),实际使用代码如下:

Response res = await dio.get("url");
return User.fromJson(jsonDecode(res.data));

注:

本文所使用的环境和依赖:

environment:
  sdk: ">=2.12.0 <3.0.0"
dependencies:
  ...
  dio: ^4.0.0
  json_annotation: ^4.0.1
dev_dependencies:
  ...
  build_runner: ^2.0.1
  json_serializable: ^4.1.1

Flutter生成JSON序列化模板报错

问题详情:

在执行flutter packages pub run build_runner build自动生成JSON序列化模板的时候出现了以下报错:

Generator cannot target libraries that have not been migrated to null-safety.
package:flutter_test2/model/recommender.dart:6:7
  ╷
6 │ class Recommender {
  │       ^^^^^^^^^^^
  ╵
[INFO] Running build completed, took 1.0s
[INFO] Caching finalized dependency graph...
[INFO] Caching finalized dependency graph completed, took 41ms
[SEVERE] Failed after 1.1s
pub finished with exit code 1


解决npm install代理报错

前言

最近切换到Windows来写写Vue,拿起以前的项目敲npm install,结果报了代理错误,关掉系统代理后依旧。

Debugger attached.
npm ERR! code ENOTFOUND 
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz failed, reason: 
getaddrinfo ENOTFOUND registry.npmjs.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'


ES6中的Promise

Promise

在ES6中提供了 Promise 对象。

一、概念

  • 在MDN里的解释是(我的翻译可能不太好):Promise对象表示在异步操作下的最终完成(或失败)及其结果值。

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

  • 说成人话:Promise是一个对象,用来异步操作,在成功执行完毕或者中途失败的时候执行对应(完成或失败)的操作。


vue element-ui 刷新页面后导航菜单不高亮问题

问题详情:

在使用element-ui的NavMenu组件作为导航菜单的时候,我是通过遍历router/index.js里的路由json数组(已定义成常量)来作为NavMenu的渲染数据的。但是我发现刷新页面之后NavMenu就失去了高亮。


Vue封装axios

0 条评论 Vue 前端开发 无标签 月琳

引言:整理项目中有意思的东西

完成文件:request.js、api.js

文件作用:request.js集中配置axios;api.js集中管理后端接口地址

目的:分离后端接口地址和axios参数配置,并集中管理。


微信小程序自定义组件使用外部class

0 条评论 前端开发 无标签 月琳

1. 在组件的js文件里定义一个供外部使用的class名称

Component({
  externalClasses: ['my-class'],


Vue父组件与子组件之间数据的互传

0 条评论 Vue 前端开发 vue 月琳

子组件向父组件传值


JS通过字符串动态获取对象的值和设置动态键名

需求:
  1. 获取(或赋值)json对象其中的某个值,但是这个值的键名是不固定(动态)的
  2. 为json对象创建一个不固定键名(动态键名)的值
实现1:

通过动态键名获取对象的值:
object['键名']
设置方式当然就是:
object['键名'] = '值'





addEventListener绑定的外部函数中的this指向

0 条评论 默认分类 JS 无标签 月琳

注:使用了jQuery

当我们为HTML元素添加监听绑定外部函数的时候,是这样写的