web 移动端电影项目 (Vue)

目录

一、电影模块开发

1.0、顶部幻灯片

1.1、列表顶部导航

1.2、正在热映

页面底部导航

组件缓存

图片懒加载

1.3、即将上映

1.4、电影详情

1.4.1、基本信息展示

1.4.2、底部菜单移除

1.5、影院列表

1.6、城市列表开发

二、个人中心

2.1、界面布局

2.2、登录

2.3、路由验证

---

本次练习项目是仿照 卖座 电影 , 

访问链接 =>  卖座电影

---

项目开发前的准备工作 :

跳转链接 =>  Vue 项目开发流程

---

一、电影模块开发

Swipe 轮播

介绍

用于循环播放一组图片或内容。

1.0、顶部幻灯片

参考地址：Vant 2 - Mobile UI Components built on Vue

父 ( index.vue ) 文件里面专门做数据的请求处理 , 以后数据出了问题 ,

就无需在子 ( swiper.vue ) 内挨个找问题所在了 , 要是都把请求都写在各自的文件内 ,

找起来会很麻烦的 , 日后维护会很难 

先看要请求的网页的数据的响应 , 是否允许跨域 ? ！！

创建 请求相关 目录 结构 :

请求的方式方法 :

配置 网络 api 接口地址的 基础配置 文件 :

配置反向代理请求数据 : vue.config.js

配置好请求之后在父组件内发起网络请求 , 请求轮播图数据 :

结果请求出现 404 报错   =>  接下来看我们的请求头是否缺少了数据

将 请求 添加 上 需要携带的 请求头信息 : ( 注意 key 和 value 值 都需要用 " 引号 " 包裹  )

 返回的数据太乱不合心意，可以在请求方法内做一些处理 :

数据传递 : 父传子 （ 父子传值 ）

---

1.1、列表顶部导航

Tab 标签页

• 创建电影列表顶部导航组件

参数地址：Vant 2 - Mobile UI Components built on Vue

---

面试官 ： 如果给你一个组件库 ， 你如何修改其组件的样式 ？

1、直接用类名进行修改

2、1不行的话，加权重值 ， !important;  

3、2不行的话，使用 样式穿透 语法 ， /deep/   或  >>>   或  ::v-deep

4、前面都不行的话 ， 去掉 scoped 样式作用域 ， 不过一般不推荐这样做

---

1.2、正在热映

List 列表

介绍

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

修改 src / views / Film / NowPlaying.vue 文件

 

此处有一个小坑 ， 就是 <el-cell> 并没有提醒你引入

所以 ， import  { List ,  Cell }  from  'vant';

• 实现步骤

- 请求卖座网的正在热映电影数据

- 循环数据进行展示

静态页面

<div class="item">
    <div class="left">
        <img src="https://static.maizuo.com/pc/v5/usr/movie/fad9f1e9a5c38f3883d7f9b5e561e5fe.jpg?x-oss-process=image/quality,Q_70"/>
    </div>
    <div class="middle">
        <div>我和我的家乡</div>
        <div>
            <span>观众评分</span>
            <span>7.6</span>
        </div>
        <div>主演：闫非 彭安宇 宁浩 徐峥 陈思诚</div>
        <div>中国大陆 | 150分钟</div>
    </div>
    <div class="right">
        <span>购票</span>
    </div>
</div>

.item {
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  color: #797d82;
  font-size: 13px;
  // border-bottom: 1px solid #ededed;

  .left {
    width: 77px;
    height: 100px;
    // margin-left: 20px;
    img {
      width: 66px;
      height: 100%;
    }
  }

  .middle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;

    div:nth-of-type(1) {
      color: #191a1b;
      font-size: 16px;
    }

    div:nth-of-type(3) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .right {
    width: 15%;
    display: flex;
    align-items: center;
    margin-right: 20px;

    span {
      border: 1px solid #ff5f16;
      background: white;
      color: #ff5f16;
      border-radius: 2px;
      height: 25px;
      line-height: 25px;
      font-size: 13px;
      width: 50px;
      text-align: center;
    }
  }
}

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

---

页面底部导航

参考组件：https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar

组件缓存

keep-alive

图片懒加载

因为img中的src它会加载时主动发起网络请求，这样在图片比较多的时候，请求过多，而往往在打开网站时，可能只看部份内容，下面的内容，可能不去看，这样图片也加载了，浪费了，所以用图片懒加载

弄一个小图片，写在img的src属性中，然后在自定义一个属性data-src存储是真实的图片地址，在根据滚动条的位置来实时的进行data-src中的值更换为src中的值，只要一更换，img标签属性src它就是主动发起请求

1.3、即将上映

参考正在热映完成

1.4、电影详情

电影详情页面需要依据上一页传递过来的数据（电影ID，电影ID是可变的数字）来显示对应电影的具体信息（动态路由参数)

1.4.1、基本信息展示

实际操作

1. 创建电影详情组件

创建位置位于 src / views / Film / Detail.vue，基本结构代码参考如下

<template>
    <div class="detail">
        <div class="img">
            <img src="https://static.maizuo.com/pc/v5/usr/movie/5607daea349314f6e67004348fd49e6c.jpg?x-oss-process=image/quality,Q_70" />
        </div>
        <div>
            <div>我和我的家乡</div>
            <div>剧情 | 喜剧</div>
            <div>2020-10-01上映</div>
            <div>中国大陆 | 120 分钟</div>
            <div>
                电影《我和我的家乡》定档2020年国庆，延续《我和我的祖国》集体创作的方式，由张艺谋担当总监制，宁浩担任总导演，张一白担任总策划，宁浩、徐峥、陈思诚、闫非&彭大魔、邓超&俞白眉分别执导五个故事。
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.detail {
    .img {
        width: 100%;
        height: 260px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>

1.4.2、底部菜单移除

• 步骤

 

或者是 利用 导航守卫 才 操控 :

// 利用导航守卫完成底部菜单的显示和隐藏
router.beforeEach((to, from, next) => {
  let flag = ['/filmdetail', '/city', '/login', '/setting'].some(item => to.path.includes(item)) ? 0 : 1
  sessionStorage.setItem('show', flag)
  next()
})

---

1.5、影院列表

列表滚动加载数据插件：better-scroll

BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

better-scroll：介绍 | BetterScroll 2.0

npm i -S better-scroll

<div class="scroll" :style="{height: height + 'px'}">
	<ul>
		<li></li>
	</ul>
</div>

import BScroll from "better-scroll";

export default {
    data() {
        return {
            height: 0,
            bs: null
        };
    },
    mounted() {
        // 获取可视高度
        this.height = document.documentElement.clientHeight - 100
        this.$nextTick(() => {
            this.bs = new BScroll('.scroll', {
                // 激活上滑动的事件监听
                pullUpLoad: true,
                // 激活下滑的事件监听
                pullDownRefresh: true,
                // 默认情况下使用bs后，它会禁止浏览器的点击事件
                click: true
            })
            // 上拉刷新
            this.bs.on('pullingUp', () => {
                console.log('上拉刷新')
                // 获取数据
                //本次pullup动作已经完成，继续准备下一次pullup
                this.bs.finishPullUp()
            })
            this.bs.on('pullingDown', () => {
                console.log('下拉刷新')
                // 获取数据
                //本次pulldown动作已经完成，继续准备下一次pulldown
                this.bs.finishPullDown()
            })
        })
    },
    beforeDestroy() {
        // 离开清理资源
        this.bs = null
    }
}

.scroll {
	overflow: hidden;
}

1.6、城市列表开发

---

二、个人中心

2.1、界面布局

2.2、登录

2.3、路由验证