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