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"
启动&&效果
- 启动
docker-compose up -d
- 效果
说明
falcor 提供了一套自己json graph 同时包含了一套很方便的查询语言，后续会在写相关的使用
