vue 请求后台数据的实例代码

需要引用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 . 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、

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。