新入手Vue及ECharts、Tornado，基于vue-element-admin构建大数据可视化21天感想

做为大数据人工智能开发者，是需要一个前端可视化的工具，把咱们自己后台研究成果展现出来，特别是让人能看懂、理解非常重要。

1. 项目概述

以大数据可视化为需求，以前后端分离为技术架构原则，以开源解决方案为方法。

经过简短的选型分析、论证，选定Vue.js+element-ui为前端框架，后端由Tornado提供restful服务，数据库为MongoDB。

前端开源解决方案：

1. 核心开源框架为vue-element-admin

vue-element-admin 是一个后台前端解决方案，依据vue-element-admin二次开发方法。我们可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

2. 大数据可视化效果为GitDataV

GitDataV，是一个github“大数据可视化平台”，通过它你可以更直观的看到你在github里的一些数据。

3. 图表可视化为ECharts、ecStat、vue-echarts

ecStat 是 ECharts 的统计和数据挖掘工具。可以把它当作一个工具库直接用来分析数据；也可以将其与 ECharts 结合使用，用 ECharts 可视化数据分析的结果。

后端开源解决方案：

后端使用了Python的Tornado框架，设计发布为REST规范的webservice，.这里使用pyrestful的插件。

Tornado是一个Python web框架和异步网络库，通过使用无阻塞网络I/O，Tornado可以扩展到数万个开放连接。

pyRestful是一个API，用于使用Tornado Web服务器开发restful服务。

2. 技术栈

方案技术栈图

注：其中SVG矢量图标来自iconfont。

我的技术栈

我曾经以项目经理的身份经历过Boostrap与Jquery与Soap webservice前后端分离的SOA多租户技术架构，以主管技术身份经历过Vue+Element-UI+Node.js+Spring boot前后端分离的微服务技术架构，虽然参与技术设计和解决点技术问题，但没有实际系统性的做编码开发、部署系统。而我更多的精力是投入到业务分析和大数据人工智能的算法方面研究。

参考：《HTML（JS）+SOA+MongoDB简易架构实践经验》（2016年的总结，代码不是主写的，我的是纯javascript代码《JavaScript遍历HTML表单元素及表单定义》、《网页表单文档设计及技术实现》，2015年初启动项目时写的）

3. 本地实用化过程回顾

现今，亲自实操搭建、整合框架工作，这些经历对于我来说，优势是视野开阔，直白的说就是看到代码、报错是什么意思，知道怎么查找参考资料，劣势是代码语法得现查，短时间内记不住命令，影响效率。

每个人掌握框架深度、方法都是不一样的，我先谈谈我的思路、方法，分享供参考。

3.1. 技术核心主线

首先，抓住主线，vue-element-admin核心后台管理，也就是登录、权限、菜单等，这些是掌握框架可用的精髓，我就把原先通过Mock Server模拟登录控制替换为后端实际的restful接口。

这样，能确保前后端联动，全线贯通，心里就有地气了！不过，这些是这个框架里最复杂部分，有些难度，需要知道或者掌握Ajax、HTTP协议、跨域、事件监听等技术。

详见如下过程（虽然标题为（2）号，这是从大数据可视化视角看，实际是第一个完成，另个原因是本人对前端技术没有十足的信心）：

《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（2）——登录过程与后端python服务》。

这里遇到主要坑是跨域问题和服务调用传递参数的问题，其中跨域问题还可以通过Nginx设置Http头和代理的方式解决，本文未采用此方案。

3.2. 业务视角开始

接着，进入大数据可视化主题，全面梳理页面架构，这部分对于有界面开发人员来说，还是比较简单的，逐渐熟悉Vue和Element-UI技术即可，详见如下过程：
《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（1）——自定义菜单和仪表盘》

3.3. 图表及其数据

再接着，使用框架的Echarts图展现自己后端的数据，其中，后端的自己数据接口部分是非常关键的，通过实践掌握数据传递层次，嵌套关系，与页面框架配合，详见如下过程：

《vue-element-admin/template+tornado(pyrestful)前后端分离框架实践（3）——ECharts动态绘制图表及异步加载数据》

3.4. 大数据样式和风格

最后是界面美化工作，学习GitDataV大数据视角，拷贝需要的样式和风格，这部分关键是vue自定义组件技术，详细过程如下：

《初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化》

3.5. 发布机部署项目

至此，入手掌握基于vue-element-admin构建大数据可视化开发工作基本完成，收尾锦上添花工作就是发布产品、部署到Nginx。

此项工作，我是回顾vue cli配置（涉及vue.config.js和package.json），再次理解优化配置。

详见如下过程：

《Vue项目发布并部署到Nginx的实践笔记》

4. 我的收获

• 多层嵌套传递数据到ECharts
• 此方案可以用于快速原型开发，Echarts部分代码和方案可以复用
• 引入大数据可视化效果
• 降低前端开发门槛，我也能参与前端开发
• 前端数据分析及效果

（1）ECharts图，环形百分比图与带多元回归线的散点图（ECharts+ecStat）

综合展现效果：

5. 我的感想

21天很快过去了，vue前端，特别是经过vue-element-admin整合后的框架，对于我这样的前端了解者，还是比较容易掌握的，剩下就是熟练与经验的积累和提升。

目前为止，我对Vue.js、ES6、Element-UI的语法及相关工具还是比较陌生，只是因为有点Javascript语法的知识，在经验的引领下能抓主线读代码，做配合接口工作。但是，目前不影响我开发工作，为什么呢？

一是Vue.js比较易用，二是vue-element-admin后台管理方案封装的比较全面，易于扩展，三是本人开发经验和知识面比较广，凭着经验感觉探索。

以程序员的视角，结合当前服务架构，采用较为成熟的微服务体系，实现分布式集群。例如使用consul作为服务注册与发现管理（Python client for Consul），与spring cloud集成，并可以形成多数据中心。

做为大数据人工智能开发者，是需要一个前端可视化的工具，把咱们自己后台研究成果展现出来，特别是让人能看懂、理解非常重要。