VUE获取别的网站数据，触发滚动事件后导航栏固定，截取字符串并加省略号【诗书画唱】

目录：

例子1：把网站的数据，暂时自己用于自己的项目。本例子的话，要求获取到卖座网的正在热映的电影的数据，要用上反向代理实现跨域访问，同时用上axios来获取到数据

查看一个网站的页面的数据，可以先到那个界面，然后，F12，然后按CTRL+R，如果想获取数据，查看Headers中的内容很重要，因为这个里面有你获取数据时必备的密码。

其实获取别的网站的数据的话，很容易，就是以下我个人总结的步骤

例子2：实现滚动时，导航栏变成固定定位

例子3：综合实现例子1和例子2

部分代码在之前的专栏中有

config目录下的index.js

views目录下的Film目录下的Comingsoon.vue

views目录下的Film目录下的FilmHeader.vue

views目录下的Film目录下的Nowplaying.vue

  //截取字符串并加省略号 START

  width: 233px;

  white-space: nowrap;

  word-break: keep-all;

  overflow: hidden;

  text-overflow: ellipsis;

  //截取字符串并加省略号 END

src目录下的Film.vue

第一阶段

"1、npm run lint命令:

如果config/index.js文件中的useEslint被设置为true,那么在编译时会报eslint错误

修改package.json文件中的""lint""为 ""eslint --fix --ext .js,.vue src"",

运行npm run lint，会自动修复所有的eslint错误

那么再执行npm run dev时就不会报错了"

"2、npm run build打包命令：

会自动生成dist文件，将dist文件夹中的内容部署到后台程序中"

"3、配置反向代理

修改config/index.js文件中的proxyTable属性

pathRewrite的作用"

4、创建导航栏

5、配置欢迎页面

6、高亮显示

7、二级路由配置

8、路由传参和name属性传参

9、去掉路径的#

10、路由守卫:全局路由守卫和局部路由守卫

第二阶段

"1、添加sass支持：--verbose显示安装的详细信息

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、选项卡沉底：App.vue中添加全局样式，Tabbar.vue中添加局部样式，

iconfont方式添加图片：

将所有图片文件放在assets/iconfont文件夹下

在main.js文件中导入图片文件

import './assets/iconfont/iconfont.css'

"

"3、搭建图片服务器（后台代码部分，将图片放在后台代码的public文件夹下）

图片路径：

https://static.maizuo.com/v5/upload/683067671e17cce7b5647693d5733ea3.jpg

配置反向代理解决跨域问题"

"4、轮播效果：

不要下载最新版本的swiper，否则分页栏和自动播放无效

npm install swiper@5.4.5 --save"

"注意：如果反向代理不可用了，可尝试清除一下浏览器的缓存历史记录

插槽slot用法：1、匿名插槽2具名插槽

异步加载数据后，放置轮播器中的图片无法拖动：

添加observer:true配置"

5、电影页面导航栏（正在热映和即将上映）

6、显示正在热映请求数据（特殊处理设置请求头获取数据和反向代理）

7、过滤处理数据Vue.filter

8、电影页面导航栏固定定位效果

9、电影详情页面

10、影院页面数据加载

例子1：把网站的数据，暂时自己用于自己的项目。本例子的话，要求获取到卖座网的正在热映的电影的数据，要用上反向代理实现跨域访问，同时用上axios来获取到数据

查看一个网站的页面的数据，可以先到那个界面，然后，F12，然后按CTRL+R，如果想获取数据，查看Headers中的内容很重要，因为这个里面有你获取数据时必备的密码。

在Network中的Response中的内容就是我们要获取的别的网站的数据。

其实获取别的网站的数据的话，很容易，就是以下我个人总结的步骤

先在config文件夹中的index.js文件中进行反向代理的配置

'/mz':{

  target: 'https://m.maizuo.com',

  changeOrigin: true,

  pathRewrite: {

    '^/mz': ''

  }

}

先按F12，后面点Network，后面还要按CTRL+R键，之后还要继续拖拉等等

先点一个Name，点其Response，查看是不是你要的数据。

之后，你可以点Headers，找到并且复制粘贴

X-Client-Info:{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}

X-Host:mall.film-ticket.film.list

到Vscode中你写axios请求的部分，注意进行改写时，属性和其内容要用单引号或双引号括起来，变成字符串。

 "X-Client-Info":

          '{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',

        "X-Host": "mall.film-ticket.film.list",

这些内容要写在自己写的headers: {}里面。

同时要注意的是，常常习惯上把axios请求的代码写在mounted() {}这个钩子函数（生命周期函数）里面

一开始获取数据时，打印出res，查看其结构，后面就知道res后面要“.”出哪些内容了

用this.dataList = res.data.data.films;声明后，在写HTML代码的<template></template>标签的

<li></li>之类的标签里面要用上

 v-for="data in dataList"

      :key="data.filmId"之类的来遍历his.dataList这个我们获取的数据，

这个data就是遍历dataList后的内容，可以通过后面加"."，加要调用的属性的内容的方式来调用。比如<img :src="data.poster" />。

:src是v-bind:src的简写，是进行了绑定，这里必须用绑定。如果

src="data.poster"这样写，那么data.poster就是一个字符串。

如果:src="data.poster"这样写，那么data.poster就是一个动态的变量。

在使用v-for遍历的同时，v-for的标签里面的标签可以用上v-if和v-else等等进行判断

例子2：实现滚动时，导航栏变成固定定位

  //和导航栏滚动后会变成固定定位等等有关的内容 START

  

  .fixed {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 40px;

    background-color: gainsboro;

  }

   //和导航栏滚动后会变成固定定位等等有关的内容 END

例子3：综合实现例子1和例子2

部分代码在之前的专栏中有

config目录下的index.js

 proxyTable: {

      //自己加的关于反向代理的部分 START

      //获取轮播图的图片的部分：

      /*其实/axs等价于http://127.0.0.1:9001，这里

      给http://127.0.0.1:9001进行了重命名，重命名为更短的

      名字/axs，后面在axios获取这个网页的数据的时候，就是要在url中

      用上/axs */

      '/axs': {

        target: 'http://127.0.0.1:9001',

        changeOrigin: true,

        pathRewrite: {//请求路径中的/axs仅用来匹配代理的target是哪个

          '^/axs': ''

        }

      },

      //获取卖座网的正在热映电影等界面数据的部分：

      '/mz': {

        target: 'https://m.maizuo.com',

        changeOrigin: true,

        pathRewrite: {

          '^/mz': ''

        }

      }

      //自己加的关于反向代理的部分 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>

     &nbsp;

        <b class="filmType">{{ data.filmType.name }}</b

        ><br />

        <p v-if="data.grade">

          观众评分 <b class="score">{{ data.grade }} </b>

        </p>

        <p v-else>暂无评分</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";

// 定义一个处理data.actors数组的过滤函数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({

    

      //访问即将上映电影的数据的地址1：

       url: '/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',

      //获取网页数据的关键 headers（请求头）部分 START

      headers: {

      /*下面我弄的2个不同请求头都是可以的（自己复制当前自己看到的请求头的内容就可以） */

        //复制的请求头1：

        // 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',

        // 'X-Host': 'mall.film-ticket.film.list'

        //复制的请求头2：

        "X-Client-Info":

          '{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',

        "X-Host": "mall.film-ticket.film.list",

      },

      //获取网页数据的关键 headers（请求头）部分 START

    }).then((res) => {

    // console.log(JSON.stringify(res.data.data.films))

      this.dataList = res.data.data.films;

    });

  },

  methods: {

    viewDetail(name) {

      // console.log('显示' + name + '的详情')

      // 配置路由动态绑定

      // 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;

  //截取字符串并加省略号 START

  width: 233px;

  white-space: nowrap;

  word-break: keep-all;

  overflow: hidden;

  text-overflow: ellipsis;

  //截取字符串并加省略号 END

}

.title {

  float: left;

  padding-left: 10px;

  

}

.score {

  color: #ffb232;

}

.filmType {

  //F12后鼠标右键，检查后复制的样式 START

  font-size: 9px;

  color: #fff;

  background-color: #d2d6dc;

  height: 14px;

  line-height: 14px;

  padding: 0 2px;

  border-radius: 2px;

  //自己加的相对定位 START

// position: relative;

// left:10px;

  //自己加的相对定位 END

    //F12后鼠标右键，检查后复制的样式 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;

  }

  //和导航栏滚动后会变成固定定位等等有关的内容 START

  

  .fixed {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 40px;

    background-color: gainsboro;

  }

   //和导航栏滚动后会变成固定定位等等有关的内容 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>

          &nbsp;

        <b class="filmType">{{ data.filmType.name }}</b

        ><br />

        <p v-if="data.grade">

          观众评分 <b class="score">{{ data.grade }} </b>

        </p>

        <p v-else>暂无评分</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";

// 定义一个处理data.actors数组的过滤函数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({

      //访问正在热映电影的数据的地址1：

      url: "/mz/gateway?cityId=430100&pageNum=1&pageSize=10&type=1&k=4271989",

      //访问正热映电影的数据的地址2：

      //  url: '/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=1&k=5670206',

      //访问即将上映电影的数据的地址1：

      //  url: '/mz/gateway?cityId=130900&pageNum=1&pageSize=10&type=2&k=8700885',

      //获取网页数据的关键 headers（请求头）部分 START

      headers: {

        /*下面我弄的2个不同请求头都是可以的（自己复制当前自己看到的请求头的内容就可以） */

        //复制的请求头1：

        // 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',

        // 'X-Host': 'mall.film-ticket.film.list'

        //复制的请求头2：

        "X-Client-Info":

          '{"a":"3000","ch":"1002","v":"5.0.4","e":"16219260311313559912906753","bc":"130900"}',

        "X-Host": "mall.film-ticket.film.list",

      },

      //获取网页数据的关键 headers（请求头）部分 START

    }).then((res) => {

      //  console.log(JSON.stringify(res.data.data.films))

      this.dataList = res.data.data.films;

    });

  },

  methods: {

    viewDetail(name) {

      // console.log('显示' + name + '的详情')

      // 配置路由动态绑定

      // 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;

  //截取字符串并加省略号 START

  width: 233px;

  white-space: nowrap;

  word-break: keep-all;

  overflow: hidden;

  text-overflow: ellipsis;

  //截取字符串并加省略号 END

}

.title {

  float: left;

  padding-left: 10px;

  

}

.score {

  color: #ffb232;

}

.filmType {

  //F12后鼠标右键，检查后复制的样式 START

  font-size: 9px;

  color: #fff;

  background-color: #d2d6dc;

  height: 14px;

  line-height: 14px;

  padding: 0 2px;

  border-radius: 2px;

  //自己加的相对定位 START

// position: relative;

// left:10px;

  //自己加的相对定位 END

    //F12后鼠标右键，检查后复制的样式 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绑定滚动事件

    window.onscroll = this.hanleScroll

  },

  methods: {

    hanleScroll () {

      // 获取鼠标滚动的距离

      let st = document.documentElement.scrollTop

  //  console.log('滚动的距离是：' + st)

      // 获取轮播组件的高度

      let oh = this.$refs.myswiper.$el.offsetHeight

      // console.log('轮播组件的高度是：' + oh)

      if (st >= oh) {

        this.isFixed = true

      } else {

        this.isFixed = false

      }

    }

  }

}

</script>

<style>

</style>

运行前台服务器和后台服务器后：

http://localhost:8080/#/film/nowplaying