「開源」低代碼平台，可視化編輯器，單手打代碼，解放你的雙手

一飛開源，介紹創意、新奇、有趣、實用的免費開源應用、系統、軟體、硬體及技術，一個探索、發現、分享、使用與互動交流的開源技術社群平台。緻力于打造活力開源社群，共建開源新生态！

一、開源項目簡介

河圖, 是一個 低代碼 平台, 通過可視化界面, 快速生成各種背景頁面, 極大減少開發成本。

河圖是貝殼找房内部孵化項目, 目前已在公司大多數業務線落地, 完成200+項目, 1500+頁面。

二、開源協定

使用MIT開源協定

三、界面展示

四、功能概述

✨特性

• ‍♀️ 操作簡單、功能強大的可視化編輯器
• 開箱即用、高品質背景管理系統模版
• ⚙️ 開發流程全部線上化，節省溝通、調試、運維成本
• 使用 React、TypeScript、nodejs、express 開發

相容環境

• 現代浏覽器、IE11以上

五、技術選型

系統架構圖

準備

1. 一個郵箱賬号

用于發送驗證碼, 需要 開啟SMTP服務

2. MySQL資料庫

本項目使用mysql 5.7版本

• 方式1: 手動部署MySQL資料庫
• 方式2: 購買MySQL雲服務

3. 初始化資料庫

将 server/open_hetu.sql 檔案, 通過mysql Gui工具, 導入到資料庫

4. 建立配置檔案

克隆項目, 在項目根目錄下建立system_config.ini檔案, 配置内容如下(将****替換為自己的配置, 去掉注釋内容)

[server]
port = 9536         // node服務啟動端口

[mysql]             // mysql配置
host = ****
port = ****
user = ****
password = ****
database = ****

[email]
host = smtp.163.com // SMTP服務域名
port = 364          // 連接配接端口
user = ****         // 公共郵箱賬号
pass = ****         // 授權密碼           

如果項目報host port未找到, 可嘗試将配置寫死在項目中

5. 全局安裝yarn

npm install -g yarn
           

開始

第一步 啟動元件庫服務

# 進入plugin目錄
cd ./plugin

# 安裝依賴
yarn

# 打包輸出esm子產品
yarn run build:umd

# 啟動元件庫服務
yarn run server:dist
           

打開 http://127.0.0.1:8080/manifest.json 預覽, 可以看到如下内容

{
  "files": {
    "index.js": "/0.0.6/hetu.umd.development.js",
    "index.min.js": "/0.0.6/hetu.umd.production.min.js",
    "index.css": "/0.0.6/index.css"
  },
  "entrypoints": [
    "index.js",
    "index.css"
  ]
}           

河圖主應用, 會自動讀取裡面的内容, 并動态加載資源

第二步 安裝依賴

安裝client層依賴

cd ../client && yarn           

安裝server層依賴

cd ../server && yarn           

第三步 啟動服務

啟動client層服務

cd ../client && yarn start           

啟動server層服務

cd ../server && yarn dev           

打開 http://127.0.0.1:1234 預覽, 可使用任意郵箱新增賬號

開發流程#

河圖的開發、調試、測試、上線都是在浏覽器中進行的

六、源碼位址

通路一飛開源：https://code.exmay.com/