来试试这个用 Vue 撸的数据可视化后台吧
|
看板整合多个图表在后端而言只是一个关联相关的打点，对前端而言则必要按照看板关联的图表来对页面举办机关，然后按照生涯的图表来查询数据、可视化渲染。页面机关首要是操作了 vue-grid-layout 举办 grid 机关，同时也支持拖拽和巨细调解等。可视化的逻辑跟建设图表时的可视化是一样的，不再赘述。 这里碰着的题目是对付已有机关的看板，添加新图表时，新图表的定位要怎样计较。这着实跟图片瀑布流的题目有些相似，可是因为各个 item 不定宽高，着实相对更难一些，我已经找到了思绪，做了一些计较，可是今朝还不完美，完美后我会再写文章来先容。 5. 数据的权限题目 公司的数据着实相等敏感，对付上市公司而言，数据会影响股价走势，对非上市公司来说，会影响投融资的进度，都是相关到公司财政乃至存亡生死的大事，因此数据的权限打点黑白常重要的。在这个项目里，这一部门的办理方案着实并不简朴，可是伟大度首要在于后端而不是前端。简朴来说，我们的权限是做到了数据表这一层级，由打点员向体系中添加数据源，添加的同时界说好该数据源的权限范畴，如产物、运营、开拓等权限脚色。用户进入体系后，由打点员给用户分派权限脚色，用户只能查询其自身对应脚色所能查察的数据。因为权限和数据源打点的部门暂且还没有添加到这个开源项目中来，因此也就不细说了，先挖个坑，往后有机遇再填。 6. 其他技能点： 起首项目标构建是用了 Vue-cli@3.0，除了默认的设置之外，还通过 vue.config.js 做了一些自界说的设置。 项目顶用到了许多 icon，固然Element UI 的 icon 在2.8.x版本之后增进了不少， 可是照旧不能满意我们的需求(一些常用的 icon 如故没有，好比生涯)，因此必要本身来办理 icon 的题目，这里要感激 iconfont 上的计划师如山提供的这套大度的数据可视化图标库。项目标后端接口文档我是用的 postman 举办的打点，着实 postman 有许多强盛的成果，不只仅是一个接口测试器材，接口文档打点就是个中一个。我在开拓时一样平常是在当地同时起前端和后端两个项目，当地开拓时通过情形变量判定接入当地的后端接口地点：
当地开拓完成后，前端打包宣布到 gh-page 分支( git subtree push --prefix docs origin gh-pages )，后端通过 leancloud 提供的 cli 器材一键陈设，照旧挺利便的。前端的打包宣布着实可以设置 Travis-ci 来实现自动陈设，我暂且还没有配(已弃疗的耽搁症患者在此)。 项目标登录授权、图表和看板的增编削查等都是行使了 leancloud 提供的办理方案，着实操作 leancloud 的 js-sdk ，前端也可以很利便地实现工具存储的增编削查，不必要写后端接口。可是为了保持项目代码的纯洁，停止代码中引入奇稀疏怪的 AV.query 这种对象，我照旧本身做了后端的部门，虽然这部门也做的较量简朴，事实只是一个 Demo，首要就是基于 koa.js 做的的一些增编削查，根基上是面向文档编程。 项目里的状态打点用到了 vuex, 可是着实今朝为止并没有许多全局状态打点的需求，只有效户 token 生涯在了 store 里。其它关于状态打点，我在这个项目标建设图表的部门还实行用了Vue 的简朴状态打点模式( 代码在此 )，这个模式用起来是没题目的，对付大型项目里的伟大组件来说是很好用的，很利便地办理了伟大组件内部的状态共享题目。可是今朝对付我这个项目而言并不是出格合用，由于这部门的状态打点放在全局状态也挺吻合，虽然这里是见仁见智了，我认为就今朝这样也挺好。 最后 这个项目标焦点成果今朝算是已经完成得七七八八了，尚有一些成果很不完美，后期会慢慢完美起来。数据说明可视化平台海内社区里的接头貌似不多，一些中文的接头大多是计划和产物方面的先容，并且过于抱负化，在实践中也许不太轻易落地，关于技能实现的接头不多(虽然后端和运维方面照旧较量多的)，开源项目也没见几多，因此我这个项目也算是做了一些试探，虽然我没几多履历，固然参考了几个贸易平台的产物交互计划，可是许多处所都是摸着石头过河，有些处所应该会有更好的办理方案，但愿我的这个项目可以抛砖引玉，也但愿各人可以或许多提意见。
（编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
