本文是用户 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 FlyFish
cd /data/app/FlyFishbash flyfish.sh install
# 一键卸载bash flyfish.sh uninstall
# 一键更新# FlyFish-2.1.1 升级至 FlyFish-2.1.2git checkout maingit pull origin main
bash flyfish.sh update
复制代码
作者简介
Mark Wu（ 吴银波 ）云智慧前端工程师，精通 javascript、css、React、Vue、Webpack、ThreeJS 等前端技术栈，致力于云智慧大屏产品及飞鱼开源社区服务，拥有丰富的前端性能优化和开源项目经验。
关于 FlyFish
项目介绍：https://www.cloudwise.ai/flyFish.html
Github 地址： https://github.com/CloudWise-OpenSource/FlyFish
Gitee 地址： https://gitee.com/CloudWise/fly-fish
行业案例：https://www.bilibili.com/video/BV1z44y1n77Y/
部分大屏案例：
评论