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

}