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. Mysql系列（六）—— MySQL索引介绍

    前言 索引种类 索引维护 如何使用索引 一.索引索引种类 MySQL中索引主要包含以下几种: 普通索引 唯一索引 主键索引 联合索引 全文索引 二.索引维护 在简述了索引的类型后,再来了解下如何维护索 ...

  2. Maven distributionManagement 分发构件至远程仓库

    https://blog.csdn.net/qq827245563/article/details/82661583 maven发布到本地仓库,和私服https://blog.csdn.net/u01 ...

  3. 创建一个dotnetcore的SPA模板项目

    MPA和SPA 对比 dotnet new --install Microsoft.AspNetCore.SpaTemplates::* 我这边用的是vue dotnet new vue dotnet ...

  4. Java Mockito 笔记

    Mockito 1 Overview 2 Maven 项目初始化 3 示例 3.1 第一个示例 3.2 自动 Mock 3.3 Mock 返回值 3.4 Mock 参数 3.5 自动注入 Mock 对 ...

  5. 探索etcd，Zookeeper和Consul一致键值数据存储的性能

    这篇博文是探索三个分布式.一致性键值数据存储软件性能的系列文章中的第一篇:etcd.Zookeeper和Consul,由etcd团队所写,可以让我们全面地了解如何评估三个分布式一致存储软件的性能.翻译 ...

  6. spring mvc 服务器端输出一条可执行js

    @RequestMapping(value = "/test",produces = "text/html; charset=UTF-8") @Response ...

  7. SAP HANA学习资料大全 Simple Finane + Simple Logisitic [非常完善的学习资料汇总]

    Check out this SDN blog if you plan to write HANA Certification exam http://scn.sap.com/community/ha ...

  8. Servlet 入门

    静态web页面:html+css+js,页面是静态的.不变的,显示给每个用户的页面都一样. 动态web页面:php.jsp.asp,根据用户.实时数据(数据库)来动态显示页面,不同的用户,显示的页面可 ...

  9. Spark编译的三种方式

    有三种编译方式,此文采用make-distribution.sh编译 其余两种为maven 和SBT编译 1.配置jdk 配置maven 配置scala 2.修改spark下make-distribu ...

  10. 【异常】java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result.

    异常原因:没有指定数据精度导致数据运算无法正常结算 如执行下面的除法: ).divide(BigDecimal.valueOf()).intValue(); 指定精度后就可以了: ).divide(B ...