vue 中axios方法使用

axios中文文档：https://www.kancloud.cn/yunye/axios/
BootCDN：

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

get 请求：
js部分：

var app = new Vue({
  el:"#one",
  data:{
  	message:"你是我的小苹果",
  	name:null,
  	action:null	
  },
 methods:{
 	change: function(){
 		this.message="白云飘过"
 	},
 	connect:function(){
 		_this=this;
        let abc={
      	name:_this.name,
      	action:_this.action
      };
      axios.get('http://localhost:8080/test/hello',{
        params:abc,
      	headers:{'Content-type': 'applicationx-www-form-urlencoded'}
       })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
  });  
  }}
});

html 部分：

<div id="one">
		<label for="name">请输入你的名字</label>
		<input type="text" v-model="name">
		<label for="name">生の死</label>
		<input type="text"  v-model="action">
		<button type="button" @click="connect">提交</button>
</div>

后台代码：

package yu;

import java.io.IOException;
import java.util.Enumeration;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Hello extends HttpServlet{

	private static final long serialVersionUID = 1L;
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
 		String name=(String) (req.getParameter("name"));
		String action=(String) (req.getParameter("action"));
		System.out.println(name);
		System.out.println(action);		
	}
}

post请求：
导入js：

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.8.0/qs.min.js"></script>

html：

<div id="one">
		<label for="name">请输入你的名字</label>
		<input type="text" v-model="name">
		<label for="name">生の死</label>
		<input type="text"  v-model="action">
		<button type="button" @click="connect">提交(get)</button>
        <button type="button" @click="conp">提交(post)</button>
	</div>

js部分：

conp : function(){
        _this=this;
       let  dat1 = {
        	name:_this.name,
        	action:_this.action
        };
   axios.post('http://localhost:8080/test/hello',
   Qs.stringify(dat1), 
   {headers: { 'Content-Type': 'application/x-www-form- urlencoded'}}).then(
   res => {
        console.log(res)
    })
    .catch(err => {
         console.log(err)
    })
  
 	}

后台代码：

package yu;

import java.io.IOException;
import java.util.Enumeration;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;

public class Hello extends HttpServlet{
	private static final long serialVersionUID = 1L;
	@Override
	protected void doOptions(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {
		System.out.println("这是一个坑");
		arg1.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
		arg1.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		arg1.setHeader("Access-Control-Max-Age", "86400");
		arg1.setHeader("Access-Control-Allow-Origin", "*");
		doPost(arg0, arg1);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		String name=(String) (req.getParameter("name"));
		String action=(String) (req.getParameter("action"));
		System.out.println(name);
		System.out.println(action);
		Bean wenxi=new Bean("你是我","的眼");
		resp.setContentType("text/json; charset=utf-8");
		resp.setHeader("Access-Control-Allow-Origin", "*");
		resp.setHeader("Access-Control-Max-Age", "3600");
		resp.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
		resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		resp.getWriter().print(JSON.toJSONString(wenxi));
	}
}