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 /someUrlthis.$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 callbackconsole.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

vue 请求后台数据相关推荐

vue请求后台数据的几种方式
常用的为:vue-resource. axios.fetch-jsonp 参考链接:https://www.cnblogs.com/zhangjunkang/p/10147357.html 1.vue ...
vue 请求后台数据方法
this.axios.post("url", data) this.axios.post(`http://...... `, data) .then((res) => { ...
Vue 利用axios请求后台数据
说明:前后端代码不在同一个电脑上后端接口地址: http://ip:8888/Xqy/user/queryUser?name=xqy 一:准备工作导包: npm i axios 安装其他插件的时候 ...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41 来源:亿速云阅读:108 作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...
前端写接口请求后台数据存vuex中打印到控制台
最近从B站上面跟着敲 vue 的项目,多次看到有关于前台拿到后端的接口地址文档,写前端接口,然后请求后台数据,放到 vuex 当中,再然后再在需要展示数据时渲染出来,于是做个输出小结,分享出来,供大家 ...
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 ...

vue 请求后台数据

提交表单

vue 请求后台数据相关推荐

最新文章

热门文章