2.1.2　前后端分離交互模式

前后端分離交互主要是由HTML頁面與服務器端MVC模式進行交互，如圖2-3所示。

圖2-3　前后端分離交互

這里頁面和服務器端已經分開部署，頁面全部采用靜態HTML。優化了傳統交互模式。

1）廢棄了傳統交互模式中的同工程部署方式，優點在于可以減少服務器端的壓力，同時可擴展性明顯增強。

2）廢棄了JSP動態頁面交互技術，全面采用HTML靜態頁面，通過JS動態獲取服務器端數據進行展示。

如圖2-3所示，前后端分離交互整體流程如下：

1）瀏覽器需訪問到靜態頁面；

2）靜態頁面加載時會加載JS、CSS等資源；

3）JS會采用Ajax異步交互技術與服務器端進行數據交互；

4）服務器端處理完畢后返回數據至HTML頁面；

5）HTML頁面進行渲染構建并返回至瀏覽器。

前后端分離交互模式從根本上解決了傳統交互模式的“痛點”，它的優勢如下：

1）前后端解耦、分開部署編譯打包，降低依賴性；

2）H5靜態頁面可存放CDN進行加速；

3）H5可以部署多份，負載均衡；

4）H5和服務器端可同時進行開發，Mock數據，提高開發效率；

5）H5可打包、拆包、壓縮容量，提供輕量級的應用；

6）頁面無須刷新，異步加載數據，提高用戶體驗。

前后端分離交互模式帶來的問題

設計初期，主要后端根據業務需求設計和定義接口，由于溝通不到位、開發流程不完整等問題，在前端處理過程中才發現接口不符合預期展示效果并提出更改，浪費許多時間。

由于前后端分開部署，通過接口獲取數據存在安全問題，前后端需約定好授權機制，用于簽名和認證，如JWT機制。JWT即JSON Web Token，是Web交互過程中一種傳遞緊湊和自包括的JSON的數據格式。

• 緊湊：傳輸數據小，JWT可以通過在GET、POST請求過程中存放在HTTP的Header來增加安全性，同時也因為小才能傳送得更快。
• 自包括：Payload中能夠包含用戶的信息，避免數據庫的查詢。

JWT包括請求頭部（header）、內容體（Payload）、密鑰（Signature）等，它能確保不會被篡改，即意味著前后端交互是安全的。

下面介紹工作原理。在用戶使用證書或者賬號密碼登入時，服務端會生成一個JSON Web Token并返回，同時存儲它的信息，客戶端后續調用接口時，需要把Token信息存放在請求頭header中，由服務器端對客戶端的請求進行Token校驗，驗證請求是否有權限訪問到接口。

由于前后端分開部署存在跨域等問題，即客戶端和服務端部署不在同一個域名下，服務端需要對接口進行跨域處理，讓客戶端請求能正常進來、處理并返回。

可以用前端框架Vue調用后端代碼，具體如代碼清單2-5所示。

代碼清單2-5　前端框架Vue調用后端代碼

import axios from 'axios'
Vue.prototype.$ajax = axios
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.baseURL = '服務端接口地址';

new Vue({
        data:{
            title: this.$refs.title
        },
        methods:{
            query:function () {
                this.$http.post('query',data ,{emulateJSON:true}).then(function(res){
                    console.log(res.data);
                },function(res){
                    console.log(res.status);
                });
            }
        },
        created:function(){
        }
    })