podium layout 说明

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