FlyFish-2.2.0 学习笔记

目录

官方demo地址

安装部署

git下载源码

架构以及目录

初始化数据库

配置文件

【前端-组件开发环境】

部署迁移

研究总结

开发应用场景记录

修改版本源码参考

---

官方demo地址

FlyFish

安装部署

doc/01-基础环境准备篇.md · 云智慧/FlyFish - Gitee.com

doc/02-code_server部署篇.md · 云智慧/FlyFish - Gitee.com

doc/03-FlyFish平台部署篇.md · 云智慧/FlyFish - Gitee.com

git下载源码

GitHub - CloudWise-OpenSource/FlyFish: FlyFish is a data visualization coding platform. We can create a data model quickly in a simple way, and quickly generate a set of data visualization solutions by dragging.

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。

官方文档没人维护，文档内容过时。

社区环境差，出现问题几乎全靠自己看源码和解决，技术要求很高。

组件以文件的形式存在，可配置性不好，迁移很麻烦，不适合业务开展。

部署起来很麻烦，容易出错，直接部署到现有项目的服务器难度高，很容易出错。

组件加载很慢。

开发应用场景记录

1. 引入的组件不能自由定义样式，需要组件内容定义css,然后抛出样式，在css样式处填写

修改版本源码参考

FlyFish-2.2.0: FlyFish,2.2.0 (gitee.com)