用koa開發一套內容管理系統(CMS),支援javascript和typescript雙語言

PedroGao發表於2019-02-21

初衷

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

相關文章