layout 主要是进行podlets 的组合，同时也提供了context ，fallback，以及传递参数的处理
基本代码
const express = require('express');
const Layout = require('@podium/layout');
const app = express();
const layout = new Layout({
name: 'myLayout',
pathname: '/demo',
});
const podlet = layout.client.register({
name: 'myPodlet',
uri: 'http://localhost:7100/manifest.json',
});
app.use(layout.middleware());
app.get('/demo', async (req, res) => {
const incoming = res.locals.podium;
const response = await podlet.fetch(incoming);
incoming.view.title = 'My Super Page';
res.podiumSend(`<div>${response}</div>`);
});
app.listen(7000);
context
- 自定义context
比如进行header 的处理，对于不同规则传递不同后端
const CustomContext = require('my-custom-context-parser');
// Register custom context with layout
layout.context.register('my-custom-context', new CustomContext());
处理podlet 不可用
- 超时定义
const layout = new Layout({
client: {
timeout: 2000,
}
});
- 异常处理
const gettingStarted = layout.client.register({
throwable: true,
})
依赖拦截处理
app.get('/', (req, res, next) => {
try {
const content = await gettingStarted.fetch(res.locals.podium);
} catch(err) {
// you might handle this directly...
// res.status(500).send('The getting started guide is currently unavailable');
// or perhaps just pass the error on to be handled in error handling middleware
// next(err);
}
});
查询参数传递
- 传递查询参数
const content = await Promise.all([
searchField.fetch(incoming, { query: { search: req.query.search } }),
searchResults.fetch(incoming, { query: { search: req.query.search } }),
]);
- 传递pathname
layout 端：
const content = podlet.fetch(incoming, { pathname: '/andrew' });
podlet 端：
app.get('/:name', (req, res) => {
// req.params.name => andrew
});
说明如果content 路由不是/ 而是/content 的需要参考如下修改：
const podlet = new Podlet({
content: '/content',
});
app.get('/content/:name', (req, res) => {
// req.params.name => andrew
});
资源处理
资源主要是css 以及js 文件，以下为几种处理方式
- podlet 基于暴露的api 提供css 以及js 的
podlet.js({ value: `http://my-podlet.com/assets/scripts.js` });
podlet.css({ value: `http://my-podlet.com/assets/styles.js` });
- 通过express 提供资源处理
实际上这种不对于资源的处理需要的layout 端的
app.use('/assets', express.static('assets'));
- podiumSend 以及文档模版自己编写资源处理
app.get('/', (req, res) => {
res.podiumSend(`<div>Content goes here</div>`);
});
- 通过cdn 提供资源服务
这种适合有资源的情况，一般是偏大的项目
关于本地开发模式的配置
- 使用forever提升开发体验
运行方式：
forever start /path/to/development.json
json 配置文件（主要是关于podlet 以及layout 服务）
参考格式：
[
{
"uid": "header",
"append": true,
"watch": true,
"script": "index.js",
"sourceDir": "/path/to/podlets/header"
},
{
"uid": "navigation",
"append": true,
"watch": true,
"script": "index.js",
"sourceDir": "/path/to/podlets/navigation"
},
{
"uid": "home",
"append": true,
"watch": true,
"script": "index.js",
"sourceDir": "/path/to/podlets/home"
},
{
"uid": "footer",
"append": true,
"watch": true,
"script": "index.js",
"sourceDir": "/path/to/podlets/footer"
},
{
"uid": "homePage",
"append": true,
"watch": true,
"script": "index.js",
"sourceDir": "/path/to/layouts/home"
}
]
- 使用pm2
类似的工具，pm2 做为实际项目的运行工具是一个很不错的选择
参考资料
https://podium-lib.io/docs/layout/getting_started
https://podium-lib.io/docs/api/document
https://github.com/rongfengliang/podium-docker-compose