把会的技能做个汇总：NodeJs 后端 + Flutter做安卓、苹果App + H5端 + 微信小程序 + web端管理后台

突发：
想把自己会的知识汇总起来。

如何汇总？
1.写一个新的项目，把会的技能都用上
2.在sf上记录，并立flag，自我督促

多端同时开发确实累，不过提升还是比较明显的：没有人催赶进度（经常被公司压榨？），遇到问题可以尽可能的寻找最优解，平常不是很熟悉的地方加深印象等等。

实践

技术栈等规划
1.后端：NodeJS后端、mongoDB、Redis
2.C端：用Flutter做iOS和Android（使用闲鱼的fish_redux）、TaroJS实现微信小程序和H5
3.管理后台：React实现，Ant-Design UI(毕竟好看)
4.运维：docker部署、域名、七牛CDN储存图标、文件等静态资源

首页进度

通过后台配置不同的资源位，实现首页动态加载。

1.后台配置「资源」(图片、标题、点击条转的h5/app路由地址)
2.配置「资源位」关联多个「资源」，譬如「banner资源位」，由多个图片资源组成
3.配置业务场景，关联多个资源位，譬如「首页场景」，由多个资源位组成：banner资源位、box资源位等等

app端与h5端只要请求「首页场景」数据即可。
后期拓展：只要在首页开发多个资源位样式即可。

首页做了一波简单缓存：
1.后端策略：查询首页数据时，优先从redis中获取，若redis无数据再从mongodb中查，查出数据后将数据存入redis，5分钟失效。
2.app端策略：获取首页数据后，使用shared_preferences库，将数据持久化，储存在本地。请求接口失败时从本地获取。

简单贴一下伪代码：

后端

// controller

async show() {
  const { ctx, service, app } = this
  const { code } = ctx.request.body
  let ret = null
  const _redis = app.redis.get('defaultDB');
  // 配置了多个redis db，所以要先.get('db名字')再操作
  try {
    ret = JSON.parse(await _redis.get(code.toString()))
  } catch (e) {
    ctx.throw('数据解析错误')
  }
  if (!ret) {
  // redis中没有首页数据，这里查mongodb
    ret = await service.businessScene.findOne('...略')
    
    // 查出来后存到redis中
    await _redis.set(code.toString(), JSON.stringify(ret), 'EX', 5 * 60) // 5分钟过期
  }
  this.success(ret || {})
}

app端

// fish_redux的effect.dart中的代码

void _onFetchHomeData(Action action, Context ctx,
    {dynamic payload}) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  dynamic homeData;
  try {
    var res = await fetchResourcesGroup({'code': 1});
    // 请求接口
    if (res['success']) {
    // 接口返回正常
      homeData = res['data'];
      List resourcesGroup = homeData['resourcesGroup'] ?? [];
      // 容错做一下，后端返回字段出问题时不崩溃
      resourcesGroup.sort((a, b) => b['sort'] - a['sort']);
      // 首页资源位通过sort字段排序
      homeData['resourcesGroup'] = resourcesGroup;

      await prefs.setString(prefsKeyMap['homeData'], convert.jsonEncode(homeData));
      // 首页数据缓存至本地
    }
  } catch (e) {
    print('error: $e');
  }
  if (homeData == null) {
  // 请求或接口报错时 从本地取值
    homeData = convert.jsonDecode(prefs.getString(prefsKeyMap['homeData'])) ?? {};
  }
  ctx.dispatch(HomeActionCreator.setHomeData(homeData));
  // 储存数据
}

个人中心

// TODO
个人资料展示编辑

社区

// TODO

目前进度
1.App端目前banner资源位样式、box资源位样式动态加载
2.管理后台：从资源 => 资源位 => 业务场景配置、后台用户增删改查、登录
3.后端：资源、资源位、业务场景配置增删改查、后台用户体系增删改查
4.h5与小程序端暂无进展

后面继续补充，先上个进度图：