前后端分離
傳統開發方式
曾幾何時,JSP和Servlet為Java帶來了無限風光,一時間大紅大紫,但隨着互聯網的不斷發展,這樣的開發方式逐漸顯露其弊端,在移動互聯網炙手可熱的今天,應用程序對於后台服務的要求發生了巨大的變化;
傳統的項目開發與交互流程:
在傳統的web開發中,頁面展示的內容以及頁面之間的跳轉邏輯,全都由后台來控制,這導致了前后端耦合度非常高,耦合度高則意味着,擴展性差,維護性差,等等問題
傳統開發的問題如下:
-
耦合度高
-
調試麻煩,出現問題時往往需要前后台一起檢查
-
開發效率低,前后端相互依賴,溝通成本,維護成本高
-
擴展性差,無法兼容其他終端
-
交互邏輯混亂(還記得分頁顯示嗎),最終造成代碼腐爛
為了適應快速發展的移動互聯網,加快開發速度,就必須找到一種新的項目開發方式,來解決以上問題;
前后端分離開發方式
上述問題產生的根本原因在於前后端沒有明顯的分界,嚴重耦合在一起,想要解決這些問題的核心也就是將前后端代碼完全分開
前后端分離開發與交互流程:
有啥不一樣嗎?
對比我們之前編寫的整個項目結構和部署環境而言,有以下區別
| 特性/方式 | 傳統 | 前后端分離 |
|---|---|---|
| 服務器環境 | 全部部署到tomca即可 | 增加一個靜態資源服務器 |
| MVC職責 | 后台負責MVC全部 | 前台負責VC,后台負責M |
簡單的說:
前后端分離在傳統開發上增加了一個服務器處理靜態資源,將View層和Controller層放到了前端,后台僅需處理數據存取相關以及業務邏輯相關
前端：負責View和Controller層。
后端：只負責Model層，業務處理/數據等。
前后端分離的優缺點
優點:
-
關注點分離,視圖層和控制層邏輯移到了前端,后端更注重業務邏輯和系統構架
-
耦合大大降低,開發效率和維護效率都得到提高
-
錯誤友好,后台錯誤不影響前台界面展示
-
對於開發者,前后端不再需要過多的涉及彼此的開發語言
缺點:
- 前端開發者壓力更大,需要關注Controller層
- 增加靜態服務器后,系統結構更復雜
- 更多的HTTP請求,在移動端運行效率差
- 邏輯靠近前端,不同平台需針對性重復實現,(安卓iOS+web)
- SEO優化無力,爬蟲大多不支持ajax
前后端的重新定義:
在此之前區分前后端是根據硬件環境
分離后根據職責划分:如圖
前后端分離頁面執行流程(針對瀏覽器)
Controller層中會使用流程控制來完成數據校驗,數據解析,頁面的跳轉等動作,那么如何完成呢,這就需要使用到JavaScript了
那么一個前后端分離的項目,前端是如何完成最終的數據展示呢?
如果前端是其他的例如iOS,安卓,則無需請求靜態頁面,頁面的繪制是由系統原始語言實現的,只需要向后台請求json數據即可
what is json?
JSON全稱(JavaScript Object Notation),js對象表示法,是一種輕量級數據交換格式
特點:
- 格式簡單
- 解析方便,跨平台
- 輕量級
- 內容為字符串
最初產生於web項目中,后來因為太優秀,被各種CS結構項目使用
案例:
{
"uniquekey":"a56e67162bd84ee9c480e22a1170c14b",
"title":"人均負債17萬從“全民儲蓄”到“全民負債” 中國人的錢去哪兒了?",
"date":"2019-12-22 13:43",
"category":"頭條",
"author_name":"鶴川傾海",
"url":"http://mini.eastday.com/mobile/191222134359221.html",
"thumbnail_pic_s":"http://05imgmini.eastday.com/mobile/20191222/20191222134359_b6ded6df388f5c6747e67bacfc32d125_4_mwpm_03200403.jpg"
}
你可以將其看做Map數據結構,以鍵值對形式存儲,但是一些java中的數據結構json中是沒有的例如,集合
不滿足現狀的前端小伙伴們-node.js
現在你已經知道了前后端分離的概念以及運行流程,作為后端開發的你不禁暗自竊喜,好了以后Controller不歸我管了,你正要開始葛優躺時前端小伙伴炸鍋了:
尼瑪,各種頁面跳轉邏輯,用戶驗證邏輯,前端的表單驗證………..,難道要在學學java?習慣了js的他們,肯定不願意
問題就是動力,國外的Ryan Dahl這為兄台,決定改變這個現狀,於是開發了使用JS作為開發語言的Node.js(2009/5),提供了異步IO,數據庫支持,網絡支持,等等,廣大前端開發者激動落淚,以后別整什么java了,前后台一套JS全搞定,夢想是美好的,java(1996)是強大的,經歷了二十幾年的努力java已經是如此強大,穩定,node.js作為晚了13年的后期之秀還有很長的路要走;
相信使用一門語言編寫所有程序的一天總會到來,也有很多人在努力實現這個夢想,例如RectNative;
Node.js在前后端分離中的作用
大家都知道淘寶網站做得很大面對成百上千的前台頁面,想要提高整體開發效率,以及項目擴展性等,必然要采用前后端分離,大量的Controller層邏輯,以及數據校驗邏輯,導致前端開發亞歷山大,並且沒有相對固定的開發模型,非常容易出問題
淘寶目前使用了一種叫做中途島的構架,利用Node.js來完成了Controller層,並提供了一些其他良好的特性
構架:
職責:
優點:
- 請求聚合,Node在服務器端整合多個請求響應,一次性返回,效率更高
- SEO優化
- JS語言,學習成本低
- 瀏覽器與Node.js端代碼可重用
- 服務器渲染
如果將其作為一個前端框架,Node.js對比Vue.js等無疑是重量級的
強調:
前后端分離並不是一定要加入node.js,前后端分離是責任划分問題,與使用什么服務器沒有關系;
嘗試一下
在頁面中使用Ajax來請求數據,服務器返回json數據,前端使用js完成頁面渲染
Ajax
Ajax是客戶端的一種請求方式,全稱(Asynchronous Javascript And XML)
用於異步的向服務器發送HTTP請求並獲取響應數據,異步的好處在於,請求期間瀏覽器不會卡死,可以正常響應用戶操作;而常見的表單提交,和直接打開指定地址,都是同步的;
對象轉json
json數據的基本形式是鍵值對,對應着對象中的屬性,是有規律的,那就可以使用代碼來完成這一轉換過程,下面列出了一些常見的json開源工具
- Gson
- FastJson
- Jackson
- Json-lib
性能對比請看這里對比
這里選擇fastjson
下載jar
http://repo1.maven.org/maven2/com/alibaba/fastjson/
案例:
import com.alibaba.fastjson.JSON;
import java.util.ArrayList;
public class Demo {
public static void main(String[] args) {
//Bean列表
ArrayList<String> hobby = new ArrayList<>();
hobby.add("girl");
hobby.add("music");
hobby.add("coding");
//JavaBean
Person p = new Person("jerry",18,true,hobby);
p.setDog(new Dog("小花花"));
//Bean轉json字符串
String s = JSON.toJSONString(p);
System.out.println(s);
//json字符轉Bean
Person person = JSON.parseObject(s,Person.class);
System.out.println(person);
//ArrAyList轉json字符串
System.out.println(JSON.toJSONString(hobby));
}
}