【多種不同提交方式】通過springboot實現與前端網頁數據交互(非常簡潔快速)

【多種不同提交方式】通過springboot實現與前端網頁數據交互

提示：幫幫志會陸續更新非常多的IT技術知識，希望分享的內容對您有用。本章分享的是springboot的使用。前后每一小節的內容是存在的有：學習and理解的關聯性。【幫幫志系列文章】：每個知識點，都是寫出代碼和運行結果且前后關聯上的去分析和說明（能大量節約您的時間）。

所有文章都*不會*直接把代碼放那里，讓您自己去看去理解。我希望我的內容對您有用而努力~

本文章是系列文章，技術棧內容為：【springboot+vue】【前后分離】
【詳細圖文，實操步驟分享，節約時間版】。最終完成一個商業化項目。內容有：
springboot知識
mybatisPlus知識
vue知識
node.js知識

本小節的內容是：
springboot篇章之： 2.實現與前端網頁數據交互
本小節-附一個小節(建議觀看)（保證主要章節內容篇幅不大，且不繁瑣）：
apiPost工具的安裝及使用
因為我們無法：直接通過瀏覽器來實現post、put、delete等方式的提交，有postMan等等很多網頁測試工具,最后選擇是：apiPost國內的比較簡潔方便

上一小節是: springboot篇章之： 1.創建idea工程
基于電腦的jdk1.8通過idea創建springboot2.x版本
現在springboot是3.x以上版本，jdk版本至少要求17.但是很多時候我們電腦是jdk1.8(求穩定性和安全性)。文本分享本機電腦1.8的jdk。idea如何非常簡潔快速的創建springboot

文章目錄

【多種不同提交方式】通過springboot實現與前端網頁數據交互
前言
一、創建項目結構
二、發送及接受數據
- get提交
- post提交
- put提交
- delete提交
說明
總結

前言

您已經創建好了一個springboot項目，且運行沒有環境報錯
文章開頭有鏈接，能快速創建一個springboot項目，且那篇文章也有附小節，分享了關于idea創建項目的時候，會遇到的各種問題。

一、創建項目結構

web服務器項目，會創建對應的包，使其不同功能的代碼，放到不同的包里面。dao關聯數據庫，service業務邏輯，controller關聯網頁數據，model/pojo/entity實體模板,utils工具類

在這里插入圖片描述

二、發送及接受數據

在controller包里面創建一個類，這個類的功能就是關聯前端網頁數據
在這里插入圖片描述

//類的最上面 添加一個注解@RestController
//@RestController 表示 這個類里面的所有方法 返回的都是數據//@Controller這個注解添加到類上面，表示這個類屬于控制器：
//			類里面的方法返回的可能是   需要跳轉網頁的名字[那你后臺項目就得折騰網頁]
//當前系列文章 是前后分離(快速手搓成型)(后臺項目沒有網頁)
//  		當前沒有多余的內容來分享網頁(越多內容怕越會看暈)[如需看，請查閱幫志其他文章]@RestController
public class BbzController {}

get提交

發送數據：
先在類里面寫方法

@RequestMapping("/hello")
@RequestMapping(value = "/hello",method = RequestMethod.GET)
@GetMapping(value = "/hello")
public String helloBoot(){return "你好，幫幫志";
}//注意：：：：：  三個@注解描述的事情，一模一樣。  代碼三選一即可(三個同時要報錯哦~)
//對應的  網頁地址是 ： localhost:8080/hello

網頁輸入地址 localhost:8080/hello 得到后臺的數據
因為我們在類的上面寫了@RestController。表示方法的返回值，都是給前端的數據。后面我們數據會復雜，前端vue.js根據key來取，在放不同位置就可以了
在這里插入圖片描述

方法上面的注解(value = “/hello”) 和網頁 localhost:8080 /hello
所以：這個是對應的。您可以修改為實際的業務名稱如：/login（登陸） /register（注冊）
所以：您可以在類里面寫很多很多個不同的方法，上面注解一樣(但是指定不同的網頁地址)，注解后面的value=單詞不一樣。網址拼接不同的地址(/單詞)，不同網址它就執行不同的方法。
localhost:8080/hello
localhost:8080/login
localhost:8080/register

接收數據：

//注解看習慣，三選一  get提交
@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String helloBoot01(String name){ //形參namereturn "你好"+name;
}

手動輸入網址為：http://localhost:8080/hello?name=bangbangzhi
？后面是參數=值，參數的名字對應方法形參的名字

網站輸入？帶數據，后臺接受到之后，拼接到字符串又return顯示到了網頁
在這里插入圖片描述

多個參數用&隔開
手動輸入網址為：http://localhost:8080/hello?name=bangbangzhi&age=18&gender=男&…
get傳數據給服務器很常見，它也是明文顯示到網址上。一般搜索使用。
所以：各位可以打開一個百度/嗶哩/京東啥的，任意搜索，觀察網址，?左邊的是地址?右邊的是參數，多個用&隔開的

//http://localhost:8080/hello?name=bangbangzhi&age=18&gender=男@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String helloBoot01(String name,int age,String gender){//數據會自動放到這些形參里面  數據就在后臺代碼層面了//怎么用，就看代碼怎么寫了。傳過來了隨便用(一般交給service業務判斷 最后給dao操作數據庫)nameagegender  //都是字符串，為什么這里是男 而不是bangbangzhi  //因為方法(參數單詞)  和網頁地址參數單詞  一模一樣return "你好";
}

post提交


@RequestMapping(value = "/helloPost",method = RequestMethod.POST)
@PostMapping(value = "/helloPost")  //注意注解變了  二選一
public String postHello(){return "你好，幫幫志";  //方法體和剛才一模一樣//但是現在的邏輯是：//頁面發送一個post請求，地址是helloPost//進入這個方法，返回一些數據給前端網頁  
}

直接在網頁輸入網址無法提交為post請求
直接在網頁輸入網址是get提交
我們可以做一個網頁(如果您會)：
method=“get/post” 可以指定不同的提交方式，我同時寫兩個，肯定是要報錯的，此處是演示。
action=“就是提交到后臺的地址，當前為：/helloPost”，對應剛才寫的代碼。
在這里插入圖片描述
最好是，使用網頁測試工具(它有很多很多不同的提交方式+參數填寫+地址填寫+請求頭+一口氣來個100個(壓力測試)…+不完)，還能看各種返回結果：
文章開頭有安裝下載使用分享文章的鏈接

代碼方法寫完，啟動項目。填寫地址，選擇post，點擊發送
在測試工具看結果，不用開網頁了
在這里插入圖片描述
我拖拽到一起截的屏。
代碼+post方式+地址+返回的結果

在工具里面添加參數名和參數值在點擊發送。
后臺接收參數的方式和剛才一模一樣。(對應好單詞一致)
還有很多不同的參數寫法(單詞不一致帶注解，直接用對象來接收等等)，在另一個springmvc文章里面，此處我們快速去實現前后分離,節約時間。不然的話，光是這些后臺框架，就可以分享很多很多+前端的腳手架，，那...對吧~

put提交

@PutMapping(value = "/helloPost")  //注意注解變了
public String putHello(String name){System.out.println(name); //接受數據，交給其他方法(業務層)return "你好，幫幫志";//返回處理結果 ，可以被if else封裝不同的結果返回
}

delete提交

@DeleteMapping(value = "/helloPost")  //注意注解變了
public String deleteHello(String name){System.out.println(name);return "你好，幫幫志";
}

說明

文章標題：
通過springboot實現與前端網頁數據交互

只要您的get提交是通的能運行，其他的請求方式都是可以運行的。
就兩個地方不一樣：
1.前端提交的方式不同(當前我們是用測試工具來實現，后期用vue代碼)
2.類里面的方法上面注解不一樣。
根據不同的網頁提交方式，執行不同的注解，對應不同的方法，方法里面的方法體是各自的功能

后面的提交方式，您看我的內容。可能覺得比較雞肋，沒有啥區別。那是：
當前我沒有任何的業務邏輯

get提交是搜索用明文顯示在網址里面
post提交是新增/上傳資源用內容在請求頭里面，一般是隱式的
put提交是修改/更新用
delete提交是刪除某個資源
根據不同提交方式，執行不同的邏輯(也是一種約定:前端同事，后臺同事，測試同事，xx同事，一下能明白這個需要處理什么)
【前后分離，可能后臺同事連頁面長什么樣，都沒見過,根據設計概要寫好接口和參數】

并且我們還可以用一些前端技術或者后臺技術來封裝我們的web項目，比如：只要是delete提交。就需要驗證…或者記錄… 。只要是xxx提交，就需要驗證是否。。。
在代碼管理和功能管理，會更加的細致和方便。