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.jsconst 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 directoryapp.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:alpineLABEL AUTHOR="dalongrong"LABEL EMAIL="1141591465@qq.com"WORKDIR /appCOPY index.js /app/index.jsCOPY package.json /app/package.jsonCOPY yarn.lock /app/yarn.lockRUN yarnEXPOSE 3000ENTRYPOINT [ "yarn","a" ]- web dockerfile
基于nginx
FROM openresty/openresty:1.15.8.2-1-alpineCOPY index.html /app/COPY falcor.browser.min.js /app/EXPOSE 8080COPY 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/
