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. Codeforces 878 E. Numbers on the blackboard

    Codeforces 878 E. Numbers on the blackboard 解题思路 有一种最优策略是每次选择最后面一个大于等于 \(0\) 的元素进行合并,这样做完以后相当于给这个元素乘 ...

  2. 论文笔记:LightGBM: A Highly Efficient Gradient Boosting Decision Tree

    引言 GBDT已经有了比较成熟的应用,例如XGBoost和pGBRT,但是在特征维度很高数据量很大的时候依然不够快.一个主要的原因是,对于每个特征,他们都需要遍历每一条数据,对每一个可能的分割点去计算 ...

  3. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  4. IDEA超级实用的几个快捷键

    最近开始使用IDEA,突然发现的比较的实用的几个快捷键 这些快捷键用的好的话真的可以提升很多效率 还有一些比较简单的快捷键,相信大家都会 Ctrl+X:剪切 Ctrl+C:复制 Ctrl+V:粘贴 C ...

  5. linux环境：FTP服务器搭建

    转载及参考至:https://www.linuxprobe.com/chapter-11.html https://www.cnblogs.com/lxwphp/p/8916664.html 感谢原作 ...

  6. Scheduling Tasks

    官方文档 https://spring.io/guides/gs/scheduling-tasks/ 官方文档详细介绍了@Scheduled中fixedRate,fixedDelay,cron的用法 ...

  7. React Hooks --- useState 和 useEffect

    首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...

  8. QT制作一个位图画图板程序

    本文学习如何创建一个Qt绘制程序,用户将能够通过使用不同的尺寸和画笔的颜色来表达他们的创造力. 主要功能:保存画板内容为图片.清除画板内容.设置画板大小.设置画笔颜色 新建基于QMainWindow的 ...

  9. Prometheus学习笔记（3）什么是node_exporter？？？

    目录 Node_exporter安装配置启动 Node_exporter安装配置启动 node_exporter安装在被监控端,安装方式也比较简单,直接下载解压安装即可,默认启动后监听9100端口. ...

  10. prometheus学习系列一： Prometheus简介

    Prometheus简介 prometheus受启发于Google的Brogmon监控系统(相似kubernetes是从Brog系统演变而来), 从2012年开始由google工程师Soundclou ...