用koa開發一套內容管理系統（CMS），支持javascript和typescript雙語言

初衷

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.js和think.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文件，修改裏面的baseUrl爲http://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中提供了decorateProp和decorateEntify這兩個方法。

在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開源不久，咱們團隊一直在致力於它的發展和完善，若是你感興趣能夠查看官網進行嘗試。