Springboot Second article: With the front-end fetch communication (about the transfer data upload files, such as the front and back end of processing)

This chapter is about the correspondence between the front and back ends, the react view, and the different handling of different values.

First of all, the code changes within Springboot are within the Indexcontroller.java, and the following is the code:

 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: Passing ordinary types of data, such as String

Front:

Fetch (' Http://localhost:8080/index/name ', {method:' post ', headers: { "Content-type": "Application /x-www-form-urlencoded;charset=utf-8 " }, Body:" Firstname=zhu&lastname=yitian "= Response.text ()). Then (data + {alert (data)}) . Catch (function(e) {alert ("error:" + e);})    

Background:

@RequestMapping ("name")
public string GetName (@RequestParam ("FirstName") string firstName, @RequestParam ("LastName") string lastName) {
return firstName + lastName;
}

@RequestParam: Used to access the Servlet request parameters. The parameter value is converted to the declared method parameter type.

2: Pass JSON type of data, receiver for class

Front:

Let temp =' Yitian '= ' Zhu '; Fetch (' Http://localhost:8080/index/userName ', {method: ' Post ', headers: { ' content-type ': ' Application/json '= Response.text ()). Then (data =>< c6> {alert (data)}). Catch (function(e) {alert ("error:" + e);})

Background:

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: Pass JSON-type data to the receiver as map

Front:

Let temp == ' Yitian '= ' Zhu ';
Fetch (' Http://localhost:8080/index/mapName ', {method:' post ', headers: { ' content-type ': ' App Lication/json '= Response.text ()). Then (data + {alert (data)}) . Catch (function(e) {alert ("error:" + e);})    

Background:

@RequestMapping ("MapName") public String getmapname (@RequestBody map<string, string> Map ) {
return map.get ("firstName") + map.get ("LastName");}

4. Upload a single file or picture

Front:

<form>  <input type= "file" id= "picture"/>  <br/>  <button type= "button" onclick={< C12>this.handlefile}> upload pictures </button>  </form>  

= document.getElementById ("Picture"new  FormData ();　　Formdata.append (' file ', picture[0]); Fetch (' http://localhost:8080/index/getPicture ', {method:' post '= = Response.text ()). Then (data = {alert (data)}). Catch　　(function(e) {alert ("error:" + e); })    }

Background:

@RequestMapping ("Getpicture")     PublicString Handleformupload (@RequestParam ("File") multipartfile file) {Try{            if(!File.isempty ()) {                byte[] bytes =file.getbytes (); File Picture=NewFile ("Temp.png");//Specify the address where the file is stored 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. Upload multiple files or images

Front:

<form>  <input type= "file" id= "picture" multiple= "multiple"/>  <br/>  <button type= " Button "onclick={this .handlefile}> upload image </button>  </form>  

Handlefile () {= document.getElementById ("Picture"new  FormData ();　　  for (Let i = 0; i < picture.length; + +i) {formdata.append (' file ', Picture[i]); } fetch (' http://localhost:8080/index/getPictures ', {method:' post '= Response.text ()). Then (data + {alert (data)}). Catch　　(function(e) {alert ("error:" + e); })    }

Background:

@RequestMapping ("Getpictures")     PublicString handleformsupload (httpservletrequest request) {Try{List<multipartfile>files = ((multiparthttpservletrequest) request). GetFiles ("file")); Multipartfile file=NULL;  for(inti = 0; I < files.size (); ++i) {File=Files.get (i); if(!File.isempty ()) {                    byte[] bytes =file.getbytes (); File Picture=NewFile ("temp" + string.valueof (i) + ". png"));//Specify the address where the file is stored 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 Second article: With the front-end fetch communication (about the transfer data upload files, such as the front and back end of processing)