项目介绍

Mojito是一个可视化数据分析、数据展示和轻业务开发的平台

特性

• 点选、拖拽、缩放的可视化操作
• 群组/解散、撤销/重做、图层显示/隐藏、锁定/解锁、对齐和排序
• 支持使用React/Vue开发上传自定义组件
• 支持通过HTTP数据源接入，轮询
• 组件样式可视化配置
• 组件动画可视化配置
• 组件间通讯、页面下钻、动态脚本...
• 跨终端事件同步、跨大屏联动交互
• 100%开源，支持私有化部署

安装启动

环境要求：Node.js >= 10.16.0，MongoDB >= 4.2.12

1.下载源码

git clone https://github.com/drinkjs/mojito.git

项目结构如下图所示，其中server为服务端源码；client为前端源码。

2.修改配置文件

打开server/config/index.ts修改MongoDB相关数据库连接信息。

index.ts

const defaultConfig: IConfig = {
  port: 3838,
  sessionSecret: "a secret with minimum length of 32 characters", // 一个32位的随机字符串，务必修改
  websocket: true, // 是否启用websocket
  logger: false,
  staticPrefix: "/public/",
  staticPath, // 所有静态文件存放访目录，用户上传的图片也存在这，生产环境建议放在cdn或nginx下
  libPath: process.env.LIBS_PATH || `${staticPath}/libs`, // 组件上传后存放的目录，生产环境建议放在cdn或nginx下
  controllers,
  mongo: {
    // see https://mongoosejs.com/
    uris: "mongodb://localhost:27017/",
    options: {
      dbName: "mojito",
      // useNewUrlParser: true,
      // useUnifiedTopology: true,
      autoIndex: false,
      serverSelectionTimeoutMS: 5000,
      bufferCommands: false,
    },
  },
};

3.启动服务端

3.1安装依赖

cd server
npm install --registry=https://registry.npm.taobao.org

3.2运行服务端

npm run dev

4.启动客户端

4.1安装依赖包

cd client
npm install --registry=https://registry.npm.taobao.org

4.2运行前端

npm start

运行成功后打开浏览器，输入地址：http://localhost:3000

5.简单使用

5.1创建项目

点击【创建项目】

输入项目名称，并点击【确定】

进入项目管理页面，您可以修改项目、删除项目、创建新项目或新建页面

5.2 页面编辑器

在页面管理中，可以上传封面、预览、编辑、删除或进入页面编辑器

• 鼠标点击【页面列表】的其中一个页面，进入页面编辑器
• 鼠标移动到【页面列表】的其中一个页面上，顶部会显示四个小图标，依次为【上传封面】、【预览】、【编辑】和【删除】

进入到页面编辑器后，您可以使用系统提供的画布配置和组件配置工具，管理画布和各个组件。

工具栏位于编辑器页面顶部，您可以通过工具栏对画布进行缩放，对图层进行锁定/解锁、显示/隐藏、对齐、群组/解散和预览，对所有操作进行撤销/重做。组件栏位于编辑器页面左侧，可以查看各种类型的组件，可以将组件拖动到画布中进行配置，上传和修改自定义的组件。属性栏位于编辑器页面右侧，可以查看页面中的图层、对图层进行排序，配置页面大小、背景等属性，选中图层后可以对组件进行配置样式、数据源、数据属性、事件处理和动画效果。中间区域是画布，可以将组件拖入画布中进行可视化编辑。将组件拖入画布在组件栏中选中任意组件，然后拖入到画布，点选画布中的组件，使组件进入可编辑状态，接下来我们重点介绍属性栏中的功能和使用。

5.3页面设置

新建的页面尺寸默认为1920*1080，背景颜色默认为#FFFFFF, 字体颜色默认为#000000， 在页面设置中您可以

• 设置页面的尺寸
• 设置画布背景颜色
• 设置画布字体颜色
• 设置背景图

案例：设置背景图

5.4组件属性

可以对组件的静态数据和数据源(动态数据)进行配置，平台会根据组件的declare.json自动生成对应的选项和控件。

数据源目前支持GET/POST请求获取，您可以在后端编写相应的接口，然后在平台上配置，返回结果会透传给组件。如果您想对数据进行更加精细的控制，可以通过 交互事件里的【数据源加载】事件进行加工处理。

• 请求方式：GET/POST
• 请求接口：后端数据接口
• 请求参数：JSON格式
• 轮询：每隔多少毫秒请求一次接口，空或0表示不轮询

通过以上步骤基本能完成一个完整的案例。

具体请参照官方文档：
http://mojito.drinkjs.com/docs

开源协议

暂无