从零打造一款轻量且天然支持SSR的CMS系统-SimpleCMS

2年前笔者开发了一款基于 nodejs 的全栈开源 cms 系统 XPCMS, 主要是为了解决技术开发者搭建自身内容平台的局限以及降低使用成本, 虽然1.0版本已经完成, 但是从整体部署和二次开发的便捷度上还是存在很多缺点, 更加适合有一定技术能力的开发者来使用.

公司主营业务：成都网站设计、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出聂拉木免费做网站回馈大家。

为了解决 XPCMS 的不足, 去年笔者和朋友特地开发了一款轻量便捷的内容管理系统——simpleCMS, 目前已在 github 上开源, 且能同时适配PC端和移动端.

目前市面上已经有很多成熟的 cms 系统, 比如 worldPress, 博客系统 hexo, 对于技术开发者来说使用和部署很简单, 但是定制和自定义扩展方面, 却需要一定的技术门槛和开发成本.

基于以上一些痛点和局限, 我们开发了一款简单易用, 且天然支持服务端渲染(SSR)的全栈 cms 系统, 方便大家轻松定制自己的博客网站. 笔者接下来就来带大家一起分析 simpleCMS 的功能和技术实现.

技术架构和实现方案

为了降低大家的使用和部署成本, 我们采用了如下技术实现:

  • 服务层: koa2 + nodejs + jsonSchema(当然其中还使用了很多nodejs中间件)
  • 前台页面: pug(结合nodejs实现前后端同构, 且天然的SSR)
  • 后台管理: umi3.0 + react + antd + axios + typescript(当然还用了很多前端插件, 比如富文本, md编辑器)
  • 系统/服务器相关: linux / pm2 / nginx

基本架构模式如下图所示:

系统页面架构图:

功能分析

接下来笔者就来介绍 simpleCMS 的功能点. 我们先来分析一下后台管理系统.

后台管理系统功能分析

后台管理系统是动态博客系统必备的模块, 它能很方便的管理我们的网站数据. 这里笔者先来带大家看一下后台管理系统的基本模块:

  • 登录页面
  • 数据大盘
  • 内容管理
  • 页面配置
  • 广告配置
  • 用户信息管理
  • 多语言支持

以上是 cms 管理系统必备的模块, 这里我们基本上采用react hooks 来写, 具体页面如下:

1 登录页面

2 数据大盘

3 文章管理

4 内容编辑

5 多语言支持

其他页面就不一一展示了, 感兴趣的朋友可以体验一下. 主要技术采用 umi + antd + react + typescript 实现, 感兴趣可以在 github 上参考学习.

前台基本功能分析

前台主要是我们的博客网站, 这里采用 pug 这个模版引擎来实现, 交互功能使用大家最熟悉的jquery.前台基本模块有:

  • 博客首页
  • 文章列表页
  • 文章详情页

对应的交互功能有点赞, 评论, 文章搜索功能等, 基本页面如下:

1 首页

2 列表页

3 详情页

4 评论和点赞

由于pug模版引擎适合做一些展示型的网站, 所以非常适合用在cms系统中, 我们也可以使用ejs等模版引擎.

技术实现细节

由于整个cms 系统是一个完整的技术闭环, 数据流转都是相关的, 这里笔者主要总结一下实现一个cms的技术细节.

  • 数据统计功能实现 —— 采用nodejs定时任务(node-schedule)
  • 富文本和md编辑器实现
  • 后台多语言实现方案
  • 内容管理流程设计
  • pug 模版和数据交互
  • jsonSchema 数据结构设计
  • 手写简单加密解密算法
  • 跨域解决方案以及用户权限设计
  • pm2管理node进程以及做负载均衡
  • 多进程场景下的并发锁设计

数据统计功能实现

数据统计主要是统计网站的pv, 单篇文章阅读量和点赞量, 为了更好的进行分析我们需要对单日的数据进行统计和存库, 具体实现就是利用定时任务在一天结束前进行数据的统计, 这里我们用 node-schedule来实现, 具体使用方式笔者也在之前的文章中做了介绍, 感兴趣可以参考一下.

基本使用如下:

 
 
 
 
    
  
  
  
  
  1. let schedule = require('node-schedule'); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. let testJob = schedule.scheduleJob('42 * * * *', function(){ 
    4.   
  
  
  
  4.   console.log('将在未来的每个时刻的42分时执行此代码, 比如22:42, 23:42'); 
    5.   
  
  
  
  5. }); 
    6.

富文本和md编辑器方案实现

这里我们用的富文本组件是braft, 功能和可扩展性基本满足业务需求, md编辑器是程序员写博客的基本方式, 这里主要采用了for-editor, 其次就是对其进行了二次封装来实现支持剪切板功能.

国际化方案

多语言主要使用的react-intl, 由于umi 对其有很好的集成, 所以说我们只需要搭建基本的多语言规则即可. 比如在项目目录里建立locales文件夹, 然后存放zh(中文)/en(英文)文件即可, 基本的代码如下:

 
 
 
 
    
  
  
  
  
  1. // locales/en/user 
    2.   
  
  
  
  2. export default { 
    3.   
  
  
  
  3.   simpleCMS_DESC: 'Easy to use CMS system, help everyone to have their own website blog.', 
    4.   
  
  
  
  4.   CopyrightText: 'SimpleCMS r&d team', 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. // locales/zh/user 
    8.   
  
  
  
  8. export default { 
    9.   
  
  
  
  9.   simpleCMS_DESC: '简单易用的cms系统, 助力每个人都能拥有自己的网站博客。', 
    10.   
  
  
  
  10.   CopyrightText: 'SimpleCMS 研发团队' 
    11.   
  
  
  
  11. } 
    12.

 如果对多语言实现方案感兴趣的, 可以参考simpleCMS源码.

本文标题：从零打造一款轻量且天然支持SSR的CMS系统-SimpleCMS
当前URL：http://www.hantingmc.com/qtweb/news47/48447.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制开发知识

分类信息网

成都服务器租用　　 　成都手机网站建设　　 　成都主机托管　　 　成都服装定制　　 　云虚拟主机　　 　禾巨建站　　 　微信小程序公众号开发　　 　快照排名　　 　郫县封阳台　　 　衣柜书柜酒柜定制　　 　四川服务器托管　　 　seo网络营销推广　　 　二枢服务器托管　　 　网站推广　　 　店面门头广告　　 　成都外贸网站建设公司　　 　成都响应式网站建设　　 　高端网站策划　　 　成都网站建设　　 　关键词优化