vue 请求后台数据的实例代码
作者:VergilOpen 发布时间:2024-05-05 09:23:47
标签: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
查看请求,数据已返回,未解决.
提交表单
<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、
来源:http://blog.csdn.net/vergilgeekopen/article/details/68954940
0
投稿
猜你喜欢
- 流程:模拟登录→获取Html页面→正则解析所有符合条件的行→逐一将符合条件的行的所有列存入到CSVData[]临时变量中→写入到CSV文件中
- 本文实例讲述了PHP函数shuffle()取数组若干个随机元素的方法。分享给大家供大家参考,具体如下:有时候我们需要取数组中若干个随机元素(
- json.dumps将一个Python数据结构转换为JSONimport jsondata = { 'na
- 在python中,一个文件(以“.py”为后缀名的文件)就叫做一个模块,每一个模块在python里都
- 本文实例为大家分享了python实现定时发送邮件的具体代码,供大家参考,具体内容如下一、发送邮件import smtplib from em
- 对于一些数据量较大的系统,数据库面临的问题除了查询效率低下,还有就是数据入库时间长。特别像报表系统,每天花费在数据导入上的时间可能会长达几个
- 这篇文章主要介绍了js神秘的电报密码 哈弗曼编码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 一、注释1.#单行注释2."""多行注释"""3.pycharm多行注释快捷键:
- Variant变量一般会将其代表的数据子类型自动转换成合适的数据类型,但有时候,自动转换也会造成一些数据类型不匹配的错误.这时,可使用转换函
- CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色、大小、距离等静
- 手风琴(Collapse)效果展示Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对
- 前言在启动 Django 项目时,Django 默认监听的端口号为 8000,设置的默认 IP 地址为 127.0.0.1 。如果需要修改默
- 使用access数据库时可能用到的数据转换:类型转换涵数:函数 返回类型 expression 参数范围CBool Boolean 任何有效
- 很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式。我们先来看一下需
- Python中滑动平均算法(Moving Average)方案:#!/usr/bin/env python# -*- coding: utf
- 对衍射最经典的解释是Huygens-Fresnel原理,Huygens认为波阵面上每一点都会成为新的波源,这些子波源的相互干涉就形成了衍射。
- 今天在使用ORDER BY的过程中出现了一点问题,发现之前对ORDER BY理解是错误的。 之前在w3s网站上看到ORDER BY的用法,以
- 第一种:x0 = '<?xml version="1.0"?>' \ '
- 问题描述本人pycharm使用anaconda创建的虚拟环境后,使用pycharm终端安装第三方库,但路径一直安装到磁盘下的系统路径中,如图
- Python操作MySQL主要使用两种方式:原生模块 pymsqlORM框架 SQLAchemypymqlpymsql是Python中操作M