Springboot第三篇：与前端fetch通信（关于前端传输json数据上传文件等等前后端的处理）

关于前端接口传递的方法，推荐按以下使用：

 

若要在服务器上创建资源，推荐使用POST方法

若要检索某个资源，推荐使用GET方法

若要更新资源，推荐使用PUT方法

若要删除某个资源，推荐使用DELETE方法

 

---

 

 

另外本章主要讲述的是关于前后端通信关于对应性，前端为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]);//这里的file要与后台@RequestParam的参数值相对应

　　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";
    }