本章講述的是關于前后端通信關于對應性，前端為react的View，會分傳遞不同值有不同的處理情況。

首先關于Springboot內的代碼變更都是在IndexController.java內，以下是代碼：

packagemaven.example.controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;

@RestController

@RequestMapping("/index")public classIndexController {

@RequestMapping("/home")publicString home() {return "Hello World!";

}

}

View Code

1：傳遞普通類型的數據，如string

前端：

fetch(‘http://localhost:8080/index/name‘, {

method:‘post‘,

headers: {"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"},

body:"firstName=zhu&lastName=yitian",

}).then(response=> response.text()).then(data =>{

alert(data)

}).catch(function(e){

alert("error:" +e);

})

后臺：

@RequestMapping("name")

public String getName(@RequestParam("firstName") String firstName, @RequestParam("lastName") String lastName) {

return firstName + lastName;

}

@RequestParam：用于訪問 Servlet 請求參數。參數值轉換為已聲明的方法參數類型。

2：傳遞Json類型的數據，接收方為類

前端：

let temp ={};

temp.lastName= ‘yitian‘;

temp.firstName= ‘zhu‘;

fetch(‘http://localhost:8080/index/userName‘, {

method:‘post‘,

headers: {‘Content-Type‘: ‘application/json‘},

body:JSON.stringify(temp),

}).then(response=> response.text()).then(data =>{

alert(data)

}).catch(function(e){

alert("error:" +e);

})

后臺：

IndexController.java

@RequestMapping("userName")

public String getUserName(@RequestBody User user) {

return user.getFirstName() + user.getLastName();

}

User.java

packagemaven.example.entity;public classUser {privateString lastName;privateString firstName;publicString getLastName(){returnlastName;

}public voidsetLastName(String lastName){this.lastName =lastName;

}publicString getFirstName(){returnfirstName;

}public voidsetFirstName(String firstName){this.firstName =firstName;

}

}

3：傳遞Json類型的數據， 接收方為map

前端：

let temp ={};

temp.lastName= ‘yitian‘;

temp.firstName= ‘zhu‘;

fetch(‘http://localhost:8080/index/mapName‘, {

method:‘post‘,

headers: {‘Content-Type‘: ‘application/json‘},

body:JSON.stringify(temp),

}).then(response=> response.text()).then(data =>{

alert(data)

}).catch(function(e){

alert("error:" +e);

})

后臺：

@RequestMapping("mapName")public String getMapName(@RequestBody Mapmap) {return map.get("firstName") + map.get("lastName");

}

4. 上傳單個文件或圖片

前端：

上傳圖片

handleFile(){

let picture= document.getElementById("picture").files;

let formData= newFormData();

formData.append(‘file‘, picture[0]);

fetch(‘http://localhost:8080/index/getPicture‘, {

method:‘post‘,

body:formData,

}).then(response=> response.text()).then(data =>{

alert(data)

}).catch(function(e){

alert("error:" +e);

})

}

后臺：

@RequestMapping("getPicture")public String handleFormUpload(@RequestParam("file") MultipartFile file) {try{if (!file.isEmpty()) {byte[] bytes =file.getBytes();

File picture= new File("temp.png");//這里指明上傳文件保存的地址

FileOutputStream fos= newFileOutputStream(picture);

BufferedOutputStream bos= newBufferedOutputStream(fos);

bos.write(bytes);

bos.close();

fos.close();return "success";

}

}catch(IOException e){

System.out.println(e);

}return "failed";

}

5.上傳多個文件或圖片

前端：

上傳圖片

handleFile(){let picture= document.getElementById("picture").files;

let formData= newFormData();for (let i = 0; i < picture.length; ++i){

formData.append(‘file‘, picture[i]);

}

fetch(‘http://localhost:8080/index/getPictures‘, {

method:‘post‘,

body:formData,

}).then(response=> response.text()).then(data =>{

alert(data)

}).catch(function(e){

alert("error:" +e);

})

}

后臺：

@RequestMapping("getPictures")publicString handleFormsUpload(HttpServletRequest request) {try{

Listfiles = ((MultipartHttpServletRequest) request).getFiles("file");

MultipartFile file= null;for(int i = 0; i < files.size(); ++i){

file=files.get(i);if (!file.isEmpty()) {byte[] bytes =file.getBytes();

File picture= new File("temp" + String.valueOf(i) + ".png");//這里指明上傳文件保存的地址

FileOutputStream fos= newFileOutputStream(picture);

BufferedOutputStream bos= newBufferedOutputStream(fos);

bos.write(bytes);

bos.close();

fos.close();

}

}return "success";

}catch(IOException e){

System.out.println(e);

}return "failed";

}

總結

以上是生活随笔為你收集整理的springboot与php通讯,Springboot第二篇：与前端fetch通信（关于传输数据上传文件等前后端的处理）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。