|
引言： 很久沒寫文章了,，首先恭喜自己這2年的付出,，全網(wǎng)閱讀突破10W+，或許這不能說明但是對于我來說是我前進的動力,，努力沒有白費,，我一直堅信，經(jīng)驗是由一點一點積累的，思維也是由一天一天訓(xùn)練出來的,。 1為什么寫這篇技術(shù)文章工作這么久了,，基本上對數(shù)據(jù)非常敏感，特別自己剛?cè)腴Tjava的時候,，感覺總是力不從心,，一會數(shù)據(jù)庫，一會后臺,，一會前端,，一會前端數(shù)據(jù)一會改變后臺數(shù)據(jù)，自己非常迷糊?，F(xiàn)在明白了,，不管前臺數(shù)據(jù)還是后臺數(shù)據(jù)只有清楚的掌握HTML+js與網(wǎng)站后臺的交互原理，不論是編寫代碼還是修改功能都可以迎刃而解,。 2技術(shù)大綱看文章之前,，還是老樣子，請先看下面這個技術(shù)大綱,，大概了解這里面涉及到的技術(shù),，按照大綱看文章你會豁然開朗。 3聊聊html到底如何與后臺進行數(shù)據(jù)交互的3.1Html+JstL(EL表達式)+DOM瀏覽器操作+Struts2框架時代1,、struts可以想象為一個后臺存儲數(shù)據(jù)的地方,，我們借助struts的Action一個容器，可以將我們所有想要在瀏覽器中想要展示的數(shù)據(jù)放入到Action中,。 例如我們要想把電商網(wǎng)站的：商品類目顯示到瀏覽器這個時候我們需要將紅色框中的文字設(shè)置在struts2的Action中,。 2、有了這些數(shù)據(jù)我們借助Jstl+El表達式就可以直接將這些數(shù)據(jù)直接渲染到HTML頁面上去,。此時用戶就可以看到網(wǎng)站的商品類目數(shù)據(jù)了,。 3.2Html+javascript+Json數(shù)據(jù)格式+spring mvc框架rest ApI接口時代1、srping mvc 可以想象為一個后臺存儲數(shù)據(jù)的地方,，我們借助Spring MVC responseBod注解,，可以將我們所有想要在瀏覽器中想要展示的數(shù)據(jù)轉(zhuǎn)換為json格式的數(shù)據(jù)。 2,、有了這些數(shù)據(jù)我們借助javascript以及jquery技術(shù)渲染到HTML頁面上去,。此時用戶就可以看到網(wǎng)站的商品類目數(shù)據(jù)了。 3.3angularjs+vue MVVM 框架+spring boot+spring Cloud微服務(wù)時代1,、spring boot+spring Cloud可以想象為一個后臺存儲數(shù)據(jù)的地方,，我們借助spring boot+spring Cloud進行對項目進行模塊化管理：比如我的電商項目可以分為：購物車模塊、個人中心模塊,、商品搜索模塊,。這些模塊都可以使用spring Cloud微服務(wù)進行管理，然后最終分別返回后臺數(shù)據(jù)接口。 2,、有了這些數(shù)據(jù)我們使用angularjs和vue技術(shù),，進行頁面實施渲染，直接通過前端vue技術(shù)能夠進行實時渲染數(shù)據(jù),，MVVM框架最強大的功能是雙向數(shù)據(jù)綁定功能,，你不再去操作dom了，因為操作瀏覽器Dom元素過于復(fù)雜繁瑣,，有了前端VUE框架的出現(xiàn),，你只需要頁面實時渲染就可以了。 4技術(shù)實戰(zhàn)1,、 說了這么多,，到底知道這些原理有什么用呢？拿到一個項目首先需要分析他的前端是struts框架還是spring mvc框架,，或者是spring cloud框架,。第二步后端分析完成進行前端框架分析，看他的前端框架屬于第幾代框架,。如果后端是struts框架那么前端一定是jsp或者EL表達式,，如果后端是spring mvc這種restful接口，前端一定是AJAX動態(tài)DOM渲染技術(shù),，進行渲染頁面,。 2、大家可以看我這套電商項目,，獲取購物車模塊是一個AJAX請求的我們電商模塊后臺,，因為我的電商項目后臺是使用sping mvc以及spring boot微服務(wù)實現(xiàn)的，所以我返回的數(shù)據(jù)格式絕對是JSON格式的數(shù)據(jù),。 那么我前端一定是使用jquery或者javascript進行頁面元素渲染,。大家可以看這句話 $(".cart-count").html(data.data);這句話就是將頁面上的html的購物車圖標(biāo)數(shù)量設(shè)置渲染到頁面上。 3,、大家工作基本上使用到最多的就是這種操作DOM的前端技術(shù),，在這我給大家提幾個技術(shù)點，學(xué)會了 無論工作和學(xué)習(xí),，發(fā)現(xiàn)任何網(wǎng)站數(shù)據(jù)都可以進行隨心所欲篡改,，本質(zhì)是改變?yōu)g覽器的DOM數(shù)據(jù)渲染。
$("選擇器").sibing查找當(dāng)前元素的兄弟節(jié)點 $("選擇器").parent()當(dāng)前元素的父節(jié)點 $("選擇器").before();當(dāng)前元素之前插入元素 $("選擇器").hide();隱藏當(dāng)前元素 5有意義的一句話存在問題，需要先思考，先思考問題尋找解決的辦法,，然后再進行分析哪種方案可行,，最終選擇一種最佳方案解決它。而不是不思考直接解決它,，也不能不思考也不解決它,。 |
|
|
