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

Source: Internet
Author: User
Tags button type

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.