云窗前端框架升级方案实践以及可视化查询的设计与实现

又到了每周分享的时间啦，这周给大家带来的是技术分享，分享的主题是《云窗前端框架升级方案实践以及可视化查询的设计与实现》，下面让我们一起来了解一下我们是怎么实现云窗前端框架升级和可视化查询的吧。

整个分享分为二个部分，第一部分是云窗前端框架升级方案的选择。第二部分是方案升级的实践案例。

页面部分升级——可视化查询项目

部分页面全量升级——知识库项目

云窗原版的前端使用了angularjs的前端框架，前端发展这么块，云窗项目已经维护了3年了，需要跟着时代的潮流，使用使用新的技术了。

如何和新的技术结合？选择什么技术呢？

在技术选型上，我们选择了在写法上比较相近的vue。

相比与原来的angularjs，vue在检查机制，压缩大小，相关生态...都随着这几年的发展越来越完善。

而我们原先的angularjs项目，鉴于整个项目内容太大，重构成本大，成效低。现在项目也在开发过程中注意性能优化，整体使用效果还能满足需求。

我们的更新方案为：

旧项目angularjs继续维护，新功能使用vue开发。

这个目标需要真正的实践方案支持：

1. ngvue

2. iframe

1. ngvue

ngvue是一个angularjs的插件，可以让我们在angularjs的项目里使用vue。

它是如何做到的呢？

ngvue将vue环境封装成了一个angularjs的指令。当我们在angularjs的环境里调用这个指令时，这个指令内部的环境都变成vue的环境。可以在这个环境里，使用vue的相关特性。

ngvue github地址：https://github.com/ngVue/ngVue

下面就是可视化查询使用ngvue的效果，红框内部就是vue的环境，而访问的整个页面都是angularjs的环境。

下来让我们在这个vue环境里做点事情。

实现一个可视化查询。

什么是可视化查询呢？

有一些同学，并不会写SQL，但是他有查数的需求，作为一个完善的大数据解决方案，当然要有可视化的查询解决方案。

但是前端怎么实现呢？

整个功能框架分为三个部分。

页面功能层 ——>  交互存储数据结构 ——> 接口层（输出SQL语句）

页面功能层（画布功能、SQL语句功能实现、实时SQL展示三个模块）

接口层的SQL语句的后端在支持SQL已经实现了，现在先设计交互存储的数据结构。

如何用一个数据结构存储SQL语句？

SQL语句的基础模块：字段、表、条件

可复用的条件规则实现了a=b and c=d 的效果。在生成规则的时候也可以用递归的方法，访问到每一个数据。

将这个结构存储在vuex里。

设计完存储结构，就到了真正实现可视化查询页面效果的时刻了！！！

我们要实现什么样的效果呢？

进入到可视化查询功能后，筛选数据库，找到需要查询的表，通过拖拽或者双击，在我们的画布上生成这个表的节点。

节点的表头支持全选、别名、删除。

节点支持拖拽、放大、缩放。

节点的每个字段支持勾选、右键、重名、计算规则（summaxmin...）

右键支持where、group by、order by。

节点间支持连线，生成join条件。

.......

功能这么多，实现分4步：

1.angularjs和vue通信

2.画布功能

3.SQL功能实现

4.动态数据组装

1.angularjs和vue通信

ngvue提供了v-props的属性可以实现通信。

也可以把相关数据绑定在window上绕过angularjs。

2.可视化

一个可视化功能可以分为三个部分：画布、节点、连线。

在svg的画布里画一个支持vue双向绑定的dom请使用vue的extend方法。

chrome的forignObject内部不支持滚动条，请在forignObject上写。

3.SQL实现

from和join的效果展示效果是node之间的连线，连线多了就成了一个无向图。如何处理无向图，将join的条件正常存储？

我们的方案是对每一个node进行编号，将join的条件存储在两个表编号大的节点上。保证条件的唯一性。

where条件的处理：

针对where条件支持字段和值，无法区分字段和值的特征。对字段进行处理，用@001@aaa@002@进行标记，有这个标记的是字段。

从vuex的数据结构，计算成SQL。

2. iframe

知识库是一个完全用vue开发的单页应用。

使用iframe内嵌到云窗的angularjs的环境，保留云窗的导航。

使用html5的postMessage进行通信。

使用URL存储vue路径，保证后退、重新访问更新正常。

上面就是我们之前尝试部分升级前端框架的方案和实践，希望对你们的框架升级和产品设计有启发。在开发过程中遇到了很多问题，在解决过程中，也提升了自己的开发和设计能力，体验了科技的升级。每一个前端人为了技术的发展都在努力创造更加通用，更简单、好用的服务产品，虽然前端的历史，很短，快速发展也是这几年。是历史的机遇，也是我们每个人的机遇，在中美贸易战的今天，希望我们每一个人都努力，完成祖国的伟大复兴，早日实现中国梦。谢谢大家。

本文来源于：云窗前端框架升级方案实践以及可视化查询的设计与实现-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。