在线demo

在线体验

本地部署

本小册介绍的所有代码后面我们会部署到云端，这样就可以在线演示。但是这个可能需要花费一段时间，不过好在我们的代码会逐步完善，我们可以先通过本地模式来部署我们的可视化搭建体系。

准备工作

在开始安装之前，请确保你的本地已经安装好了以下工具：

mysql 安装使用教程
node 安装使用教程
git 安装使用教程

然后我们打开本小册涉及到的所有代码空间coco-h5，然后分别 clone 以下这些项目：

coco-web: 可视化编辑器
coco-server: 可视化编辑器后台服务，用于模板编译、发布、管理等操作
coco-template: 基于 coco 解耦后的模板
coco-cli: coco 脚手架项目，便捷生成模板、组件
coco-global-banner: coco 体系全局组件，可跨模板使用

coco-server 部署

server 端部署需要先创建一个数据库 coco：

$ mysql -u root -p

// create database coco;

然后装一下依赖：

$ cd coco-server & npm i

接着修改一下我们的数据库配置，可以根据本地 mysql 配置来调整：

module.exports = {
  sequelize: {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    database: 'coco',
    username: 'root',
    password: 'root1234',
    logging: false
  }
};

最后:

$ npm run dev

会自动创建 project、template 数据表。正常启动后，可以看到我们的服务启动 http://localhost:70001。

发布模板

然后我们需要创建一个模板，用于可视化编辑器选用。找到我们的 coco-template 模板，这里我已经创建好了一个简单模板。我们要做的就是发布他：

$ cd coco-template && npm i
$ npm run release

然后我们可以看到经过编译后，代码被发布：

发布完成后，再启动一下预览服务，提供给可视化编辑器 iframe url 使用，注意现在模板服务暂时还没有部署，所以无法使用在线 url:

$ npm run serve
// http://localhost:8081

PS: 这里是我自己的演示，我可以发布提交到我自己的 github，你们可以 fork 出来跑这个命令

运行可视化编辑器

最后我们需要对模板页面进行编辑，这里我们需要跑起来 coco-web 项目。

$ cd coco-web && npm i
$ npm run serve

然后打开我们的页面 http://localhost:8080:

然后选择刚才发布的模板，输入相关信息：

最后就可以看到我们的编辑页了：

然后我们可以愉快的编辑操作。

注意事项：

预览编辑器是通过 iframe 的形式引入本地项目，所以确保你的模板服务已经开启：http://localhost:8081
server 端创建页面依赖于 github API 所以我们需要替换一下自己的 github token：

// coco-server/app/service/project.js
const octokit = new Octokit({ auth: 'youapitoken' });