vue之貓眼json數(shù)據(jù)的獲取直接用于自己的vue項(xiàng)目中

遇到問題總結(jié):

加載不出貓眼數(shù)據(jù),無法調(diào)用,數(shù)據(jù)被限制

貓眼電影圖片的拼接及刪除問題

swiper的迷幻坑**

首先來說一下第一問題 加載不出貓眼數(shù)據(jù),無法調(diào)用,數(shù)據(jù)被限制:
這個是應(yīng)用要設(shè)置代理,因?yàn)槭强缬蛘埱?/p> module.exports = {devServer: {proxy: { //代理'/ajax': { //請求方式target: 'https://m.maoyan.com',//網(wǎng)絡(luò)地址// ws:true,changeOrigin: true}// '/foo': {// target: '<other_url>'// }}} } 首先創(chuàng)建一個vue的config.js代理文件然后把代碼填入,

第二個問題貓眼圖片的拼接問題:
貓眼電影圖片json數(shù)據(jù)與它網(wǎng)頁用的圖片不一致需要去去掉/w.h,添加@123w__233h的一個圖像大小的設(shè)置( 這個思路是遍歷數(shù)組然后刪除圖片鏈接的多余的字符串,會出現(xiàn)一個數(shù)組里倆個字符串,然后在[0]和[1]的拼接然后在送回給原來的數(shù)組 上代碼)

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)})},

這第三個坑屬實(shí)是讓我非常難受swiper的圖片輪播，我看視頻是在數(shù)據(jù)的class標(biāo)簽里另起了一個屬性我就用了這個屬性創(chuàng)建了 還有就是版本的問題你是把swiper的css和js導(dǎo)入了但是就是沒有分頁器原因竟然是沒導(dǎo)入

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數(shù)據(jù)數(shù)api(慢些造作小心ip被封)

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

總結(jié)

以上是生活随笔為你收集整理的vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。