标签:script pen gui register efault 选择 async watch middle
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);
const CustomContext = require(‘my-custom-context-parser‘);
?
?
// Register custom context with layout
layout.context.register(‘my-custom-context‘, new CustomContext());
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 } }),
]);
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.js({ value: `http://my-podlet.com/assets/scripts.js` });
podlet.css({ value: `http://my-podlet.com/assets/styles.js` });
实际上这种不对于资源的处理需要的layout 端的
app.use(‘/assets‘, express.static(‘assets‘));
app.get(‘/‘, (req, res) => {
res.podiumSend(`<div>Content goes here</div>`);
});
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"
}
]
https://podium-lib.io/docs/layout/getting_started
https://podium-lib.io/docs/api/document
https://github.com/rongfengliang/podium-docker-compose
标签:script pen gui register efault 选择 async watch middle
原文地址:https://www.cnblogs.com/rongfengliang/p/11412325.html