把会的技能做个汇总: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<HomeState> 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与小程序端暂无进展

后面继续补充,先上个进度图:




版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000023099506

升级node版本rn项目运行报错cb.apply is not a function - 编程思维

今日打算安装一下ReactNative官方推荐的脚手架工具Ignite。Ignite是一套整合了 Redux 以及一些常见 UI 组件的脚手架。它带有一个命令行可以生成 app、组件或是容器。在安装的过程中,提示当前系统安装的node版本过低,无法安装,于是就想升级一下node的版本。因为系统中早就安装了node的管理

【2019-03-29】记录过去一周看过觉得很好的文章 - 编程思维

跨平台抓包工具,亲自测试并使用,总的来说就是配置非常简单好用,值得拥有 Mobile Debug官方网站(代理抓包/移动端H5调试/请求劫持/HTTPS支持/Hosts管理/WebSocket数据捕获/跨平 一个可以更好排版微信公众号工具 微信公众号工具 一个专门收集web的面试的栏目,很多也很全,无聊的时候刷一刷看一

flutter web网站搭建教程 - 编程思维

简述 曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn,代码开源至https://github.com/ibaozi-cn/ibaozi,而这次我要做的

zooteam 前端周刊|第 63 期 - 编程思维

政采云前端小报第63期浏览更多往期小报,请访问: https://weekly.zoo.team 基于浏览器的实时构建探索之路 本文是 RichLab 花呗借呗前端团队的玄寂童鞋在 D2 上议题的文字稿。 微浏览器无处不在 你知道微浏览器吗? 从 Fetch 到 Streams —— 以流的角度处理网络请求 - 云音

cabloyjs也有工作流引擎了,是你想要的吗? - 编程思维

前言众所周知,NodeJS作为后端开发语言和运行环境,样样都好,就差一个NodeJS工作流引擎。CabloyJS 4.0重点开发了NodeJS工作流引擎,并作为内置的基础核心模块,近一步拓展了NodeJS在后端的应用场景,为深入研发各类商业业务逻辑,提供了基础支撑NodeJS工作流引擎的特点更简便的配置:采用JSON进

基于原生js实现的bean容器和aop编程 - 编程思维

Bean是什么我们知道Bean是Spring最基础的核心构件,大多数逻辑代码都通过Bean进行管理。NestJS基于TypeScript和依赖注入也实现了类似于Spring Bean的机制:服务提供者(Provider)CabloyJS则是在原生JS(Vanilla JS)上实现了更轻量、更灵活的Bean容器理念Cab

cabloyjs微信模块、企业微信模块已出齐 - 编程思维

前言 当Cabloy-企业微信模块完成时,加上之前已完成的Cabloy-微信模块,关于在CabloyJS中与微信/企业微信对接的任务已经完成了。这些模块的目标就是,只需填入各类服务的参数,就可以直接进入具体的业务开发,从而达到开箱即用的效果 背景分析 1. 账户体系 微信/企业微信的开发,有诸多的坑,而最大的坑就是账户

cabloyjs v3.2.0支持socket io - 编程思维

CabloyJS v3.2.0引入了Socket IO,并且实现了统一的在线推送和离线推送机制 效果演示 1. IM 用户向系统发送一条消息,系统通过websocket在线通道向用户推送一条回复 2. 进度条 系统通过websocket在线通道向前端实时推送任务的进度 项目配置 升级到该版本,请更新以下项目配置:

github readme - 编程思维

简体中文 | [English](https://community.cabloy.com/articles/cabloy-github-readme.html) # CabloyJS CabloyJS是一款顶级NodeJS全栈业务开发框架, 基于KoaJS + EggJS + VueJS + Framework7