vue 请求后台数据

须要引用vue-resource

安装请参考https://github.com/pagekit/vue-resource官方文档

在入口函数中加入

import VueResource from 'vue-resource'
Vue.use(VueResource);

在package.json文件中加入

"dependencies": {
    "vue": "^2.2.6",
    "vue-resource":"^1.2.1"
  },

请求以下

mounted: function () {
        // GET /someUrl
        this.$http.get('http://localhost:8088/test').then(response => {
             console.log(response.data);
            // get body data
            // this.someData = response.body;

        }, response => {
            console.log("error");
        });
    },

注意

1.在请求接口数据时,涉及到跨域请求 出现下面错误: XMLHttpRequest cannot load http://localhost:8088/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

解决办法:在接口中设置

response.setHeader("Access-Control-Allow-Origin", "*");

2.使用jsonp请求 可是出现以下错误 Uncaught SyntaxError: Unexpected token 查看请求,数据已返回,未解决.

提交表单

<div id="app-7">
        <form @submit.prevent="submit">
            <div class="field">
                姓名：
                <input type="text"
                       v-model="user.username">
            </div>
    
    
            <div class="field">
                密码：
                <input type="text"
                       v-model="user.password">
            </div>
    
    
            <input type="submit"
                   value="提交">
            </form>
    </div>

methods: {
        submit: function() {
          var formData = JSON.stringify(this.user); // 这里才是你的表单数据
          
          this.$http.post('http://localhost:8088/post', formData).then((response) => {
              // success callback
              console.log(response.data);
          }, (response) => {
               console.log("error");
              // error callback
          });
        }
    },

提交restful接口出现跨域请求的问题 查阅资料得知， 当contentType设置为三个经常使用的格式之外的格式，如“application/json”时，会先发送一个试探的OPTIONS类型的请求给服务端。在这时，单纯的在业务接口response添加Access-Control-Allow-Origin 因为尚未走到因此不会起做用。

解决方案: 在服务端增长一个拦截器 用于处理全部请求并加上容许跨域的头

public class CommonInterceptor implements HandlerInterceptor {

    private List<String> excludedUrls;

    public List<String> getExcludedUrls() {
        return excludedUrls;
    }

    public void setExcludedUrls(List<String> excludedUrls) {
        this.excludedUrls = excludedUrls;
    }

    /**
     *
     * 在业务处理器处理请求以前被调用 若是返回false
     * 从当前的拦截器往回执行全部拦截器的afterCompletion(),
     * 再退出拦截器链, 若是返回true 执行下一个拦截器,
     * 直到全部的拦截器都执行完毕 再执行被拦截的Controller
     * 而后进入拦截器链,
     * 从最后一个拦截器往回执行全部的postHandle()
     * 接着再从最后一个拦截器往回执行全部的afterCompletion()
     *
     * @param  request
     *
     * @param  response
     */
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
                             Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept");
        return true;
    }

    // 在业务处理器处理请求执行完成后,生成视图以前执行的动做
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                           ModelAndView modelAndView) throws Exception {

    }

    /**
     *
     * 在DispatcherServlet彻底处理完请求后被调用
     * 当有拦截器抛出异常时,
     * 会从当前拦截器往回执行全部的拦截器的afterCompletion()
     *
     * @param request
     *
     * @param response
     *
     * @param handler
     *
     */
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
                                Object handler, Exception ex) throws Exception {

    }
}

spring resultful没法像在jsp提交表单同样处理数据必须加上@RequestBody,能够直接json转换object,可是对与没有bean的表单数据,建议转换为map对象,相似@RequestBody Map<String,Object> map