初衷

lin-cms是我们林间有风团队开源的一款CMS,它采用目前主流的前后端分离的架构,前端使用vue作为基础框架,后端选择了我们团队大量实践使用的flask作为基础框架。

lin-cms剪彩

你也可以直接查看线上的demo。

得益于前后端分离分离的架构,这套CMS十分灵活,市场上的CMS多是选择服务端渲染的方式,lin-cms由于是前后端分离的方式,因此你可以选择多语言的后端,和多框架的前端。

团队在开源的之初,便已推出了vue的前端版本和flask的后端版本,vue在国内可以说的上是如日中天,受众面极广。而flask在国内确实用的人太少,国内的主流服务端语言都被java、php、node.js、go霸占。因此,在进行调研和诸多权衡后,团队选择了node.js作为第二支持语言。

选型和架构

node.js近几年发展极快,尤其是在工程化的前端,几乎已成标配。在后端方面koa与express双雄争霸,express起步早,发展成熟,生态稳定;而koa更小更轻更易学习,国内已有egg.jsthink.js基于koa的二次框架,显然koa更加具有吸引力。

谈到这里,有一个已经呼之欲出的问题,既然已经有egg.js这样的好框架,为什么不直接选择它了?

之所以不选择egg.js,而是直接用koa,有几个很重要的原因:

  • koa更小更轻更易学习,而我们如果选择了egg.js岂不是直接失去了这个巨大的优点。
  • egg.js已经整合了诸多生态,这些生态并不一定适合我们,或者说我们可以有更好的选择。
  • egg.js已经有插件,扩展等诸多概念,尤其是egg的插件与lin-cms中的插件大相径庭,十分不适合我们再做改变。

lin-cms-koa的整体架构如下:

或者说lin-cms的后端的架构都如上图所示,接下来我们来详细阐述一下lin-cms-koa的整合之路:

  • 在数据库部分,我们整合typeorm作为orm框架,它为lin-cms提供模型创建,数据操作等诸多功能。
  • 数据校验部分,我们整合了class-validator,并提供了一个基础的Form类来方便校验前端传来的数据。
  • 在控制器部分,我们整合了koa-router作为路由框架,并在其基础上提供了Redprint类来进行路由函数的权限控制。
  • 其它...

简单使用

lin-cms开源已有一段时间了,文档均已十分完善了,目前已有一些项目正在使用它进行开发。当然后端还是选择的flask版本,接下来我们使用lin-cms-koa来简单的使用一下lin-cms。

lin-cms前端部分使用起来非常简单,你只需要一点git基础就可以使用了,在lin-cms-vue的官方仓库中的README可以找到如下一段:

# clone the project
git clone https://github.com/TaleLin/lin-cms-vue.git && cd lin-cms-vue# install dependency
npm install# develop
npm run serve
复制代码

如果你通过终端成功的运行了这些命令之后,在浏览器中打开http://localhost:8080/#/login ,你会打开前端的登陆界面。

不过这还不够,我们还需要后端部分。在浏览器中先打开https://github.com/PedroGao/lin-cms-koa,查看lin-cms-koa的相关信息。

当然你也可以跳过查看,直接在终端中运行如下命令:

git clone https://github.com/PedroGao/lin-cms-koa && cd lin-cms-koa
复制代码
npm install
复制代码

接下来:

请确保你拥有 mysql 数据库和 node.js 的运行环境,并创建名为lin-cms2的数据库。

如果你使用 typescript 运行,那么请在ts/app/config/secure.ts中修改你自己的 mysql 配置。

如果你使用 javascript 运行,那么请在js/app/config/secure.js中修改你自己的 mysql 配置。

修改好后,请运行下面的命令,它会在数据库中添加一个超级管理员。

npx jest tests/app/dao/addSuper.test.ts
复制代码

接下来,请选择一个方式运行你的程序。

以 typescript 的方式运行

npm run start:dev
复制代码

将 typescript 编译成 javascript 的方式运行

npm run tsc:prod && npm run start:prod
复制代码

通过 javascript 的方式直接运行

node js/app/starter.js
复制代码

如果一切顺利,后端会监听本地的3000端口,然后我们再次来到lin-cms-vue的前端的文件夹下,打开src/config/index.js文件,修改里面的baseUrlhttp://localhost:3000/,此时webpack会reload你的前端程序,如果它没有,请你再次通过

npm run serve
复制代码

来运行lin-cms-vue这个项目。浏览器再次打开http://localhost:8080/#/login,点击上面的登陆按钮,如果顺利,你会登陆成功进入林间有风页面。

特点

lin-cms-koa是团队在lin-cms上的又一次实现,得益于lin-cms-flask的实现,lin-cms-koa变得更加精炼和易用。lin-cms-koa目前还未进入团队的仓库进行维护,目前只放在了我个人的仓库上,待稳定后便会进入到团队仓库进行维护和发布。

lin-cms-koa分为核心库和实例工程两大部分,核心库——lin-cms-test发布在了npm上,目前还处于测试状态下,以后正式发布会改名。实例工程就是上述的项目了。

lin-cms-koa整体上使用typescript开发,也用了一些ts的特性,之所以用ts,是因为ts对于项目的开发和维护有极大的益处。不过我们也提供了js的版本,即lin-cms-koa/js目录,而目录lin-cms-koa/ts是我们的ts版本,你可以任意选择一个版本进行开发,当然目前不建议直接使用在生产环境中。

js版本的大部分代码是由ts版本编译而来的,但是考虑到二者的差异性,我们做了很多的补丁,主要是js目前不支持装饰器,而我们的参数校验使用到了装饰器,所以我们在js/app/libs/util.js中提供了decoratePropdecorateEntify这两个方法。

在ts中,一个简单的校验类可以这样创建:

export class BookSearchForm extends Form {@IsNotEmpty({ message: "必须传入搜索关键字" })q!: string;
}
复制代码

通过上述的两个函数做补丁,在js中它是这样的:

class BookSearchForm extends Form {}
decorateProp([IsNotEmpty({message: "必须传入搜索关键字"})
], String, BookSearchForm.prototype, "q");
exports.BookSearchForm = BookSearchForm;
复制代码

当然,这样的补丁也被应用在了model类上,你可以查看相关的代码。

总结

lin-cms-koa从一穷二白到今天支持双语言,也只有20天左右的时间,这20天里,它确实花去了我很多的时间。当然,它还不成熟,只能作为我的个人项目进行展示,我们团队会在后续进行诸多测试和改善,它会在不久后正式进入我们的团队仓库,并提供完善的文档。

lin-cms开源不久,我们团队一直在致力于它的发展和完善,如果你感兴趣可以查看官网进行尝试。

用koa开发一套内容管理系统(CMS),支持javascript和typescript双语言相关推荐

  1. laravel开源php棋牌,Simpla: Simpla 是基于 Laravel 的 PHP 框架进行开发的一款开源免费的内容管理系统(CMS)...

    ###Simpla Simpla是基于Laravel的PHP框架进行开发的一款开源免费的内容管理系统(CMS),基于GUN开源协议. Simpla实现了一些基础功能,采用主题和模块的方式进行功能上的扩 ...

  2. Lerx开源网站内容管理系统(CMS) v6.5 以Java+MySQL进行开发的内容管理系统源码

    介绍 Lerx 开源网站内容管理系统(CMS)是一个以Java+MySQL进行开发的内容管理系统源码. Lerx 开源网站内容管理系统(CMS)特点: 1.跨平台设计,能无差别运行于Windows.L ...

  3. 我的内容管理系统(CMS)寻找历程 -- Mambo出鞘,谁与争锋?

    浪三 Mambo中国mambochina.net 如果你也象我一样,一直苦苦寻找合适的网站内容管理系统,那么本文可作为一个参考. 在为时半年的漫漫内容管理系统寻找历程中,Drupal.Tikiwiki ...

  4. 内容管理系统(CMS)的设计和选型

    J2EE相关: 内容管理系统(CMS)的设计和选型 发表于 Tuesday, July 27 @ 11:36:07 CST by joezxh joe.zhang 投递 "作者: 车东 Em ...

  5. 动态可缓存的内容管理系统(CMS)

    关键词:cache squid 动态可缓存内容管理系统 内容管理系统 CMS 摘要:内容管理系统(CMS)在各大商业站点和门户站点中扮演着重要的角色,是内容有效组织和快速发布极为重要的基础平台.目前主 ...

  6. 手机导航列表页面瀑布流图片无限加载代码_搭建内容管理系统CMS(3):从原理、需求到设计,一文看懂动态化页面...

    Sue前面分享的两篇文章,介绍了内容管理系统(CMS)关于内容生产和内容过滤的部分.那么被生产出来并通过过滤的内容,如何呈现给我们的内容消费者呢? 我们都知道,在客户端上的开发实现,版本一旦发布了出去 ...

  7. 利用Laravel实现内容管理系统(CMS)

    利用Laravel实现内容管理系统(CMS) CMS系统简介 CMS是Content Management System的缩写,意为"内同管理系统". CMS一般分为两个部分:前端 ...

  8. ASP.NET 5个著名内容管理系统CMS

    原:http://www.open-open.com/news/view/781ca6 1. N2CMS是由C#编写的一个CMS 开源框架,它是一个轻量级的CMS网站解决方案,支持多种数据库,包括MS ...

  9. mysql开发cms_YzmCMS开源内容管理系统

    YzmCMS V5.4 正式版 YzmCMS是一款轻量级开源内容管理系统,它采用OOP(面向对象)方式自主开发的框架.基于PHP+Mysql架构,并采用MVC框架式开发的一款高效开源的内容管理系统,可 ...

最新文章

  1. 这个VS Code扩展可以自动生成Python文档字符串
  2. linux下echo指令
  3. 简单的dns解析过程
  4. RUNOOB python练习题37 对一个序列的数进行排序
  5. 如何了解Google Analytics(分析)和网站访问量
  6. RuntimeException 和 Exception 区别、异常的子父级关系
  7. 一篇文章搞懂架构师的核心技能
  8. 【机器学习】机器学习中的异常值的识别和处理
  9. Hive分区(静态分区+动态分区)
  10. 如何在 Keras 中开发具有注意力的编码器-解码器模型
  11. php mysql delete_PHP MySQL Delete
  12. Imc手机连环画PC阅读器
  13. 图嵌入方法基础学习之Node2vec
  14. 模电学习1. 三极管基础知识及常用电路
  15. 如何把JPG图片转换成Word文字?
  16. [bzoj2827]千山鸟飞绝【splay】
  17. 关于亚健康(KK记)
  18. IDA动态调试so 指南
  19. 微信小程序遇到的问题及解决办法
  20. FTM(FlexTimerModule)TIMER总结

热门文章

  1. 人工不智能,AI产品经理要帮助用户认清这一现实
  2. 量子科技概念大火,国内现状如何?
  3. 十张图说明机器学习在S/4中的应用
  4. Facebook TensorMask:一种新的密集滑动窗口分割技术
  5. 科大讯飞与优刻得、寒武纪等联合设立合肥智能语音创新发展有限公司
  6. 关于自动驾驶汽车的7大误解
  7. 百倍提升张量计算:谷歌开源TensorNetwork
  8. 500万张图片,20万处地标风景,谷歌又放出大型数据集
  9. 线性回归模型原理及推导
  10. 10个机器学习的JavaScript示例