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

一张参考图

server 端代码

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

web 客户端

使用简单的html

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

docker 集成

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

启动&&效果

  • 启动
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. HTML的attribute和DOM的property剖析（转）

    原文:https://www.jianshu.com/p/efc704d713c7 HTML attribute 与 DOM property 的对比 该文摘自angular的官方文档,老外对概念的解 ...

  2. 关于 返回数据类型 后 加& 的作用

    关于  返回数据类型 后 加& 的作用 请看以下图片 我的测试 //纯粹就是 为了 可作为 左值而存在的 方法 前 的返回值 int& ,如 int& Method(); // ...

  3. Java自学-接口与继承 final

    Java的修饰符final final修饰类,方法,基本类型变量,引用的时候分别有不同的意思. 示例 1 : final修饰类 当Hero被修饰成final的时候,表示Hero不能够被继承 其子类会出 ...

  4. Java自学-类和对象 this

    Java 中的 this this 这个关键字,相当于普通话里的"我" 小明说 "我吃了" 这个时候,"我" 代表小明 小红说 " ...

  5. 4.Javascript中实现继承的几种方法及其优缺点

    要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型, ...

  6. Java语法知识点2

    1. 基本数据类型的包装类 byte   Byte short   Short int    Integer long  Long float  Float double  Double boolea ...

  7. Cheat Engine 特征码

    打开游戏 引用自动注入 搜索特征码 特征码,是游戏运行中,唯一的汇编代码 验证,特征码是游戏中唯一代码 添加特征码 添加特征码,以及金钱只增不减代码 进行激活测试 特征码,只有在游戏过程中才会执行到 ...

  8. Weshop基于Spring Cloud开发的小程序商城系统

    WESHOP | 基于微服务的小程序商城系统 Weshop是基于Spring Cloud(Greenwich)开发的小程序商城系统,提供整套公共微服务服务模块,包含用户中心.商品中心.订单中心.营销中 ...

  9. .Net core3.0 集成swagger5.0上传文件

    .Net core 3.0已经更新了,相信有挺多博主大佬们都更新了如何在.Net core3.0使用swagger,这里就不详细说了. 我们知道,如果.net core 2.x使用swagger上传文 ...

  10. Nginx 反向代理与负载均衡的配置

    已经很久没有写博了,因为最近学车加上各种问题一直没时间, 今天刚好想起有好多的东西还没来得及记录.回到正题: Nginx是一个非常强大的web轻量级服务器,许多大厂也用Nginx进行负载均衡和反向代理 ...