美文网首页
vue 电影app

vue 电影app

作者: wqjcarnation | 来源:发表于2020-03-25 16:23 被阅读0次
image.png

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

"sass-loader": "^7.3.1",

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

    cnpm install

相关链接

1、正在热映：https://m.maoyan.com/ajax/movieOnInfoList
2、影院：https://m.maoyan.com/ajax/filterCinemas?ci=57
参数：ci ⇒ 城市id
3、影院详情：https://m.maoyan.com/ajax/cinemaDetail?cinemaId=890
参数：cinemaId ⇒ 影院id
4、即将上映：https://m.maoyan.com/ajax/comingList?ci=10&token=&limit=10
参数：
ci ⇒ 城市id
limit ⇒ 请求几条
5、经典电影：https://m.maoyan.com/ajax/moreClassicList?sortId=1&showType=3&limit=10
6、最受欢迎：https://m.maoyan.com/ajax/moreClassicList?sortId=0&showType=3&limit=5
7、电影详情：https://m.maoyan.com/ajax/detailmovie?movieId=1203734
参数：movieId ⇒ 电影ID
8、想看
http://m.maoyan.com/ajax/mostExpected?ci=57&limit=10&offset=0&token=

跨域设置

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
}

从头开始

界面开发

index.vue

<template>
  <div class="content">
    <div class="top">
      猫眼电影
    </div>
    <div class="nav">
      <div :class="[flag==1?'active':'']" @click="flag=1">
        正在热映
      </div>
      <div :class="[flag==2?'active':'']" @click="flag=2">
        即将上映
      </div>
    </div>

    <div class="main">
      <hot v-show="flag==1"></hot>
      <coming v-show="flag==2"></coming>
    </div>
  </div>
</template>

<script>
  import hot from '@/components/maoyan/hot'
  import coming from '@/components/maoyan/coming'
  export default{
    data(){
      return {
        flag:1
      }
    },

    components:{hot,coming}
  }
</script>

 <style type="text/css">
      body {
        margin: 0;
      }

      .content {
        width: 100vw;
        height: 100vh;
        border: 1px solid gray;
      }

      .top {
        width: 100vw;
        height: 12vw;
        background-color: #E64645;
        color: white;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 0;
        top: 0;
      }
      .nav {
        width: 100vw;
        height: 12vw;
        display: flex;
        position: absolute;
        top: 12vw;
        justify-content: space-around;
        align-items: center;
      }
      .active {
        color: #E64645;
      }
      .main{
        width: 100vw;
        position: absolute;
        top:24vw;
      }
    </style>

简单的hot.vue coming.vue试一下效果

<template>
  <div class="hot">
     正在热映
  </div>
</template>

<script>
  export default{
    data(){
      return {}
    }
  }
</script>

<style>
  .hot{
    border:3px solid  #E64645;
  }
</style>

细化 coming.vue和 hot.vue(略)

coming.vue

<template>
  <div>
    <div class="coming">
      <div class="top1">
        <div class="now">
          <p>近期最受期待</p>
        </div>
        <div class="movie">
          <div class="name">
            <img src="./img/shaonian.jpg" />
            <a class="strong">少年的你</a>
            <p>6月27日&nbsp;周四</p>
          </div>
          <div class="name">
            <img src="./img/zhizhu.jpg" />
            <a class="strong">蜘蛛侠</a>
            <p>6月28日&nbsp;周五</p>
          </div>
          <div class="name">
            <img src="./img/heiyiren.jpg" />
            <a class="strong">黑衣人</a>
            <p>6月14日&nbsp;周五</p>
          </div>
          <div class="name">
            <img src="./img/saodu.jpg" />
            <a class="strong">扫毒2</a>
            <p>7月12日&nbsp;周五</p>
          </div>
        </div>
      </div>
      <div class="down">
        <div class="datails">
          <div class="left">
            <img src="./img/juesha.jpg" />
          </div>
          <div class="border">
          <div class="middle">
            <p class="name">绝杀慕尼黑</p>
            <p><span>14860</span>想看</p>
            <p>弗拉基米尔·马什科夫，约翰·萨维奇..</p>
            <p>今天1家影院放映1场</p>
          </div>
          <div class="right1">
            预售
          </div>
          </div>
        </div>
        <div class="datails">
          <div class="left">
            <img src="./img/heiyiren.jpg" />
          </div>
          <div class="border">
          <div class="middle">
            <p class="name">黑衣人</p>
            <p><span>139193</span>想看</p>
            <p>克里斯·海姆斯沃斯...</p>
          </div>
          <div class="right1">
            预售
          </div>
          </div>
        </div>
        <div class="datails">
          <div class="left">
            <img src="./img/qinming.jpg" />
          </div>
          <div class="border">
          <div class="middle">
            <p class="name">秦明</p>
            <p><span>78692</span>想看</p>
            <p>严屹宽，代斯，耿乐</p>
            <p>2019-06-14 下周五上映</p>
          </div>
          <div class="right1">
            预售
          </div>
          </div>
        </div>
        <div class="datails">
          <div class="left">
            <img src="./img/mage.jpg" />
          </div>
          <div class="border">
          <div class="middle">
            <p class="name">妈阁是座城</p>
            <p><span>17008</span>想看</p>
            <p>白百何，黄觉，吴刚</p>
            <p>2019-06-14 下周五上映</p>
          </div>
          <div class="right1">
            预售
          </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style>
  .coming{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .top1 {
    width: 95vw;
    height: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #A9A9A9;
    border-bottom: 3px solid #A9A9A9;

  }
  .now p {
    font-size: 3.5vw;
    text-align: left;
  }
  .name {
    width: 25vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .strong{
    font-weight: bold;
    font-size: 3.7vw;
  }
  .name p{
    font-size: 3.5vw;
    color: #808080;
  }

  .name img {
    width: 23vw;
    height: 30.6vw;
  }

  .movie {
    display: flex;
    justify-content: space-around;
  }
  .down {
    width: 95vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
  }
</style>

成品

hot.vue

<template>
  <div>
    <div class="hot">
      <div class="datails" v-for="movie in mvList">
        <div class="left">
          <img :src="movie.img.replace('w.h','64.94')" />
        </div>
        <div class="border">
        <div class="middle">
          <p class="name">{{movie.nm}}</p>
          <p>观众评<span>{{movie.sc}}</span></p>
          <p>{{movie.star}}</p>
          <p>{{movie.showInfo}}</p>
        </div>
        <div class="right">
          购票
        </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mvList:[]
      }
    },
    created(){
      this.getMovieList()
    },
    methods: {
      getMovieList: function() {
        //请求https://m.maoyan.com/ajax/movieOnInfoList获取电影列表
        //axios
             this.$axios.get("/api/ajax/movieOnInfoList")
             .then(response=>{
               console.log(response.data.movieList);
                //step2 响应回来后，用响应的list更新我自己的list
                this.mvList=response.data.movieList;

             })
             .catch(error=>{
               console.log(error);
             })
      }
    }
  }
</script>

<style>
  .hot {
    width: 95vw;
  }

  .datails {
    width: 95vw;
    height: 30vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .left {
    width: 20vw;
    height: 30vw;
  }

  img {
    width: 17vw;
    height: 25vw;
  }
  .border{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #A9A9A9;
  }
  .middle {
    width: 62vw;
    height: 22vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4vw;
  }

  .right {
    width: 13vw;
    height: 7.46vw;
    background-color: #E64645;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5vw;
    border-radius: 5px;
  }
  .right1 {
    width: 13vw;
    height: 7.46vw;
    background-color: #39A0E7;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5vw;
    border-radius: 5px;
  }

  .name {
    color: black;
    font-size: 3.7vw;
    font-weight: bold;
  }

  p {
    color: #808080;
    font-size: 3.5vw;
    margin: 0;
  }

  span {
    font-weight: bold;
    color: orange;
  }
</style>

coming.vue

<template>
  <div>
    <div class="coming">
      <div class="top1">
        <div class="now">
          <p>近期最受期待</p>
        </div>
        <div class="movie">
          <div class="name" v-for="movie in hopList">
            <img :src="movie.img.replace('w.h','87.112')" />
            <a class="strong">{{movie.nm}}</a>
            <p>{{movie.comingTitle}}</p>
          </div>
        </div>
      </div>
      <div class="down">
        <div class="datails" v-for="movie in comList">
          <div class="left">
             <img :src="movie.img.replace('w.h','87.112')" />
          </div>
          <div class="border">
          <div class="middle">
            <p class="name">{{movie.nm}}</p>
            <p><span>{{movie.wish}}</span>想看</p>
            <p>{{movie.star}}</p>
            <p>{{movie.showInfo}}</p>
          </div>
          <div >
            <span v-if="movie.globalReleased" class="right">购票</span>
            <span v-if="!movie.globalReleased" class="right1">预售</span>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hopList:[],
        comList:[]
      }
    },
    created(){
      this.getComList();
      this.getHopList();
    },
   methods: {
      getHopList: function() {
        //请求https://m.maoyan.com/ajax/movieOnInfoList获取电影列表
        //axios
             this.$axios.get("/api/ajax/mostExpected?ci=57&limit=4&offset=0&token=")
             .then(response=>{
               console.log("hope",response.data.coming);
                //step2 响应回来后，用响应的list更新我自己的list
                this.hopList=response.data.coming;

             })
             .catch(error=>{
               console.log(error);
             })
      },
      getComList: function() {
        //请求https://m.maoyan.com/ajax/movieOnInfoList获取电影列表
        //axios
             this.$axios.get("/api/ajax/comingList?ci=57&token=&limit=10")
             .then(response=>{
               console.log("com",response.data.coming);
                //step2 响应回来后，用响应的list更新我自己的list
                this.comList=response.data.coming;

             })
             .catch(error=>{
               console.log(error);
             })
      }


    }
  }
</script>

<style>
  .coming{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .top1 {
    width: 95vw;
    height: 45vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #A9A9A9;
    border-bottom: 3px solid #A9A9A9;

  }
  .now p {
    font-size: 3.5vw;
    text-align: left;
  }
  .name {
    width: 30vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .strong{
    font-weight: bold;
    font-size: 3.7vw;
  }
  .name p{
    font-size: 3.5vw;
    color: #808080;
  }

  .name img {
    width: 23vw;
    height: 30.6vw;
  }

  .movie {
    display: flex;
    justify-content: space-around;
  }
  .down {
    width: 95vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
  }

</style>

图标引用

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

相关文章

网友评论

      本文标题：vue 电影app

      本文链接：https://www.haomeiwen.com/subject/abkxuhtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|vue 电影app|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！