podium layout 说明
2024-09-08 03:05:47
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
最新文章
- C的数值取反操作
- SQL Server 索引设计指南
- ecshop团购显示“库存不足”
- 黑马程序员_JAVA之银行业务调度系统
- php中正则表达式的匹配和数据验证总结
- Bootstrap CSS 描述
- Golang学习 - reflect 包
- CustomViewWith_Image_Text_Video
- Java 常调用的Webservice接口的方法
- vsftpd配置虚拟用户
- 前端如何处理emoji表情
- python_flask 基础巩固(自定义URL转换器)
- MR目录结构
- Go学习笔记(一)安装Go语言环境
- Jsp获取Java的对象(JavaBean)
- Oracle备份提示,EXP-00091: 正在导出有问题的统计信息。
- 设计模式之复合模式(Compound Pattern)
- linux服务器上修改oracle数据库的字符集
- Django Restframework 实践(二)
- win7无法登陆linux samba共享
热门文章
- Java学习:接口(interface)的使用于注意事项
- 50道Java线程面试题分析及答案
- HeRaNO&#39;s NOIP CSP Round Day 2 T3 ginkgo
- python3.6安装pyinstaller报错:AttributeError: module &#39;enum&#39; has no attribute &#39;IntFlag&#39;
- Python pip安装第三方库的国内镜像
- vue中对象数组去重
- vue组件6 使用vue添加样式
- 11、多行文本最后一行显示省略号并截取文本字数(vue)
- 【Nginx】使用certbot安装免费https证书使Nginx支持Https请求
- Httpd服务进阶知识-LAMP架构概述