本文详细介绍了在Vue项目中如何使用vue-resource库获取后台数据，包括配置引入、处理跨域问题以及POST请求的实现。在获取数据过程中，遇到的跨域错误和JSONP请求的尝试被提及，并提供了在服务端设置拦截器解决跨域问题的方案。
需要引用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
查看请求,数据已返回,未解决.
提交表单
姓名：
v-model="user.username">
密码：
v-model="user.password">
value="提交">
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 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, 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
Vue axios异步获取后台数据alert提示undefined
记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...
Vue中对获取的数据进行重新排序
var Enumerable = require('linq'); // 使用linq 按照RegisterID排序listJust是自己定义的数组,来接收数据.listJust: [] addDat ...
Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
Java获取后台数据，动态生成多行多列复选框
本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...
用ajax获取后台数据，返回json数据，怎么在前台使用？
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
php 从一个数组中随机获取固定数据
html页面下拉列表中动态添加后台数据(格式化数据，显示出数据的层次感)
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接&l ...
前台通过ajax获取后台数据，PHP如何返回中文数据
现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...
随机推荐
新手ui设计师必备——切图规范
图文并茂,浅显易懂. 使用markman标注. 资源链接: 图片来自http://www.ui.cn/detail/56347.html 本文作者starof,因知识本身在变化,作者也在不断学习成长, ...
struts.xml框架
1.首先在.jsp文件中
2.然后浏览器会访问struts.xml ...python简明手册学习
1.行末单独一个反斜杠表示字符串在下一行继续,而不是开始一个新的行. >>> "This is the first sentence.\ ... This is the s ...
paip.元数据驱动的转换-读取文件行到个list理念 uapi java php python总结
paip.元数据驱动的转换-读取文件行到个list理念 uapi java php python总结 #两个思路 1.思路如下:使用file_get_contents()获取txt文件的内容,然后通过 ...
java Date比较
package com.horizon.test; import org.apache.commons.lang.time.DateUtils; public class Hello3 { publi ...
汇编Ring 3下实现 HOOK API
[文章标题]汇编ring3下实现HOOK API [文章作者]nohacks(非安全,hacker0058) [作者主页]hacker0058.ys168.com [文章出处]看雪论坛(bbs.ped ...
Win32 WriteFile and ReadFile
HANDLE WINAPI CreateFile( __in LPCTSTR lpFileName, // 文件路径 __in DWORD dwDesiredAccess, // 访问权限,GENER ...
backbone HTTP方法中 options参数
wait: 可以指定是否等待服务端的返回结果再更新model.默认情况下不等待url: 可以覆盖掉backbone默认使用的url格式attrs: 可以指定保存到服务端的字段有哪些,配合options ...
为 ngui TweenPosition 添加 pingpongone
//---------------------------------------------- // NGUI: Next-Gen UI kit // Copyright © 2011-2015 T ...
border-image的拉伸和平铺
...
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
