vue+fetch+springMVC实现数据交互

经过3天的努力，网上参考了各种方法，终于误打误撞的解决了前后台数据交互的问题，虽然还有很多地方不知其所以然，但还是先写出解决方法，还请大牛们指教。

1、首先新建vue工程，写代码，我只写了一个简单页面，代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>fetch测试</h2>
    <button @click="postData">请求</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    postData () {
      var url = 'http://localhost:7008/yzjk_lbs/tests'
      var a = 1
      var params = 'classid=' + a + '&&q=ds'
      fetch(url, {
        method: 'POST',
        // mode: 'cors',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        // credentials: 'include',
        // Accept: 'application/json',
        body: params
      })
        .then((response) => response.text())
        .then((responseData) => {
          console.log('responseData', responseData)
          // json格式化  JSON.stringify(responseData)转字符串
          // 添加处理函数
        })
        .catch((error) => {
          console.error('error', error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2、写好页面，打包上线，部署到Tomcat springmvc工程里面。步骤如下：

1）进入项目文件夹下，执行npm run build命令，会根据index.js里面的配置生成文件夹。

2）将static文件夹和index.html拷贝到工程webcontent目录下

3）在springMVC中新增过滤器，首先新建一个过滤器类，代码如下：

package com.c503.interceptor;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CorsFilter implements Filter{
    public void init(FilterConfig filterConfig) throws ServletException {  
    // TODO Auto-generated method stub  

    }  

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,  
    ServletException {  
    // TODO Auto-generated method stub  
    HttpServletResponse res = (HttpServletResponse) response;  
    HttpServletRequest req = (HttpServletRequest)request;
    String origin = req.getHeader("Origin");
    res.setContentType("text/html;charset=UTF-8");  
       res.setHeader("Access-Control-Allow-Origin", origin);  
       res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
       res.setHeader("Access-Control-Max-Age", "0");  
       res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");  
       res.setHeader("Access-Control-Allow-Credentials", "true");  
       res.setHeader("XDomainRequestAllowed","1");  
       chain.doFilter(request, response);  
    }  

    public void destroy() {  
    // TODO Auto-generated method stub  

    }  
}

然后在web.xml里面配置过滤器，代码如下：

<filter>  
      <filter-name>corsFilter</filter-name>  
      <filter-class>com.c503.interceptor.CorsFilter</filter-class> //这个是 corsFilter类在工程里的路径
    </filter>  
    <filter-mapping>  
      <filter-name>corsFilter</filter-name>  
      <url-pattern>/*</url-pattern>  
    </filter-mapping> 

经过上面三步，运行程序即可，注意我的工程端口也是7008，fetch请求里面调用的tests方法需要在后台实现：

@RestController

public class TestController extends BaseController{

	@RequestMapping(value="/tests",method = RequestMethod.POST)
	public Object tests(){
		PageData pd = new PageData();
		pd = this.getPageData();
		//String s = (String) pd.get("firstName");
		Map<String,String> map = new HashMap<String,String>();
		map.put("result", "SUCCESS");
		return map;		
	}
}

大功告成，可以通信啦。接下来想详细了解下ajax和fetch的区别，promise是什么，以及ES6标准