Sansx's Studio.

Vue制作豆瓣电影（调用api测试）

vue api
字数统计: 255阅读时长: 1 min
2018/06/02 Share

预先配置

由于豆瓣api跨域问题，因此不能直接通过ajax请求访问，我们通过vue-cli提供给我们的代理（proxy）进行配置即可，打开config/index.js，配置代理proxyTable属性如下：

1
2
3
4
5
6
7
8
9
10
//在proxyTable这个属性中，配置target属性为我们要代理的目标地址。
proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }

“豆瓣API是有请求次数限制的”，这会引发图片在加载的时候出现403问题，视图表现为“图片加载不出来”，控制台表现为报错403。

其实是豆瓣限制了图片的加载，我自己用了一个办法把图片缓存下来：
只要在请求到的图片链接前面加上https://images.weserv.nl/?url=即可（注：这是一个专门缓存图片的网址），可能会有点慢。

1
2
3
4
5
6
getImages( _url ){
      if( _url !== undefined ){
        let _u = _url.substring( 7 );
        return 'https://images.weserv.nl/?url=' + _u;
      }
    }

原文作者：Sansx

原文链接：https://github.com/sansx/2018/06/02/vue1/

发表日期：June 2nd 2018, 12:00:00 am

更新日期：June 21st 2019, 9:52:52 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 预先配置
Total : 19
2019
2018
翻译 databases docker linux centos7 Docker nginx Node.js npm pm2 CoffeeScript JavaScript 算法 数据 数组 css stackoverflow node 爬虫 mysql vue api h5 webpack windows