Elm的RN的Redux版本改造(1)-模拟数据的获取

看到那个elm的react-native练习项目还挺火的,所以想着用Redux来改造一下.
elm RN项目

  1. 主要添加有mock-server作为后端数据模拟
  2. Redux的作为前端数据层
  3. Redux-saga对于管理异步操作数据流
  4. immutable对于不可变数据的管理
  5. 后续添加一些其他的东西例如导航系统和表单系统

目的:在没有后台服务器的情况下,使用mock-server来模拟后台数据,形成完整的React-Redux的数据流.

后端数据的模拟

elm的RN的数据来源是一部分从data.js中获取,一部分是直接在页面中模拟.
这么做对于写页面没有问题,但是对于远程请求的问题就没有办法了. 如果是直接在页面中通过fetch函数来获取,也是可行的,但是一旦数据来源很多的时候,管理和编写代码就变得很麻烦.拿elm的首页来说,如果在实际中要从网络服务请求的数据非常多,后面会讲到.这时候有必要引入Redux来对数据的请求和组织做集中处理.我考虑的不仅仅是数据请求的代码问题,其实还包括速度的问题.这个后面也会说到.

我们直接到位,借用mock-server这个很牛的工具来模拟远程的数据.这个服务的设置和使用还是非常简单的.

我觉得在使用中你要清楚三个问题,一是node.js的一些基础知识,mock-server是用think.js框架写的,您没看错,的确不是thinkphp.呵呵.
这个框架里的写法和thinkphp很相像.可不是,名字都差不多.但是差的十万八千里了.有一点node.js的知识就行,我们不在这里写代码.二是如果遇到要真机调试的时候,懂代理的设置,意思是这个mock-server实际是运行在127.0.0.1下的,要想办法让外界的终端可以访问.当然如果是模拟器调试就没有问题.三是mysql数据库的,要能启动,mock-server是不自带mysql服务器的,需要自己启动和配置.这个我们按步骤来说明,mac下我使用的是mamppro这个软件,非常的方便.

首先安装mock-server服务器

非常简单没有什么难度.请参见简书文章:node.js web版 mock-server 让你更好的管理你的模拟数据
https://github.com/flftfqwxf/mockserver

  1. 依赖包npm安装
npm install
  1. mysql数据库的安装



    用了mac下的比较好的mamp pro这个集成环境,里面非常好用的是mysql的密码修改,很方便,总是记不住密码.使用brew 安装mysql也可以用.


  2. 根据mysql数据的用户名和密码更改mock-server的配置文件
src/common/config/db.js
 mysql: {
            host: '127.0.0.1',
            port: '3306',
            database: 'mockserver',
            user: 'root', //根据你自己mysql用户名修改
            password: 'YES', //根据自己的mysql密码修改
            prefix: 'mock_',
            encoding: 'UTF8MB4_GENERAL_CI'
        },
  1. 导入.sql文件数据

  2. 进入文件夹目录运行npm start,运行在127.0.0.1:8003端口

  3. 就可看到下面的后台界面了


  4. 我们新建一个elm的项目,后面的的api都放到这里

  5. 举个例子 ,我们想要一个列表API:


  6. 修改


  7. 设置响应参数



    看到后面输出了统计结构,就可以使用了.

  8. 点击保存后,查看结果,地址栏就是api的链接,输出就是json数据

 [
  {
    "name": "田老师红烧肉(知春路店)",
    "isBrand": true,
    "logo": 27,
    "scores": 3.5,
    "sale": 4013,
    "bao": true,
    "piao": true,
    "ontime": true,
    "fengniao": true,
    "startPay": "¥20起送",
    "deliverPay": "配送费¥4",
    "evOnePay": "¥21/人",
    "journey": "250m",
    "time": "35分钟",
    "activities": [
      {
        "key": "减",
        "text": "满20减2,满30减3,满40减4(不与美食活动同享)"
      },
      {
        "key": "特",
        "text": "双人餐特惠"
      }
    ]
  },
  {
    "name": "稻麦香(金源店)",
    "isBrand": true,
    "logo": 21,
    "scores": 2.5,
    "sale": 2419,
    "bao": true,
    "ontime": true,
    "startPay": "¥0起送",
    "deliverPay": "配送费¥2",
    "evOnePay": "¥11/人",
    "journey": "150m",
    "time": "25分钟",
    "activities": [
      {
        "key": "减",
        "text": "满20减2,满30减3,满40减4(不与美食活动同享)"
      }
    ]
  },
  {
    "name": "米有理由(中关村店)",
    "logo": 11,
    "scores": 1.5,
    "sale": 1419,
    "startPay": "¥0起送",
    "deliverPay": "配送费¥5",
    "evOnePay": "¥12/人",
    "journey": "450m",
    "time": "45分钟"
  },
  {
    "name": "吉野家(鼎好店)",
    "isBrand": true,
    "logo": 16,
    "scores": 4.5,
    "sale": 3419,
    "ontime": true,
    "startPay": "¥0起送",
    "deliverPay": "配送费¥2",
    "evOnePay": "¥14/人",
    "journey": "150m",
    "time": "25分钟",
    "activities": [
      {
        "key": "减",
        "text": "满20减2,满30减3,满40减4(不与美食活动同享)"
      },
      {
        "key": "新",
        "text": "新品5折"
      },
      {
        "key": "特",
        "text": "双人餐特惠"
      }
    ]
  },
  {
    "name": "周大虾龙虾盖浇饭(中关村东路店)",
    "logo": 18,
    "scores": 4,
    "sale": 4013,
    "piao": true,
    "ontime": true,
    "fengniao": true,
    "startPay": "¥20起送",
    "deliverPay": "配送费¥4",
    "evOnePay": "¥21/人",
    "journey": "250m",
    "time": "35分钟",
    "activities": [
      {
        "key": "特",
        "text": "双人餐特惠"
      }
    ]
  },
  {
    "name": "轰咖咖喱饭(中关村东路店)",
    "isBrand": true,
    "logo": 17,
    "scores": 4,
    "sale": 4013,
    "piao": true,
    "fengniao": true,
    "startPay": "¥20起送",
    "deliverPay": "配送费¥4",
    "evOnePay": "¥21/人",
    "journey": "250m",
    "time": "35分钟"
  }
]

一下的其他接口依次来处理,就不再多说了,这个讲的够详细了.需要注意json对象和javascript对象的写法的差异性.如果写不对json格式.可以在console里面使用JSON.stringify()函数来转一下(键名和键值加双引号).

这是个工具,我们接着这个工具来完成模拟数据的工作

用实际UI替代设计原型图

首页的截图


首页截图
首页截图

下面根据逻辑功能对可视的这一部分做一下分类标记, 屏幕下面没有显示的部分,我刻意没有标出来,这么做是从性能上考虑的,后面在获取远程数据的时候会讲到这一点.


逻辑分区的分解

1.地名和天气数据的获取

实际的编码中应该是先从本机的gps获取地里位置,接着可以获取到地名和天气信息.

getLocationData() //根据gps信息获取地里信息
 {
   
  
  "address": "三里屯CBD"
}
getWeatherData() //根据gps信息获取天气信息

{
  "location": "北京",
  "district": "朝阳",
  "tempature": [
    19.2,
    25.3,
    37
  ],
  
  "pm2.5": 25,
  "wind": "breeze",
  "weather": "sunny",
  "ultravolvet": "strong",
  "clothing": "single"
}

2.关键词部分

//getkeywords()
{
 "keywords": [
  "肯德基","粥","必胜客","一品生煎","星巴克"
 ]
 ,
 "string": "Hello World"
}
 

3.搜索,这一块没有获取数据,所以暂时不处理

4.swipe部分,这一部分的名称不动,但是可以根据网络状况选择在Wifi条件下去加载网络图片,在其他环境下从本地加载图片

5. 每日图片.

返回一张图片的url地址

//everydayPic
{
"everydaypic": {
  "name": "测试",
  "url": "https://ww1.sinaimg.cn/large/006tNbRwly1ffdm6jl0ylj30rs04t3yy.jpg",
  "info": "测试信息",
  "picID": "图片有关介绍"
}
}

6.推荐套餐

//recommend
{
"array": [
  {
    "热卖套餐": {
      "keyword": "热卖",
      "价格": 100,
      "picurl": "https://ww4.sinaimg.cn/large/006tNc79ly1few6ck5q31j30rs06eabn.jpg"
    }
  },
  {
    "霸王餐": {
      "keyword": "20元折扣",
      "价格": 100,
      "picurl": "https://ww4.sinaimg.cn/large/006tNc79ly1few6ck5q31j30rs06eabn.jpg"
    }
  },
  {
    "年货到家": {
      "keyword": "年货节",
      "价格": 100,
      "picurl": "https://ww4.sinaimg.cn/large/006tNc79ly1few6ck5q31j30rs06eabn.jpg"
    }
  },
  {
    "5折优惠": {
      "keyword": "5折优惠",
      "价格": 100,
      "picurl": "https://ww4.sinaimg.cn/large/006tNc79ly1few6ck5q31j30rs06eabn.jpg"
    }
  }
],
"keywords": "推荐套餐"
}

在首页可视的部分加载了几种数据,在整个页面中还有内容没有加载完,是不是考虑也要加载?肯定要的,但是这个可视的地方就是一个界限,为了保证速度,我觉得首先加载可视部分,不可见的部分稍后加载.在javascript的意思就是,先加的入队操作,后加的后操作,但是分开步骤来分布加载,首页加载的压力就小了.为什么要考虑这个问题?在f8 app中就出现这问题,作者指出来了.
在f8 app的 f8APP.js文件(相当于初始化文件)中有这样的代码:

 // TODO: Make this list smaller, we basically download the whole internet
  //这个地方在先于UI组件之前加载了所有的state,
  //这里可以加载一部分首先需要的数据
     this.props.dispatch(loadNotifications());
  this.props.dispatch(loadMaps());
  this.props.dispatch(loadConfig());
  this.props.dispatch(loadSessions());
  this.props.dispatch(loadFriendsSchedules());
  this.props.dispatch(loadSurveys());

在这个文件中使用了redux的dispatch方法,加载了大量的数据.要考虑到分别加载的问题. 这就是需要解决的问题出发点.

我们同样也可以在一个入口文件(意思就是程序启动的文件,怎么能这样做呢?参考一下f8 app的做法吧.)中来加载首要显示的内容,不在可视区的数据我们在Home.js的生命周期函数中再加载.

这是一个解决性能问题的思路.供参考.


先写这么多. 利用好这些mock类的程序.这样把前后端的问题可以联系起来考虑.我这里指的是数据流的问题.这个流程和UI设计是独立的.
在这里前端人员掌握mock-server的好处是,你可以根据模拟的接口来思考当你在React程序中引入Redux以后怎么来组织state树中的数据. 因为Redux中数据是单向从store中流向React的UI组件的,state有个整体性,所以需要整体考虑.当然这里是比较简单的,如果是社交和电商软件,需要考虑到数据的交叉引用问题,这就不是我一人能思考的问题了.在mock-server项目中的数据结构可以以利于你形成下面的state的基本结构. UI组件需要的数据都从下面这张图中来获取.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,048评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 什么是数据库? 数据库是存储数据的集合的单独的应用程序。每个数据库具有一个或多个不同的API,用于创建,访问,管理...
    chen_000阅读 4,001评论 0 19
  • 1.MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品。My...
    黄花菜已凉阅读 4,519评论 3 60
  • “我一直想要打开邻居家的那个隐藏的金库门,这件事终于实现了,一切都结束了。”—— 记于 2500年1月1日 每天起...
    阿尢蜜蟹酱阅读 535评论 7 4