vue-resource

Vue-resource is a plug-in for vue.js that provides services for making Web requests and handling responses using XMLHttpRequest or JSONP. When Vue was updated to 2.0, the authors announced that they were no longer updating vue-Resource, but instead recommended Axios, which you can read about here.

Vue – making the resource: github.com/pagekit/vue…

axios

What is a axios

Axios is a Promise-based HTTP library that can be used in browsers and Node.js

Note: The Promise object is used to represent the final state (completion or failure) of an asynchronous operation and the value it returns.

The axios github:github.com/axios/axios

English description: www.kancloud.cn/yunye/axios…

The grammar of the axios
  • A get request
// create the request axios.get('/user? id=12') .then(response=>{ console.log(response); }) .catch(error=>{ console.log(error); }); Axios.get ('/user', {params: {id: 12}}).then(response=>{console.log(response); }) .catch(error=>{ console.log(error); });Copy the code
  • A post request
axios.post('/user', {
    id: 12,
    username:"hongchen"
  })
  .then(response=>{
    console.log(response);
  })
  .catch((error=>{
    console.log(error);
  });
Copy the code
The use of axios

Requirement: Use AXIos to send asynchronous requests to ServletDemo01 and output content on the page

Steps:

  1. Create ServletDemo01
  2. Bring axios and VUE import projects to the page
  3. Use get(), post() requests
  • HTML page code
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Use AXIos to send asynchronous requests </title> <script SRC = "js/axios - 0.18.0. Js" > < / script > < script SRC = "js/vuejs - 2.5.16. Js" > < / script > < / head > < body > < div id = "app" > <! When the page loads, send an asynchronous request to ServletDemo01 to get the response data. <div id=" MSG "v-text="message"></div> </div> <script> var vue = new vue ({el:"#app", Data :{message:""}, created(){// Use axios to send an asynchronous request, an asynchronous get request can carry data through the URL /*axios.get("/demo01? Id =12&username=hongchen"). Then (response =>{//response =>{ Console. log(response.data) this.message = response.data})*/ / async get request, /*axios.get("/demo01",{params:{id:12, Username :"hongchen"}}). Then (response=>{// get the data of the response body assigned to message this.message = response.data}) /*axios.post("/demo01? Id =13&username=bo"). Then (response=>{message this.message = response.data}) Post ("/demo01",{id:14,username:"bo"}). Then (Response =>{// Get the data of the response body and assign the value to message this.message = response.data }) } }); </script> </body> </html>Copy the code
  • ServletDemo01 code
import com.bo.utils.JsonUtils; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.Map; ${PACKAGE_NAME} ** Date 2021-01-13 11:01 */ @webServlet ("/demo01") public Class ServletDemo01 extends HttpServlet  { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException { doGet(request, response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {// Get a parameter of type "name=value&name=value" /*String id = request.getParameter("id"); String username = request.getParameter("username"); * / / / access json request parameter Map user. = JsonUtils parseJSON2Object (request, Map. Class); response.setContentType("text/html; charset=UTF-8"); The response. GetWriter (). The write (" hello world: "+ user. Get (" id") + ", "+ user. Get (" username")); }}Copy the code

summary

  1. Get carries the request parameters, and POST carries the request parameters through the URL. In fact, the format of the parameters carried to the server is “name= Value&Name = Value&Name =value”. When the server receives the request parameters in this format, Request parameters can be obtained using the getParameter(name) or getParameterValues(name) or getParameterMap() methods of the request
  2. Post carries request parameters in JSON format, so the format of the parameters submitted to the server is {name:value,name:value}, and the server cannot obtain request parameters through getParameter(name). To get it from the server by parsing json, we use the utility class directly