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. Luogu5611 Ynoi2013 D2T2/牛客挑战赛32F 最大子段和 分块、分治

    传送门 之前一直咕着的,因为一些特殊的原因把这道题更掉算了-- 有一个对值域莫队+线段树的做法,复杂度\(O(n\sqrt{n} \log n)\)然而牛客机子实在太慢了没有希望(Luogu上精细实现 ...

  2. Java之利用Freemarker模板引擎实现代码生成器，提高效率

    https://blog.csdn.net/huangwenyi1010/article/details/71249258  java模板引擎freemarker代码生成器 更多 个人分类: 一步一步 ...

  3. YAML语言简明教程

    编程免不了要写配置文件,如果你还在用xml/ini/json,就有点过时了,怎么写配置也是一门学问. YAML 是专门用来写配置文件的语言,非常简洁和强大,远比 JSON 格式方便. 本文介绍 YAM ...

  4. react 使用的小建议

    使用pureRender,setState和Immutable.js来操作state Immutable 中文意思不可变. 不能直接修改state的值,要用setState 和Immutable re ...

  5. Django--FBV + CBV

    目录 FBV + CBV FBV(function bases views) FBV中加装饰器相关 CBV(class bases views) CBV中加装饰器相关 FBV + CBV django ...

  6. 很带劲，Android9.0可以在i.MX8开发板上这样跑

    米尔MYD-JX8MX开发板移植了Android9.0操作系统,现阶段最高版本的Android9.0操作系统将给您的产品在安全与稳定性方面带来更大的提升.可惜了,这里不能上传视频在i.MX8开发板跑A ...

  7. android studio学习----调试---断点调试

    Android Studio调试其实也非常方便,一般问题直接通过AS的DDMS的Logcat就可以搞定.AS支持类似Eclipse的DDMS的所有功能.这里要说的是疑难问题的调试方式,即断点调试. 首 ...

  8. Cheat Engine 人造指针

    打开游戏 查看内存区域 查看游戏当前使用的内存区域 下面这一段是游戏当前使用的内存区域,选择一片可以读写的内存区域 跳转到这片内存 查看是否有空余内存可以使用 使用空闲内存 我们选择0075DFD0开 ...

  9. Idea热部署插件JRebel

    安装部署:https://blog.csdn.net/weixin_42831477/article/details/82229436 Jrebel不生效的原因和解决办法:https://www.cn ...

  10. python的包管理软件Conda的用法

    创建自己的虚拟环境 conda create -n learn python= 切换环境: activate learn 查看所有环境: conda env list 安装第三方包: conda in ...