vue中Axios请求豆瓣API数据并展示到Swipe中

  • 1.首先是安装Axios;

    安装方法cnpm install axios --save 等待npm安装完毕;

  • 2.在main.js中引入axios引入方法;

    import Axios from 'axios'

    Vue.prototype.$axios = Axios 必须要这样引入才能使用

全部的main.js方法如下
```javascript

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import Axios from 'axios'

import './lib/css/mui.min.css'

import './lib/css/icons-extra.css'

import 'mint-ui/lib/style.css'

import { Header } from 'mint-ui'

import { Swipe, SwipeItem } from 'mint-ui';

Vue.component(Swipe.name, Swipe);

Vue.component(SwipeItem.name, SwipeItem);

import router from './router'

import App from './App'

Vue.prototype.$axios = Axios

Vue.prototype.HOST = "/api"

Vue.config.productionTip = false

Vue.component(Header.name, Header)

/* eslint-disable no-new */

new Vue({

render: h => h(App),

router

}).$mount('#app');


- 3.引入以后要做post请求数据封装处理; - 4.封装处理post请求后,要做跨域问题处理;
找到config目录下的index.js文件,然后找到proxyTable,进行修改,修改内容如下:

proxyTable: {

'/api': {

target: 'https://api.douban.com',//设置你调用的接口域名和端口号 别忘了加http

changeOrigin: true,

pathRewrite: {

'^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替

},

changeOrigin:true

}

},

- 5.做完第4步后需要修改main.js;在main.js中增加一行代码;

Vue.prototype.HOST = "/api"

- 6.然后在其他模块中就可以直接调用了
如:获取电影Top250 第一页 2条数据:
豆瓣API:https://api.douban.com/v2/movie/top250?start=0&count=2 然后可以在HomeContainer.vue中做如下代码:

.mint-swipe{
width: 100%;
height: 200px;
}


##注意如下几点:
#####main.js中文件的Axios的配置信息 import Axios from 'axios' Vue.prototype.$axios = Axios
Vue.prototype.HOST = "/api" vue中使用跨域url请求则请求地址可以如下写法
`var url = this.HOST + "/v2/movie/in_theaters?city=广州&start=0&count=3"`
####注意使用axios中的写法
#####一、不要使用下面这种方法【这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of undefined 】

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

二、使用这种方法

this.$axios.get(url)

.then(response => {

console.log(response.data.subjects);

this.listarr = response.data.subjects

console.log(this.listarr);

})

.catch(error => {

console.log(error);

});

vue中Axios请求豆瓣API数据并展示到Swipe中的更多相关文章

  1. vue使用axios调用豆瓣API跨域问题

    最近做了一个vue小demo,使用了豆瓣开源的API,通过ajax请求时需要跨域才能使用.   封面.jpg 一.以下是豆瓣常用的开源接口: 正在热映 :https://api.douban.com/ ...

  2. VUE 使用axios请求第三方接口数据跨域问题解决

    VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可. 我这里要调用的第三方接口地址为 http://v.juhe.cn/toutiao/index?type=top&key=1 ...

  3. 小程序请求豆瓣API报403解决方法

    微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种 ...

  4. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  5. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  6. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

  7. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

  8. vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...

  9. vue本地设置请求接口及数据

    1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...

随机推荐

  1. Extjs MVC模式开发,循序渐进(一)

    本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...

  2. java基础篇---HTTP协议

    java基础篇---HTTP协议   HTTP协议一直是自己的薄弱点,也没抽太多时间去看这方面的内容,今天兴致来了就在网上搜了下关于http协议,发现有园友写了一篇非常好的博文,博文地址:(http: ...

  3. 《转》Java与Http协议

    引言 http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式.HTTP协议的主要特点是:     1.支持客户/服务器模式.     2.简单快速:客户向 ...

  4. 数据流分段下载(Http之 Range)

    public FileStreamResult StreamUploadedSongs(int id) { byte[] song = db.UploadedSongs.Where(x => x ...

  5. jqgrid 表格中筛选条件的多选下拉,树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

  6. ElasticSearch - query vs filter

    query vs filter 来自stackoverflow Stackoverflow - queries-vs-filters Question 题主希望知道Query和Filter的区别 An ...

  7. [ZJOI2012]旅游

    题目: 这题意...还以为他说的线段是路径 写了好久的dp..写不出来 看了网上的题解..才知道就是两点连线 然后就是一般的平面图转对偶图的思想 然后算一下边数发现是颗树,求一下直径就好了 代码: # ...

  8. poj 1160 Post Office 【区间dp】

    <题目链接> 转载于:>>> 题目大意: 一条高速公路,有N个村庄,每个村庄均有一个唯一的坐标,选择P个村庄建邮局,问怎么选择,才能使每个村庄到其最近邮局的距离和最小?最 ...

  9. web漏洞扫描工具AWVS使用

    AWVS AWVS简介:Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,如交叉站点脚 ...

  10. CTFlearn Inj3ction Time --sql注入python多线程脚本练习

    0x00前言: 本题是国外的一个CTF平台的题目,题目不难,但学习了波多线程payload写法 先看题目描述,提示"union是个有用的命令",估计是用联合查询就能出答案的(因为前 ...