VUE獲取別的網(wǎng)站數(shù)據(jù)，觸發(fā)滾動(dòng)事件后導(dǎo)航欄固定，截取字符串并加省略號(hào)【詩書畫唱】
目錄：
例子1：把網(wǎng)站的數(shù)據(jù)，暫時(shí)自己用于自己的項(xiàng)目。本例子的話，要求獲取到賣座網(wǎng)的正在熱映的電影的數(shù)據(jù)，要用上反向代理實(shí)現(xiàn)跨域訪問，同時(shí)用上axios來獲取到數(shù)據(jù)
查看一個(gè)網(wǎng)站的頁面的數(shù)據(jù)，可以先到那個(gè)界面，然后，F(xiàn)12，然后按CTRL+R，如果想獲取數(shù)據(jù)，查看Headers中的內(nèi)容很重要，因?yàn)檫@個(gè)里面有你獲取數(shù)據(jù)時(shí)必備的密碼。
其實(shí)獲取別的網(wǎng)站的數(shù)據(jù)的話，很容易，就是以下我個(gè)人總結(jié)的步驟
例子2：實(shí)現(xiàn)滾動(dòng)時(shí)，導(dǎo)航欄變成固定定位
例子3：綜合實(shí)現(xiàn)例子1和例子2
部分代碼在之前的專欄中有
config目錄下的index.js
views目錄下的Film目錄下的Comingsoon.vue
views目錄下的Film目錄下的FilmHeader.vue
views目錄下的Film目錄下的Nowplaying.vue
? //截取字符串并加省略號(hào)?START
??width:?233px;
??white-space:?nowrap;
??word-break:?keep-all;
??overflow:?hidden;
??text-overflow:?ellipsis;
??//截取字符串并加省略號(hào)?END
src目錄下的Film.vue
第一階段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被設(shè)置為true,那么在編譯時(shí)會(huì)報(bào)eslint錯(cuò)誤
修改package.json文件中的""lint""為 ""eslint --fix --ext .js,.vue src"",
運(yùn)行npm run lint，會(huì)自動(dòng)修復(fù)所有的eslint錯(cuò)誤
那么再執(zhí)行npm run dev時(shí)就不會(huì)報(bào)錯(cuò)了"
"2、npm run build打包命令：
會(huì)自動(dòng)生成dist文件，將dist文件夾中的內(nèi)容部署到后臺(tái)程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable屬性
pathRewrite的作用"
4、創(chuàng)建導(dǎo)航欄
5、配置歡迎頁面
6、高亮顯示
7、二級(jí)路由配置
8、路由傳參和name屬性傳參
9、去掉路徑的#
10、路由守衛(wèi):全局路由守衛(wèi)和局部路由守衛(wèi)
第二階段
"1、添加sass支持：--verbose顯示安裝的詳細(xì)信息
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
在build文件夾下的webpack.base.conf.js的rules里面添加配置：
{
? ? ? ? test: /\.scss$/,
? ? ? ? loaders: ['style', 'css', 'sass']
? ? ? }"
"2、選項(xiàng)卡沉底：App.vue中添加全局樣式，Tabbar.vue中添加局部樣式，
iconfont方式添加圖片：
將所有圖片文件放在assets/iconfont文件夾下
在main.js文件中導(dǎo)入圖片文件
import './assets/iconfont/iconfont.css'
"
"3、搭建圖片服務(wù)器（后臺(tái)代碼部分，將圖片放在后臺(tái)代碼的public文件夾下）
圖片路徑：
https://static.maizuo.com/v5/upload/683067671e17cce7b5647693d5733ea3.jpg
配置反向代理解決跨域問題"
"4、輪播效果：
不要下載最新版本的swiper，否則分頁欄和自動(dòng)播放無效
npm install swiper@5.4.5 --save"
"注意：如果反向代理不可用了，可嘗試清除一下瀏覽器的緩存歷史記錄
插槽slot用法：1、匿名插槽2具名插槽
異步加載數(shù)據(jù)后，放置輪播器中的圖片無法拖動(dòng)：
添加observer:true配置"
5、電影頁面導(dǎo)航欄（正在熱映和即將上映）
6、顯示正在熱映請(qǐng)求數(shù)據(jù)（特殊處理設(shè)置請(qǐng)求頭獲取數(shù)據(jù)和反向代理）
7、過濾處理數(shù)據(jù)Vue.filter
8、電影頁面導(dǎo)航欄固定定位效果
9、電影詳情頁面
10、影院頁面數(shù)據(jù)加載
例子1：把網(wǎng)站的數(shù)據(jù)，暫時(shí)自己用于自己的項(xiàng)目。本例子的話，要求獲取到賣座網(wǎng)的正在熱映的電影的數(shù)據(jù)，要用上反向代理實(shí)現(xiàn)跨域訪問，同時(shí)用上axios來獲取到數(shù)據(jù)
查看一個(gè)網(wǎng)站的頁面的數(shù)據(jù)，可以先到那個(gè)界面，然后，F(xiàn)12，然后按CTRL+R，如果想獲取數(shù)據(jù)，查看Headers中的內(nèi)容很重要，因?yàn)檫@個(gè)里面有你獲取數(shù)據(jù)時(shí)必備的密碼。
在Network中的Response中的內(nèi)容就是我們要獲取的別的網(wǎng)站的數(shù)據(jù)。
其實(shí)獲取別的網(wǎng)站的數(shù)據(jù)的話，很容易，就是以下我個(gè)人總結(jié)的步驟
先在config文件夾中的index.js文件中進(jìn)行反向代理的配置
'/mz':{
??target:?'https://m.maizuo.com',
??changeOrigin:?true,
??pathRewrite:?{
????'^/mz':?''
??}
}
先按F12，后面點(diǎn)Network，后面還要按CTRL+R鍵，之后還要繼續(xù)拖拉等等
先點(diǎn)一個(gè)Name，點(diǎn)其Response，查看是不是你要的數(shù)據(jù)。
之后，你可以點(diǎn)Headers，找到并且復(fù)制粘貼
X-Client-Info:{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}
X-Host:mall.film-ticket.film.list
到Vscode中你寫axios請(qǐng)求的部分，注意進(jìn)行改寫時(shí)，屬性和其內(nèi)容要用單引號(hào)或雙引號(hào)括起來，變成字符串。
?"X-Client-Info":
??????????'{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',
????????"X-Host":?"mall.film-ticket.film.list",
這些內(nèi)容要寫在自己寫的headers:?{}里面。
同時(shí)要注意的是，常常習(xí)慣上把a(bǔ)xios請(qǐng)求的代碼寫在mounted()?{}這個(gè)鉤子函數(shù)（生命周期函數(shù)）里面
一開始獲取數(shù)據(jù)時(shí)，打印出res，查看其結(jié)構(gòu)，后面就知道res后面要“.”出哪些內(nèi)容了
用this.dataList?=?res.data.data.films;聲明后，在寫HTML代碼的<template></template>標(biāo)簽的
<li></li>之類的標(biāo)簽里面要用上
?v-for="data?in?dataList"
??????:key="data.filmId"之類的來遍歷his.dataList這個(gè)我們獲取的數(shù)據(jù)，
這個(gè)data就是遍歷dataList后的內(nèi)容，可以通過后面加"."，加要調(diào)用的屬性的內(nèi)容的方式來調(diào)用。比如<img?:src="data.poster"?/>。
:src是v-bind:src的簡寫，是進(jìn)行了綁定，這里必須用綁定。如果
src="data.poster"這樣寫，那么data.poster就是一個(gè)字符串。
如果:src="data.poster"這樣寫，那么data.poster就是一個(gè)動(dòng)態(tài)的變量。
在使用v-for遍歷的同時(shí)，v-for的標(biāo)簽里面的標(biāo)簽可以用上v-if和v-else等等進(jìn)行判斷
例子2：實(shí)現(xiàn)滾動(dòng)時(shí)，導(dǎo)航欄變成固定定位
??//和導(dǎo)航欄滾動(dòng)后會(huì)變成固定定位等等有關(guān)的內(nèi)容?START
??
??.fixed?{
????position:?fixed;
????left:?0;
????top:?0;
????width:?100%;
????height:?40px;
????background-color:?gainsboro;
??}
???//和導(dǎo)航欄滾動(dòng)后會(huì)變成固定定位等等有關(guān)的內(nèi)容?END
例子3：綜合實(shí)現(xiàn)例子1和例子2
部分代碼在之前的專欄中有
config目錄下的index.js
?proxyTable:?{
??????//自己加的關(guān)于反向代理的部分?START
??????//獲取輪播圖的圖片的部分：
??????/*其實(shí)/axs等價(jià)于http://127.0.0.1:9001，這里
??????給http://127.0.0.1:9001進(jìn)行了重命名，重命名為更短的
??????名字/axs，后面在axios獲取這個(gè)網(wǎng)頁的數(shù)據(jù)的時(shí)候，就是要在url中
??????用上/axs?*/
??????'/axs':?{
????????target:?'http://127.0.0.1:9001',
????????changeOrigin:?true,
????????pathRewrite:?{//請(qǐng)求路徑中的/axs僅用來匹配代理的target是哪個(gè)
??????????'^/axs':?''
????????}
??????},
??????//獲取賣座網(wǎng)的正在熱映電影等界面數(shù)據(jù)的部分：
??????'/mz':?{
????????target:?'https://m.maizuo.com',
????????changeOrigin:?true,
????????pathRewrite:?{
??????????'^/mz':?''
????????}
??????}
??????//自己加的關(guān)于反向代理的部分?END
????},
views目錄下的Film目錄下的Comingsoon.vue
<template>
??<div>
????<ul>
??????<li
????????v-for="data?in?dataList"
????????:key="data.filmId"
????????@click="viewDetail(data.filmId)"
??????>
????????<img?:src="data.poster"?/>
????????<span??class="title">{{?data.name?}}</span>
?????
????????<b?class="filmType">{{?data.filmType.name?}}</b
????????><br?/>
????????<p?v-if="data.grade">
??????????觀眾評(píng)分?<b?class="score">{{?data.grade?}}?</b>
????????</p>
????????<p?v-else>暫無評(píng)分</p>
????????<p?v-if="data.actors">
??????????主演:
??????????{{?data.actors?|?actorsfilter?}}
????????</p>
????????<p?v-else>暫無主演</p>
????????<p>{{?data.nation?}}?|?{{?data.runtime?}}分鐘</p>
??????</li>
????</ul>
??</div>
</template>
<script>
import?axios?from?"axios";
import?Vue?from?"vue";
//?定義一個(gè)處理data.actors數(shù)組的過濾函數(shù)actorsfilter
Vue.filter("actorsfilter",?function?(data)?{
??//?let?str?=?''
??//?for(let?actor?of?data)?{
??//???str?+=?actor.name
??//???str?+=?'?'
??//?}
??//?return?str
??return?data.map((actor)?=>?actor.name).join("?");
});
export?default?{
??data()?{
????return?{
??????dataList:?[],
????};
??},
??mounted()?{
????axios({
????
??????//訪問即將上映電影的數(shù)據(jù)的地址1：
???????url:?'/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',
??????//獲取網(wǎng)頁數(shù)據(jù)的關(guān)鍵?headers（請(qǐng)求頭）部分?START
??????headers:?{
??????/*下面我弄的2個(gè)不同請(qǐng)求頭都是可以的（自己復(fù)制當(dāng)前自己看到的請(qǐng)求頭的內(nèi)容就可以）?*/
????????//復(fù)制的請(qǐng)求頭1：
????????//?'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????//?'X-Host':?'mall.film-ticket.film.list'
????????//復(fù)制的請(qǐng)求頭2：
????????"X-Client-Info":
??????????'{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',
????????"X-Host":?"mall.film-ticket.film.list",
??????},
??????//獲取網(wǎng)頁數(shù)據(jù)的關(guān)鍵?headers（請(qǐng)求頭）部分?START
????}).then((res)?=>?{
????//?console.log(JSON.stringify(res.data.data.films))
??????this.dataList?=?res.data.data.films;
????});
??},
??methods:?{
????viewDetail(name)?{
??????//?console.log('顯示'?+?name?+?'的詳情')
??????//?配置路由動(dòng)態(tài)綁定
??????//?this.$router.push(`/detail/${name}`)
??????//?路由配置的name屬性傳參
??????this.$router.push({
????????name:?"dl",
????????params:?{
??????????n:?name,
????????},
??????});
????},
??},
};
</script>
<style?lang="scss"?scoped>
ul?{
??li?{
????padding:?10px;
????overflow:?hidden;
????img?{
??????float:?left;
??????width:?100px;
????}
??}
}
p?{
??color:?gray;
??font-size:?12px;
??float:?left;
??padding-left:?10px;
??//截取字符串并加省略號(hào)?START
??width:?233px;
??white-space:?nowrap;
??word-break:?keep-all;
??overflow:?hidden;
??text-overflow:?ellipsis;
??//截取字符串并加省略號(hào)?END
}
.title?{
??float:?left;
??padding-left:?10px;
??
}
.score?{
??color:?#ffb232;
}
.filmType?{
??//F12后鼠標(biāo)右鍵，檢查后復(fù)制的樣式?START
??font-size:?9px;
??color:?#fff;
??background-color:?#d2d6dc;
??height:?14px;
??line-height:?14px;
??padding:?0?2px;
??border-radius:?2px;
??//自己加的相對(duì)定位?START
//?position:?relative;
//?left:10px;
??//自己加的相對(duì)定位?END
????//F12后鼠標(biāo)右鍵，檢查后復(fù)制的樣式?END
}
</style>
views目錄下的Film目錄下的FilmHeader.vue
<template>
??<div>
??????<ul>
??????????<router-link?to="/film/nowplaying"?tag="li"?active-class="active">正在熱映</router-link>
??????????<router-link?to="/film/comingsoon"?tag="li"?active-class="active">即將上映</router-link>
??????</ul>
??</div>
</template>
<script>
export?default?{
}
</script>
<style?lang="scss"?scoped>
??ul?{
??????display:?flex;
??????li?{
??????????flex:?1;
??????????height:?40px;
??????????line-height:?40px;
???????text-align:?center;
??????????background-color:?white;
??????????font-weight:?800;
??????}
??}
??.active?{
??????color:?red;
??????border-bottom:?2px?solid?red;
??}
??//和導(dǎo)航欄滾動(dòng)后會(huì)變成固定定位等等有關(guān)的內(nèi)容?START
??
??.fixed?{
????position:?fixed;
????left:?0;
????top:?0;
????width:?100%;
????height:?40px;
????background-color:?gainsboro;
??}
???//和導(dǎo)航欄滾動(dòng)后會(huì)變成固定定位等等有關(guān)的內(nèi)容?END
</style>
views目錄下的Film目錄下的Nowplaying.vue
<template>
??<div>
????<ul>
??????<li
????????v-for="data?in?dataList"
????????:key="data.filmId"
????????@click="viewDetail(data.filmId)"
??????>
????????<img?:src="data.poster"?/>
????????<span??class="title">{{?data.name?}}</span>
??????????
????????<b?class="filmType">{{?data.filmType.name?}}</b
????????><br?/>
????????<p?v-if="data.grade">
??????????觀眾評(píng)分?<b?class="score">{{?data.grade?}}?</b>
????????</p>
????????<p?v-else>暫無評(píng)分</p>
????????<p?v-if="data.actors">
??????????主演:
??????????{{?data.actors?|?actorsfilter?}}
????????</p>
????????<p?v-else>暫無主演</p>
????????<p>{{?data.nation?}}?|?{{?data.runtime?}}分鐘</p>
??????</li>
????</ul>
??</div>
</template>
<script>
import?axios?from?"axios";
import?Vue?from?"vue";
//?定義一個(gè)處理data.actors數(shù)組的過濾函數(shù)actorsfilter
Vue.filter("actorsfilter",?function?(data)?{
??//?let?str?=?''
??//?for(let?actor?of?data)?{
??//???str?+=?actor.name
??//???str?+=?'?'
??//?}
??//?return?str
??return?data.map((actor)?=>?actor.name).join("?");
});
export?default?{
??data()?{
????return?{
??????dataList:?[],
????};
??},
??mounted()?{
????axios({
??????//訪問正在熱映電影的數(shù)據(jù)的地址1：
??????url:?"/mz/gateway?cityId=430100&pageNum=1&pageSize=10&type=1&k=4271989",
??????//訪問正熱映電影的數(shù)據(jù)的地址2：
??????//??url:?'/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=1&k=5670206',
??????//訪問即將上映電影的數(shù)據(jù)的地址1：
??????//??url:?'/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',
??????//獲取網(wǎng)頁數(shù)據(jù)的關(guān)鍵?headers（請(qǐng)求頭）部分?START
??????headers:?{
????????/*下面我弄的2個(gè)不同請(qǐng)求頭都是可以的（自己復(fù)制當(dāng)前自己看到的請(qǐng)求頭的內(nèi)容就可以）?*/
????????//復(fù)制的請(qǐng)求頭1：
????????//?'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????//?'X-Host':?'mall.film-ticket.film.list'
????????//復(fù)制的請(qǐng)求頭2：
????????"X-Client-Info":
??????????'{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',
????????"X-Host":?"mall.film-ticket.film.list",
??????},
??????//獲取網(wǎng)頁數(shù)據(jù)的關(guān)鍵?headers（請(qǐng)求頭）部分?START
????}).then((res)?=>?{
??????//??console.log(JSON.stringify(res.data.data.films))
??????this.dataList?=?res.data.data.films;
????});
??},
??methods:?{
????viewDetail(name)?{
??????//?console.log('顯示'?+?name?+?'的詳情')
??????//?配置路由動(dòng)態(tài)綁定
??????//?this.$router.push(`/detail/${name}`)
??????//?路由配置的name屬性傳參
??????this.$router.push({
????????name:?"dl",
????????params:?{
??????????n:?name,
????????},
??????});
????},
??},
};
</script>
<style?lang="scss"?scoped>
ul?{
??li?{
????padding:?10px;
????overflow:?hidden;
????img?{
??????float:?left;
??????width:?100px;
????}
??}
}
p?{
??color:?gray;
??font-size:?12px;
??float:?left;
??padding-left:?10px;
??//截取字符串并加省略號(hào)?START
??width:?233px;
??white-space:?nowrap;
??word-break:?keep-all;
??overflow:?hidden;
??text-overflow:?ellipsis;
??//截取字符串并加省略號(hào)?END
}
.title?{
??float:?left;
??padding-left:?10px;
??
}
.score?{
??color:?#ffb232;
}
.filmType?{
??//F12后鼠標(biāo)右鍵，檢查后復(fù)制的樣式?START
??font-size:?9px;
??color:?#fff;
??background-color:?#d2d6dc;
??height:?14px;
??line-height:?14px;
??padding:?0?2px;
??border-radius:?2px;
??//自己加的相對(duì)定位?START
//?position:?relative;
//?left:10px;
??//自己加的相對(duì)定位?END
????//F12后鼠標(biāo)右鍵，檢查后復(fù)制的樣式?END
}
</style>
src目錄下的Film.vue
<template>
??<div>
????<film-swiper?:key="loopList.length"?ref="myswiper">
??????<div?class="swiper-slide"?v-for="data?in?loopList"
??????????:key="data">
????????<img?:src="data"/>
??????</div>
????</film-swiper>
????<film-header?:class="isFixed???'fixed'?:?''"?></film-header>
????<router-view?/>
??</div>
</template>
<script>
import?filmSwiper?from?'@/views/Film/FilmSwiper'
import?filmHeader?from?'@/views/Film/FilmHeader'
import?axios?from?'axios'
export?default?{
??data?()?{
????return?{
??????loopList:?[],
??????isFixed:?false
????}
??},
??components:?{
????filmSwiper,
????filmHeader
??},
??mounted?()?{
????axios.get('/axs/logos')
??????.then(res?=>?{
????????this.loopList?=?res.data
??????})
????//?給window綁定滾動(dòng)事件
????window.onscroll?=?this.hanleScroll
??},
??methods:?{
????hanleScroll?()?{
??????//?獲取鼠標(biāo)滾動(dòng)的距離
??????let?st?=?document.documentElement.scrollTop
??//??console.log('滾動(dòng)的距離是：'?+?st)
??????//?獲取輪播組件的高度
??????let?oh?=?this.$refs.myswiper.$el.offsetHeight
??????//?console.log('輪播組件的高度是：'?+?oh)
??????if?(st?>=?oh)?{
????????this.isFixed?=?true
??????}?else?{
????????this.isFixed?=?false
??????}
????}
??}
}
</script>
<style>
</style>
運(yùn)行前臺(tái)服務(wù)器和后臺(tái)服務(wù)器后：
http://localhost:8080/#/film/nowplaying
