访问文档根目录之外的网页_前端交接文档总结

指挥中心网页版重构交接文档

为了更好地体验和优化，更适应现代web开发框架，提升开发效率，对原有JQuery-Based指挥中心网页端使用基于Vue.js的Quasar Framwork进行重构。但是由于CyberPlayer并没有针对MVVM框架做适配，播放RTMP直播流时，时延加大，最终是否使用还需再商榷。2019年5月份，在此基础上，将直播视频流修改为AnyRTC版本之后，使用体验提升了很多。代码中的版本即为这个版本。

1. 项目整体概况

此项目为重构项目，基本遵照原有项目原型和功能，主要功能包括：

• 大屏显示模块（视频流显示与播放控制调节、截图编辑、发送）
• 小屏显示模块（视频流播放控制、多个直播流显示与维护、N分屏调整）
• 地图模块
• 报警模块
• 聊天模块

技术选型：Quasar Framework （ https://quasar.dev ）

1. 怎么开发？

安装（Quasar-cli脚手架工具）和调试：

1. 在本地安装Node【 https://www.runoob.com/nodejs/nodejs-install-setup.html 】，确保Node>=8.9.0和NPM>=5
2. 打开命令行，全局安装Vue-cli，运行npm install -g vue-cli
3. 全局安装quasar-cli： 运行npm install -g quasar-cli
4. Cd到项目根目录，安装项目依赖：npm install
5. 运行调试程序： quasar dev.
6. 等待编译完成，命令行会自动调用浏览器并打开 http://localhost:8000

项目目录结构：

开启全功能的项目整体目录及功能大致说明见下图所示，但是目前项目只开启了pwa功能，具体使用时请注意。

一般来说，开发的时候只需要关注quasar.conf.js（Quasar App配置文件）、src/components、src/router、src/layouts、src/pages，app.styl和variables.styl，有时候需要关注src/assets。

• 配置quasar.conf.js （ 参考http://www.quasarchs.com/guide/app-quasar.conf.js.html ）

这个部分是使用quasar framework的核心，Quasar-cli自身有一部分默认配置，运行前会读取这个配置文件，写在这个文件中的配置选项会覆盖/重写默认配置，构建出需要使用的quasar app. 更多更详细的配置信息见https://quasar.dev/quasar-cli/quasar-conf-js

在这个部分值得关注是devServer的配置，关于devServer的完整配置见 https://webpack.js.org/configuration/dev-server；目前app的devServer配置如下:

配置的第一个open选项，决定了编译完是否自动打开浏览器，并打开页面。第二个proxy在本地调试时，可以采用正则匹配的方式，匹配页面发起的http请求url，将特定的url转发/代理到特定的测试服/产品服上，这样的处理方式有利于前后端分离项目中的调试环节。在目前项目配置中，我们对本地的http请求做了两个转发，注意配置中的changeOrigin选项，这是为了避免浏览器同源策略（https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy ） 引起的请求屏蔽，无法发出的情况，同时，需要在服务端的Apache/Nginx或者程序内部设置允许跨域访问选项。

• src/components、src/layouts、src/pages

这三个部分的开发请完全参照Vue.js最佳实践中的风格指南https://cn.vuejs.org/v2/style-guide/index.html 中的要求，规范自己的代码。理论上，这份风格指南可以作为code review的coding rules，结合ESLint插件，可以避免95%以上的代码错误，形成良好的代码风格，产出的代码更规范、更易于理解，最重要的是更易于维护！

这三个部分同样都是.vue文件，那么，一般情况下怎么界定一个.vue文件该放到哪个目录下呢？

src/components存放的是一些基础、可复用组件，一些复杂的页面/模块通常可以拆分成一些基础组件，通过组件的组合来完成界面的显示与布局；

src/layouts存放的是和界面布局相关的.vue文件，如前所述，一个页面是由src/components里面的组件组合而成的，那么就需要一个容器，来将组件固定在合适的位置，这就是layouts的作用它实际上是防放置了一堆的容器。单独拿出来作为一个目录，也是为了方便以后扩展到手机、平板、小屏幕PC、超大屏幕PC等多种布局设备上，这样你只需要关注src/layouts中容器位置的修改即可，这也是适应目前web开发“一套代码、多端共用”的趋势；

src/pages则是实际组装好的页面文件，这是单页应用（SPA，即一个应用实际上只有一个页面，通过动态重写当前页面来与用户交互，避免了页面之间切换打断用户体验）的需要，通常来说，单页应用的一个页就是一个page。src/pages一般和src/routes中的路由配置配合使用，这也刚好顺应了SPA应用通过路由来做页面的跳转和重绘的思路

• src/routes

这个部分原封不动地使用了Vue-Router来处理页面跳转的逻辑。请参照https://router.vuejs.org 来开发。

值得注意的是，这里推荐组件和页面的动态加载，即只有在路由跳转之后，才去加载相应的js文件：

这样做，有效避免了程序刚进入入口页面时，就一股脑地将所有页面文件加载进来，减轻页面重量，同时，进行过一次加载的文件会缓存在本地，后续跳转和一次性全部加载的体验是一样的。

如果后续有模块化页面需要，也可以参考此方式配合路由跳转动态加载模块

1. 如何部署到服务器？

目前公司服务器是阿里云的ECS云服务器，以华南节点的测试服为例，来部署流媒体服务器。配置信息如下：

在开发/调试环境中，Quasar-cli利用webpack工具主要做了以下几件事情:

1. 将src目录下的文件（主要是.vue文件）使用JIT（just in time）模式编译成bundles（并没有实体文件）
2. 提供了一个静态文件服务器，供浏览器通过url访问bundles；
3. 提供了http发起和代理转发服务；
4. 搭建了一个websocket服务器，将热更新的bundles热替换到浏览器的相应模块；

在生产环境中，D是不需要的；BC的功能是通过反向代理来实现的。在我们的场景中，云端服务器的系统是Centos7的，反向代理使用的是apache。关于反向代理服务器请谷歌或者参考https://blog.csdn.net/keyeagle/article/details/6723408 。在这个使用场景中，其本质是提供了一个静态文件服务器，浏览器通过url访问编译好的js, html, css, assets等bundles，在浏览器中解析渲染之后，得到SPA的app。

剩下A功能的实现，也是利用Quasar-cli的构建命令来实现的。在Quasar文档中，详细介绍了如何构建不同模式，不同主题，不同平台的文件构建过程。详细见：http://www.quasarchs.com/guide/quasar-cli.html#build-clean-构建生产版本应用

编译好之后，在项目根目录，会生成一个dist文件夹（如果已经存在编译过的文件，则会先删除dist文件夹之后，再重新生成新的文件），dist目录下，按照不同的模式，不同主题生成了了不同的编译好的文件。将dist文件夹打包上传到服务器中。这里以http://test2.goolton.com 为例，在不改变现有服务器apache的配置文件的情况下来详细说明如何部署到生产环境中。在现在的apache配置中，已经将http://test2.goolton.com 的根目录指向到了gdIndustry/active/pub 路径下，也就是说，如果需要访问gdIndustry/active/pub下的a.html，只需要在浏览器中通过url: http://test2.goolton.com/a.html 即可。同样的，我们把dist目录整个上传到gdIndustry/active/pub/dist下，那么只需要把url补齐，使url指向index.html即可。这里为http://test2.goolton.com/dist/index.html。

当然，也可以通过修改apache配置来让你的url变得更短，更易读。

1. 注意事项

暂无