A. Controller接收前端參數的幾種方式總結
http://127.0.0.1:8080/param/add?lastName=旺旺&[email protected]
http://127.0.0.1:8080/test/employee?lastName=戰三&[email protected]
注意可以在參數中增加叢伏碧@RequestParam註解。如果在方法中的參數增加了該註解，說明請求的url必須帶該帶有該參廳首數，否則不能執行該方法。如果在方法中的參數沒有增加該註解，說明請求的url無需帶有該參數，也能繼續執行該方法。
http://127.0.0.1:8080/office/deport?name=張三&[email protected]
http://127.0.0.1:8080/office/deport?lastName=張三&滲舉[email protected]
報錯：
http://127.0.0.1:8080/office/deport?name=張三
報錯：
http://127.0.0.1:8080/emp/1
1、JSON格式接收普通對象
http://127.0.0.1:8080/resp/test
2、JSON格式接收List對象
http://127.0.0.1:8080/resplist/testlist
3、JSON格式接收Map對象
http://127.0.0.1:8080/respmap/testmap
B. 前端vue如何在vuehttp地址欄上添加參數
1、使用
2、通過query屬性添加了一個名為拍中name的參數，值為John。
3、這將在地址欄襲茄山上顯納巧示為/usersname=John。
C. 前端get請求url拼接多項參數方法
var toString = "";
for (var key in data) {
if(!data[key]){
delete data.key
}else{
var obj = data[key];
if (Array.isArray(obj)) {
var arrayString = obj.join(",");
toString += key + "=" + arrayString + "&";
} else {
廳禪燃 扮虛 toString += key + "=" + data[key] + "&";
}
襲碰 }
}
toString.substring(0, toString.length - 1).replace(/$/, "");
D. SpringMVC前後端分離交互傳參詳細教程-
溫故而知新，本文為一時興起寫出，如有錯誤還請指正
本文後台基於SpringBoot2.5.6編寫，前端基於Vue2 + axios和微信小程序JS版分別編寫進行聯調測試，用於理解前後端分離式開發的交互流程，如果沒用過axios可以點我看之前的帖子
如果你沒有學過SpringBoot也不要緊，把他看做成SpringMVC即可，寫法完全一致（其實我不說你也發現不了）
本文主要講前後端交互流程，力求幫助新人快速入門前後端分離式開發，不會講關於數胡環境搭建部分的內容
在文章開頭快速的過一遍SpringMVC接收參數的幾種方式，一定要記住這幾種方式，看不懂或不理解都沒關系，後續會結合前端代碼過一遍，這里就不過多解釋了，直接上代碼
細心的人應該留意到了，最後使用變數接收參數的時候只接收了 username 這一個值，並沒有接收 password ，作為擴展在這里解釋一下， 不看也可以，看了不理解也沒關系，知道這個事兒就夠了，以後接觸多了就理解了
如果請求參數放在了請求體中，只有參數列表第一個變數能接收到值，這里需要站在Servlet的角度來看：
可以看到請求體內容是存到了 InputStream 輸入流對象中，想要知道請求體中的內容是什麼必須讀流中的數據，讀取到數據後會將值給第一個變數，而流中的數據讀取一次之後就沒了，當第二個變數讀流時發現流已經被關閉了，自然就接收不到
SpringMVC回顧到此為止，只需要記住那三種方式即可，在前後端交互之前先在Controller中寫個測試介面
這個介面對應的是GET類型的請求，這里直接在瀏覽器地址欄訪問測試一下：
這里推薦一個Chrome瀏覽器的插件 JSONView ，它可以對瀏覽器顯示的JSON數據進行格式化顯示，推薦的同時也提個醒，安裝需謹慎，如果JSON數據量太大的話頁面會很卡
之前已經寫好一個GET請求的測試介面了，這里就在前端寫代碼訪問一下試試看
代碼已經寫完了，接下來打開頁面試一下能不能調通：州凳
可以看到請求代碼報錯了，查看報錯信息找到重點關鍵詞 CORS ，表示該請求屬於 跨域請求
什麼是跨域請求？跨域請求主要體現在跨域兩個字上，當發起請求的客戶端和接收請求的服務端他們的【協議、域名、埠號】有任意一項不一致的情況都屬於跨域請求，拿剛剛訪問的地址舉例，VUE頁面運行在9000埠上，後台介面運行在8080埠上，埠號沒有對上所以該請求為跨域請求
如果在調試的時候仔細一點就會發現，雖然前端提示請求報錯了，但是後端還是接收到請求了，那為什麼會報錯呢？是因為後端返回數據後，瀏覽器接收到響應結果發現該請求跨域，然後給我們提示錯誤信息，也就是說問題在瀏覽器這里
怎樣才能讓瀏覽器允許該請求呢？我們需要在後端動點手腳，在返回結果的時候設置允許前端訪問即可
首先配置一個過濾器，配置過濾器有很多種實現的方法，我這里是實現Filter介面
過濾器創建完成了，回來看前端提示的報錯信息為 Access-Control-Allow-Origin ，意思是允許訪問的地址中並不包含當前VUE的地址，那麼我們就在響應結果時將VUE的地址追加上
添加完成後重啟項目後台就會發現請求已經成功並且拿到了返回值
再次冊畢旅進行測試，將後台的GetMapping修改為PostMapping，修改前端請求代碼後重新發起請求進行測試
可以看到POST請求還是提示跨域請求，對應的錯誤信息則是 Access-Control-Allow-Headers ，也就是說請求頭中包含了不被允許的信息，這里圖省事兒用 * 通配符把所有請求頭都放行
這樣處理之後，請求就可以正常訪問啦
路徑佔位參數，就是將參數作為請求路徑的一部分，例如你現在正在看的這篇博客使用的就是路徑佔位傳參
這種傳參方法很簡單，就不細講了，可以效仿他這種方法寫個測試案例
這里需要注意區分【路徑佔位傳參】和【路徑傳參】兩個概念，不要記混
什麼是路徑傳參？發起一個請求 http://localhost:8080/index?a=1&b=2 ，在路徑 ? 後面的都屬於路徑傳參，路徑傳參就是將參數以明文方式拼接在請求地址後面
路徑傳參使用【正常接收參數】中的實例代碼即可接收到值
除了自己手動拼接請求參數之外，axios在config中提供了params屬性，也可以實現該功能
表單類型參數，就是通過form表單提交的參數，通常用在例如HTML、JSP頁面的form標簽上，但如果是前後端分離的話就不能使用form表單提交了，這里可以手動創建表單對象進行傳值
需要注意，GET請求一般只用於路徑傳參，其他類型傳參需要使用POST或其他類型的請求
表單類型參數也是【正常接收參數】中的實例代碼接收值
小程序刪除了FormData對象，不能發起表單類型參數的請求，如果非要寫的話可以試著使用 wx.uploadFile 實現，這里就不嘗試了
請求體傳參，是在發起請求時將參數放在請求體中
表單類型參數需要使用上面【請求體接收參數】中的實例代碼接收值
axios如果發起的為POST類型請求，默認會將參數放在請求體中，這里直接寫即可
小程序代碼也是一樣的，當發起的時POST類型的請求時，默認會把參數放在請求體中
在實際開發中大概率不用寫前端代碼，只負責編寫後台介面，但怎樣才能知道前端請求是什麼類型參數？
關於這點可以通過瀏覽器開發者工具的【網路】面板可以看出來，網路面板打開時會錄制網頁發起的所有請求
路徑佔位傳參就不解釋了，沒啥好說的，這里介紹一下路徑傳參、表單傳參和請求體傳參
編寫好路徑傳參的請求代碼後切換到網路面板，點擊發起請求：
編寫好請求體傳參的請求代碼後切換到網路面板，點擊發起請求：
編寫好表單類型傳參的請求代碼後切換到網路面板，點擊發起請求：
掌握了前後端交互的流程就可以正常開發網站了，這里推薦後端返回一套規定好的模板數據，否則某些情況可能會比較難處理，例如這個查詢用戶列表的介面：
該介面乍一看沒毛病，拿到用戶列表數據後返回給前端用於渲染，合情合理，可是如果後端業務邏輯有BUG可能會導致前端接收到的結果為空，這種情況下前端就需要判斷，如果接收到的值為空，就提示請求出錯，問題貌似已經解決，但是如果表中本來就沒有任何數據的話有應該怎麼處理
上述的就是最常見的一種比較頭疼的情況，所以針對這種情況最好指定一套標準的返回模板進行處理
根據剛剛的舉例來看，返回結果中應該有一個標識來判斷該請求是否執行成功，如果執行失敗的話還應該返回失敗原因，響應給前端的數據會被轉換為JSON數據，使用Map集合來返回最合適不過了
在後台介面編寫完成後，一般情況下我們都需要進行測試，GET請求還好，瀏覽器直接就訪問呢了，如果是POST請求還要去寫前端代碼就很煩，這里介紹一款介面調試工具ApiPost
你可能沒聽過ApiPost，但是你大概率聽說過Postman，他們的用法幾乎一致，且ApiPost是國人開發的免費的介面調試工具，界面中文很友好
這里也可以看出來，form表單傳參其實也算在了請求體裡面，只不過使用的是 multipart/form-data 類型的參數而已，而之前提到的請求體傳參對應的就是 application/json
E. 前端ajax非同步傳值以及後端接收參數的幾種方式
前台往後台傳值呢，有很多種方式，大家聽我細野猜細道來。
第一種呢，也是最簡單的一種，通過get提交方式，將參數在鏈接中以問頌襲型號的形式進行傳遞。
後台往前台傳值就要簡單一些，單個數據或者封裝數據可以直接使用return返回json數據給前台，如果是多個數據，可以使用```
PrintWriter進行傳值，具體操作如下
非非同步方式傳值
非非同步方式前台傳遞參數
1.與非同步方式類似，使用form直接提交或者在鏈接中拼接參數即可。
2.後台接受參數方式不變，與非同步方式完全相同。禪野
非非同步方式後台向前台傳遞數據
F. 前端路由（1）：基礎知識
URI： Uniform Resource Identifier 統一資源標識符； 由5部分組成：
URI = scheme:[//authority]path[?query][#fragment]
scheme： 協議 常見的有 http , https , file等
authority: 可以由三部分組成 [userinfo]host:[port]
其中userinfo指用戶信息，可以通過authority中的userinfo進行的登錄（當然現在前端應用並不會這么做）
host指的是主機地址，可以是ipv4或者是用方括弧括起來的ipv6地址，或者是可以通過DNS解析成ip地址的域名，如www..com
port指埠號， 如果不指定則使用默認埠號，http默認埠號80， https默認埠號443
path: 指文件路徑，指定伺服器上文件路徑以訪問特定資源
query： 查詢字元串 又稱search值 get介面傳參會通過此部分進行傳輸
fragment： 片段標識符 又稱hash值， 通常用於標記已獲取資源的子資源，不會被傳遞到伺服器端
關於編碼：
URI是用的是百分號編碼，對於需要編碼的字元，將其表示為2個十六進制的字元，然後在其前面加入轉義字元%
兩個編碼api：
encodeURI 與 encodeURIComponent： encodeURI編碼的范圍比encodeURIComponent要小 ，其中encodeURI是w3c的標准。
window.history對象存在很多屬性， 比較重點關注的有：
readonly length: number;
readonly state: any;
方法：
pushState(state: any, title: string, url?: string | null) : void;
replaceState(state: any, title: string, url?: string | null) : void;
go(delta: number): void 與 back():void; forward():void;
第一個參數需要是可被結構化復制的數據類型， （結構化復制： 可以處理循環引用的JSON），會持久化存儲在瀏覽器內部，在每次頁面生成的時候會被重新提取出來（屬於瀏覽器實現的深拷貝）
第二個參數title傳字元串，用於標記當前方法
第三個參數url，可以傳簡單字元串，也可以傳url對象，需要注意的是因為此方法被同源策略所限制，url必須與當前href同源，否則會報錯。此參數可以不傳，不傳的時候就是單純的操作瀏覽器歷史棧。
方法作用： 生成一個新的歷史棧並將指針指向它，操作並不會刷新瀏覽器，也就是說此方法會改變瀏覽器的歷史棧length，和state對象；
replaceState與pushState參數完全相同，使用方法類似，但其作用是替換當前歷史棧，也就是說歷史棧的指針與長度不會發生變化，其作用僅僅是替換當前的url與state。
pushState與replaceState方法其url傳參方式多種多樣，可以是絕對路徑，也可以是相對路徑，也可以傳遞查詢字元串search值"?xxx"與片段標識符"#xxx"，其最大特點是操作瀏覽器url，history對象的state與length屬性，但不會觸發瀏覽器跳轉。
pushState與replaceState方法以相對路徑方式進行操作url的時候，會受到當前html的<base>元素的href的影響，此時base元素的href會替換瀏覽器的url的href作為基準值進行相對路徑跳轉。
瀏覽器的跳轉方法主要圍繞window.location與window.history這兩個對象進行。
1) window.history
window.history.go(delta: number): void;
移動瀏覽器歷史棧指針並且刷新頁面
window.history.back() === window.history.go(-1)
window.history.forward() === window.history.go(1)
2) window.location
window.location.href
get :() =>string;
set : (url: string) => void; // 觸發瀏覽器跳轉 並增加歷史棧 不收同源策略限制
window.location.hash
get: () => string;
set: (hash: string) => void;
與href類似，其區別是用於修改瀏覽器導航欄url的hash值，會產生新的歷史棧，但不會觸發瀏覽器頁面刷新，並且在set hash值與當前url的hash值相同時，不會有任何事發生（等於沒執行）。
window.location.replace
這是一個純方法，其作用是替換當前瀏覽器的棧記錄，設置為傳入新的URL，並且刷新頁面。
replace可以對hash進行操作並且觸發對應的事件，不會受相同hash的規則影響
1） popstate事件
history.pushState與history.replaceState產生的歷史棧記錄中，如果棧指針發生了移動，或者點擊了瀏覽器的前進或者回退按鈕時，會觸發popstate事件，可以通過window.addEventListener去添加事件監聽。
popstate拿到的event對象最關鍵的屬性是event.state，這個event.state是直接從瀏覽器底層存儲器中取出（屬於深拷貝），而非從歷史棧中的state取出，因此直接修改歷史棧state並不會對event.state造成影響（反之亦然）。
前後兩次設置相同的location.hash時不會觸發兩次popstate事件，但是通過location.href設置兩次相同的hash可以，雖然可以觸發兩次popstate事件，但是歷史棧只會增加一層。
2）hashchange事件
hashchange時間監聽的是瀏覽器url的片段標識符的變化，也就是hash值的變化，事件對象event可以拿到關鍵的oldUrl和newUrl，表示hash跳轉前的url和跳轉後的url。
pushState方法即使是只改動了瀏覽器的hash值，也不會觸發hashchange事件。
這兩個事件都可以通過window.dispatchEvent方法去觸發，dispatchEvent方法需要傳入一個事件對象：
window.dispatchEvent(new PopStateEvent());
對於hashchang事件同理：
window.dispatchEvent(new HashChangeEvent());
G. 介面請求處理全路徑
前端參數PARS組裝：
。參數數組轉JSON字元串
。BASE64編碼 然後替換掉+ / =這三個URL有意義的字元
例如：
。4台4H4G的伺服器
。每台運行4個NODEJS進程
。每個NGINX後面跟2台伺服器
發出請求：
。請求先到域名伺服器 DNS輪詢隨機決定本次請求由哪個IP處理
。NGINX負載均衡首先判斷緩存是否命中 如果是 直接返回結果了（這里暫迅野未啟用 用不好可能會帶來不好的問題）
。NGINX根據權重或隨機選擇一台後端伺服器上的某一個NODEJS進程處理
NODEJS接收到請求：
。koa框架解析取出請求體
。通過路由設置進到請求的TS（如果請求的是私有方法或私有服務直接返回錯誤）
。TS初始化 取出UPINFO所有參數 還原參數數組 （未上傳參數設置為默認值 ）
。進入API函數 _upcheck方法驗證用戶輸入並取出用戶信息（會話ID 帳套ID 用戶名 真實姓名 微信OPENID等）
。進行業務處理 並返回
。IP記錄 SQL效率統計 API效率統計等
整套目的：
。參數數組較靈活 容易自定義 其它參數固定方便（防注入只需注意不要拼接參數數組即可）
。全是畝局喊JS語言 有培養全棧工程師的優勢
。臘頌減少前後端溝通協調的成本（前後端至少能相互看懂）
。減少後端工作量（一部分介面可以省略 由前端組裝）
前端自定義請求的說明
H. 前端頁面跳轉時路徑上傳參數有特殊符號時報錯，解決
encodeURI() 函數用於對 URI 進行編碼，此函數對特殊字元進行編碼，除了： , / ? : @ & = + $ #，http路徑採用encodeURI進行編碼
encodeURIComponent()對 ： , / ? : @ & = + $ #這些字元進行編碼滑數模，在路徑中攜帶的信緩參數採用encodeURIComponent進行編碼
請使用 decodeURI() 函數對已編碼畢猛的 URI 進行解碼。