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