介绍这个工具前不得不先介绍一下积木系统。

积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统，详细介绍见 PPT

简单可以这么理解它的理念:

1. 一个页面 = 一个模板 + 多个组件
2. 一个组件 = 一份代码 + 一份数据
3. 一个组件开发一次，复用多次
4. 一个页面使用多个组件拼装后，实时预览、快速发布上线

此前在阿里实习的时候也接触过一个叫 TMS（淘宝内容管理系统）的系统, 专门用于快速搭建电商运营活动页面.

这种系统可统一理解为运营活动页面发布系统。

这种系统有以下特点：

1. 静态数据或轻后台数据 (轻量 CGI)

2. 单页（多图、图文混合偏多)

3. 组件粒度小，可灵活拼装页面

4. 活动页面需要快速发布上线

积木系统已经经受了多个项目的考验，目前也启动了 2.0 的开发计划, 作者 @江源 也曾在 PPT 中提到有开源的计划，大家可以期待一下。

在这里我写了一套类似的 Pager 系统，设计理念大同小异，只不过是想尝试用新的技术栈快速实现。

项目地址是: https://github.com/laispace/pager

安装环境比较麻烦，先来快速预览下它的功能。

创建一个页面, 添加可复用的组件，进行可视化编辑： 

设置页面信息： 

生成页面，可本地下载预览： 

发布上线，同步到远程机器： 

接下来，直接访问 http://pages.laispace.com/demo-page2/  就可以看到发布的页面了。

当我把原型写出来的时候我却发现，ES6 和 React 带来的一系列特性，让我觉得代码写起来爽到飞起，所以给大家分享下有趣的东西。

目前这个代号为 Pager 的系统只实现了简单的 组件编译/页面生成/页面发布 的功能, 还不能用于生产环境.

所以本文先给大家介绍下设计思路 :（项目完成后, 再给大家细细介绍它的实现.

项目设计

发布一个页面上线的流程

这个流程的角色主要对应是产品运营经理, 所以操作必须简单.

1. 新建页面, 配置页面基础信息（标题/分享信息等）
2. 在页面中添加组件并配置组件数据（实时预览/页面大小可拖拽）
3. 新窗口打开预览页面（预览效果就是生成后的页面, 需要与线上发布版本一致）
4. 下载页面到本地（不使用一键发布, 自行下载代码使用其他系统发布）
5. 发布页面到服务器（一键发布, 需保证服务器配置好了对应目录的访问权限）

开发一个组件的流程

这个流程的角色主要对应是前端开发, 需要保证开发模式足够舒畅.

1. 新建组件, 编写组件代码
2. 打开组件预览页面
3. 修改组件配置和代码
4. 监听修改, 实时预览更新
5. 开发完成，同步到系统中（重新编译, 覆盖上一个版本）

项目模块划分

系统承载多个项目, 项目中配置归属这个项目的页面在发布时的一些配置信息.

一个页面由多个组件构成, 每个组件为一个文件夹, 组件间相互独立, 本地开发完成后, 编译并导入到系统中.

注意：绿色为已有功能, 目前只提供了页面创建相关功能, 还没有鉴权/版本控制等模块, 所以还不能用于生产环境.

接口设计

虽然前后端都自己写, 可以采用自己喜欢的接口方式. 但考虑到语义化和拓展性, 还是建议使用前后端分离的 restful 接口形式.

一个名词对应一个资源, 一个动词对应一个操作:

• 增加一个组件, POST /components/
• 删除一个组件, DELETE /components/:Id
• 查找所有组件, GET /components/
• 查找一个组件, GET /compnents/:Id
• 修改一个组件, PUT /components/:Id

数据模型

前后端通信是 JSON 数据格式, 同时使用 mongoose 定义一些数据模型, 方便快速地增删查改, 建立项目原型.

像嵌套比较深的数据, 有时我们并不想定义太多, 那直接用一个 Mixed 类型就可以解决, 比如一个页面中包含多个组件, 每个组件其实是有自己的数据格式的, 我这里并不想用两张表来存储（类似外键）, 所以直接在一个页面下就存储了这个页面需要的所有数据:

页面输入

1. 页面信息 (title + meta + link + script)

一个 html 页面, 从上往下是: