大家好，我是帅气小伙，3个月的实习期刚好过去，是时候总结一下这段时间的工作经历了。给自己的总结是，基本入门基于Spirng框架的后台开发。自我感觉是，比一般人学得多，因为我的导师是一名高级Java工程师。关于和这位大哥哥的故事，我们后续说吧。今天，我要为大家讲的是如何从一个Demo下手，从而完成工作中的需求。
项目背景
我要给大家简单地说几句关于我在实习期做的项目。不然大家是听不懂的。我这3个月做的项目是一个基于mule的数据转换中心。原理类似于使用Mule ESB与Groovy编排RESTful服务 。项目搭建在Spring boot上，将封装的mule以component的形式启动，从而配置多种类型的端口，不同的端口类型有不同的获取数据的途径（webserivce，database，jms，http等调用方式），将flow视为待处理数据流，以Groovy这门JVM语言编排成指定格式的Json或者Xml格式的数据。看不懂也没关系。接着往下看吧。
原理
需求
"在Web的管理页面，用线图绘制出参数之间的映射关系，并以连线的方式自动化生成Groovy脚本"，总监如是说。对于我来说这简直太难了。因为我3个月的情况是从未开发过web项目的，更别提那些复杂的js了。总监也知道了我的实际情况。于是在网上给我找了Demo。
我上我也行，上网一搜“jsplumb 流程图”，第5篇文章。
Demo
我做出来之后
实现过程
拿到一个Demo首先你要让它运行起来，很简单双加点开Html即可，映入眼帘的是
Demo界面
玩一下，看看有什么功能，很简单，拖拽连线，节点可动。
然后就看查看网页源码
其实看HTML页面的3步曲很简单
<head></head> 主要看看引用的第三方的css，js库
<body></body> 页面元素
<script></script> 这个页面的js代码
根据这个套路，我就找到了这个页面的js
怎么才能找到程序入口呢？
很简单，逐个方法（function）删除，删除到哪个导致程序无法运行，那个就是入口了。
找到入口怎么办？
一步一步看完，直到结尾，看你能看得懂的
源码我就不提了，因为demo都有，接下来的实现过程，请看着demo源代码对比一下，基本没变多少。
动态绘图的基本套路
1.数据初始化
2.图形绘制
3.数据保存
如何才能实现动态绘图？
动态获取获取数据 ajax
关键不是动态，而是数据，如何定义数据结构才是关键。为了让大家好看，我就截图了
数据库参数模型
参数=图端点
图模型
一张关系图=节点+线条
节点模型
节点里有端点
端点模型
一个端点代表一个数据属性含有脚本
线条模型
两点确定一条线
线条保存模型
[{"source":"SER_34764375_OUT_95","target":"PRO_86680172_IN_103"}]
这些数据模型，就是我摸索了2个星期才想出来的，实在不容易。定义好这些数据结构，该如何处理呢？
总的代码流程是这样走的
1.查数据库的，目的是找出第一个节点
2.查数据库，找到图中的含红色端点的节点
3.查数据库，找到中间的节点（存在多个）
4.动态计算节点的位置和长宽，定宽不定长，位置是紧贴的
5.同层级内按端点名称的首字母排序，为了方便连线和美观
6.动态增加节点的宽度（因为如果层级越深，节点左边的lable将会显示不全）
7.查数据库，获取之前保存的线条（json数据）
调用绘制方法
经过后台代码的处理后，我们得到了json数据，接下来就是解析json数据并调用jsplumb的API
1.初始化jsplumb实例
接着下面吧，不会用markdown
接下来我们将draw方法
图=节点+线条 节点=div+svg
2.节点初始化
跟demo的代码是一样的，只是改了一下而已
3.端点初始化
下面就是调用jsplumb的绘点方法（下面还有）part1
什么是端点的左右填充物（还没完）part2
填充物的Html是这样的
这些就填充物
层级关系
设置端点的参数（接着上面）part3
4.线条初始化
循环创建
调用jsplumb实例方法
连线监听，连完线就把脚本加上
数据保存
调用jsplumb实例，获取所有的连线，最后提交到后台处理
总结
大家都看了我的代码了吧，很烂说真的，我确实是一个新手，但是我的思路是清晰的，我知道应该做什么，程序员就是这样，随着年月的增长，我的代码也不会这么幼稚了。作为一个刚入行的程序员，当总监叫我搭建这个项目的时候，我虽然懵逼，但是我的回答是“请相信我，我可以的”。想想，你在生活中，因为一句“我不会”，你曾经错过了多少次机会。如果不是我当初的自信，我觉得我现在就只会写写接口了，也绝对没有与高级java合作的机会。
