初衷
lin-cms http://doc.cms.7yue.pro/ 是我们林间有风团队开源的一款 CMS, 它采用目前主流的前后端分离的架构, 前端 https://github.com/TaleLin/lin-cms-vue 使用 vue 作为基础框架, 后端 https://github.com/TaleLin/lin-cms-flask 选择了我们团队大量实践使用的 flask 作为基础框架.
lin-cms 剪彩
你也可以直接查看线上的 demo http://face.cms.7yue.pro/#/about .
得益于前后端分离分离的架构, 这套 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 开源已有一段时间了, 文档 http://doc.cms.7yue.pro/ 均已十分完善了, 目前已有一些项目正在使用它进行开发. 当然后端还是选择的 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 开源不久, 我们团队一直在致力于它的发展和完善, 如果你感兴趣可以查看官网 http://doc.cms.7yue.pro/ 进行尝试.
来源: https://juejin.im/post/5c6e91bee51d450b95635d6d