用koa開發(fā)一套內(nèi)容管理系統(tǒng)（CMS），支持javascript和typescript雙語(yǔ)言

lncwwn 發(fā)布于2019-08-23 15:24 / 749人閱讀

摘要：而在國(guó)內(nèi)確實(shí)用的人太少，國(guó)內(nèi)的主流服務(wù)端語(yǔ)言都被霸占。因此，在進(jìn)行調(diào)研和諸多權(quán)衡后，團(tuán)隊(duì)選擇了作為第二支持語(yǔ)言。整體上使用開發(fā)，也用了一些的特性，之所以用，是因?yàn)閷?duì)于項(xiàng)目的開發(fā)和維護(hù)有極大的益處。

初衷

lin-cms是我們林間有風(fēng)團(tuán)隊(duì)開源的一款CMS，它采用目前主流的前后端分離的架構(gòu)，前端使用vue作為基礎(chǔ)框架，后端選擇了我們團(tuán)隊(duì)大量實(shí)踐使用的flask作為基礎(chǔ)框架。

lin-cms剪彩

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

得益于前后端分離分離的架構(gòu)，這套CMS十分靈活，市場(chǎng)上的CMS多是選擇服務(wù)端渲染的方式，lin-cms由于是前后端分離的方式，因此你可以選擇多語(yǔ)言的后端，和多框架的前端。

團(tuán)隊(duì)在開源的之初，便已推出了vue的前端版本和flask的后端版本，vue在國(guó)內(nèi)可以說(shuō)的上是如日中天，受眾面極廣。而flask在國(guó)內(nèi)確實(shí)用的人太少，國(guó)內(nèi)的主流服務(wù)端語(yǔ)言都被java、php、node.js、go霸占。因此，在進(jìn)行調(diào)研和諸多權(quán)衡后，團(tuán)隊(duì)選擇了node.js作為第二支持語(yǔ)言。

選型和架構(gòu)

node.js近幾年發(fā)展極快，尤其是在工程化的前端，幾乎已成標(biāo)配。在后端方面koa與express雙雄爭(zhēng)霸，express起步早，發(fā)展成熟，生態(tài)穩(wěn)定；而koa更小更輕更易學(xué)習(xí)，國(guó)內(nèi)已有egg.js和think.js基于koa的二次框架，顯然koa更加具有吸引力。

談到這里，有一個(gè)已經(jīng)呼之欲出的問(wèn)題，既然已經(jīng)有egg.js這樣的好框架，為什么不直接選擇它了？

之所以不選擇egg.js，而是直接用koa，有幾個(gè)很重要的原因：

koa更小更輕更易學(xué)習(xí)，而我們?nèi)绻x擇了egg.js豈不是直接失去了這個(gè)巨大的優(yōu)點(diǎn)。

egg.js已經(jīng)整合了諸多生態(tài)，這些生態(tài)并不一定適合我們，或者說(shuō)我們可以有更好的選擇。

egg.js已經(jīng)有插件，擴(kuò)展等諸多概念，尤其是egg的插件與lin-cms中的插件大相徑庭，十分不適合我們?cè)僮龈淖儭?/p>

lin-cms-koa的整體架構(gòu)如下：

或者說(shuō)lin-cms的后端的架構(gòu)都如上圖所示，接下來(lái)我們來(lái)詳細(xì)闡述一下lin-cms-koa的整合之路：

在數(shù)據(jù)庫(kù)部分，我們整合typeorm作為orm框架，它為lin-cms提供模型創(chuàng)建，數(shù)據(jù)操作等諸多功能。

數(shù)據(jù)校驗(yàn)部分，我們整合了class-validator，并提供了一個(gè)基礎(chǔ)的Form類來(lái)方便校驗(yàn)前端傳來(lái)的數(shù)據(jù)。

在控制器部分，我們整合了koa-router作為路由框架，并在其基礎(chǔ)上提供了Redprint類來(lái)進(jìn)行路由函數(shù)的權(quán)限控制。

其它...

簡(jiǎn)單使用

lin-cms開源已有一段時(shí)間了，文檔均已十分完善了，目前已有一些項(xiàng)目正在使用它進(jìn)行開發(fā)。當(dāng)然后端還是選擇的flask版本，接下來(lái)我們使用lin-cms-koa來(lái)簡(jiǎn)單的使用一下lin-cms。

lin-cms前端部分使用起來(lái)非常簡(jiǎn)單，你只需要一點(diǎn)git基礎(chǔ)就可以使用了，在lin-cms-vue的官方倉(cāng)庫(kù)中的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

如果你通過(guò)終端成功的運(yùn)行了這些命令之后，在瀏覽器中打開http://localhost:8080/#/login ，你會(huì)打開前端的登陸界面。

不過(guò)這還不夠，我們還需要后端部分。在瀏覽器中先打開https://github.com/PedroGao/lin-cms-koa，查看lin-cms-koa的相關(guān)信息。

當(dāng)然你也可以跳過(guò)查看，直接在終端中運(yùn)行如下命令：

git clone https://github.com/PedroGao/lin-cms-koa && cd lin-cms-koa

npm install

接下來(lái)：

請(qǐng)確保你擁有 mysql 數(shù)據(jù)庫(kù)和 node.js 的運(yùn)行環(huán)境，并創(chuàng)建名為lin-cms2的數(shù)據(jù)庫(kù)。

如果你使用 typescript 運(yùn)行，那么請(qǐng)?jiān)?b>ts/app/config/secure.ts中修改你自己的 mysql 配置。

如果你使用 javascript 運(yùn)行，那么請(qǐng)?jiān)?b>js/app/config/secure.js中修改你自己的 mysql 配置。

修改好后，請(qǐng)運(yùn)行下面的命令，它會(huì)在數(shù)據(jù)庫(kù)中添加一個(gè)超級(jí)管理員。

npx jest tests/app/dao/addSuper.test.ts

接下來(lái)，請(qǐng)選擇一個(gè)方式運(yùn)行你的程序。

以 typescript 的方式運(yùn)行

npm run start:dev

將 typescript 編譯成 javascript 的方式運(yùn)行

npm run tsc:prod && npm run start:prod

通過(guò) javascript 的方式直接運(yùn)行

node js/app/starter.js

如果一切順利，后端會(huì)監(jiān)聽本地的3000端口，然后我們?cè)俅蝸?lái)到lin-cms-vue的前端的文件夾下，打開src/config/index.js文件，修改里面的baseUrl為http://localhost:3000/，此時(shí)webpack會(huì)reload你的前端程序，如果它沒(méi)有，請(qǐng)你再次通過(guò)

npm run serve

來(lái)運(yùn)行l(wèi)in-cms-vue這個(gè)項(xiàng)目。瀏覽器再次打開http://localhost:8080/#/login，點(diǎn)擊上面的登陸按鈕，如果順利，你會(huì)登陸成功進(jìn)入林間有風(fēng)頁(yè)面。

特點(diǎn)

lin-cms-koa是團(tuán)隊(duì)在lin-cms上的又一次實(shí)現(xiàn)，得益于lin-cms-flask的實(shí)現(xiàn)，lin-cms-koa變得更加精煉和易用。lin-cms-koa目前還未進(jìn)入團(tuán)隊(duì)的倉(cāng)庫(kù)進(jìn)行維護(hù)，目前只放在了我個(gè)人的倉(cāng)庫(kù)上，待穩(wěn)定后便會(huì)進(jìn)入到團(tuán)隊(duì)倉(cāng)庫(kù)進(jìn)行維護(hù)和發(fā)布。

lin-cms-koa分為核心庫(kù)和實(shí)例工程兩大部分，核心庫(kù)——lin-cms-test發(fā)布在了npm上，目前還處于測(cè)試狀態(tài)下，以后正式發(fā)布會(huì)改名。實(shí)例工程就是上述的項(xiàng)目了。

lin-cms-koa整體上使用typescript開發(fā)，也用了一些ts的特性，之所以用ts，是因?yàn)閠s對(duì)于項(xiàng)目的開發(fā)和維護(hù)有極大的益處。不過(guò)我們也提供了js的版本，即lin-cms-koa/js目錄，而目錄lin-cms-koa/ts是我們的ts版本，你可以任意選擇一個(gè)版本進(jìn)行開發(fā)，當(dāng)然目前不建議直接使用在生產(chǎn)環(huán)境中。

js版本的大部分代碼是由ts版本編譯而來(lái)的，但是考慮到二者的差異性，我們做了很多的補(bǔ)丁，主要是js目前不支持裝飾器，而我們的參數(shù)校驗(yàn)使用到了裝飾器，所以我們?cè)趈s/app/libs/util.js中提供了decorateProp和decorateEntify這兩個(gè)方法。

在ts中，一個(gè)簡(jiǎn)單的校驗(yàn)類可以這樣創(chuàng)建：

export class BookSearchForm extends Form {
  @IsNotEmpty({ message: "必須傳入搜索關(guān)鍵字" })
  q!: string;
}

通過(guò)上述的兩個(gè)函數(shù)做補(bǔ)丁，在js中它是這樣的：

class BookSearchForm extends Form {}
decorateProp([
  IsNotEmpty({
    message: "必須傳入搜索關(guān)鍵字"
  })
], String, BookSearchForm.prototype, "q");
exports.BookSearchForm = BookSearchForm;

當(dāng)然，這樣的補(bǔ)丁也被應(yīng)用在了model類上，你可以查看相關(guān)的代碼。

總結(jié)

lin-cms-koa從一窮二白到今天支持雙語(yǔ)言，也只有20天左右的時(shí)間，這20天里，它確實(shí)花去了我很多的時(shí)間。當(dāng)然，它還不成熟，只能作為我的個(gè)人項(xiàng)目進(jìn)行展示，我們團(tuán)隊(duì)會(huì)在后續(xù)進(jìn)行諸多測(cè)試和改善，它會(huì)在不久后正式進(jìn)入我們的團(tuán)隊(duì)倉(cāng)庫(kù)，并提供完善的文檔。

lin-cms開源不久，我們團(tuán)隊(duì)一直在致力于它的發(fā)展和完善，如果你感興趣可以查看官網(wǎng)進(jìn)行嘗試。