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

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

遇到问题总结:

加载不出猫眼数据,无法调用,数据被限制
猫眼电影图片的拼接及删除问题
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.movieListfor (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

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

Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
html移动轮播后盾网,后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件...
1.首先呢,咱们去gitHub上面找一个vue-awesome-swiper插件. 前端为了保证整个项目的稳定性,咱们安装2.6.7版本. vue npm install vue-awesome-s ...
vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
js判断json有没有某值_JS中判断JSON数据是否存在某字段的方法 JavaScript中判断json中是否有某个字段...
方式一 !("key" in obj) 方式二 obj.hasOwnProperty("key") //obj为json对象. 实例: var jsonwor ...
java 获取sqlsession_获取Java的MyBatis框架项目中的SqlSession的方法
从XML中构建SqlSessionFactory从XML文件中构建SqlSessionFactory的实例非常简单.这里建议你使用类路径下的资源文件来配置. String resource = &qu ...
【Vue轮播插件】常用的vue轮播插件整理
写在前面: 现成的轮播插件是很方便,如果只是对文本类的数据进行轮播就很容易满足需求.但是,实际开发中,表格中可能还嵌套了自己封装的组件,组件中又是通过echarts图表来实现的.这个时候,这些vue插 ...
在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...

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

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

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

最新文章

热门文章