猫眼电影新版

作者: wqjcarnation | 来源:发表于2022-05-23 15:23 被阅读0次

猫眼电影新版
Python爬虫
反爬虫解析-字体替换--天眼查/猫眼电影
Requests+正则表达式爬取猫眼电影
APP产品体验：猫眼电影
爬虫学习(一)：利用requests爬取猫眼电影top100
python爬虫day-14（抓取猫眼电影排行）
恶意恶评与善意好评一样充满罪恶
猫眼电影-产品体验
爬取猫眼电影存入csv

image.png

解决方案：package.json
sass-loader版本改为

"sass-loader": "^7.3.1",

之后再运行(为了删除彻底，可以把node-modules下原版本的包手动删除)

    cnpm install

跨域设置

config/index.js的proxyTable节点下新增：

  //跨域配置
  "/api":{
              target:'https://m.maoyan.com',
              changeOrigin: true,//是否跨域
              pathRewrite:{
              '^/api':''//重写接口
              }
          }

测试

<template>
  <div>
    <h1>axios测试</h1>
     <button @click="test01">发一个get请求</button>

  </div>
</template>

<script>
  export default{
    data(){
      return {}
    },
    methods:{
      test01:function(){
        alert("test");
//https://api.coindesk.com/v1/bpi/currentprice.json
//https://m.maoyan.com/ajax/movieOnInfoList
        this.$axios.get("/api/ajax/movieOnInfoList")
        .then(response=>{
          console.log(response.data);
        })
        .catch(error=>{
          console.log(error);
        })


      }
    }
  }
</script>

<style>
</style>

数据解析

"movieList": [{
"id": 346210,
"haspromotionTag": false,
"img": "http://p1.meituan.net/w.h/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg", //w.h改为实际想要的图片宽高 128.180
"version": "v2d imax",
"nm": "八佰", //片名
"preShow": false,
"sc": 9.2, //观众评分
"globalReleased": true, //是否有观众评分
"wish": 518898, //想看
"star": "王千源,张译,姜武", //主演
"rt": "2020-08-21",
"showInfo": "今天79家影院放映665场", //放映情况
"showst": 3,
"wishst": 0
}

图标引用

cnpm install font-awesome
在main.js里面添加import 'font-awesome/css/font-awesome.css'

首页

<template>
  <div class="container">
     <!--head -->
     <div class="header">
       <div class="item01">
             猫眼电影
       </div>
       <div class="item02">
            <div class="left"><i class="fa fa-address-card"></i>猫眼</div>
            <div class="right">
              <span class="txt1">发现最新最热电影</span>
              <span class="txt2">打开APP<i class="fa  fa-angle-right"></i></span>
              </div>
       </div>
       <div class="item03">
          <div class="location">
            <span>沈阳</span><i class="fa  fa-caret-down"></i>
          </div>
          <div class="nav">
            <div @click="activeNum=1">热映</div>
            <div @click="activeNum=2">影院</div>
            <div @click="activeNum=3">待映</div>
            <div @click="activeNum=4">经典电影</div>
          </div>
          <div class="search">
            <i class="fa fa-search"></i>
          </div>
       </div>

     </div>
      <!--content begin-->
      <div class="content">
        <!-- 第三步-->
        <!-- 根据activeNum的值切换组件-->
         <hot v-show="activeNum==1"></hot>
         <coming v-show="activeNum==3"></coming>
        <moreclassic v-show="activeNum==4"></moreclassic>

      </div>
      <!-- content end-->


      <!--foot -->
     <div class="footer">
       <div class="item">
         <i class="fa fa-address-card"></i>
         <span>电影/影院</span>
       </div>
      <div class="item">
        <i class="fa fa-crosshairs"></i>
        <span>视频</span>
      </div>
      <div class="item">
        <i class="fa fa-codepen"></i>
        <span>小视频</span>
      </div>
      <div class="item">
        <i class="fa fa-object-group"></i>
        <span>演出</span>
      </div>
      <div class="item">
        <i class="fa fa-paw"></i>
        <span>我的</span>
      </div>
     </div>
  </div>
</template>

<script>
  //1\引入
  import hot from '@/components/movie/hot'
  import coming from '@/components/movie/coming'
  import moreclassic from '@/components/movie/moreclassic'

  export default{
    data(){
         return{
           //1、在这里定义一下变量，用来切换组件  1-4  1-hot 2...
           //2、点击导航按钮时，更换变量的值，1-4
           //3、根据变量的值，决定加载哪个组件
           activeNum:'3'//设置页面刚进入时加载哪个组件
         }
    },
      //第二步
    components:{hot,coming,moreclassic}
  }
</script>

<style>
  .nav .item{
    height:25vw;
    display:flex;
  }

.header .item01{
  width:100vw;
  height:13.5vw;
  background-color: #E54847;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  font-size: 5vw;
}
.header .item02{
  width:100vw;
  height:16vw;
  border:1px solid #E8E8E8;
  background-color: #fff;
  color:black;
  display: flex;

}
.header .item02 .left{
  flex:1;
  color:#E54847;
  height:16vw;
  font-size:5.6vw ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .item02 .right{
  height:16vw;
  flex:2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right:5vw;
}

.header .item02 .right .txt1{
  color:black;
  font-size: 3.5vw;
  margin:3vw;
  color:#666;
  font-weight: 600;
}
.header .item02 .right .txt2{
  color:#C47E7E;
  font-size: 4.5vw;
  font-weight: 600;
}
  .container{
    box-sizing: border-box;
    width: 100vw;
    /* border:1px solid red; */
  }
  .header{
    width:100vw;
    height: 41.8vw;
    background-color: gray;
    position: fixed;
    left:0;
    top:0;
    z-index:5;
  }




.header .item03{
  /* 采用flex布局后,DIV就不再是块级的标签 */
  box-sizing: border-box;
  width:100vw;
  height:12.3vw;
  background-color: #fff;
  display: flex;
  flex-direction:row ;
  border-bottom: 1px solid #A9A9A9;
}
.header .item03 .location{
  color:#666;
  font-size:4vw;
  width:20vw;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.header .item03 .nav{
  width:68vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color:#666;
  font-weight: 600;
  font-size: 4vw;

}

.header .item03 .nav div:hover{
  font-size: 5vw;
  color:#333;
}

.header .item03 .search{
  width:12vw;
  color:#EF4238;
  font-size:5.5vw;
  display:flex;
  align-items: center;
  justify-content: center;
}
.footer{
  width:100vw;
  height: 13.6vw;
  position: fixed;
  right: 0;
  bottom:0;
  z-index:5;
  background-color: #EEEEEE;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

.footer .item{
  height: 13.6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:#868686;
  font-size: 3.8vw;
}
.footer .item:hover{
  color:#F14B46;
}
/* 44.6
3 1.6
*/
.container{
  background-color: #F5F5F5;
}
.content{
  margin-bottom:1.6vw ;
  box-sizing: border-box;
  width:100vw;
  height: 116vw;
  background-color: #fff;
  margin-top:44.8vw;
  z-index:1;
}
.content .item{
  box-sizing: border-box;
  width:100vw;
  height:29vw;
 /* border:1px solid blue; */
  display: flex;
  border-bottom: 1px solid #A9A9A9;
}
.content .item .left{
  margin-left:3vw;
  width:17vw;
  height:28vw;

}
.content .item .middle{
width:60vw;
height:29vw;
}
/* 14.4 7.4 */
.content .item .right{
width:20vw;
height:29vw;
display: flex;
justify-content: center;
align-items: center;
}
.content .item .right .box{
  width:14.4vw;
  height:7.4vw;
  background-color:#F14B46;
  border-radius: 45%;
  color:white;
  font-size:3.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .item .middle{

  text-align:left;
  /* 上右下左 */
  margin:3vw 0 3vw 2vw;
}

.content .item .middle .txt01{

  font-weight: 800;
  font-size: 4.5vw;
}
.content .item .middle .txt02{
  padding-top:1vw;
  color:#868686;
  font-size: 3.5vw;

}
</style>

coming

  <template>
    <div class="com3">
      <div class="cFirst">
        <div>近期最受欢迎</div>
        <ul>
          <li>
            <img src="https://p0.pipi.cn/mmdb/25bfd6870fa51b87a90faf628e57f311f592a.jpg?imageMogr2/thumbnail/2500x2500%3E" width="90px" height="120px">
            <h4>名称</h4>
            <span>2022年</span>
          </li>
          <li>
            <img src="https://p0.pipi.cn/mmdb/25bfd6870fa51b87a90faf628e57f311f592a.jpg?imageMogr2/thumbnail/2500x2500%3E" width="90px" height="120px">
            <h4>名称</h4>
            <span>2022年</span>
          </li>
          <li>
            <img src="https://p0.pipi.cn/mmdb/25bfd6870fa51b87a90faf628e57f311f592a.jpg?imageMogr2/thumbnail/2500x2500%3E" width="90px" height="120px">
            <h4>名称</h4>
            <span>2022年</span>
          </li>

        </ul>
      </div>
      <div class="blank"></div>
      <div class="titleTime">5月27日 周五</div>
      <!--列表部分 -->
      <div class="cSecond">
        <ul>
          <!-- 3、影片循环这部分内容  :key 属性记着加，提升性能-->


          <li  class="fli"  v-for="movie in comingList" :key="movie.id">
            <!-- 实现点击图片或者文字都可以跳转到详细页，
            跳转时需要携带电影ID
            https://m.maoyan.com/ajax/detailmovie?movieId=?

            -->
        <router-link :to="{name:'detail',params:{id:movie.id}}">
            <img :src="movie.img" width="65px" height="90px">
          </router-link>

            <div class="right">
              <ul>
                 <li class="name">
                 {{movie.nm}}
                 </li>
                 <li class="score">
                   <div>{{movie.wish}}</div>人想看
                 </li>
                 <li class="star">主演：{{movie.star}}</li>
                 <li class="fre">{{movie.rt}}上映</li>
              </ul>
             <div class="rgh">想看</div>
            </div>

          </li>

            <!-- 影片循环这部分内容结束-->
          </ul>
      </div>
      <!-- -->
    </div>
  </template>

  <script>
    export default{
      data(){
        return{
          //1、这里准备一个数组类型的变量，用来接收未来请求后台拿到coming里的数据
          comingList:[]//数组类型
        }
      },
      mounted() {
        //2、请求猫眼服务器，调用相应的接口，拿到数据，
        //把获取到的数据放到事先 准备好的容器comingList里
        //https://m.maoyan.com/ajax/comingList?ci=10&token=&limit=10
        this.$axios.get("/api/ajax/comingList?ci=10&token=&limit=10")
        .then(res=>{
          console.log(res)
          this.comingList=res.data.coming;
        })
      }
    }
  </script>

  <style>

     .cFirst {
       margin-top: 41.8vw;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
     .cFirst div{
      margin: 0 0 2vw 2vw;
    }
     .cFirst ul{
      margin-left: 2vw;
      display: flex;
      align-items: center;
    }

     .cFirst ul li{
      margin-left: 3vw;
      font-size: 4vw;
    }
     .cFirst ul li span{
      font-size: 3.5vw;
      color: #999;
    }
     .blank{
      width: 100%;
      height: 3.2vw;
      background-color: #F5F5F5;
      margin: 1vw 0;
    }

    .titleTime{
      display: flex;
      justify-content: flex-start;
      margin-left: 2vw;
      color: #929292;
      font-size: 4vw;
    }


    .cSecond ul{
      padding: 3vw  0 0 3vw;
    }
    .cSecond ul .fli{
      height:25vw;
      display:flex;
    }
    .cSecond ul li .right{
      margin-left:3vw;
      display:flex;
      justify-content: space-between;
      align-items: center;
      flex:3;
    }
    .cSecond ul li .right .rgh{
      width:15vw;
      height:8vw;
      background-color: #FAAF00;
      border-radius:4vw ;
      color: #fff;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 3vw;
    }
    .cSecond ul .fli .right ul {
      height:25vw;
      padding-top: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
    }
    .cSecond ul li .right  ul .name{
      font-weight: 600;
      font-size: 5vw;
      height:5vw;
      padding-left: 0;
      padding-top: 0;
      margin-bottom: 0.5vw;
    }
    .cSecond ul li .right  ul .score{
      margin-top: 1.5vw;
      height:5vw;
      font-size: 3.7vw;
      padding-left: 0;
      display: flex;
    }
    .cSecond ul li .right  ul .score div{
      margin-top: 0.8vw;
      font-weight: 700;
      color: #FAAF00;
      font-size: 4vw;
    }
    .cSecond ul li .right  ul .star{
      margin: 0.3vw 0;
      height:5vw;
      padding-left: 0;
      font-size: 3.7vw;
    }
    .cSecond ul li .right  ul .fre{
      font-size: 3.4vw;
    }

  </style>

app.vue

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center;
  color: #2c3e50;*/
  /* margin-top: 60px; */

}
body{
  margin:0;
}
li{
  list-style: none;
}
</style>

预览页preview.vue

videourl是宣传片视频，可以做一个页进行播放
videourl: "https://vod.pipi.cn/43903a81vodtransgzp1251246104/de4b6163387702296511010073/v.f42905.mp4"

  <!-- 点击播放视频-->
    <router-link :to="{name:'preview',params:{videourl:movie.videourl}}">
    <img :src="movie.img">
    </router-link>



  <template>
    <div class="container-preview">
      <video width="100%" height="" autoplay="true" >
        <source :src="videourl" type="video/mp4"></source>
      </video>
    </div>
  </template>

  <script>
    export default{
      data(){
        return {
          videourl:this.$route.params.videourl
        }
      }

    }
  </script>

  <style>
  </style>

猫眼电影新版
解决方案：package.jsonsass-loader版本改为 "sass-loader": "^7.3.1",...
Python爬虫
Request+正则表达式爬取猫眼电影数据 1、确定目标爬取内容为：猫眼电影榜单数据。猫眼电影https://m...
反爬虫解析-字体替换--天眼查/猫眼电影
猫眼电影打开猫眼电影详情页 http://maoyan.com/films/1198214，查看用户评分和累计票...
Requests+正则表达式爬取猫眼电影
猫眼电影-Top100榜参考资料 requests,正则表达式抓取猫眼电影TOP100
APP产品体验：猫眼电影
产品体验报告：猫眼电影 ...
爬虫学习(一)：利用requests爬取猫眼电影top100
爬取猫眼电影Top100 最近学习爬虫环境 Python3.6 requests re 目标网站猫眼电影top...
python爬虫day-14（抓取猫眼电影排行）
个人学习笔记，方便自己查阅，仅供参考，欢迎交流抓取猫眼电影排行目的：抓取猫眼电影TOP100的电影名称、时间、...
恶意恶评与善意好评一样充满罪恶
【豆瓣、猫眼因国产片评分过低被电影局约谈猫眼专业评分功能下线】据36氪报道，昨日豆瓣、猫眼已因评分过低被电影局约...
猫眼电影-产品体验
好久没有更新了..... 猫眼电影-产品体验报告【猫眼电影】是美团电影的全新升级版，是美团网倾力打造的看电影必备...
爬取猫眼电影存入csv
爬取猫眼电影存入csv