前端之家收集整理的这篇文章主要介绍了
vue 请求后台数据的实例代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
需要引用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.在请求接口数据时,涉及到跨域请求
出现下面错误:
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.
解决办法:在接口中设置
2.使用jsonp请求
但是出现如下错误
Uncaught SyntaxError: Unexpected token
查看请求,数据已返回,未解决.
提交表单
<div class="field">
密码：
<input type="text"
v-model="user.password">
</div>
<input type="submit"
value="提交">
</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
});
}
},
当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 {
}
/**
}
}
