开源背景

lowcode可视化社区 是我之前在设计研发 Dooring低代码 平台时开发的一个面向低代码内容分享的知识社区, 内容端采用 SSR 技术来渲染页面, 对 SEO 更加友好, 同时后端服务采用 Nodejs 来实现, 内容端和服务端同端, 也就是传说中的内容服务“同构”. 管理端采用前端最最流行的 React hooks 来实现, 无论是技术人员还是非技术人员, 通过简单的操作就可以轻松部署一套专属自己的 CMS 系统。

本着满满的开源精神, 我对这套 CMS 系统进行了开源, 让更多技术小白或者非技术人员, 可以轻松部署自己的网站。

接下来我会从技术的角度, 分享一下我开源的 lowcode-cms 系统的技术实现, 以及如何本地运行 + 部署这套开箱即用的 CMS 系统。

系统设计架构

接下来我会具体和大家介绍一下管理端, 内容端, 服务端的技术架构。内容端架构设计

内容端主要用来展现个人或者企业的内容信息, 相当于一个门户站, 这里为了更好的 SEO, 我采用了模版引擎来渲染 html, 也就是koa-views +  pug 模式, 具体界面如下:

当然这只是首页模块, 还有诸如行业产品, 最佳实践, 视频, 手记等, 这里就不一一介绍了, 大家如果会编程的话, 也可以自定义自己的模块页面. 我们接下来看看具体的技术实现。

大家可以在github中server的views目录下看到每个渲染层的具体实现, 这里和大家分享一下 lowcode-cms 搭建的ssr模式。

1、配置pug支持

import koa from "koa";
import views from "koa-views";

// ... (此处省略服务端自治的部分代码)

// 挂载路由
glob.sync(`${config.routerPath}/*.js`).forEach((item) => {
  require(item).default(router, config.API_VERSION_PATH);
});

//使用模版引擎
app.use(views(resolve(__dirname, "./views"), { extension: "pug" }));

app.use(router.routes()).use(router.allowedMethods());