精华内容
下载资源
问答
  • 一、给项目加上http请求的支持 1、修改src/main.js文件 加入两行代码: ...1、创建在线模拟数据的接口 可去easy-mock官网创建,具体方法不在此详述。 比如,接口编辑如下: { "status": "0", "co...

    一、给项目加上http请求的支持

    1、修改src/main.js文件

    加入两行代码:

    import VueResource from 'vue-resource'
    
    Vue.use(VueResource);

    二、调用请求

    1、创建在线模拟数据的接口

    可去easy-mock官网创建,具体方法不在此详述。

    比如,接口编辑如下:

    {
      "status": "0",
      "code": "0",
      "result|10": [{
        "productId|+1": 10001,
        "productName": "@cword(3)",
        "prodcutPrice|100-5000": 2499,
        "prodcutImg": ('180x180', '#894FC4', '#FFF', 'png', '!')
      }]
    }

    预览之后的数据为:

    2、Vue.js内置了对发送http请求的支持,只需要在对应页面的script标签内加上对应的代码即可。

    比如在展示商品列表页面GoodsList.vue需要获取商品列表:

    <template>
       {...}
    </template>
    <script>
        export default{
            data(){
                return {
    				goodsList:[]
                }
            },
            components:{
            	{...}
            },
            mounted: function(){
        		this.getGoodList();
            },
            methods:{
            	getGoodList(){
            		this.$http.get("https://www.easy-mock.com/mock/5d14320e78ded3476989974f/shoppingmallApi/goods").then((result)=>{
            			console.info(result.data)
            			var res = result.data;
            			this.goodsList = res.result;
            		},(result)=>{
            			console.error(result)
            		})
            	}
            }
        }
    </script>

    其中,then方法接受两个函数作为参数,第一个是成功后做什么,第二个是失败后做什么。

     

    补充:

    • data方法用于“声明页面会出现的变量“,并且赋予初始值。
    • mounted表示页面被vue渲染好之后的钩子方法,会立刻执行。所以我们要把发送http的请求写到mounted方法中。
    • this.$http中的this表示当前的vue组件(即GoodsList.vue);$http表示所有以$开头的变量都是vue的特殊变量,往往是vue框架自带。这里的$http就是可以发起http请求的对象。
    • $http.get是一个方法,可以发起get请求,只有一个参数即目标url。
    • then()方法来自promise,可以把异步请求携程普通的非异步形式。第一个参数是成功后的callback,第二个参数是失败后的callback。
    • this.goodsList = res.result中,是把远程返回的结果(json)赋予到本地。因为JavaScript的语言特性能直接支持JSON,所以才可以这样写。

    三、设置Vue.js开发服务器的代理

    正常来说,JavaScript在浏览器中是无法发送跨域请求的,我们需要在Vue.js的“开发服务器”上做转发配置。

    原来的config/index.js文件:

    1、修改config/index.js文件,在proxyTable里面增加以下内容:

     proxyTable: {
            '/api':{      //1.对所有以'/api'开头的url做处理
                target: 'https://www.easy-mock.com/mock/5d14320e78ded3476989974f/shoppingmallApi',
                changeOrigin: true,
                pathRewrite:{
                    '^/api':''      //2.把url中的"/api"去掉
                }
            }
        },

    上面的代码做了以下三件事:

    2、修改GoodsList.vue文件

    就是将url由原来的“https://www.easy-mock.com/mock/5d14320e78ded3476989974f/shoppingmallApi/goods”改成了“api/goods”。

    methods:{
            	getGoodList(){
            		this.$http.get("api/goods").then((result)=>{
            			console.info(result.data)
            			var res = result.data;
            			this.goodsList = res.result;
            		},(result)=>{
            			console.error(result)
            		})
            	}
            }

    四、把结果渲染到页面中

    修改GoodsList.vue页面

     <div class="accessory-list-wrap">
                  <div class="accessory-list col-4">
                    <ul>
                		<li v-for="(item,index) in goodsList">
    	                    <div class="pic">
    	                      <a href="#"><img :src="item.prodcutImg" alt=""></a>
    	                    </div>
    	                    <div class="main">
    	                      <div class="name">{{item.productName}}</div>
    	                      <div class="price">{{item.prodcutPrice}}</div>
    	                      <div class="btn-area">
    	                        <a href="javascript:;" class="btn btn--m">加入购物车</a>
    	                      </div>
    	                    </div>
                      	</li>
                    </ul>
                  </div>
                </div>
    • v-for是一个循环语法,可以把这个元素进行循环。注意,这个叫directive指令,需要与标签一起使用。
    • (item,index) in goodsList中的item是一个临时变量,用于遍历使用。

    五、如何发起post请求

    与get类似,就是第二个参数是请求的body。

    在vue的配置文件中(如Webpack项目的src/main.js中)增加下面一句:

    import VueResource from 'vue-resource'
    
    Vue.use(VueResource);
    
    ...
    
    //增加下面这句:
    Vue.http.options.emulateJSON = true;

    目的是为了能够让发出的post请求不会被浏览器转换为option请求。然后就可以根据下面的代码发送请求了:

    this.$http.post('api/goods',{productId:''})
        .then((response)=>{
            ...
        }, (response)=>{
            ...
        });

    关于发送http请求的更多内容,可查看vue-resource官方文档:https://github.com/search?q=vue-resource

    六、懒加载

    1、项目添加静态文件,用于懒加载的图片

    2、vue-lazyload的安装以及引入

    根据vue-lazyload官网进行安装以及引入,引入根据项目修改loading路径。

    3、使用

    在页面中使用v-lazy命令。将v-model:src 改成v-lazy        

    <li v-for="(item,index) in goodsList">
    	                    <div class="pic">
    	                      <a href="#"><img v-lazy="item.prodcutImg" alt=""></a>
                               //将v-model:src 改成了v-lazy                        
    
    	                    </div>
    	                    <div class="main">
    	                      <div class="name">{{item.productName}}</div>
    	                      <div class="price">{{item.prodcutPrice}}</div>
    	                      <div class="btn-area">
    	                        <a href="javascript:;" class="btn btn--m">加入购物车</a>
    	                      </div>
    	                    </div>
                      	</li>

     

     

    展开全文
  • vue异步请求数据重新渲染

    千次阅读 2019-08-08 22:07:00
    vue异步请求数据时往往不能及时更新,下面介绍一种方法解决。 export default { name: "pic", created() { this.getList(); }, data(){ return{num:[]} }, methods:{...

    vue异步请求数据时往往不能及时更新,下面介绍一种方法解决。

    export default {
            name: "pic",
            created() {
               this.getList();
            },
            data(){
                return{num:[]}
            },
            methods:{
                getList(){
                    fetch('https://localhost:3000/get-banner-list').then(data=>{
                        return data.json()
                    }).then((data)=>{this.num=data.data;console.log(this.num)})
                }
            }
        }

    这个时候template标签里面的数据还没有更新,所以可以这样

    <div class="propagate" v-show="num.length>0">
            <ul>
               <li  v-for="(item,index) in num" :key="index">
                  <img :src="item.photo_url" :key="index">
               </li>
            </ul>
        </div>

    等数据加载完再显示

    展开全文
  • vue 请求接口获取数据

    千次阅读 2020-12-01 16:52:02
    vue 请求接口获取数据 1.链接:https://www.cnblogs.com/kymming/p/6484626.html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <...

    vue 请求接口获取数据

    1.链接:https://www.cnblogs.com/kymming/p/6484626.html

    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>获取图片列表</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />       
        </head>
        <body>
            <div id="app">
                <ul>
                    <li>
                        <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>
                    </li>
                </ul>
            </div>       
        </body>
        <script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var demo=new Vue({
                el:'#app',
                data: {
                    imgList:[],
                    getImgUrl: ''    //存数据接口               
                },
                created: function(){
                    this.getImg()              //定义方法
                },
                methods: {
                    getImg: function(){
                        var that = this;      
                        that.$http({           //调用接口
                            method:'GET',
                            url:this.getImgUrl  //this指data
                        }).then(function(response){  //接口返回数据
                            this.imgList=response.data;                        
                        },function(error){
                        })
                    }
                }
            })
        </script>
    </html>
    
    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201903/18/1552916187_972010.jpg) vue获取不到本地数据
  • 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开发请求数据跨域的问题(基于浏览器的配置解决),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue接口请求数据赋值给this.data在其他位置获取不到 axios请求到的数据赋给属性不是响应式的,无法更新。解决方法使用实例方法:vm.$set( target, propertyName/index, value ),向响应式对象中添加一个 property,...
  • php vue 跨域请求数据

    千次阅读 2017-10-09 19:08:31
    最近做的一个项目 前端是用vue写的。 后台是用php。 这里就有一个利用php处理后台数据然后返回给前端。 因为php 挂的是apache. 而vue挂的是node.js 他俩只能跨域请求。 具体请求方式如下网址。  ...
  • Vue-请求数据渲染页面

    千次阅读 2020-05-13 00:01:26
    1、前边说到ajax请求的发送,今天要实现的是页面加载完成之后,渲染出列表的数据 2、首先新建一个GoodsList.vue ,加入一下HTML内容 <template> <div class="hello"> <h1>{{title}}</h1> ...
  • vue 获取后端数据

    千次阅读 2019-09-29 15:25:59
    1、vue-resource从后端请求我们需要的数据 下载安装npm install vue-resource 装完之后重新启动项目 模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , ...
  • 虽然 await 后面不一定非得跟 一个 返回promise对象得函数 但是如果你在工作中用的话 那就是必须后面跟一个 Promise...在vue请求数据用的是axios 而且axios 请求数据都是返回一个 promise对象 所以在 axios 请求 前面
  • 本篇文章主要介绍了vue 请求后台数据的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧、
  • Vue 模拟请求后台数据

    2019-01-14 21:37:13
    Vue 项目开发过程中,在没有后端支持的情况下,如何模拟请求后台数据呢? 可以在根目录 /static 目录下新建 mock 文件夹,在 mock 文件夹下创建 json 文件来存放模拟数据,例如: index.json 内容如下: //注意:...
  • Vue Axios 解析异步请求获取返回数据 (详解)跨页面获取 Axios 返回值 苦于请求 Get Post Depete Put 增删改查请求 Promise对象, 带有promiseStatus和promiseValue new PromES7的异步特性async / await 异步请求...
  • vue 请求数据

    千次阅读 2017-07-16 14:18:04
    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 ... ajax 请求,而大型项目都会使用 Vuex 来管理数据,此处主要讲解使用axios获取数据——改写原型链。 首先在mian.js引入axios: import axi
  • 请求数据的接口: 新闻列表接口:http://www.phonegap100.com/appapi.php?a=getPortalList&amp;catid=20&amp;page=1 新闻详情接口:http://www.phonegap100.com/appapi.php?a=getPortalArticle&amp;aid...
  • vue请求后台,后台通过 request.getParameter("...需要使用以下方式来获取请求参数可以解决   通过 @RequestBody 注解,springmvc 可以把json中的数据绑定到Map中,这样就可以得到数据了  ...
  • 本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require(‘portfinder’)后添加 const express = require('express...
  • vue动态请求数据后swiper不能滑动(失效) 做个笔记: 引入swiper后,起初是静态资源,我把初始化函数放在mounted里面是可以的。当、但时当用了请求获取资源后,这个初始化就不生效了,我的请求是放在created生命...
  • 本篇文章主要介绍了vue如何从接口请求数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下
  • vue获取本地json数据

    千次阅读 2020-05-08 09:28:09
    vue获取本地json数据 最近练习vue的时候,因为是通过vue-cli4搭建的项目,和vue-cli2搭建项目的目录结构不一样。静态文件的放置位置在public文件里。 为了降低模块间的耦合度和方便管理,所以我把axios获取数据给...
  • vue 使用 jsonp 请求数据

    千次阅读 2019-09-26 15:59:30
    vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp。 安装jsonp npm install --save vue-jsonp 引入 ...
  • 今天小编就为大家分享一篇vue请求服务器数据后绑定不上的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue开发请求本地数据

    千次阅读 2018-10-17 21:03:48
    1.新建一个与index同级的db.json文件,里面放入假数据 2.在入口main.js中添加 import VueResource from 'vue-resource' Vue.use(VueResource) 3.分别在webpack.dev.conf.js中的const portfinder = require('...
  • 封装请求数据的接口总结 一、配置url(可以放在一个js中) 引入axios:import axios from “axios” 配置url const service=axios.create({ baseURL:请求的地址, timeout:5000 //访问超时的时间限制 }); 抛出(如果...
  • 一、通过api接口获取数据 在vuejs中请求接口,大体分为两种方式:vue-source和axios。它们都是经过良好封装的http请求插件。 下文将简单介绍一下使用方法。 1. vue-source 略讲,详情见这篇博客。 安装 首先,...
  • vue项目及axios请求获取数据

    万次阅读 多人点赞 2018-09-17 10:12:46
    一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能。 首先要导入用到的组件和axios import HomeHeader from './components/Header' ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,905
精华内容 23,962
关键字:

vue获取请求数据

vue 订阅