前后端分離[轉(zhuǎn)載] --JAVA框架-前后端分離(Json和ajax)

JAVA框架-前后端分離(Json和ajax)

為什么要前后端分離？

在以前的學習代碼中，可以看出來我們在jsp頁面頁面上也通過EL表達式和jstl寫了很多的java程序，這實際上在前端的頁面中混入了很多后端的邏輯，這就是傳統(tǒng)的web開發(fā)。在傳統(tǒng)的web開發(fā)中,頁面展示的內(nèi)容以及頁面之間的跳轉(zhuǎn)邏輯,全都由后臺來控制,這導(dǎo)致了前后端耦合度非常高,耦合度高則意味著,擴展性差,維護性差,等等問題

傳統(tǒng)開發(fā)的問題如下:

耦合度高
調(diào)試麻煩,出現(xiàn)問題時往往需要前后臺一起檢查
開發(fā)效率低,前后端相互依賴,溝通成本,維護成本高
擴展性差,無法兼容其他終端
交互邏輯混亂(還記得分頁顯示嗎),最終造成代碼腐爛

上述問題產(chǎn)生的根本原因在于前后端沒有明顯的分界,嚴重耦合在一起,想要解決這些問題的核心也就是將前后端代碼完全分開，所以我們需要利用我們的json和ajax來實現(xiàn)前后端的分離，也就是后端僅僅需要為前端以json形式來提供數(shù)據(jù)接口即可，這樣在一定程度上可以減輕后端壓力。簡單說也就是MVC中后端僅僅負責M和service即可，頁面的渲染和跳轉(zhuǎn)邏輯由前端來做。

簡單的說:

前后端分離在傳統(tǒng)開發(fā)上增加了一個服務(wù)器處理靜態(tài)資源,將View層和Controller層放到了前端,后臺僅需處理數(shù)據(jù)存取相關(guān)以及業(yè)務(wù)邏輯相關(guān)

前端：負責View和Controller層。

后端：只負責Model層，業(yè)務(wù)處理/數(shù)據(jù)等。

前后端分離的優(yōu)缺點

優(yōu)點:

關(guān)注點分離,視圖層和控制層邏輯移到了前端,后端更注重業(yè)務(wù)邏輯和系統(tǒng)構(gòu)架
耦合大大降低,開發(fā)效率和維護效率都得到提高
錯誤友好,后臺錯誤不影響前臺界面展示
對于開發(fā)者,前后端不再需要過多的涉及彼此的開發(fā)語言

缺點:

前端開發(fā)者壓力更大,需要關(guān)注Controller層
增加靜態(tài)服務(wù)器后,系統(tǒng)結(jié)構(gòu)更復(fù)雜
更多的HTTP請求,在移動端運行效率差
邏輯靠近前端,不同平臺需針對性重復(fù)實現(xiàn),(安卓iOS+web)
SEO優(yōu)化無力,爬蟲大多不支持ajax

前后端分離后的流程

Controller層中會使用流程控制來完成數(shù)據(jù)校驗,數(shù)據(jù)解析,頁面的跳轉(zhuǎn)等動作,那么如何完成呢,這就需要使用到JavaScript了

那么一個前后端分離的項目,前端是如何完成最終的數(shù)據(jù)展示呢?

可以看到，這里想要獲得一個完整的頁面，我們需要訪問兩次服務(wù)器。但是這樣也有好處，比如如果前端是其他的例如iOS,安卓,則無需請求靜態(tài)頁面,頁面的繪制是由系統(tǒng)原始語言實現(xiàn)的,只需要向后臺請求json數(shù)據(jù)即可。這樣提高了后臺數(shù)據(jù)的可重用性。

為什么我們需要JSON？

因為前后端分離后，我們就不能使用EL表達式來獲取request域中的數(shù)據(jù)了，因為頁面不在由tomcat服務(wù)器來部署，所以我們需要一種數(shù)據(jù)結(jié)構(gòu)來發(fā)送給前端。

JSON全稱(JavaScript Object Notation),js對象表示法,是一種輕量級數(shù)據(jù)交換格式，你可以將其看做Map數(shù)據(jù)結(jié)構(gòu),以鍵值對形式存儲

為什么我們需要Ajax？

Ajax是客戶端的一種請求方式,全稱(Asynchronous Javascript And XML)

用于異步的向服務(wù)器發(fā)送HTTP請求并獲取響應(yīng)數(shù)據(jù),異步的好處在于,請求期間瀏覽器不會卡死,可以正常響應(yīng)用戶操作;而常見的表單提交,和直接打開指定地址,都是同步的;

json和對象Bean相互轉(zhuǎn)換

好啦，整理清楚思路后，我們來簡單的看一下json和Ajax是如何使用的吧。

這里使用了阿里巴巴的fastjson。

復(fù)制代碼

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import java.util.ArrayList;
import java.util.List;

public class JSONTest {

    public static void main(String[] args) {
        UserBean bean  = new UserBean();
        bean.name = "Jeason";
        bean.sex = "man";
        String s = JSON.toJSONString(bean);
        System.out.println(s);


        List<UserBean> list = new ArrayList<>();
        list.add( bean);
        list.add( new UserBean("Tom","man"));
        String s1 = JSON.toJSONString(list);
        System.out.println(s1);

        String json = "{\"name\":\"Jeason\",\"sex\":\"man\"}";
        UserBean bean1 = JSON.parseObject(json, UserBean.class);
        System.out.println(bean1);

        JSONObject jsonObject = new JSONObject();
        jsonObject.put("data",bean);
        System.out.println(jsonObject);


    }
}


輸出如下：
{"name":"Jeason","sex":"man"}
[{"name":"Jeason","sex":"man"},{"name":"Tom","sex":"man"}]
UserBean{name='Jeason', sex='man'}
{"data":{"name":"Jeason","sex":"man"}}

使用Ajax進行異步請求

先構(gòu)建一個Servlet程序，使用json來傳遞數(shù)據(jù)

復(fù)制代碼

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "JSONServlet" ,urlPatterns = "/testJSON")
public class JSONServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //告訴客戶端返回值的類型是JSON
        response.setContentType("application/json");
        //設(shè)置同源
        response.setHeader("Access-Control-Allow-Origin","*");
        response.getWriter().println("{\"name\":\"Jeason\",\"sex\":\"man\"}");

    }
}

然后我們在頁面中使用Ajax來展示收到的數(shù)據(jù)

復(fù)制代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>這是主頁</h1>

<script>
    //發(fā)送一個異步請求
    $.ajax({
        url:"http://localhost:8080/day34_2/testJSON",
        success:function(data){
            console.log(data);
            document.body.insertAdjacentHTML("beforeend","<h1>%</h1>".replace("%",data.name));
            document.body.insertAdjacentHTML("beforeend","<h1>%</h1>".replace("%",data.sex));
            document.getElementById("img").src = "";
        },
        error:function(err){
            console.log(err);
            document.getElementById("img").src = "";
        }
    });
</script>
</body>
</html>

注意這里我們要引入query

復(fù)制代碼

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


轉(zhuǎn)載自博客： http://www.rzrgm.cn/JeasonIsCoding/p/13232648.html

posted @ 2020-10-31 14:11 遙想公瑾閱讀(270) 評論(0) 收藏舉報

刷新頁面返回頂部

Neal.Caffrey

前后端分離[轉(zhuǎn)載] --JAVA框架-前后端分離(Json和ajax)

為什么要前后端分離？

前后端分離的優(yōu)缺點

前后端分離后的流程

為什么我們需要JSON？

為什么我們需要Ajax？

json和對象Bean相互轉(zhuǎn)換

使用Ajax進行異步請求

公告