标签：ntb temp 后台 spring import color 处理 headers fail
本章讲述的是关于前后端通信关于对应性，前端为react的View，会分传递不同值有不同的处理情况。
首先关于Springboot内的代码变更都是在IndexController.java内，以下是代码：
package maven.example.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/index") public class IndexController { @RequestMapping("/home") public String home() { return "Hello World!"; } }
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
package maven.example.entity; public class User { private String lastName; private String firstName; public String getLastName(){ return lastName; } public void setLastName(String lastName){ this.lastName = lastName; } public String getFirstName(){ return firstName; } public void setFirstName(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 Map<String, String> map) {
return map.get("firstName") + map.get("lastName");
}
4. 上传单个文件或图片
前端：
<form>
<input type="file" id="picture" />
<br/>
<button type="button" onClick={this.handleFile}>上传图片</button>
</form>
handleFile(){ let picture = document.getElementById("picture").files; let formData = new FormData(); 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 = new FileOutputStream(picture);
BufferedOutputStream bos = new BufferedOutputStream(fos);
bos.write(bytes);
bos.close();
fos.close();
return "success";
}
}catch (IOException e){
System.out.println(e);
}
return "failed";
}
5.上传多个文件或图片
前端：
<form>
<input type="file" id="picture" multiple="multiple"/>
<br/>
<button type="button" onClick={this.handleFile}>上传图片</button>
</form>
handleFile(){ let picture = document.getElementById("picture").files; let formData = new FormData(); 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")
public String handleFormsUpload(HttpServletRequest request) {
try{
List<MultipartFile>files = ((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 = new FileOutputStream(picture);
BufferedOutputStream bos = new BufferedOutputStream(fos);
bos.write(bytes);
bos.close();
fos.close();
}
}
return "success";
}catch (IOException e){
System.out.println(e);
}
return "failed";
}
Springboot第二篇：与前端fetch通信（关于传输数据上传文件等前后端的处理）
标签：ntb temp 后台 spring import color 处理 headers fail
原文地址：https://www.cnblogs.com/tianshu/p/9218309.html
