潭州教育JavaWeb從MVC到前后端分離

1、潭州教育java教程分享 潭州教育JavaWeb 從 MVC 到前后端分離先描述 MVC 模式是什么，然后針對(duì) MVC 的不足發(fā)表了作者的個(gè)人觀點(diǎn)，隨后引出了基于 REST 架構(gòu)實(shí)現(xiàn)前后端分離的方案，最后使用了 Java 的 Spring 框架搭建了一個(gè)簡單的 REST 框架。全文從原理到實(shí)戰(zhàn)，希望對(duì)于想了解如何實(shí)現(xiàn)前后端分離架構(gòu)的朋友有所幫助。 1 理解 MVCMVC 是一種經(jīng)典的設(shè)計(jì)模式，全名為 Model-View-Controller，即 模型-視圖-控制器。其中，模型 是用于封裝數(shù)據(jù)的載體，例如，在 Java 中一般通過一個(gè)簡單的 P

2、OJO（Plain Ordinary Java Object）來表示，其本質(zhì)是一個(gè)普通的 Java Bean，包含一系列的成員變量及其 getter/setter 方法。對(duì)于 視圖 而言，它更加偏重于展現(xiàn)，也就是說，視圖決定了界面到底長什么樣子，在 Java 中可通過 JSP 來充當(dāng)視圖，或者通過純 HTML 的方式進(jìn)行展現(xiàn)，而后者才是目前的主流。模型和視圖需要通過 控制器 來進(jìn)行粘合，例如，用戶發(fā)送一個(gè) HTTP 請(qǐng)求，此時(shí)該請(qǐng)求首先會(huì)進(jìn)入控制器，然后控制器去獲取數(shù)據(jù)并將其封裝為模型，最后將模型傳遞到視圖中進(jìn)行展現(xiàn)。綜上所述，MVC 的交互過程如下圖所

3、示：2 MVC 模式的優(yōu)點(diǎn)與不足MVC 模式早在上個(gè)世紀(jì) 70 年代就誕生了，直到今天它依然存在，可見生命力相當(dāng)之強(qiáng)。MVC 模式最早用于 Smalltalk 語言中，最后在其它許多開發(fā)語言中都得到了很好的應(yīng)用，例如，Java 中的 Struts、Spring MVC 等框架。正是因?yàn)檫@些 MVC 框架的出現(xiàn)，才讓 MVC 模式真正落地，讓開發(fā)更加高效，讓代碼耦合度盡量減小，讓應(yīng)用程序各部分的職責(zé)更加清晰。既然 MVC 模式這么好，難道它就沒有不足的地方嗎？我認(rèn)為 MVC 至少有以下三點(diǎn)不足：1. 每次請(qǐng)求必須經(jīng)過“控制器->模型->視圖”這個(gè)流程，用戶才能看到最終的展現(xiàn)的界面，這

4、個(gè)過程似乎有些復(fù)雜。2. 實(shí)際上視圖是依賴于模型的，換句話說，如果沒有模型，視圖也無法呈現(xiàn)出最終的效果。3. 渲染視圖的過程是在服務(wù)端來完成的，最終呈現(xiàn)給瀏覽器的是帶有模型的視圖頁面，性能無法得到很好的優(yōu)化。為了使數(shù)據(jù)展現(xiàn)過程更加直接，并且提供更好的用戶體驗(yàn)，我們有必要對(duì) MVC 模式進(jìn)行改進(jìn)。不妨這樣來嘗試，首先從瀏覽器發(fā)送 AJAX 請(qǐng)求，然后服務(wù)端接受該請(qǐng)求并返回 JSON 數(shù)據(jù)返回給瀏覽器，最后在瀏覽器中進(jìn)行界面渲染。改進(jìn)后的 MVC 模式如下圖所示：也就是說，我們輸入的是 AJAX 請(qǐng)求，輸出的是 JSON 數(shù)據(jù)，市面上有這樣的技術(shù)來實(shí)現(xiàn)這個(gè)功能嗎？答案是 REST。 RE

5、ST 全稱是 Representational State Transfer（表述性狀態(tài)轉(zhuǎn)移），它是 Roy Fielding 博士在 2000 年寫的一篇關(guān)于軟件架構(gòu)風(fēng)格的論文，此文一出，威震四方！國內(nèi)外許多知名互聯(lián)網(wǎng)公司紛紛開始采用這種輕量級(jí)的 Web 服務(wù)，大家習(xí)慣將其稱為 RESTful Web Services，或簡稱 REST 服務(wù)。如果將瀏覽器這一端視為前端，而服務(wù)器那一端視為后端的話，可以將以上改進(jìn)后的 MVC 模式簡化為以下前后端分離模式：可見，有了 REST 服務(wù)，前端關(guān)注界面展現(xiàn)，后端關(guān)注業(yè)務(wù)邏輯，分工明確，職責(zé)清晰。那么，如何使用 REST 服務(wù)將應(yīng)用程序進(jìn)行前后端分離

6、呢？我們接下來繼續(xù)探討，首先我們需要認(rèn)識(shí) REST。3 認(rèn)識(shí) RESTREST 本質(zhì)上是使用 URL 來訪問資源種方式。眾所周知，URL 就是我們平常使用的請(qǐng)求地址了，其中包括兩部分：請(qǐng)求方式 與 請(qǐng)求路徑，比較常見的請(qǐng)求方式是 GET 與 POST，但在 REST 中又提出了幾種其它類型的請(qǐng)求方式，匯總起來有六種：GET、POST、PUT、DELETE、HEAD、OPTIONS。尤其是前四種，正好與CRUD（Create-Retrieve-Update-Delete，增刪改查）四種操作相對(duì)應(yīng)，例如，GET（查）、POST（增）、PUT（改）、DELETE（刪），這正是 R

7、EST 與 CRUD 的異曲同工之妙！需要強(qiáng)調(diào)的是，REST 是“面向資源”的，這里提到的資源，實(shí)際上就是我們常說的領(lǐng)域?qū)ο螅谙到y(tǒng)設(shè)計(jì)過程中，我們經(jīng)常通過領(lǐng)域?qū)ο髞磉M(jìn)行數(shù)據(jù)建模。REST 是一個(gè)“無狀態(tài)”的架構(gòu)模式，因?yàn)樵谌魏螘r(shí)候都可以由客戶端發(fā)出請(qǐng)求到服務(wù)端，最終返回自己想要的數(shù)據(jù)，當(dāng)前請(qǐng)求不會(huì)受到上次請(qǐng)求的影響。也就是說，服務(wù)端將內(nèi)部資源發(fā)布 REST 服務(wù)，客戶端通過 URL 來訪問這些資源，這不就是 SOA 所提倡的“面向服務(wù)”的思想嗎？所以，REST 也被人們看做是一種“輕量級(jí)”的 SOA 實(shí)現(xiàn)技術(shù)，因此在企業(yè)級(jí)應(yīng)用與互聯(lián)網(wǎng)應(yīng)用中都得到了廣泛應(yīng)用。下面我們舉幾個(gè)例子對(duì) REST 請(qǐng)

8、求進(jìn)行簡單描述：REST 請(qǐng)求描述GET:/advertisers獲取所有的廣告主GET:/advertiser/1獲取 ID 為 1 的廣告主PUT:/advertiser/1更新 ID 為 1 的廣告主DELETE:/advertiser/1刪除 ID 為 1 的廣告主POST:/advertiser創(chuàng)建廣告主可見，請(qǐng)求路徑相同，但請(qǐng)求方式不同，所代表的業(yè)務(wù)操作也不同，例如，/advertiser/1 這個(gè)請(qǐng)求，帶有 GET、PUT、DELETE 三種不同的請(qǐng)求方式，對(duì)應(yīng)三種不同的業(yè)務(wù)操作。雖然 REST 看起來還是很簡單的，實(shí)際上我們往往需要提供一個(gè) REST 框架，讓其實(shí)現(xiàn)前后端分離架

9、構(gòu)，讓開發(fā)人員將精力集中在業(yè)務(wù)上，而并非那些具體的技術(shù)細(xì)節(jié)。下面我們將使用 Java 技術(shù)來實(shí)現(xiàn)這個(gè) REST 框架，整體框架會(huì)基于 Spring 進(jìn)行開發(fā)。4 實(shí)現(xiàn) REST 框架4.1 統(tǒng)一響應(yīng)結(jié)構(gòu)使用 REST 框架實(shí)現(xiàn)前后端分離架構(gòu)，我們需要首先確定返回的 JSON 響應(yīng)結(jié)構(gòu)是統(tǒng)一的，也就是說，每個(gè) REST 請(qǐng)求將返回相同結(jié)構(gòu)的 JSON 響應(yīng)結(jié)構(gòu)。不妨定義一個(gè)相對(duì)通用的 JSON 響應(yīng)結(jié)構(gòu)，其中包含兩部分：元數(shù)據(jù) 與 返回值，其中，元數(shù)據(jù)表示操作是否成功與返回值消息等，返回值對(duì)應(yīng)服務(wù)端方法所返回的數(shù)據(jù)。該 JSON 響應(yīng)結(jié)構(gòu)如下：1234567 

10、60;  "meta":         "success": true,        "message": "ok"    ,    "data": .為了在框架中映射以上 JSON 響應(yīng)結(jié)構(gòu)，我們需要編寫一個(gè) Respons

11、e 類與其對(duì)應(yīng)：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960public class Response      private static final String OK = "ok"    private static final String ERROR = "error"

12、     private Meta meta;    private Object data;     public Response success()         this.meta = new Meta(true, OK);        return this;  &

13、#160;      public Response success(Object data)         this.meta = new Meta(true, OK);        this.data = data;        return this;   

14、      public Response failure()         this.meta = new Meta(false, ERROR);        return this;         public Response failure(String message) &

15、#160;       this.meta = new Meta(false, message);        return this;         public Meta getMeta()         return meta;   &#

16、160;     public Object getData()         return data;         public class Meta          private boolean success;     &#

17、160;  private String message;         public Meta(boolean success)             this.success = success;              

18、;   public Meta(boolean success, String message)             this.success = success;            this.message = message;       

19、0;         public boolean isSuccess()             return success;                 public String getMessage() &

20、#160;           return message;            以上 Response 類包括兩類通用返回值消息：ok 與 error，還包括兩個(gè)常用的操作方法：success( ) 與 failure( )，通過一個(gè)內(nèi)部類來展現(xiàn)元數(shù)據(jù)結(jié)構(gòu)，我們?cè)谙挛闹卸啻螘?huì)使用該 Response 類。實(shí)現(xiàn)該 REST 框架需要考慮許多問題，首當(dāng)其沖的就是對(duì)象

21、序列化問題。 4.2 實(shí)現(xiàn)對(duì)象序列化想要解釋什么是 對(duì)象序列化？不妨通過一些例子進(jìn)行說明。比如，在服務(wù)端從數(shù)據(jù)庫中獲取了數(shù)據(jù)，此時(shí)該數(shù)據(jù)是一個(gè)普通的 Java 對(duì)象，然后需要將這個(gè) Java 對(duì)象轉(zhuǎn)換為 JSON 字符串，并將其返回到瀏覽器中進(jìn)行渲染，這個(gè)轉(zhuǎn)換過程稱為 序列化；再比如，通過瀏覽器發(fā)送了一個(gè)普通的 HTTP 請(qǐng)求，該請(qǐng)求攜帶了一個(gè) JSON 格式的參數(shù)，在服務(wù)端需要將該 JSON 參數(shù)轉(zhuǎn)換為普通的 Java 對(duì)象，這個(gè)轉(zhuǎn)換過程稱為 反序列化。不管是序列化還是反序列化，我們一般都稱為序列化。實(shí)際上，Spring MVC 已經(jīng)為我們提供了這類序

22、列化特性，只需在 Controller 的方法參數(shù)中使用 RequestBody 注解定義需要反序列化的參數(shù)即可，如以下代碼片段：12345678Controllerpublic class AdvertiserController      RequestMapping(value = "/advertiser", method = RequestMethod.POST)    public Response createAdvertiser(RequestBody AdvertiserParam advertiserParam)