目录
官方demo地址
安装部署
doc/01-基础环境准备篇.md · 云智慧/FlyFish - Gitee.com
doc/02-code_server部署篇.md · 云智慧/FlyFish - Gitee.com
doc/03-FlyFish平台部署篇.md · 云智慧/FlyFish - Gitee.com
git下载源码
FlyFish: 飞鱼(FlyFish)是一个数据可视化编码平台。通过简易的方式快速创建数据模型,通过拖拉拽的形式,快速生成一套数据可视化解决方案。
架构以及目录
├── doc # 部署文档
├── install.sh # 一键安装脚本
├── lcapCodeServer # 在线编辑器
│ ├── linux
│ └── macos
├── lcapServer # 后端项目源码
│ ├── app
│ ├── app.js
│ ├── bin
│ ├── changelog
│ ├── config
│ ├── password.js
│ ├── scripts
│ ├── target
│ ├── typings
│ └── workflows
├── lcapDataServer # 后端数据处理项目源码
│ ├── lcap-server
│ ├── Dockerfile
├── lcapWeb # 前端项目源码-npm install/build
│ ├── FlyFish-2.1.0.conf # Nginx 配置
│ ├── config
│ ├── postcss.config.js
│ ├── scripts
│ ├── src
│ ├── themes
│ └── webpack.config.js
└── wwww # 飞鱼平台文件资源存储目录 - bulid需要
├── application_build
├── application_tpl
├── applications
├── build.js
├── common
├── component_tpl
├── components
├── scripts
├── target
└── web
└── lcapWeb #前端项目打包部署目录-资源访问目录。Nginx
FlyFish根目录:/usr/local/FlyFish
端口地址
code-server: 10000 (8081)
lcap-web:10001 (8089)
lcap-server:10002 (7001)
lcap-data-server: 10003 (8099)
mongodb: 27017
ngnix访问端口:9999
- 初始账号:admin
- 密码:utq#SpV!
初始化数据库
cd lcapServer/changelog
NODE_ENV=development node scripts/initDatabase.js
配置文件
【后端】lcapServer conf/conf.prod.js
//配置项目目录
const staticDir = path.join(__dirname, '../../lcapWeb/lcapWeb');
'use strict';
const path = require('path');
module.exports = appInfo => {
const commonDirPath = 'www';
// 数据目录 eg: /data/appData
const dataBaseDir = path.join(__dirname, '../../../appData');
// 日志目录 eg: /data/logs
const logsBaseDir = path.join(__dirname, '../../logs');
const serverIp = '0.0.0.0';
const serverPort = 10002;
const mongodbPort = 27017;
// const mongodbUsername = '${CW_MONGODB_USERNAME}';
* @type {Egg.EggAppConfig}
};
url: `mongodb://${mongodbIp}:${mongodbPort}/flyfish`,
//url: `mongodb://${mongodbUsername}:${mongodbPassword}@${mongodbIp}:${mongodbPort}/flyfish?authSource=test`,
options: {
useUnifiedTopology: true,
listen: {
hostname: serverIp,
};
......
【后端】lcapDataServer application.properties
停止: npm run stop
启动: npm run prod
sserver.port=10003
server.servlet.context-path=/api/dataplateform
udf_bathpath=/usr/local/FlyFish/lcapDataServer/dataSource/udf
db_bathpath=/usr/local/FlyFish/lcapDataServer/dataSource/db
file.basepath=/usr/local/FlyFish/lcapWeb/lcapWeb/www
application_basepath=/usr/local/FlyFish/lcapWeb/lcapWeb/www/applications
component_basepath=/usr/local/FlyFish/lcapWeb/lcapWeb/www/components
component_down_tmp_basepath=/usr/local/FlyFish/lcapDataServer/down_tmp_basepath
component_upload_tmp_basepath=/usr/local/FlyFish/lcapDataServer/upload_tmp_basepath
config_filename=config_filename
# mongo
spring.application.name=lcapDataServer
spring.main.allow-bean-deFinition-overriding=true
spring.data.mongodb.host=127.0.0.1
spring.data.mongodb.port=27017
#spring.data.mongodb.username=${USERNAME}
#spring.data.mongodb.password=${PASSWORD}
spring.data.mongodb.database=flyfish
spring.data.mongodb.authenticationDatabase=test
spring.servlet.multipart.max-file-size=1024MB
spring.servlet.multipart.max-request-size=1024MB
logging.level.executablesql=debug
logging.level.com.alibab.nacos=off
redis.tools.reader-idle-time-seconds=3600
redis.tools.writer-idle-time-seconds=3600
redis.tools.all-idle-time-seconds=3600
ignore.path=
【前端】lcapWeb/lcapWeb/conf/env-config.js
/*
* @Descripttion:
* @Author: zhangzhiyong
* @Date: 2021-12-07 14:08:25
* @LastEditors: zhangzhiyong
* @LastEditTime: 2022-07-18 16:13:55
*/
window.LCAP_CONfig = (function () {
//后端服务--外部IP地址(报表设计预览页面使用)
const hostname = '192.168.0.12';
//前端ngnix代理访问地址
const fontPort = "9999";
const backPort = '10002';
//服务端目录
const static_dir = '/usr/local/FlyFish/lcapWeb';
//协议
const httpProtocol = 'http';
//www路径
const common_dir = 'lcapWeb/www';
//code-server端口
const code_port = '10000';
let config = {
basename: 'lcap', // 路由统一前缀,注册为微服务后必须有唯一值
IP: '127.0.0.1', // 后端服务IP地址
screenEditAddress: fontPort
? `${httpProtocol}://${hostname}:${fontPort}/${common_dir}/web/screen/editor.html`
: `${httpProtocol}://${hostname}/${common_dir}/web/screen/editor.html`,
screenViewAddress: fontPort
? `${httpProtocol}://${hostname}:${fontPort}/${common_dir}/web/screen/index.html`
: `${httpProtocol}://${hostname}/${common_dir}/web/screen/index.html`,
wwwAddress: `${common_dir}`,
snapshotAddress: backPort
? `${httpProtocol}://${hostname}:${backPort}`
: `${httpProtocol}://${hostname}`,
apiDomain: '/api',//api代理
javaApiDomain: '/lcap-data-server',
// 是否拆分组件模块
issplitComponentModule: false,
onlyApiModule:false,//是否独立部署api
componentSplitApiPrefix: `/api`,
vscodeFolderPrefix: `${static_dir}/${common_dir}`,
vscodeAddress: code_port
? `${httpProtocol}://${hostname}:${code_port}`
: `${httpProtocol}://${hostname}`,
};
return config;
})();
【前端】lcapWeb/lcapWeb/www/web/screen/config/env.js
'use strict';
window.DATAVI_ENV = (function() {
const apiDomain = '/api';
const CW_LOCAL_IP = '127.0.0.1';
const CW_LOCAL_PORT = '9999';
return {
debug: true,
useHttpProxy: true,
apiDomain,
componentsDir: 'lcapWeb/www/components',
apiSuccessCode: 200,
yapiAddress: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcapWeb/index.html#/api',
screenAPI: {
// 大屏展示和编辑用到的API
getScreenData: '/applications', // 获取大屏数据
saveScreenConf: '/applications/{id}/design', // 保存大屏配置
uploadScreenImg: '/applications/img/{id}', // 上传大屏所需图片
deleteUploadScreenImg: '/applications/img/{id}', // 删除上传的大屏所需图片
getModelList: '/applications/getModelList', // 获取模型列表
getModelData: '/applications/getModelData', // 获取模型数据
getScreenComponentList: '/applications/components/list',
getDataSearchData: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcap-data-server/api/dataplateform/unit/query', // 获取数据查询数据
getDataSearch: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcap-data-server/api/dataplateform/unit/findAll',
httpProxy: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcap-data-server/api/dataplateform/apiProxy', // http代理服务
},
};
}());
【Nginx】conf/conf.d/FlyFish.conf
server{
listen 9999;
server_name FlyFish-2.1.0;
default_type application/octet-stream;
client_max_body_size 200m;
gzip on;
gzip_min_length 1k;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
gzip_comp_level 4;
gzip_buffers 4 16k;
# lcapServer 反向代理 需要用真实的ip地址不能用127.0.0.1
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:10002/;
# IP 替换成当前主机IP --不能用127.0.0.1
proxy_cookie_domain 0.0.0.0 192.168.0.12;
}
# lcapServer 反向代理
location ^~ /lcap-data-server/ {
rewrite ^/lcap-data-server/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:10003/;
}
# 静态资源代理
location /lcapWeb/www {
root /usr/local/FlyFish/lcapWeb;
}
# lcapWeb
location / {
root /usr/local/FlyFish/lcapWeb/lcapWeb/;
index index.html index.htm;
}
access_log /usr/local/Nginx/logs/soc.log;
}
【前端-组件开发环境】
cd lcapWeb/lcapWeb/www/components
# 安装依赖npm install
# 修改大屏应用配置vim lcapWeb/lcapWeb/www/web/screen/config/env.js
'use strict';
window.DATAVI_ENV = (function() {
const apiDomain = '/api';
const CW_LOCAL_IP = "127.0.0.1";
const CW_LOCAL_PORT = "9999"
return {
debug: true,
useHttpProxy: true,
apiDomain,
componentsDir: '/lcapWeb/www/components',
apiSuccessCode: 200,
yapiAddress: 'http://127.0.0.1:10002/lcapWeb/index.html#/api',
screenAPI: {
// 大屏展示和编辑用到的API
getScreenData: '/applications', // 获取大屏数据
saveScreenConf: '/applications/{id}/design', // 保存大屏配置
uploadScreenImg: '/applications/img/{id}', // 上传大屏所需图片
deleteUploadScreenImg: '/applications/img/{id}', // 删除上传的大屏所需图片
getModelList: '/applications/getModelList', // 获取模型列表
getModelData: '/applications/getModelData', // 获取模型数据
getScreenComponentList: '/applications/components/list',
getDataSearchData: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcap-data-server/api/dataplateform/unit/query', // 获取数据查询数据
getDataSearch: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcap-data-server/api/dataplateform/unit/findAll',
httpProxy: 'http://${CW_LOCAL_IP}:${CW_LOCAL_PORT}/lcap-data-server/api/dataplateform/apiProxy', // http代理服务
},
};
}());
部署迁移
lcapWeb/lcapWeb/conf/env-config.js
//后端服务--外部IP地址(报表设计预览页面使用)
const hostname = '192.168.0.12';
研究总结
技术栈和部门技术栈不符合,学习成本大,前端react,后端node, java。
官方文档没人维护,文档内容过时。
社区环境差,出现问题几乎全靠自己看源码和解决,技术要求很高。
组件以文件的形式存在,可配置性不好,迁移很麻烦,不适合业务开展。
部署起来很麻烦,容易出错,直接部署到现有项目的服务器难度高,很容易出错。
组件加载很慢。
开发应用场景记录
-
引入的组件不能自由定义样式,需要组件内容定义css,然后抛出样式,在css样式处填写