Falcor 学习一基本使用

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"