先後端分離構架 與 json ajax簡介

先後端分離

傳統開發方式

曾幾什麼時候,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));
    }
}