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

发布时间：2020-12-17 02:54:49 所属栏目：百科来源：网络整理

导读：需要引用vue-resource 安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入在package.json文件中加入请求如下 { console.log(response.data); // get body data // this.someData = response.body; },response = { console.log("

需要引用vue-resource

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

在入口函数中加入

在package.json文件中加入

请求如下

{ console.log(response.data); // get body data // this.someData = response.body;

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

注意

1.在请求接口数据时,涉及到跨域请求

出现下面错误:

代码如下:

解决办法:在接口中设置

2.使用jsonp请求

但是出现如下错误

Uncaught SyntaxError: Unexpected token

查看请求,数据已返回,未解决.

提交表单

  <div class="field"&gt;
    密码：
    <input type="text"
        v-model="user.password"&gt;
  </div>


  <input type="submit"
      value="提交"&gt;
  </form>

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 由于还没有走到所以不会起作用。

解决方案:

在服务端增加一个拦截器

用于处理所有请求并加上允许跨域的头

private List excludedUrls;

public List getExcludedUrls() {
return excludedUrls;
}

public void setExcludedUrls(List 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,Object handler,ModelAndView modelAndView) throws Exception {

}

/**

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

}
}

spring resultful无法像在jsp提交表单一样处理数据必须加上@RequestBody,可以直接json转换object,但是对与没有bean的表单数据,建议转换为map对象,类似@RequestBody Map、

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!