整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前的項目大多數都是java程序猿又當爹又當媽，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/Oracle等等）。
隨著時代的發展，漸漸的許多大中小公司開始把前后端的界限分的越來越明確，前端工程師只管前端的事情，后端工程師只管后端的事情，正所謂術業有專攻，一個人如果什么都會，那么他畢竟什么都不精。
大中型公司需要專業人才，小公司需要全才，但是對于個人職業發展來說，我建議是分開。你要是這輩子就吃java這碗飯，就不要去研究什么css，js等等。
把你的精力專注在java，jvm原理，spring原理，mysql鎖，事務，多線程，大并發，分布式架構，微服務，以及相關的項目管理等等，這樣你的核心競爭力才會越來越高，正所謂你往生活中投入什么，生活就會反饋給你什么。
（滿滿的正能量：
一旦你成為了一個行業里的精英，相信我，到時候，車，房，女人，錢，機會就都來找你了，不用著急，真的。
干java程序猿這行，真的很簡單的，你懂得知識越多，你的錢就越多，當然了還需要有一定的情商。。。
你的能力越強，你就比別人創造的價值更多，你為公司創造了價值，公司給你各種福利，雙贏！）
幾曾何時，我們的java web項目都是使用了若干后臺框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等
大多數項目在java后端都是分了三層，控制層（controller/action），業務層（service/manage），持久層（dao）。
控制層負責接收參數，調用相關業務層，封裝數據，以及路由到jsp頁面。然后jsp頁面上使用各種標簽（jstl/el）或者手寫java（<%=%>）將后臺的數據展現出來。
對吧？
我們先看這種情況，需求定完了，代碼寫完了，測試測完了，然后呢？要發布了吧？
你需要用maven或者eclipse等工具把你的代碼打成一個war包，然后把這個war包發布到你的生產環境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，對吧？
發布完了之后，你要啟動你的web容器，開始提供服務，這時候你通過配置域名，dns等等相關，你的網站就可以訪問了（假設你是個網站）。
那我們來看，你的前后端代碼是不是全都在那個war包里？包括你的js，css，圖片，各種第三方的庫，對吧？
好，下面在瀏覽器中輸入你的網站域名（www.xxx.com），之后發生了什么？（這個問題也是很多公司的面試題）
我撿干的說了啊，基礎不好的童鞋請自己去搜。
瀏覽器在通過ip路由到你的服務，在tcp3次握手之后，通過tcp協議開始訪問你的web服務器，你的web服務器得到請求后，開始提供服務，接收請求，之后通過response返回你的應答給瀏覽器。
那么我們來看，我們先假設你的首頁中有100張圖片，以及一個單表的查詢，此時，用戶的看似一次http請求，其實并不是一次，用戶在第一次訪問的時候，瀏覽器中不會有緩存，你的100張圖片，瀏覽器要連著請求100次http請求（有人會跟我說http長鏈短鏈的問題，不在這里討論），你的web服務器接收這些請求，都需要耗費內存去創建socket來玩tcp傳輸。
重點來了，這樣的話，你的web服務器的壓力會非常大，因為頁面中的所有請求都是只請求到你這臺服務器上，如果1個人還好，如果10000個人并發訪問呢（先不聊web服務器集群，這里就說是單實例web服務器），那你的服務器能扛住多少個tcp鏈接？你的服務器的內存有多大？你能抗住多少IO？你給web服務器分的內存有多大？會不會宕機？
這就是為什么，越是大中型的web應用，他們越是要解耦。
理論上你可以把你的數據庫+應用服務+消息隊列+緩存+用戶上傳的文件+日志+等等都扔在一臺主機上，但是這樣就好像是你把雞蛋都放在一個籃子里，隱患非常大。
正常的分布式架構，是都要拆開的，你的應用服務器集群（前，后）+文件服務器集群+數據庫服務器集群+消息隊列集群+緩存集群等等。
前戲太長了。
下面步入正題，首先以后的java web項目都盡量要避免使用jsp，要搞前后臺解耦，玩分布式架構，這樣我們的應用架構才更強。
基于上述的一些痛點，我們應該把整個項目的開發權重往前移，實現前后端真正的解耦！
以前老的方式是：
新的方式是：
（有興趣的童鞋可以訪問一下阿里巴巴等大型網站，然后按一下F12，監控一下你刷新一次頁面，他的http是怎么玩的，大多數都是單獨請求后臺數據，使用json傳輸數據，而不是一個大而全的http請求把整個頁面包括動+靜全部返回過來）
這樣做的好處是：
注意：
來源：來源：http://1t.click/peD
回復“資源”，視頻教程，微服務、并發，數據可調優等，微信搜索【Java知音】
回復“源碼”，領取一些練手項目，完整可用的項目源碼，微信搜索【Java知音】
例1:限定字數
<c:choose>
<c:when test="${fn:length(name) >=6}">
<span title="${name}">${fn:substring(name,0,6)}…</span>
</c:when>
<c:otherwise>
<!-- 用于鼠標停留在標簽上面顯示全部內容使用 -->
<span title="${name}">${name}</span>
</c:otherwise>
</c:choose>
實例2:限定寬高
<div class="sup" title="${name}">${name}</div>
<style type="text/css">
white-space: normal;
line-height: 18px;/*限定高度*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/*限定行數*/
text-overflow: ellipsis;
overflow: hidden;
</style>
喜歡請關注哦
我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。
工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。
最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。
下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。
第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：
jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}創建一個jsPlumb的實例，并初始化jsPlumb的配置參數：
//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的DIV容器的id。（這里也可以使用setContainer的方法）
下面我們要創建一個節點（node），每一個節點可以用一個DIV來實現。我這里提供了一個函數來創建節點。
function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);
??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}這里做的事情就是創建了一個DIV元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。
我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。
最后返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla
下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用于連接不同的節點。
function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;
??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}
????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];
????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}instance是jsPlumb的實例
node是我們用addNode方法創建的Node實例
ports，是一個string的數組，指定端點的個數和名字
type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。
這里anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這里希望把端口畫在節點的左右兩側，并按照端口的數量均勻分布。
最后使用instance.addEndpoint來創建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。
下面一步我們提供一個函數來連接端點：
function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];
??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;
??instance.connect({uuids:[uuid_source,?uuid_target]});
}node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。
使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。
調用以上方法來創建節點，端點和連接線。
var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});
addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');
connectPorts(instance,?node1,?'out2',?node2,?'in');這里我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然后把第一個節點的out2端口連接到第二個端點的in端口。效果如下：
最后我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的布局了。
instance.draggable($('.node'));這里似乎依賴于JQuery-UI,我還不是很清楚。
我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。
通常我們希望有一個tree view的控件，讓后通過拖拽來創建對應類型的節點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview
我們先創建一個tree view：
function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?
??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});樹上有兩個節點:
然后我實現從樹上拖拽對應的節點，到流程圖上的邏輯。
//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});
$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}
??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';
??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。
好了，一個繪制流程圖的軟件工具初步完工。
我把代碼放在oschina的代碼托管服務上了， 大家有興趣可以去試試。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
