码迷,mamicode.com
首页 > 其他好文 > 详细

podium layout 说明

时间:2019-08-26 15:24:32      阅读:115      评论:0      收藏:0      [点我收藏+]

标签: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);
 
 

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

podium layout 说明

标签:script   pen   gui   register   efault   选择   async   watch   middle   

原文地址:https://www.cnblogs.com/rongfengliang/p/11412325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!