lowcode-cms开源社区源码设计分享

news/2024/7/10 20:58:35 标签: 开源, 低代码

1eeff9520d544e55bb3303182f44a79a.png

开源背景

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

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

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

系统设计架构
5e545586e407b4876398afe393a902b9.png

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

内容端架构设计

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

00c88ccbb36d760b51d0462d67a91140.png

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

596f6034163b5d037eda6e97262cab2e.png

大家可以在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());

2. ssr路由数据直出

这块主要是基于用户发起的请求, 在服务端格式化好数据供 pug 消费:

/**
 * 文章路由
 * @param {*} router
 * @param {*} apiPath
 */
const pageRenderRouter = (router) => {
  // api路径
  const api = {
    // 渲染首页
    index: "/",
    // 最佳实践列表
    bestPractice: "/best-practice",
    product: "/product",
    video: "/video",
    note: "/note",
    login: "/login",
    // 其他渲染路由...
  };
  // 内容端导航配置
  const nav = [
    {
      id: "0",
      title: "最佳实践",
      link: "/best-practice"
    },
    {
      id: "1",
      title: "行业产品",
      link: "/product"
    },
    {
      id: "3",
      title: "视频",
      link: "/video"
    },
    {
      id: "4",
      title: "手记",
      link: "/note"
    },
    {
      id: "5",
      title: "关于",
      link: "/about"
    },
  ]

  const copyright = "版权所有 @lowcode可视化社区"

  // 登录
  router.get(api.login, async (ctx) => {
    await ctx.render("login", {
      url: api.login,
      title: "登录",
      description: "新用户?",
      href: "去注册",
      firstInput: "邮箱",
      twoInput: "密码",
      btnText: "登录",
      logoText: "Dooring低代码社区",
    });
  });

  // 渲染首页
  router.get(api.index, async (ctx) => {
    const filePath = `${config.publicPath}/db/homeConfig.json`;
    const articlesPath = `${config.publicPath}/db/article_index.json`;
    const productsPath = `${config.publicPath}/db/product_index.json`;
    const videosPath = `${config.publicPath}/db/video_index.json`;
    const homeConfig = RF(filePath);
    const articles = RF(articlesPath);
    const products = RF(productsPath);
    const videos = RF(videosPath);
    await ctx.render("index", {
      nav,
      articles: articles.filter(v => v.review === 1).slice(0, 6),
      products: products.filter(v => v.review === 1).slice(0, 6),
      videos: videos.filter(v => v.review === 1).slice(0, 6),
      copyright,
      ...homeConfig
    });

    // 统计访问量
    const viewPath = `${config.publicPath}/db/views.json`;
    const views = RF(viewPath);
    WF(viewPath, {...views, home: views.home + 1});
  });

  // 渲染文章详情页
  router.get(api.articleDetail, async (ctx) => {
    const id = ctx.query.fid;
    const articlePath = `${config.publicPath}/db/articles/${id}.json`;
    const commentPath = `${config.publicPath}/db/comments/${id}.json`;
    const article = RF(articlePath) || {};
    const comments = RF(commentPath) || {};
    comments.views = comments.views + 1;
    await ctx.render("article_detail", {
      nav,
      viewTitle: article.title,
      topImg: article.img,
      authorInfo: { name: article.author, date: formatTime(article.ct, "-") },
      cate: article.cate,
      val:  article.type ? marked(article.val) : article.val,
      commentInfoList: comments.comments || [],
      flover: comments.flover,
      views: comments.views || 0,
      copyright,
    });
    WF(commentPath, comments);
  });

  // 其他页面渲染服务逻辑...
  });
};

export default pageRenderRouter;

3. 模版消费

这里给大家参考一个我写的 pug 页面的例子:

ff8de28d286828c78bb645ca3bb167b4.png

大家感兴趣的可以参考一下具体的实现:

https://github.com/MrXujiang/lowcode-cms

服务端架构设计

9c6be8b39ce551ca75569a9f5fe4aa3b.png

服务端本质上主要实现两块能力:

  • 内容端页面渲染(SSR)

  • 后台API和三方接口服务对接

服务端我参考了通用后端服务的 MVC 模式, 基于 koa2 搭建了一个简易的服务端 MVC 模型, 如下是一个服务端的代码目录:

5d8c1e455a88028a6d2d177fa0d54211.png

主要实现的核心模块有:

  • 静态资源服务器

  • 微信分享, CDN上传等第三方服务模块

  • api路由

  • 中间件模块

  • 资源上传模块

  • 用户权限模块

  • ssr服务模块

如果搭建感兴趣可以参考 github 中具体的实现代码:

https://github.com/MrXujiang/lowcode-cms

管理端系统架构设计

7e41c87fc02b3fb956ebeaeed3c1f242.png 99a2a010efabf02332e1c7e0c022d751.png

管理端采用的是 umi + react + antd4.0 实现的, 当然封装了很多成熟的插件模块, 比如说 富文本编辑器, md编辑器, 文件上传模块等, 大家可以在学习源码的过程中受益非浅.

436181bbe988c85d58d3c48ac5b4da12.png

上图就是编辑模块, 我封装了实时预览 md 和富文本的模块, 大家可以拿来即用.

本地运行

1. 目录介绍

  • server 基于nodejs的服务端, 启动后可直接访问3000 端口, 也就是内容SSR端

  • admin CMS的管理后台, 集成了用户管理, 内容审核, 内容发布, 数据统计等模块

开箱即用~~

2. 本地启动

  1. server端

# 进入server目录
cd server
# 安装依赖
yarn
# 服务端启动
yarn start

注: 如果是window系统, 可以执行 yarn start:win

  1. 管理端

# 进入admin目录
cd admin
# 安装依赖
yarn
# 启动
yarn start

初始化账号: super_123, 密码: zxzk_123

  1. 内容端

访问3000端口即可.

部署发布

推荐使用 pm2 来管理 Node 服务进程, 只需要把 server 端上传到服务器, 安装对应依赖, 用 pm2 启动即可:

pm2 start server/dist

有关 pm2 相关问题可以在我往期的文章中学习参考.

如何参与贡献和问题反馈

如果大家有好的建议或者想法, 可以在 github 上提 pr 或者 issue 来共建, 或者在《趣谈前端》公众号中和我反馈.

github: https://github.com/MrXujiang/lowcode-cms


http://www.niftyadmin.cn/n/319967.html

相关文章

SQL 教程

SQL 教程

SQL 教程 SQL 简介SQL 是什么？SQL 能做什么？SQL 是一种标准 SQL 语法 SQL 是用于访问和处理数据库的标准的计算机语言。 实例 SELECT * FROM Websites;SQL 简介 SQL (Structured Query Language:结构化查询语言) 是用于管理关系数据库管理系统&#xff…
阅读更多...
蓝桥杯模块学习2——LED灯

蓝桥杯模块学习2——LED灯

第一章 硬件部分 1.1 为什么要了解硬件部分？ 比赛的时候会给出原理图，如果我们能够深入的理解硬件，就可以从中推导出代码应该怎样写，而不用死记硬背 1.2 电路的组成部分 1.2.1 74HC573锁存器 原理图： ​​​​​​​…
阅读更多...
ChatGPT的诞生和发展

ChatGPT的诞生和发展

ChatGPT的诞生和发展 ChatGPT是一种基于GPT模型的聊天机器人。GPT模型是一种基于深度学习的自然语言处理模型，由OpenAI团队开发，可以生成与输入文本相关的连续文本。ChatGPT的诞生和发展，可以追溯到GPT模型的开发与应用。 一、GPT模型的开…
阅读更多...
企业如何提高销售对CRM的使用率

企业如何提高销售对CRM的使用率

CRM销售管理系统是帮助企业管理销售和客户的工具。它使企业能够跟踪和分析客户行为，管理客户关系，从而提高销售线索转化率。尽管CRM系统有着诸多的好处，但CRM的使用率往往很低，尤其是在销售团队中。为什么CRM使用率低销售不爱用&a…
阅读更多...
如何优雅得关闭协程呢

如何优雅得关闭协程呢

1.简介 本文将介绍首先为什么需要主动关闭goroutine，并介绍如何在Go语言中关闭goroutine的常见套路,包括传递终止信号和协程内部捕捉终止信号。之后，文章列举了需要主动关闭协程运行的常见场景，如启动一个协程执行一个不断重复的任务。希望通…
阅读更多...
力扣sql中等篇练习(十九)

力扣sql中等篇练习(十九)

力扣sql中等篇练习(十九) 1 苹果和桔子的个数 1.1 题目内容 1.1.1 基本题目信息1 1.1.2 基本题目信息2 1.1.3 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 # 没有使用group by也可以使用sum函数,因为默认是所有数据行自成一组 SELECT SUM(b.apple_countIFNULL(c.…
阅读更多...
HBase的RowKey设计原则

HBase的RowKey设计原则

Hbase是三维有序存储的，通过rowkey（行键），column key（column family和qualifier）和TimeStamp（时间戳）这个三个维度可以对HBase中的数据进行快速定位。 HBase中rowkey可以唯一标识一行…
阅读更多...
open3d教程(一)：open3d的安装和测试（Python版本）

open3d教程(一)：open3d的安装和测试（Python版本）

1 介绍 Open3d：用于3D数据处理的现代库。 Open3D 是一个开源库，支持快速开发处理 3D 数据的软件。 Open3D 前端在 C++ 和 Python 中公开了一组精心挑选的数据结构和算法。后端经过高度优化，并设置为并行化。我们欢迎来自开源社区的贡献。 2 Open3d安装和测试 2.1 Python…
阅读更多...
最新文章

Copyright @ 2022~2023