前后端數據交互，跳轉

概述

作為一枚菜鳥，前后端交互可是大問題，經常數據交互失敗，不知道怎么跳轉。在這分享一下交互的小心得。

我們不妨先大概了解一下整個訪問流程：

用戶從輸入網址按下回車，交互就已經開始了。

瀏覽器會將請求按照http協議（或者其他https，ftp等）將請求數據封裝包從電腦的端口發出 -> 路由器 -> 運營商（域名解析之類的）-> 目標服務器（可能會有代理，負載均衡等等）

最終從服務器開放的端口，進入到服務器（TCP三次握手和四次揮手，Tomcat之類的，會根據協議的內容進行解析）-> web項目進行具體的邏輯處理 -> 返回數據 -> 瀏覽器接收數據（根據協議內容進行解析）

整個過程，協議很重要，因為客戶端和服務器都是通過協議來解析和發送信息的，最常見的http協議，協議頭部的參數常用的哪幾個，有什么影響。

Http協議的簡介，說的很有意思：https://blog.csdn.net/u010256388/article/details/68491509/

還有緩存問題（cookie、session、localstorage、cashe-controller等），不僅提高效率，而且有時候你更改了代碼測試卻沒變化的重要原因：https://www.jianshu.com/p/9ed3e8759ce3

相應的后台tomcat的緩存處理：http://www.360doc.com/content/17/0721/17/41344223_673116604.shtml（了解即可）

 

具體到使用分為：前端交互，分為同步和異步。

同步交互

常見的from表單提交（post方式帶參數），URL直接訪問（get方式，有參數在地址欄可見，特殊符號需要轉義，不安全）。

異步交互

關鍵是XMLHttpRequest對象，平時說的ajax只是一種交互模式，並不是什么新技術，其原理就是對XMLHttpRequest的封裝。所以對XMLHttpRequest深入全面的了解可以幫助我們更好的掌握異步交互。

可以看這篇精品文章了解：https://www.jianshu.com/p/b037f71af548，里面涉及到了在傳送過程中各個參數的用法，會觸發的事件，返回值等等很實用的知識。（雖然能設置同步交互，但不推薦）

其中傳輸類型 contentType就非常重要，這個值設置決定了后台怎么去解析http協議。

 

• 上圖所示，如果格式前后端發送和接收對不上，那是獲取不了數據。如圖的最后一步返回，如果想頁面跳轉，則不需要@ResponseBody，改為返回ModelAndView
• @RequestBody主要用來接收前端傳遞給后端的json字符串中的數據的(請求體中的數據的)；GET方式無請求體，所以使用@RequestBody接收數據時，前端不能使用GET方式提交數據，而是用POST方式進行提交。
• @RequestParam接收的是key-value里面的參數，所以GET方式的數據和表單提交，可以接收。
• @RequestBody和@RequestParma的使用知識，更輕松的全面掌握：https://blog.csdn.net/justry_deng/article/details/80972817

---

前端交互類

前端我創建了兩個工具類，來負責交互。

異步交互類

我把jQuery的ajax進行了封裝，主要是獲取和計算信息，代碼如下：

/*
 * 以下為程序錯誤碼
 */
//通用的請求失敗，包括未知原因
var EXPECTATION_FAILED = 417;
var EXPECTATION_QUERY = 404;

/**
 * 訪問后台的對象，為ajax封裝
 * @constructor
 */
var Query = function (url, param, callback, contentType) {
    this.url = url;

    //先確認參數存在，如果不存在則創建空map
    if (!param) {
        param = new Map();
    }
    //注意，要根據不同的傳輸格式來確定傳輸的值的類型
    if (contentType == Query.NOMAL_TYPE) {
        this.param = JSON.parse(this._convertParam(param));
    } else {
        this.param = this._convertParam(param);
    }


    this.callback = callback;
    this.contentType = contentType;
    //請求超時，默認5秒
    this.timeout = 5000;
    //是否異步請求，默認異步
    this.async = true;
}

Query.JSON_TYPE = 'application/json';
Query.NOMAL_TYPE = 'application/x-www-form-urlencoded';

/**
 * ajax請求的訪問
 * @param url 要訪問的地址
 * @param paramMap 傳給后台的Map參數，key為字符串類型
 * @param callback 回調函數
 * @param contentType 傳輸數據的格式  默認傳輸application/x-www-form-urlencoded格式
 */
Query.create = function (url, paramMap, callback) {
    return new Query(url, paramMap, callback, Query.NOMAL_TYPE);
}

Query.createJsonType = function (url, paramMap, callback) {
    return new Query(url, paramMap, callback, Query.JSON_TYPE);
}

/**
 * 將ParamMap轉為json格式，目前只支持Map對象，以后會擴展
 * @param paramMap
 * @private
 */
Query.prototype._convertParam = function (param) {

    if (param instanceof Map) {
        return strMap2Json(param);
    }
}

/**
 * 對ajax回調函數的封裝
 * @param callBack
 * @private
 */
Query.prototype._callback = function (queryResult) {

    //取消加載框
    if (this.loadDom) {
        $(this.loadDom).remove("#loadingDiv");
    }

    //Query對象
    var self = queryResult.queryObj;
    var data = $.parseJSON(queryResult.responseText);
    //記錄請求是否有錯誤
    self.queryException = false;
    var handleError;

    if (queryResult.status == EXPECTATION_FAILED || queryResult.status == EXPECTATION_QUERY) {
        var error = queryResult.responseText;
        self.queryException = true;
    }

    //調用回調函數，如果返回結果為true，則對於出錯不會默認錯誤處理
    if (self.callback instanceof Function) {
        handleError = self.callback(data);
    }

    //如果出現了異常並且沒有被處理，那么將進行默認錯誤處理
    if (self.queryException && !handleError) {
        window.location.href = "/system/error/" + error.code + "/" + error.msg;
    }

    //如果需要跳轉，則進行跳轉
    if (data.redirect_url) {
        window.location.href = data.redirect_url;
    }
}

/**
 * 正式發送ajax
 * @private
 */
Query.prototype.sendMessage = function () {
    var self = this;
    var xhr = $.ajax(
        {
            type: "post",
            url: this.url,
            contentType: this.contentType,
            data: this.param,
            // ajax發送前調用的方法，初始化等待動畫
            // @param XHR  XMLHttpRequest對象
            beforeSend: function (XHR) {
                //綁定本次請求的queryObj
                XHR.queryObj = self;
                if (self.beforeSendFunc instanceof Function) {
                    self.beforeSendFunc(XHR);
                }

                if (self.loadDom instanceof HTMLElement) {
                    self.loadDom.innerText = "";
                    $(self.loadDom).append("<div id='loadingDiv' class='loading'><img src='/image/loading.gif'/></div>");
                } else if (self.loadDom instanceof jQuery) {
                    self.loadDom.empty();
                    self.loadDom.append("<div id='loadingDiv' class='loading'><img src='/image/loading.gif'/></div>");
                }
            },
            complete: this._callback,
            timeout:this.timeout,
            async:this.async
        }
    );

}

/**
 * 檢測是否有錯誤,返回ture有錯誤，或者false
 */
Query.prototype.checkEception = function () {
    return this.queryException;
}

//------------------------以下為對Query的參數設置---------------------------
/**
 * 在ajax發送前設置參數，可以有加載的動畫，並且請求完成后會自動取消
 * @param loadDom 需要顯示動畫的dom節點
 * @param beforeSendFunc ajax發送前的自定義函數
 */
Query.prototype.setBeforeSend = function (loadDom, beforeSendFunc) {
    this.loadDom = loadDom;
    this.beforeSendFunc = beforeSendFunc;
}

/**
 * 設置超時時間
 * @param timeout
 */
Query.prototype.setTimeOut = function (timeout) {
    this.timeout = timeout;
}

Query.prototype.setAsync = function (async) {
    this.async = async;
}

封裝的好處：

• 可以省略很多重復的代碼，如$.ajax傳參數那一長串（111-136行）
• 可以規定統一的前端交互流程，並且修改這個流程也方便。

1. 1. 根據傳輸類型也對參數進行轉換（20-24行），並且_convertParam（）方法能繼續擴展參數類型，直到后面可以把絕大多數參數都轉換成正確的格式（那發送基本不用考慮參數格式了，只要確定傳輸的類型就好）　　　　          
   2. 統一回調流程（70-103行）可以對異常做統一處理（ajax）像我這樣跳轉到錯誤頁面，或者有些異步請求返回時需要跳轉，也能統一跳轉
   3. 統一請求發送前的處理（119-133行）可以對請求等待統一的設置等待動畫，最后再回調流程統一取消動畫

同步交互類

from表單創建類，主要是進行有參數傳輸的頁面跳轉，因為直接URL跳轉參數會暴露不安全

/**
 * 訪問后台的類，構造form表單來進行post請求
 * @param url
 * @param paramMap  參數map
 * @constructor
 */
var QueryForm = function (url,paramMap) {
    //form表單的JQ對象
    this.form = $("<form></form>");
    this.form.attr("action",url);
    this.form.attr("method","post");
    //遍歷Map
    for(var [key,value] of paramMap){
       var inputDom = $("<input/>") ;
       inputDom.attr("name",key);
       inputDom.attr("value",value);
       this.form.append(inputDom);
    }
    //必須要放入body里面，不然請求發不出去
    var bodyDom = $("body");
    bodyDom.append(this.form);
    this.sendMessage();

    //發送完后銷毀
    this.destroy();
}

QueryForm.create = function (url, paramMap) {
    return new QueryForm(url,paramMap);
}

QueryForm.prototype.sendMessage = function () {
     this.form.submit();
}

QueryForm.prototype.destroy =  function () {
    this.form.remove();
}

后端交互類

普通的Controller，在@RequestMapping中填寫正確的路徑，根據前端傳輸的數據類型來獲取參數（見上文），根據邏輯來確定要不要@ResponseBody來返回信息，還是ModelAndView來進行頁面跳轉

路徑

經常404怎么辦，那就是路徑有問題。得先明白，java虛擬機運行的不是java文件而是編譯后的.calss文件，所以最先檢查的是target文件夾下是否有你URL寫的這個文件，是否路徑正確

平時網上看到的classpath，就是指target下的classes文件夾

順帶提一句，如果是eclipse，右鍵點擊新建，你會發現有幾個文件夾可以選

folder：就是普通的文件夾，它和我們window下面使用的文件夾沒有任何區別

source folder：文件夾是一種特別的文件夾，如果你用面向對象的思想去看待這個source folder，那么他是folder的一個子集，作為子集，肯定是有folder的所有功能，而且還有自己特別的功能，他的特別之處，就是在source folder下面的java文件都會被編譯，編譯后的文件會被放在我們設置的某個文件夾下面（一般我們設置成WEB-INF/classes），source folder下面的非java文件會被copy一份放在我們的設置的文件夾下面

package：文件夾也是一種特別的文件夾，他的特別之處在於：他必須存在於source folder下面，上下級通過.來區分，他的路徑最后組成了每一個類的包路徑名

 

所以當出現404，請先檢查路徑，如果是springboot項目，則要遵守一些默認路徑規則，比如模板必須放在templates，靜態文件必須放在static