精华内容
下载资源
问答
  • vue 请求数据方式

    千次阅读 2019-05-20 22:15:46
    vue 请求数据方式 Vue 请求数据方式有:vue-resource、axios、fetchJsonp三种。其中,vue-resource 是 Vue官方提供的插件,axios 与 fetchJsonp 是第三方插件。 一、vue-resource 请求数据 npm 安装 vue-resource ...
    vue 请求数据方式

    Vue 请求数据方式有:vue-resource、axios、fetchJsonp三种。其中,vue-resource 是 Vue官方提供的插件,axios 与 fetchJsonp 是第三方插件。

    一、vue-resource 请求数据
    1. npm 安装 vue-resource

      npm install vue-resource --save
      

      说明:使用 --save 是为了在 package.json 中引用,表示在生产环境中使用。如果要将代码打包发送他人、上传到github,或者要发布代码时,package.json 就是安装所需要的包。那么,当在开发环境中时,使用 --save-dev;当在生产环境中,使用 --save。

    2. 在 main.js 即入口文件中引入 vue-resource;

      import VueResource from 'vue-resource';
      
    3. 引入后,需使用;

      Vue.use(VueResource);
      
    4. 在代码中使用:

      {
        // GET /someUrl
        this.$http.get('/someUrl').then(response => {
      
          // get body data
          this.someData = response.body;
      
        }, response => {
          // error callback
        });
      }
      

    注意:vue-resource 的请求都是继承promise的。promise是属于异步请求;.then箭头函数里的this代表的是上下文。如果想获取外面的数据,请在在函数外声明,var that = this;将外层的this先储存到that中再引入函数内部。

    vue-resource 参考文档:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

    二、 axios 请求数据
    1. npm 安装 axios

      npm install axios --save
      
    2. 在 main.js 即入口文件中引入 axios;

      import Axios from 'axios';
      
      Vue.prototype.$axios = Axios;
      

      说明:第一行是引入 axios;第二行是 axios 的一种快捷写法,将 axios 绑定在 Vue 的原型上,这样在其它页面中使用 axios 请求数据就不用引入了,直接使用即可。

    3. 配置 axios 跨域请求代理

      3.1. 进入 config 文件夹,打开 index.js 文件;
      3.2. 找到 proxyTable: {}, 大概在 13行,在里面加入下面代码:

      //做一个接口的代理
      '/proxy_api':{   // 拦截转发路径,名字可以任意取,注意前面斜杠;
           target:'https://www.pubgmm.com',   //代理目标网址;
           changeOrigin:true,   //允许跨域
           pathRewrite:{
               '^/proxy_api':''   //重写路径
           }
       }
      
    4. 引入,在 Vue 原型上绑定一个变量 Host,名称随意;

      Vue.prototype.HOST = '/proxy_api';  //注意与接口代理的名称一致;
      
    5. 上面配置成功后,即可在组件中使用 axios 的 Http 请求,如下:

      var data = {
            id: 12345
          };
      this.API.post(url,data).then(res => {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });  
      
    6. axios 并发请求处理

      methods(){
      	getUserAccount(){
      		return this.API.get(url1,data);
      	},
      	getUserPermissions(){
      		return this.API.get(url2,data);
      	},
      	this.API.all([this.getUserAccount, this.getUserPermissions])
      	  .then(API.spread(function (acct, perms) {
      		    // Both requests are now complete
      		    console.log(acct);
      		    console.log(perms);
      	  }));
      }
      

    axios 参考文档:https://github.com/axios/axios

    三、fetchJsonp 请求数据

    在使用上面两种请求方式后,fetchJsonp 未做过多的研究,有感兴趣的你可以参考文档去学习使用: https://github.com/camsong/fetch-jsonp

    坚持每分每秒,完成每时每刻!!!

    展开全文
  • vue请求数据

    2018-05-31 19:31:54
    vue封装了类似ajax的请求方法简单易用请求方式放在methods中。其中有用到了es6的箭头函数,箭头函数的好处是代码简单,对于箭头函数内部的this不用在重新定义,这里的this指向vue的实例,这里使用es5的函数就需要在...

    vue封装了类似ajax的请求方法简单易用

    要是用这个方法获取数据需要安装vue-resource。找到项目文件夹按住shift+右键选中启动命令符工具,输入npm install vue-resource --save(--save意思是安装到默认库里)

    然后引入vue-resource。

    请求方式放在methods中。

    其中有用到了es6的箭头函数,箭头函数的好处是代码简单,对于箭头函数内部的this不用在重新定义,这里的this指向vue的实例,这里使用es5的函数就需要在函数外部在定义一下this。

    下面的生命周期函数mounted作用是在页面加载时就加载数据。

    methods:{
        getData(){
            //请求数据
    
            var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    
    
            this.$http.get(api).then((response)=>{
                console.log(response);
    
                //注意this指向
    
                this.list=response.body.result;
    
    
    
            },function(err){
    
                console.log(err);
    
            })
    
        }
    },
    mounted(){
      this.getData();
    }

    展开全文
  • vue 请求后台数据

    万次阅读 多人点赞 2017-04-02 23:11:42
    需要引用vue-resource安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入import VueResource from 'vue-resource' Vue.use(VueResource);在package.json文件中加入 "dependencies": { ...

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

    展开全文
  • 如果我们使用vue来构架前端项目,我为自己设计了这样的一个小型架构,参考上一遍文章:《Jquery微型架构:requestBody网络请求的模式与自定义协议的封装》,在次基础上做了一些改变。 一、 首先是程序架构 其中包含...

    如果我们使用vue来构架前端项目,我为自己设计了这样的一个小型架构,参考上一遍文章:《Jquery微型架构:requestBody网络请求的模式与自定义协议的封装》,在次基础上做了一些改变。

    一、 首先是程序架构


    其中包含jquery和vue两个外部包。需要下载导入。

    二、页面文件login.html文件内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>login</title>
        <script src="../js/vue.min.js"></script>
        <script src="../js/vue-resource.js"></script>
    
    </head>
    <body>
    
    <div id="app">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input v-model="username"/></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input v-model="password"/></td>
            </tr>
    
            <tr>
                <td colspan="2">
                    <button v-on:click="login" style="width: 100%">登录</button>
                </td>
            </tr>
        </table>
        <p>{{info}}</p>
    </div>
    </body>
    <script src="../js/login.js"></script>
    </html>

    三、js文件

    其中properties.js、beans.js、jsonutils.ja文件和上一篇文章所讲一致。

    1.requestutils.js文件有所改变,要按照vue的语法进行改写

    // 把对象转换为json
    var RequestBodyAjax = function (url, requestBody, callback) {
        Vue.http({
            url: url,
            method: "post",
            body: requestBody,
            contentType: 'application/json',
        }).then(function (response) {
            //var result = JSON.parse(response.data);
            console.debug(response.data);
            callback(response.data);
        })
    }

    2.关键的login.js也要按照vue的标准进行改写

    //为页面引入实体类文件
    document.write("<script type='text/javascript' src='../js/properties.js'></script>")
    document.write("<script type='text/javascript' src='../js/beans.js'></script>")
    document.write("<script type='text/javascript' src='../js/jsonutils.js'></script>")
    document.write("<script type='text/javascript' src='../js/requestutils.js'></script>")
    
    var mVue = new Vue({
        el: "#app",
        data: {
            username: "Chris",//用户名
            password: "gk123456",//密码
            info: ""//显示调试信息
        },
        methods: {
            login: function () {
                // 获取输入的参数
                var userName = this.username;
                var password = this.password;
    
                //  创建参数对象
                var params = new LoginParams();
                params.setName(userName);
                params.setPassword(password);
    
                //  创建请求体
                var loginRequest = new WebRequest(params);
                loginRequest.setToken("ttyyuuii");
                loginRequest.setVer("1.0");
    
                // 构建requestBody
                var requestBody = ToJson(loginRequest);
    
                // 创建请求结果回调函数
                var callback = function (data) {
                    mVue.info = data;
                }
    
                // 发起异步请求
                var url = baseUrl + 'getUser';
                new RequestBodyAjax(url, requestBody, callback);
    
            }
        }
    })

    四、运行结果


    展开全文
  • vue请求axio的使用详解

    万次阅读 2019-06-14 12:19:55
    vue请求axio的使用详解 安装 npm install axios 创建axios实例 import axios from 'axios' //判断是否是本地开发环境,这样上线就不用更改,不了解,可以直接写 const host = const host = ...
  • vue请求后台接口

    万次阅读 多人点赞 2018-09-20 10:03:08
    vue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。 一.使用axios发送AJAX请求: 1.安装axios并引入: 1)npm install axios -S (直接下载axios组件,下载完毕后axios.js就存放在node_...
  • Vue请求传递参数

    2021-03-03 21:45:53
    一、get请求 get请求没有请求体,传递的参数是添加到url字符串的后面:url?name=value&name1=value1。 1、直接拼接 axios({ method: "get", url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123", //参数...
  • vue请求封装 使用promise和vue-resource 由于在项目中很多地方都需要用到网络请求,为了使用上的方便,使用ES6的Promise和vue-resource来封装网络请求 // # api.js import Vue from 'vue'; import router from '../....
  • vue请求封装方案

    千次阅读 2019-10-21 11:12:22
    方案一 config/fetch.js import { ...// 封装一个请求函数 export default async(url = '', data = {}, type = 'GET', method = 'fetch') => { type = type.toUpperCase(); url = baseUrl + url; ...
  • vue请求跨域问题

    2018-12-13 19:12:58
    index.js index.js添加代理 然后在请求的接口前缀加上/api ...以上方式可以解决我们在vue项目中开发环境的跨域问题,但是无法解决生产环境上的跨域问题,有的时候生产环境上也需要处理跨...
  • vue 请求数据错误避免

    2020-08-17 14:58:03
    在项目中,axiso请求,出现几种错误显示问题 1.超时请求时原始数据必须清空,否则会以为已经查询出来 2.重复按钮点击问题,宁可第二次不给他点击,原因axiso请求是异步,如果两次请求...(body=>{ if(sch == this.sch){
  • VUE请求数据的方法

    2020-04-21 13:21:35
    cd 到项目目录安装插件 npm install vue-resource --serve 第二步 找到项目目录下面的 main.js 引入 :import VueResource from 'vue-resource'; Vue.use(VueResource); 第三步 { // GET /someUrl this.$...
  • 前端Vue请求接口数据、渲染数据 1.请求接口数据: //定义一个保存数据的数组 data(){ return { lunbotuList:[] //保存轮播图的数组 }; } created(){ this.getLunbotu(); }, methods:{ getLunbotu(){ ...
  • 用法:它其实就是我们vue请求里面的 this.$http.*** 和 this.axios.*** 功能特性: *** vue-axios vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在...
  • vue请求后台演示

    千次阅读 2017-11-16 23:19:17
    <body> 添加数据</button> 编号</th>
  • vue 请求后台数据的三种方式

    千次阅读 2020-11-05 15:28:52
    本文主要介绍了在 vue 中,如何向后台如何发送请求获取数据的三种方法 一、Ajax 1.什么是Ajax Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是一种异步无刷新技术。 2.使用 $ajax 来发送请求
  • Vue请求Django后台获取图片资源

    千次阅读 2019-08-06 11:21:57
    1.在methods中定义获取轮播图图片的方法:get_imgs(),通过ajax对后台进行请求。 2.在created中调用get_imgs(),在created中的方法会在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图, 不理解的...
  • vue请求后台数据的几种方式

    千次阅读 2019-11-28 10:30:59
    常用的为:vue-resource、axios、fetch-jsonp 1、vue-resource官方提供的 vue的一个插件 export default{ data(){ return { msg:'我是一个首页组件msg', flag:true, ...
  • vue请求后端下载excel文件

    千次阅读 2019-12-30 16:16:25
    this.$axios.get(this.$store.state.api+"/api/excelData/"+this.id+"?startTime="+this.... document.body.appendChild(aLink)  }  }).catch(function (error){  console.log('error')   });  
  • 1-get请求只能传query参数,query参数都是拼在请求地址上的 2.post可以传body和query两种形式的参数 如果在post中,需要传输的参数的格式为:“application/json”,则要如下写法: export const getUploadFile = ...
  • Vue请求JSON Server服务器数据

    千次阅读 2018-11-02 11:40:15
    <script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"> var vm = new Vue({ el:'#app' ,data:{ list:[] } ,created(){ this.getData(); } ,methods:{ getData(){ var url = '...
  • 1、前端 export function vip_account_add(parameter) { parameter.timeStamp = new Date().getTime(); return axios({ url: 'datahome/member/add...addMember(@RequestBody Member member){ return renderOk(); }
  • Vue发送请求

    千次阅读 2020-08-28 13:26:59
    Vue发送请求 1、发送 POST 请求 //poxt请求 sendRequest() { const url = '请求地址'; this.$http.post(url, {}).then(res => { console.log(res); }); } 2、发送 GET 请求 //get请求 sendRequest2() { ...
  • vue实战——vue中发送AJAX请求

    万次阅读 多人点赞 2018-05-14 17:52:49
    vue中发送AJAX请求 一、简介 1)vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 2) axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,029
精华内容 12,411
关键字:

bodyvue请求

vue 订阅