vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑

vue之猫眼json数据的获取直接用于自己的vue项目中

遇到问题总结:

1. 加载不出猫眼数据,无法调用,数据被限制
2. 猫眼电影图片的拼接及删除问题
3. swiper的迷幻坑**

首先来说一下第一问题 加载不出猫眼数据,无法调用,数据被限制:
这个是应用要设置代理,因为是跨域请求

	module.exports = {
  devServer: {
    proxy: {							//代理
      '/ajax': {						//请求方式
        target: 'https://m.maoyan.com',//网络地址
        // ws:true,
        changeOrigin: true
      }
      // '/foo': {
      //     target: '<other_url>'
      // }
    }
  }
}

首先创建一个vue的config.js代理文件然后把代码填入,

第二个问题猫眼图片的拼接问题:
猫眼电影图片json数据与它网页用的图片不一致需要去去掉/w.h,添加@123w__233h的一个图像大小的设置( 这个思路是遍历数组然后删除图片链接的多余的字符串,会出现一个数组里俩个字符串,然后在[0]和[1]的拼接然后在送回给原来的数组 上代码)

mounted () {
    axios.get('/ajax/movieOnInfoList').then(res => {
      this.datalist = res.data.movieList
      for (let index1 = 0; index1 < this.datalist.length; index1++) {
        const element1 = this.datalist[index1]
        var image = element1.img.split('w.h/')
        var zer = image[0] + image[1] + '@160w_220h_1e_1c'
        element1.img = zer
        // console.log(element1, '44444')
        // this.datalist.push(element1)
        console.log(zer, '22222')
      }
      console.log(this.datalist, 6777)
    })
  },

这第三个坑属实是让我非常难受swiper的图片轮播，我看视频是在数据的class标签里另起了一个属性我就用了这个属性创建了 还有就是版本的问题你是把swiper的css和js导入了但是就是没有分页器原因竟然是没导入

import Swiper, { Pagination, Navigation } from 'swiper'
import 'swiper/swiper-bundle.min.css'
Swiper.use([Pagination, Navigation])//这是就是分页器没显示的原因

还有就是class名字属性一定要一样

<div class='swiper-container'>//要用swiper-container
new Swiper('.swiper-container', //组件名字也要用这个俩个一定要一样

猫眼热门电影的json数据数api(慢些造作小心ip被封)

https://m.maoyan.com/ajax/movieOnInfoList