用koa开辟一套内容管理体系(CMS),支撑javascript和typescript双言语

初志

lin-cms是我们林间有风团队开源的一款CMS,它采纳现在主流的前后端星散的架构,前端运用vue作为基本框架,后端挑选了我们团队大批实践运用的flask作为基本框架。

lin-cms剪彩
《用koa开辟一套内容管理体系(CMS),支撑javascript和typescript双言语》

《用koa开辟一套内容管理体系(CMS),支撑javascript和typescript双言语》

你也能够直接检察线上的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的团体架构以下:
《用koa开辟一套内容管理体系(CMS),支撑javascript和typescript双言语》

或者说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开源不久,我们团队一直在致力于它的生长和完美,假如你感兴趣能够检察官网举行尝试。

    原文作者:PedroGao
    原文地址: https://segmentfault.com/a/1190000018255050
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞