遇到问题总结:
加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题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的组件万万没想到就是这个名字让我想了俩小时(中间插了一把王者)还有就是版本的问题你是把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