項目介紹

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

開源協議

暫無

100%開源免費的低代碼/可視化數據分析、數據展示平台

項目介紹

特性

安裝啟動

開源協議