lykrsl / hetu

低代码平台, 可视化编辑器，单手打代码，解放你的双手

河图

河图, 是一个 低代码 平台, 通过可视化界面, 快速生成各种后台页面, 极大减少开发成本。

河图是贝壳找房内部孵化项目, 目前已在公司大多数业务线落地, 完成200+项目, 1500+页面。

相关链接

• 项目文档
• 在线预览

解决了什么问题

• 对重复模块（增、删、改、查页面）进行抽象、封装，大幅降低前端开发工作量
• 通过可视化编辑界面，非前端人员(后端、测试), 也能进行页面开发

目标用户

FE、QA、RD 等。

适用场景

• PC 端 后台管理系统
• 数据增、删、改、查页面
• 图表展示

开发流程

河图的开发、调试、测试、上线都是在浏览器中进行的

支持环境

• 现代浏览器和 IE9 及以上。

开发前准备

1. 一台云开发机

用于代码部署

2. 一个邮箱账号

需要开启SMTP服务, 用于发送验证码

3. MySQL数据库

可选择以下两种方式,部署MySQL服务

• 手动部署MySQL数据库
• 购买MySQL云服务

将server/open_hetu.sql文件, 导入到数据库

快速搭建开发服务

第一步

在/server/src目录下创建system_config.ini文件, 内容如下

• [ssh]
  • ssh_ip 云服务器ip
  • ssh_user 云服务器登录账号
• [client]
  • cdn_host 静态资源CDN, 例如cdn.beike.plus
• [server]
  • port node服务启动端口
• [mysql] mysql配置
• [email]
  • host SMTP服务域名
  • port 连接端口
  • user 公共邮箱账号
  • pass 授权密码

配置格式为

[ssh]
ssh_ip = ******
ssh_user = ******

[client]
cdn_host = ******

[server]
port = 9536

[mysql]
host = ****
port = ****
user = ****
password = ****
database = ****

[email]
host = smtp.163.com
port = 364
user = ****
pass = ****

第二步 部署组件库和文档服务

• /plugin 目录下的内容为组件库
• /plugin/site 目录下的内容为组件库文档

1. 打包部署

在云服务器上创建文件夹, 用于存在静态资源

cd /data/www/

# 创建文件夹, 用于存放静态资源
mkdir hetu-client hetu-doc hetu-plugin hetu-server

# 创建配置文件, 内容见上一步
touch system_config.ini

2. 配置 nginx

如果没有安装nginx, 需要先 安装nginx

# 进入nginx配置目录
cd /etc/nginx/conf.d/

# 创建配置文件
touch hetu-cdn.conf hetu-doc.conf hetu-server.conf

申请3个域名, 例如 河图node服务xxx.com、cdn静态资源服务cdn.xxx.com、文档服务doc.xxx.com, 将这3个域名分别指向前面申请的云开发机ip, 配置如下:

hetu-cdn.conf 配置

server {
    listen      80;
    server_name cdn.xxx.com;
    root  /data/www/;

    gzip                    on;
    gzip_http_version       1.1;
    gzip_buffers            256 64k;
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_proxied            expired no-cache no-store private auth;
    gzip_types              text/plain application/javascript application/x-javascript t
ext/css application/xml text/javascript application/vnd.ms-fontobject font/ttf font/open
type font/x-woff;

    gzip_disable "MSIE 6";

    if ( $request_method !~ GET|POST|HEAD ) {
        return 403;
    }

    location ^~ /hetu-plugin/ {
        add_header 'Access-Control-Allow-Origin'  '*';
        alias /data/www/hetu-plugin/;
    }

    location ^~ /hetu-client/ {
        add_header 'Access-Control-Allow-Origin'  '*';
        alias /data/www/hetu-client/;
    }
}

hetu-doc.conf 配置

server {
    listen      80;
    server_name doc.xxx.com;
    root  /data/www/hetu-doc;

    gzip                    on;
    gzip_http_version       1.1;
    gzip_buffers            256 64k;
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_proxied            expired no-cache no-store private auth;
    gzip_types              text/plain application/javascript application/x-javascript t
ext/css application/xml text/javascript application/vnd.ms-fontobject font/ttf font/open
type font/x-woff;

    gzip_disable "MSIE 6";

    if ( $request_method !~ GET|POST|HEAD ) {
        return 403;
    }

    location / {
        index index.html index.htm;
        if (!-f $request_filename) {
            rewrite ^/(.*)$ /index.html?/$1 last;
            break;
        }
    }
}

hetu-server.conf

server {
    listen      80;
    server_name xxx.com;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://127.0.0.1:9536;
    }
}

重启nginx

# 检测配置文件是否正确
nginx -t

# 重启nginx
nginx -s reload

• 打开 http://doc.xxx.com 预览文档服务
• 打开 http://cdn.xxx.com/hetu-plugin/manifest.json 预览静态资源服务

第三步 安装项目依赖

# server
cd ./server && npm install

# client
cd ../client && npm install

第四步 开始开发

# client
cd ./client && npm start
# server
cd server && npm run dev

打开127.0.0.1:1234预览

第五步 打包部署

# 打包 && 部署client 
sh online_client.sh

# 打包 && 部署server
sh online_server.sh

第六步 在云服务器上启动node服务

在centos上安装node.js

EPEL（Extra Packages for Enterprise Linux）企业版Linux的额外软件包，是Fedora小组维护的一个软件仓库项目，为RHEL/CentOS提供他们默认不提供的软件包。

# 先确认系统是否已安装epel-release包
yum info epel-release 

# 若已安装, 则跳过
sudo yum install epel-release

# 安装nodejs
sudo yum install nodejs

# 查看node版本
node -v

使用pm2启动node服务

pm2是node进程管理工具, 利用它可以简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等。

# 全局安装
sudo npm i -g pm2

# 启动一个名为hetu的node服务, --watch意味着文件变化, 就会重新启动服务
pm2 start dist/app.js --watch --name 'hetu'

# 设置开机启动
pm2 start up

# 保存当前进程状态
pm2 save

# 查看当前node服务进程
pm2 list

版本记录

CHANGELOG

主要贡献者

Name	Avatar	Name	Avatar	Name	Avatar	Name	Avatar	Name	Avatar
好爸爸		嘻老师		姚泽源		liaoqixin		般若超

License

MIT

Copyright(c) 2020 Lianjia, Inc. All Rights Reserved