vue打开后端html文件,vue中怎么请求后端数据?
vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
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
查看请求,数据已返回,未解决.
提交表单
姓名:
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
更多web前端知识,请查阅 HTML中文网 !!
vue打开后端html文件,vue中怎么请求后端数据?相关推荐
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
- ajax 请求成功 再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- 调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...
- 【Android 逆向】x86 汇编 ( 使用 IDA 解析 x86 架构的动态库文件 | 使用 IDA 打开动态库文件 | IDA 中查找指定的方法 )
文章目录 一.使用 IDA 打开动态库文件 二.IDA 中查找指定的方法 一.使用 IDA 打开动态库文件 分析 Android SDK 中的 x86 架构的动态库 , 动态库位置 : D:\001_ ...
- pythonwith open 打开多个文件_Python中使用with语句同时打开多个文件
下午小伙伴问了一个有趣的问题, 怎么用 Python 的 with 语句同时打开多个文件? 首先, Python 本身是支持同时在 with 中打开多个文件的 with open('a.txt', ' ...
- vue打开后端html文件,VUE渲染后端返回含有script标签的html字符串示例
VUE渲染后端返回含有script标签的html字符串示例 在接入支付宝支付模块的时候,支支返回的是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验.注意点:不能在 ...
- vue打开外部页面_vue项目中嵌套外部网页
主要有两种方法: 一.通过接口请求,然后v-html渲染,这种方法试验之后发现不行,v-html不会渲染内部页面 二.iframe的方式(解决引入成功之后获取不到引入的标签问题及跨域问题) 需要嵌套的 ...
- vue utils.js公共方法中axios请求返回数据
utils.js中 async getmaterialList() {try {const res = await axios.post('接口')return res.data.data} catc ...
最新文章
- c语言编程小项目300行,求几个c语言的小项目做?
- 深度学习概述:从感知机到深度网络
- 上海首次正式试用人脸识别系统抓医药代表:频繁出入的非就医可疑人员
- SimpleDateFormat类的线程安全问题和解决方案
- m1MacBook的TensorFlow虚拟环境---pytables的安装
- mapxtreme 查找指定位置的图元
- 小米597页招股书中的数据干货,全在这里了!
- 虚拟服务器软件哪个好,虚拟机软件哪个好?热门虚拟机软件推荐
- 注册github账号详细中文版教程【精选】
- 基于opencv的重叠图像的凹点分割(C++)
- 置信区间的临界值_在进行区间估计时,若要求置信水平为95%,则相应的临界值为...
- 无锁编程与分布式编程那个更适合多核CPU?
- abs和pc混在一起怎么解决_PC和ABS塑料使用中常见问题的分析及其解决办法
- 【POI 2006】 Tet-Tetris-3D
- 什么是pageRank
- opengl 教室 地球仪 模型
- 在虚拟机上安装Ubuntu
- 关于‘Use of undeclared type’的错误!
- 关于MySQL安装失败原因
- 客户故事:4家银行如何打造新一代移动金融中心 1