本章讲述的是关于前后端通信关于对应性,前端为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";
}