falcor 是netflix 公司为了解决自己api数据查询所开发的查询框架，很不错（尽管netflix 也在用graphql ）以下是falcor 的
一个简单使用，基于express 框架，使用服务器端提供model.json

一张参考图

server 端代码

  • 初始化项目
 
  1. yarn init -y
  • 添加依赖
  1. yarn add cors express falcor falcor-express falcor-router
  • package.json 文件
  1. {
  1.   "name": "netflix-falcor",
  1.   "version": "1.0.0",
  1.   "main": "index.js",
  1.   "license": "MIT",
  1.   "dependencies": {
  1.     "cors": "^2.8.5",
  1.     "express": "^4.17.1",
  1.     "falcor": "^2.1.0",
  1.     "falcor-express": "^0.1.4",
  1.     "falcor-router": "^0.8.3"
  1.   },
  1.   "scripts": {
  1.     "a": "node index"
  1.   }
  1. }
  • index.js
  1. // index.js
  1. const falcorExpress = require('falcor-express');
  1. const Router = require('falcor-router');
  1. const cors = require('cors')
  1. const express = require('express');
  1. const app = express();
  1. app.use(cors({
  1.     origin: function (origin, callback) {
  1.         callback(null,true)
  1.     },
  1.     credentials:true
  1. }))
  1. app.use('/model.json', falcorExpress.dataSourceRoute(function (req, res) {
  1.   // create a Virtual JSON resource with single key ('greeting')
  1.   return new Router([
  1.     {
  1.       // match a request for the key 'greeting'
  1.       route: 'greeting',
  1.       // respond with a PathValue with the value of 'Hello World.'
  1.       get: () => ({path: ['greeting'], value: 'Hello World'})
  1.     }
  1.   ],
  1.   {
  1.     // match a request for the key 'greeting'
  1.     route: 'username',
  1.     // respond with a PathValue with the value of 'Hello World.'
  1.     set: () => ({path: ['username'], value: 'dalong'})
  1.   });
  1. }));
  1. ​
  1. // serve static files from current directory
  1. app.use(express.static(__dirname + '/'));
  1. ​
  1. app.listen(3000);
 
  • 简单说明
    使用falcor-router 提供model.json 服务，为了方便使用基于http 的访问，添加了cors
    使用了cors 包，提供了一个简单的get 服务 greeting

web 客户端

使用简单的html

  • index.html
  1. <!-- index.html -->
  1. <html>
  1.   <head>
  1.     <!-- Do _not_ rely on this URL in production. Use only during development. -->
  1.     <script src="./falcor.browser.min.js"></script>
  1.     <!-- For production use. -->
  1.     <!-- <script src="https://cdn.jsdelivr.net/falcor/{VERSION}/falcor.browser.min.js"></script> -->
  1.     <script>
  1.       var model = falcor({source: new falcor.HttpDataSource('http://localhost:3000/model.json') });
  1. ​
  1.       // retrieve the "greeting" key from the root of the Virtual JSON resource
  1.       model.
  1.         get('greeting').
  1.         then(function(response) {
  1.           document.write(response.json.greeting);
  1.         });
  1.     </script>
  1.   </head>
  1.   <body>
  1.   </body>
  1. </html>

docker 集成

  • server dockerfile
  1. FROM node:alpine
  1. LABEL AUTHOR="dalongrong"
  1. LABEL EMAIL="1141591465@qq.com"
  1. WORKDIR /app
  1. COPY index.js /app/index.js
  1. COPY package.json /app/package.json
  1. COPY yarn.lock /app/yarn.lock
  1. RUN yarn
  1. EXPOSE 3000
  1. ENTRYPOINT [ "yarn","a" ]
  • web dockerfile
    基于nginx
  1. FROM openresty/openresty:1.15.8.2-1-alpine
  1. COPY index.html /app/
  1. COPY falcor.browser.min.js /app/
  1. EXPOSE 8080
  1. COPY nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
  • docker-compose 文件
  1. version: "3"
  1. services:
  1.   app:
  1.     build: ./
  1.     ports:
  1.     - "3000:3000"
  1.   web:
  1.     build: 
  1.       context: ./
  1.       dockerfile: Dockerfile-web
  1.     ports:
  1.     - "8080:8080"

启动&&效果

  • 启动
  1. docker-compose up -d
  • 效果

说明

falcor 提供了一套自己json graph 同时包含了一套很方便的查询语言，后续会在写相关的使用

参考资料

https://netflix.github.io/falcor/

Falcor 学习一基本使用的更多相关文章

  1. 如何学习React--[转]

    如果你是一个 React (或者前端) 新手, 出于以下的原因, 你可能会对这个生态圈感到困惑: React 的目标群体历来是喜欢尝试新事物的开发者和前端专家. Facebook 只开源了他们在实际使 ...

  2. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  3. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  4. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  5. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  8. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  9. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

随机推荐

  1. AnyProxy代理

    背景:当一个公司测试团队有多个人的时候,只需搭建一个AnyProxy服务,其它小伙伴浏览器上打开AnyProxy页面,手机上设置代理就能抓到http.https请求了.解决了部分人电脑不正经的小伙伴f ...

  2. 【题解】最长递增路径 [51nod1274]

    [题解]最长递增路径 [51nod1274] 传送门:最长递增路径 \([51nod1274]\) [题目描述] 一个可能有自环有重边的无向图,每条边都有边权.输入两个整数 \(n,m\) 表示一共 ...

  3. 【java】单实例下的 流水号【21位】

    单实例环境,不是分布式 需要流水号 /** * 流水号生成器 * * 年+天号+毫秒+随机数 * 2019+134+480+11位随机数 * 4+3+3+11 = 21位 * * * @author ...

  4. 面对代码中过多的if...else的解决方法

    原 6个实例详解如何把if-else代码重构成高质量代码 置顶 2017年09月11日 23:47:12 yinnnnnnn 阅读数 21433更多 分类专栏: # 理论   版权声明:本文为博主原创 ...

  5. EasyUI datagrid-export 将datagrid的数据导出至Excel-解决科学计数法

    通过EasyUI datagrid-export.js 将datagrid的数据导出至Excel的时候,如果有类似身份证一样很长的数字,需要在后台返回数据的时候在数字前增加一个 “ ”,将数字转为字符 ...

  6. 运维利器1-supervisor

    supervisor用来管理进程服务很方便 优点: 1.重启方便,无抖动感 2.可以分组管理进程 3.加入系统自动启动后,可以开机自启,程序异常退出能自动启动 操作: 1.在python沙箱环境下操作 ...

  7. 剑指Offer 总结

    给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. public class Solution { public ListNode EntryNodeOfLoop(ListNo ...

  8. JavaWeb第二天--CSS

    CSS CSS简述 CSS是什么?有什么作用? CSS(Cascading Style Sheets):层叠样式表. CSS通常称为CSS样式或层叠样式表.主要用于设置HTML页面中的文本内容(字体. ...

  9. SpringCloud高并发性能优化

    1. SpringCloud高并发性能优化 1.1. 前言 当系统的用户量上来,每秒QPS上千后,可能就会导致系统的各种卡顿,超时等情况,这时优化操作不可避免 1.2. 优化步骤 第一步:优化大SQL ...

  10. git https解决免ssL和保存密码

    1.打开windows的git bash set GIT_SSL_NO_VERIFY=true git clonegit config --global http.sslVerify false  2 ...