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 Round #580 (Div. 1)

    Codeforces Round #580 (Div. 1) https://codeforces.com/contest/1205 A. Almost Equal 随便构造一下吧...太水了不说了, ...

  2. Oracel 数据库表操作

    表结构操作 创建表 create table tableName (id varchar2(36) primary key, name varchar2(36), age number(12,2), ...

  3. maven添加本地包命令mvn install:install-file

    mvn install:install .jar -Dfile:要注册的jar,绝对路径

  4. vs2012新建单元测试

    多写单元测试也是算向优秀程序员迈进吧((ˇˍˇ)),就像我们小时候做算算术一样,老师会交给我们怎么样检验答案是否正确性.那么我们做程序员也一样,检验自己写的代码是否和我们预期的结果一样!项目小还行,但 ...

  5. MongoDB netcore

    mongodb.driver mongodb.driver.core url:  http://dl.mongodb.org/dl/win32/x86_64 ********************* ...

  6. SpringBoot构建RESTful API

    1.RESTful介绍 RESTful是一种软件架构风格! RESTful架构风格规定,数据的元操作,即CRUD(create, read, update和delete,即数据的增删查改)操作,分别对 ...

  7. Mybatis 映射器接口实现类的方式 运行过程debug分析

    查询一张表的所有数据. 环境: 使用工具IntelliJ IDEA 2018.2版本. 创建Maven工程不用骨架 <?xml version="1.0" encoding= ...

  8. 如何快速找到Chrome配置文件路径，MAC 与window 都适用

    Chrome 的配置文件主要用于存储浏览器的相关配置.书签.扩展插件和密码等,Chrome 配置文件会存储在用户计算机的一个单独文件夹当中,当你升级或重装浏览器时,这些已有配置将可以被完整保存下来. ...

  9. [摘录] 当页[ModalRoute.of(context)]路由属性详解

    ModalRoute.of(context) API可以获取当前路由对象,通过它我们可以获取关于当前页面的所有属性: 属性: isActive 当前路由是都位于navigator中:如果该路由acti ...

  10. vue 实现滚动到页面底部开始加载更多

    直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...