vue中如何获取后台数据

原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940

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

原文地址:https://www.cnblogs.com/zr123/p/8178817.html

时间: 2024-10-09 18:17:07

vue中如何获取后台数据的相关文章

Vue axios异步获取后台数据alert提示undefined

记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ public class PageResult implements Serializable { //总记录数 private Long total; //当前页结果 private List rows; //get,set方法省略 .... } QueryPageBean /** * 封装查询条件 */

JavaScript中fetch获取后台数据

除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案——fetch ㈠fetch示例 fetch获取后端数据的例子: // 通过fetch获取百度的错误提示页面 fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象 .then((res)=>{ return res.text() // res.text()是一个Promise对象 }) .then((res)=>{ console.

前台通过ajax获取后台数据,PHP如何返回中文数据

现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: echo urldecode(json_encode(array('status'=>'1', 'errMsg'=>urlencode('数据传递错误,请重试')))); return;

用ajax获取后台数据,返回json数据,怎么在前台使用?

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

sencha touch 通过.axhx获取后台数据时,Unable to parse the JSON returned by the server: Error: You&#39;re trying to

注意:如果你的store跟我一样是使用.ashx从.NET后台获取的,并且用sencha cmd自带的web服务器调试,在chrome调试的时候回会返回如下错误. [WARN][Ext.data.reader.Reader#process] Unable to parse the JSON returned by the server: Error: You're trying to decode an invalid JSON String: <%@ WebHandler Language=&qu

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select></select>中的option字符串.让后将字符串响应回来,动态添加到<select>中.其中的字符串中包含了后台的数据. 页面js代码: 1 <script type="text/javascript"> 2 //加载部门 3 function loa

201507221403_《backbone之一——新建模型和集合、实例化模型、模型上监听事件的方法、模型设置和获取后台数据、配置理由方法、视图绑定事件的方法、绑定模型等》

一 . 新建 var model_1 = new Backbone.Model({'name':'hello'}); var model_2 = new Backbone.Model({'name':'hi'}); var models = new Backbone.Collection(); models.add( model_1 ); models.add( model_2 ); alert( JSON.stringify(models) ); 二. 实例化模型 var M = Backbo

Vue中实现与后台的数据交换(vue-resource)

vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打开vue项目文件夹下的package.json 添加vue-resource版本 再打开src下的main.js文件,import一下vue-resource 然后运行一下vue的项目,项目会提示你下载vue-resource插件,npm install一下即可 2.创建一个新的vue页面,用来测试

Reactjs之Axios、fetch-jsonp获取后台数据

1.新增知识点 /** Axios获取服务器数据(无法跨域,只能让后台跨域获取数据) react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 axios介绍: https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域) 1.安装axios模块npm install axios --save / npm install axios --