springboot与php通讯,Springboot第二篇：与前端fetch通信（关于传输数据上传文件等前后端的处理）...
本章講述的是關于前后端通信關于對應性，前端為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通信（关于传输数据上传文件等前后端的处理）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql区间段_解决针对MySQL中对
- 下一篇： java togglebutton_To