拿到一个 Demo 该怎么下手?

栏目: Groovy · 发布时间: 7年前

内容简介:拿到一个 Demo 该怎么下手?

大家好,我是帅气小伙,3个月的实习期刚好过去,是时候总结一下这段时间的工作经历了。给自己的总结是,基本入门基于Spirng框架的后台开发。自我感觉是,比一般人学得多,因为我的导师是一名高级 Java 工程师。关于和这位大哥哥的故事,我们后续说吧。今天,我要为大家讲的是如何从一个Demo下手,从而完成工作中的需求。

项目背景

我要给大家简单地说几句关于我在实习期做的项目。不然大家是听不懂的。我这3个月做的项目是一个基于mule的数据转换中心。原理类似于 使用Mule ESB与Groovy编排RESTful服务 。项目搭建在Spring boot上,将封装的mule以component的形式启动,从而配置多种类型的端口,不同的端口类型有不同的获取数据的途径(webserivce,database,jms,http等调用方式),将flow视为待处理数据流,以Groovy这门JVM语言编排成指定格式的Json或者Xml格式的数据。看不懂也没关系。接着往下看吧。

拿到一个 Demo 该怎么下手? 原理

需求

" 在Web的管理页面,用线图绘制出参数之间的映射关系,并以连线的方式自动化生成Groovy脚本 ",总监如是说。对于我来说这简直太难了。因为我3个月的情况是从未开发过web项目的,更别提那些复杂的js了。总监也知道了我的实际情况。于是在网上给我找了Demo。

用HTML5构建一个流程图绘制工具

我上我也行,上网一搜“ jsplumb 流程图 ”,第5篇文章。

拿到一个 Demo 该怎么下手? Demo 拿到一个 Demo 该怎么下手? 我做出来之后

实现过程

拿到一个Demo首先你要让它运行起来,很简单双加点开Html即可,映入眼帘的是

拿到一个 Demo 该怎么下手? Demo界面

玩一下,看看有什么功能,很简单, 拖拽连线,节点可动。

然后就看查看网页源码

其实看HTML页面的3步曲很简单

<head></head>      主要看看引用的第三方的css,js库

<body></body>      页面元素

<script></script>    这个页面的js代码

根据这个套路,我就找到了这个页面的js

怎么才能找到程序入口呢?

很简单,逐个方法(function)删除,删除到哪个导致程序无法运行,那个就是入口了。

找到入口怎么办?

一步一步看完,直到结尾,看你能看得懂的

源码我就不提了,因为demo都有,接下来的实现过程,请看着demo源代码对比一下,基本没变多少。

动态绘图的基本套路

1.数据初始化

2.图形绘制

3.数据保存

如何才能实现动态绘图?

动态获取获取数据 ajax

关键不是动态,而是数据,如何定义数据结构才是关键。为了让大家好看,我就截图了

数据库参数模型

拿到一个 Demo 该怎么下手? 参数=图端点

图模型

拿到一个 Demo 该怎么下手? 一张关系图=节点+线条

节点模型

拿到一个 Demo 该怎么下手? 节点里有端点

端点模型

拿到一个 Demo 该怎么下手? 一个端点代表一个数据属性含有脚本

线条模型

拿到一个 Demo 该怎么下手? 两点确定一条线

线条保存模型

拿到一个 Demo 该怎么下手? [{"source":"SER_34764375_OUT_95","target":"PRO_86680172_IN_103"}]

这些数据模型,就是我摸索了2个星期才想出来的,实在不容易。定义好这些数据结构,该如何处理呢?

拿到一个 Demo 该怎么下手? 总的代码流程是这样走的

1.查数据库的,目的是找出第一个节点

拿到一个 Demo 该怎么下手?

2.查数据库,找到图中的含红色端点的节点

拿到一个 Demo 该怎么下手?

3.查数据库,找到中间的节点(存在多个)

拿到一个 Demo 该怎么下手?

4.动态计算节点的位置和长宽,定宽不定长,位置是紧贴的

5.同层级内按端点名称的首字母排序,为了方便连线和美观

6.动态增加节点的宽度(因为如果层级越深,节点左边的lable将会显示不全)

7.查数据库,获取之前保存的线条(json数据)

调用绘制方法

经过后台代码的处理后,我们得到了json数据,接下来就是解析json数据并调用jsplumb的API

1.初始化jsplumb实例

拿到一个 Demo 该怎么下手? 接着下面吧,不会用markdown 拿到一个 Demo 该怎么下手? 接下来我们将draw方法 拿到一个 Demo 该怎么下手? 图=节点+线条   节点=div+svg

2.节点初始化

拿到一个 Demo 该怎么下手? 跟demo的代码是一样的,只是改了一下而已

3.端点初始化

拿到一个 Demo 该怎么下手? 下面就是调用jsplumb的绘点方法(下面还有)part1 拿到一个 Demo 该怎么下手? 什么是端点的左右填充物(还没完)part2

填充物的Html是这样的

拿到一个 Demo 该怎么下手? 这些就填充物 拿到一个 Demo 该怎么下手? 拿到一个 Demo 该怎么下手? 层级关系 拿到一个 Demo 该怎么下手? 设置端点的参数(接着上面)part3

4.线条初始化

拿到一个 Demo 该怎么下手? 循环创建 拿到一个 Demo 该怎么下手? 调用jsplumb实例方法 拿到一个 Demo 该怎么下手? 连线监听,连完线就把脚本加上

数据保存

拿到一个 Demo 该怎么下手? 调用jsplumb实例,获取所有的连线,最后提交到后台处理

总结

大家都看了我的代码了吧,很烂说真的,我确实是一个新手,但是我的思路是清晰的,我知道应该做什么,程序员就是这样,随着年月的增长,我的代码也不会这么幼稚了。作为一个刚入行的程序员,当总监叫我搭建这个项目的时候,我虽然懵逼,但是我的回答是“请相信我,我可以的”。想想,你在生活中,因为一句“我不会”,你曾经错过了多少次机会。如果不是我当初的自信,我觉得我现在就只会写写接口了,也绝对没有与高级java合作的机会。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Computing Patterns in Strings

Computing Patterns in Strings

Bill Smyth / Addison Wesley / 2003 / $ 75.00

The computation of patterns in strings is a fundamental requirement in many areas of science and information processing. The operation of a text editor, the lexical analysis of a computer program, the......一起来看看 《Computing Patterns in Strings》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具