podium podlets 说明

podlets 提供了一个页面片段服务，podlets 包含了一些元数据信息，通过json 暴露，

主要包含以下内容

• 一个 http endpoint 提供主要内容
• 一个 http endpoint 提供fallback 功能，方便在主要内容不可读的时候提供访问
• 一些客户端js文件 的http endpoint 集合
• 一些客户端css 文件的http endpoint 集合
• http endpoint 需要是公共可访问的

podlets 开发

可以通过@podium/podlet 开发podlets

• podlets 简单代码
  @podium/podlet 提供了好几种框架的支持
  一个简单express 的demo

const express = require('express');

const Podlet = require('@podium/podlet');

​

const app = express();

​

const podlet = new Podlet({

    name: 'myPodlet',

    version: '1.0.0',

    pathname: '/',

    content: '/',

    fallback: '/fallback',

    development: true,

});

​

app.use(podlet.middleware());

​

app.get(podlet.content(), (req, res) => {

    res.status(200).podiumSend(`

        <div>

            This is the podlet's HTML content

        </div>

    `);

});

​

app.get(podlet.manifest(), (req, res) => {

    res.status(200).send(podlet);

});

​

app.listen(7100);

 

 

• fallback
  参考格式

const podlet = new Podlet(/*...*/);

​

const app = express();

​

app.get(podlet.fallback(), (req, res) => {

    res.status(200).podiumSend("<div>It didn't work :(</div>");

});

 

• context 配置
  context 暴露的对象，可以方便用来进行不同语言不同设备以及不同开发模式的处理(进行渲染处理)
  比如获取区域

 

app.use((req, res, next) => {

    // res.locals.podium.context.locale

    next();

});

 

获取不同设备

app.get('/', (req, res, next) => {

    // res.locals.podium.context.deviceType

});

 

同时我们也可以设置默认的值

// Set default locale to Norwegian

podlet.defaults({

    locale: 'nb-NO',

});

• proxy
  因为podlets 并不强制大家运行podlet 以及layout 服务，我们也可以处理其他api 的地址
  参考配置：

podlet.proxy({ target: '/api', name: 'api' });

​

app.get('/api/cats', (req, res) => {

    res.json([{ name: 'fluffy' }]);

});

// http://localhost:1337/myLayout/podium-resource/myPodlet/api/cats

​

app.get('/api/dogs', (req, res) => {

    res.json([{ name: 'rover' }]);

});

// http://localhost:1337/myLayout/podium-resource/myPodlet/api/dogs

 

 

• 本地开发环境配置以及问题解决

reload 问题：
通过nodemon 解决

npx nodemon server.js

开发模式：

   development: true,

context 默认值处理

podlet.defaults({

    mountOrigin: 'http://localhost:7100',

});

css&&js

podlet.js({ value: 'http://cdn.mysite.com/scripts.js' });

podlet.css({ value: 'http://cdn.mysite.com/styles.css' });

 

代理绝对路径

podlet.proxy({ target: 'http://google.com', name: 'google' });

参考资料

https://podium-lib.io/docs/podlet/getting_started
https://github.com/rongfengliang/podium-docker-compose