vue 请求后台数据的实例代码


Posted in Javascript onJune 22, 2017

需要引用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、

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
Dom 结点创建 基础知识
Oct 01 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 #Javascript
vue如何从接口请求数据
Jun 22 #Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 #Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 #Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 #Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 #Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php实现zip文件解压操作
2015/11/03 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
解析jquery获取父窗口的元素
2013/06/26 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python中文竖排显示的方法
2015/07/28 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
DataList 能否分页,请问如何实现?
2015/05/03 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
师范生求职自荐信
2014/06/14 职场文书
庆七一活动总结
2014/08/27 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
教师考核表个人总结
2015/02/12 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书