本文是用户Mark Wu近期在学习应用FlyFish源码的学习笔记,云智慧AIOps社区征得原作者批准后受权公布,本文应用的是FlyFish版本2.0,目前最新版本已更新到2.1

FlyFish代码构造

以下是代码的根本构造,应用的是基于MVC的thinkJS框架,然而通篇看下来,你是不是留神到,只看到了M(Model)和C(Controller),唯独短少View,所以View在哪?所以就带着这个问题持续学习上来。

├── code-server                               #在线编辑器│   ├── linux│   └── macos├── config                                    #初始化数据库配置文件│   ├── database.${dev}.json│   ├── node.development.js                   #入口文件├── download                                  #大屏模块文件├── log                                       #日志├── migrations_init                           #数据库初始化├── runtime                                   #运行时配置存储├── src                                       #后端我的项目外围代码│   ├── common                                #通用业务配置│   │ ├── bootstrap                          #│   │ ├── config                             #通用配置│   │ │   ├── adapter                       #适配器配置│   │ │   ├── config                        #通用配置│   │ │   ├── extend                        #拓展配置│   │ │   ├── middleware                    #中间件配置│   │ │   ├── validator                     #自定义简单校验规定,在logic中应用│   │ ├── constants                          #枚举│   │ ├── middleware                         #中间件│   │ ├── model                              #Model层---M│   │ │   ├── baseModel.js                  #定义了根本的CURD,其它所有的model都继承自它│   │ ├── service                            #通用逻辑办法│   └── web                                   #定制化业务-----实现具体业务逻辑│     ├── config                              #业务配置│     ├── controller                          #控制器层---C│     ├── logic                               #前置后置操作---如字段校验、权限管制,其它通用逻辑│     ├── model                               #数据库操作│     ├── service                             #业务逻辑---数据处理、格局转换等业务逻辑操作├── scripts                                    #我的项目部署脚本├── storage                                    #├── template                                   #大屏、组件模板├── view                                       #html模板├── www                                        #动态资源│   ├── solution-platform-web│   └── static│   └── upload├── Dockerfile                                 #dockerFile├── options.json├── options.json├── pm2.json├── README.md├── startup.sh                                 #启动我的项目脚本

thinkJS框架

  • Config:通用配置,如上config所示,可配置我的项目各种配置,最初会依据运行环境合到一起;
  • Context:上下文,用户申请、回复数据存储对象以及状态透传;
  • Middleware:中间件,在配置与应用上相似于webpack的plugins,可应用各项函数(内置或引入)实现各项性能,所有的用户申请解决都是由middleware实现;
  • Logic:逻辑,其中的action与controller的action一一对应,可定义执行action的前置后置操作;
  • Controller:控制器,和.net的控制器的应用十分类似,其内会依照路由执行对应的action;
  • View:视图(这里就是答案了),须要应用拓展来实现视图;
  • Router:路由,可自定义路由规定;
  • Adapter:适配器,解决一类性能的多种实现,配合extend,如view、数据库,view能够抉择多种模板引擎,数据库可配置多种数据库,通过 think-helper模块中的 parseAdapterConfig解析;
  • Extend:拓展,反对的扩大类型为:think、application、context、request、response、controller、logic 和 service,框架内置的很多性能也是扩大来实现的,如:Session、Cache。

view是如何生成的

adapter.js外面配置view模板的目录为view外面的html模板,模板引擎为nunjucks,配合extend外面引入的think-view应用。

/**view adapter config@type {Object} */ exports.view = { type: 'nunjucks', // 这里指定默认的模板引擎是 nunjucks common: { viewPath: path.join(think.ROOT_PATH, 'view'),//模板文件的根目录 sep: '_',//Controller 与 Action 之间的连接符 extname: '.html' }, nunjucks: { handle: nunjucks } };
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        ...        <title>{{title}}</title>        <link rel="icon" href="{{prefix}}/static/solution_platform_web/favicon.ico">        ...        <link href="{{prefix}}/static/solution_platform_web/platform/vendor.css" rel="stylesheet">    </head>    <body>        <div id="wrapper"></div>        <script src="{{prefix}}/static/solution_platform_web/config/ENV.production.js"></script>        <script src="{{prefix}}/static/solution_platform_web/platform/runtime.js"></script>        <script src="{{prefix}}/static/solution_platform_web/platform/vendor.js"></script>        <script src="{{prefix}}/static/solution_platform_web/platform/app.js"></script>    </body></html>

能够看到模板外面有两个 prefix、title变量,会引入加载页面所需动态资源。extend外面引入了think-view,通过 view 扩大,框架就反对渲染模板的性能,Controller 类上就有了 assign、display 等办法,引入model(think.app) 反对模型性能,会增加办法 think.Model、think.model、ctx.model、controller.model、service.model。

// extend.jsconst view = require('think-view');const model = require('think-model');const session = require('think-session');const cache = require('think-cache');module.exports = [    session,    cache,    view,                   // make application support view    model(think.app),];

router外面配置路由规定,以/pw/结尾的get申请会指向web模块的view控制器下index的一个叫platform的action;

// router.jsmodule.exports = [    // 代理平台的动态页面    [/^\/pw\/(.*)/i, '/web/view/index/platform', 'get'],    [/^\/proxyDataHub\/(.*)/i, 'web/proxy', 'rest'],];// web/controller/view/index.jsmodule.exports = class extends think.Controller {    platformAction() {        this.assign('prefix', this.config('platformPrefix', undefined, 'web').replace(/\/$/, ''));        this.assign('title', this.config('indexTitle', undefined, 'web').replace(/\/$/, ''));        return this.display();    }};

platformAction会依据配置以及模块扭转prefix、title变量的值,这样view模板就能正确加载动态资源。同时middleware也配置默认模块为web,默认控制器action为platformAction。

...//路由操作    {        handle: 'router',        enable: true,              //是否开启该中间件        options: {            defaultModule:'web',                // 默认模块            defaultController: 'view/index',    // 默认控制器            defaultAction: 'platform',          // 默认action        }    },...

数据流

API申请数据流如下图所示

服务端倡议:能够适当减少Workers数量,以减少服务端稳定性,一个Worker呈现问题后,Master会进行它,而后fork一个新的Worker进去。

部署问题

在应用飞鱼2.0的过程中,遇到了很多部署方面的问题,这里我挑几个典型的记录一下

Q:服务器上部署docker容器,本地拜访飞鱼平台,发现登录地址申请是127.0.0.1的地址;
A:依照部署流程仔细检查了一下,发现配置文件www/static/solution_platform_web/config/ENV.production.js没有正确配置。

Q:docker容器部署起来,做增加大屏操作的时候报错ER_NO_SUCH_TABLE: Table 'flyfish.visual_screen_tag_view' doesn't exist, SQL: SHOW COLUMNS FROM visual_screen_tag_view;
A:查看发现数据库没有启动。

Q:code-server 上面 ,grpc装置失败,一起没有胜利;
A:切换成cnpm源后胜利,其实也能够试试应用yarn进行装置;

写在最初

FlyFish公布2.1版本后,曾经反对安装包一件部署形式,极大缩减了部署流程,具体如下所示

# CentOS 7.5/7.6  x86-64# 须应用root账户mkdir -p /data/app/cd /data/app/git clone -b main https://github.com/CloudWise-OpenSource/FlyFish.git FlyFishorgit clone -b main https://gitee.com/CloudWise/fly-fish.git FlyFishcd /data/app/FlyFishbash flyfish.sh install# 一键卸载bash flyfish.sh uninstall# 一键更新# FlyFish-2.1.1 降级至 FlyFish-2.1.2git checkout maingit pull origin mainbash flyfish.sh update

作者简介

Mark Wu( 吴银波 )云智慧前端工程师,精通javascript、css、React、Vue、Webpack、ThreeJS等前端技术栈,致力于云智慧大屏产品及飞鱼开源社区服务,领有丰盛的前端性能优化和开源我的项目教训。

对于FlyFish

我的项目介绍:https://www.cloudwise.ai/flyF...
Github 地址: https://github.com/CloudWise-...
Gitee 地址: https://gitee.com/CloudWise/f...
行业案例:https://www.bilibili.com/vide...
局部大屏案例: