今天學習了前后端分離開發模式又從網上查了一些資料就寫了一篇博客分享：
一.為什么分離前后端
1.1早期開發
1.2后段為主mvc模式
1.2.1Structs框架介紹
1.2.2Spring mcv開發原理介紹
1.2.3Velocity模版引擎介紹
1.2.4Freemaker模版引擎介紹
1.3Ajax帶來的SPA(Single Page Application 單頁面應用)
1.4前端為主的mv*開發
1.5Node帶來的全棧開發
三.前后端思路、代碼分享
四.總結
一.web開發的演變模式
1.1：早期開發
在web早期時代很多開發都是小項目不分前后端，一般一個小組就可以完成；
早期是最簡單明了的開發基本上服務端給什么客戶端就顯示什么（控制展現就是webservlet層），在本地配置一個Tomcat和Apache，只要業務不復雜調試都是小問題；
但是隨着時間推移業務越發復雜，因此說明service就越來越多，前端搭建本地服務就容易出錯，考慮團隊協作問題就會采取集中式開發服務器但僅僅對於后端開發者有幫助，對於前端開發者並不友好，前端修改一個標簽樣式就需要走一套流程，大大降低了開發效率；
jsp代碼中可以滲透java代碼，若是為了趕制項目往往jsp中也會出現大量業務代碼，那么提高了維護成本，降低了jsp代碼的可維護性。
為了解決這種開發需求，因此出現了后端為主的mvc開發模式：
1.2：后端為主的mvc開發模式
為了降低業務復雜度，以后端代碼為出發點，webservlet層有了架構的升級，開始出現Structs， Spring mvc等等；
因為mvc協調性非常好，所以可維護度明顯好轉，什么代碼該寫什么地方開發者也方便，為了讓 View 層更簡單干脆，還可以選擇 Velocity、Freemaker 等模板，使得模板里寫不了 Java 代碼。
雖然分工比早期的清晰但也伴隨新問題而來：
前端過度依賴開發環境：前后端協作模式有兩種：
一種就是前端寫好demo，交給后端去套模版，雖然demo本地開發很高效，但是不足去后端套模板時有可能套錯，套完后還需要前端確定，來回溝通調整的成本較大；
還有一種就是前端負責瀏覽器端的所有開發和服務器端的 View 層模板開發，好處后端不用太關注UI相關開發，不足就是前端開發重度依賴后端環境，環境成為影響前端開發效率的重要因素。
前端后段依舊職責糾纏不清：Velocity模版固然強大，可以通過獲取上下文來實現業務邏輯；但是前后端實力不相等的情況下往往會被要求在前端寫業務代碼，這樣一來Controller控制層中就會出現大量業務代碼以至於后端來實現頁面路由等功能。
1.2.1Structs框架介紹
在上一級提到了一些模版、框架，有些人可能不懂，在這里簡單介紹一下；
Struts是采用Java Servlet/JavaServer Pages技術，發表2000年5月。
采用Struts能開發出基於MVC設計模式的應用構架，用於快速開發Java Web應用。Struts實現的重點在Controller層，包括ActionServlet/RequestProcessor和我們定制的Action,也為View層提供了一系列定制標簽。但Struts幾乎沒有涉及Model層,所以Struts可以采用JAVA實現的任何形式的商業邏輯。目前為止有Struts1和Struts2，可以根據自己的需求進行選擇。
1.2.2Spring mcv開發原理介紹
Spring MVC屬於SpringFrameWork的后續產品，所以Spring 框架提供了構建 Web 應用程序的全功能 MVC 模塊。 使用 Spring 可插入的 MVC 架構，可以選擇是使用內置的 Spring Web 框架還是 Struts 這樣的 Web 框架。通過策略接口，Spring 框架是高度可配置的，而且包含多種視圖技術，例如 JavaServer Pages（JSP）技術、Velocity、Tiles、iText 和 POI。Spring MVC 分離了控制器、模型對象、分派器以及處理程序對象的角色，這種分離讓它們更容易進行定制。
1.2.3Velocity模版引擎介紹
Velocity 是一個基於 Java 的模板引擎框架，提供的模板語言可以使用在 Java 中定義的對象和變量上。Velocity 是 Apache 基金會的項目，開發的目標是分離 MVC 模式中的持久化層和業務層。但是Velocity 不僅僅被用在了 MVC 的架構中，還可以被用在以下一些場景中：
1.Web 應用：開發者在不使用 JSP 的情況下，可以用 Velocity 讓 HTML 具有動態內容的特性。
2. 源代碼生成：Velocity 可以被用來生成 Java 代碼、SQL 或者 PostScript。有很多開源和商業開發的軟件是使用 Velocity 來開發的。
3. 自動 Email：很多軟件的用戶注冊、密碼提醒或者報表都是使用 Velocity 來自動生成的。使用 Velocity 可以在文本文件里面生成郵件內容，而不是在 Java 代碼中拼接字符串。
4. 轉換 xml：Velocity 提供一個叫 Anakia 的 ant 任務，可以讀取 XML 文件並讓它能夠被 Velocity 模板讀取。一個比較普遍的應用是將 xdoc 文檔轉換成帶樣式的 HTML 文件。
1.2.4Freemaker模版引擎介紹
FreeMarker允許Java servlet保持圖形設計同應用程序邏輯的分離，這是通過在模板中密封HTML完成的。模板用servlet提供的數據動態地生成 HTML。模板語言是強大的直觀的，編譯器速度快，輸出接近靜態HTML頁面的速度。雖然FreeMarker具有一些編程的能力，但通常由Java程序准備要顯示的數據，由FreeMarker生成頁面，通過模板顯示准備的數據。
FreeMarker與容器無關，所以它並不知道HTTP或Servlet；FreeMarker同樣可以應用於非Web應用程序環境，更重要的是FreeMarker是免費的。
1.3Ajax帶來的SPA(Single Page Application 單頁面應用)
隨着Ajax的強勢來襲，Web開發直接提升了一個檔次，從最早的Web1.0晉升到了2.0；
在這種開發環境下，前后端的分工就比較清晰了，它們相互之前的聯系就是Ajax，提高了效率；
但是問題還是存在，只是復雜度從服務端的jsp轉移到了瀏覽器端的javascript。
那么以中國人的知難而上，精益求精的精神，很快又出現了客戶端的分層架構和幾個SAP挑戰：
前后端接口的約定：
通過接口規則、接口平台等方式來做和后端一起沉淀接口的規則，還可以用來模擬數據，使得前后端可以在約定接口后實現高效並行開發。
但是后段接口沒寫好，前端開發就很困難了。
前端開發的復雜度控制：
SPA 應用大多以功能交互型為主，JavaScript 代碼過十萬行很正常。大量 JS 代碼的組織，與 View 層的綁定等，都不是容易的事情。典型的解決方案是業界的 Backbone，但 Backbone 做的事還很有限，依舊存在大量空白區域需要挑戰。
1.4前端為主的mv*開發
技術總是隨着時代發展而遞進的，所以為了解決復雜度較大的前端開發問題，大量前端框架開始嶄露頭角；但是吧框架都是基於一個原則開發的就是按照類型分層。
好處勒就是:
1.前后端職責清晰；
2.前端開發復雜度可以控制；
3.部署相對獨立， 業務需要可以快速改進；
有好就有壞：
1.代碼不能重復使用；
2.全異步，需要服務端做同步渲染的降級方案；
3.不能滿足所有需求，依舊存在大量多頁面應用；
1.5Node帶來的全棧開發
從上述中可以了解前后端開發模式依舊還有不足的問題，但是Node.js的興起可能就是第二個Ajax帶着前后端開發模式來一飛躍，也因此javascript一些代碼也可以在服務器運行。
那么新模式就開始了：
這種情況下前后端開發就無比清晰了；
Layer官網(https://layer.layui.com/)
1、Front-end UI layer 處理瀏覽器層的展現邏輯。通過 CSS 渲染樣式，通過 JavaScript 添加交互功能，HTML 的生成也可以放在這層，具體看應用場景。
2、Back-end UI layer 處理路由、模板、數據獲取、cookie 等。通過路由，前端終於可以自主把控 URL Design，這樣無論是單頁面應用還是多頁面應用，前端都可以自由調控。
三.前后端思路、代碼分享
又到了思路分享段落，今天寫了三種功能新增，刪除，修改，查詢(CRUD)，但是重要的是明白前后端怎么分離開發所以就只分享了新增：
前端靜態化：只負責jsp頁面中的html代碼css樣式和js文件中的javascript代碼，那么前端的運行環境和引擎就只基於瀏覽器本身，無需后台技術去動態組裝。
后端數據化：只負責數據提供，並且后端代碼對於平台和技術沒有要求，無需提供前端代碼。
數據交互：采用接口和json格式數據方式來交互數據。
代碼分享：jsp(引用jar包)+css(可以去官網下載jar包)
JAVASCRIPT:根據頁面需求寫出對應的js代碼來獲取動態數據(新增);
后端：與數據庫連接設計方法給前端提供數據顯示
/** * 新增 * @param paMap * @return * @throws Exception */ public int add(Map<String, String[]> paMap) throws Exception { String sql = "INSERT INTO t_easyui_user_version2(uid, uname, upwd) VALUES(?,?,?)"; return super.executeUpdate(sql, new String[] { "uid", "uname", "upwd" }, paMap); }
基本思路就是這樣啦！
需要源代碼或者想一起討論的小伙伴可以＋qq:2693394420
四：總結
1.很多人因為前后端分離這個認為就是前后端代碼分開，其實不然它是一種架構模式，為了增加團隊協作能力而慢慢演變而來的。
2.前后端更多處於約定接口，實現並行開發；前端更多關注的是頁面的樣式和動態數據解析，而后端更多關注於業務邏輯的實現。