用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.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開源不久,我們團隊一直在致力於它的發展和完善,如果你感興趣可以查看官網進行嘗試。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章