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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
PHP文件上传实例详解!!!
2007/01/02 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
使用pandas读取文件的实现
2019/07/31 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
什么是抽象
2015/12/13 面试题
农村婚礼证婚词
2014/01/10 职场文书
农村改厕实施方案
2014/03/22 职场文书
大班下学期个人总结
2015/02/13 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书