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轮播插件的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。