目录
一、电影模块开发
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="/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、基本信息展示
实际操作
创建电影详情组件
创建位置位于 src / views / Film / Detail.vue，基本结构代码参考如下
<template><div class="detail"><div class="img"><img src="/pc/v5/usr/movie/5607daea349314f6e67004348fd49e6c.jpg?x-oss-process=image/quality,Q_70" /></div><div><div>我和我的家乡</div><div>剧情 | 喜剧</div><div>-10-01上映</div><div>中国大陆 | 120 分钟</div><div>电影《我和我的家乡》定档国庆，延续《我和我的祖国》集体创作的方式，由张艺谋担当总监制，宁浩担任总导演，张一白担任总策划，宁浩、徐峥、陈思诚、闫非&彭大魔、邓超&俞白眉分别执导五个故事。</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 : 1sessionStorage.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 - 100this.$nextTick(() => {this.bs = new BScroll('.scroll', {// 激活上滑动的事件监听pullUpLoad: true,// 激活下滑的事件监听pullDownRefresh: true,// 默认情况下使用bs后，它会禁止浏览器的点击事件click: true})// 上拉刷新this.bs.on('pullingUp', () => {console.log('上拉刷新')// 获取数据//本次pullup动作已经完成，继续准备下一次pullupthis.bs.finishPullUp()})this.bs.on('pullingDown', () => {console.log('下拉刷新')// 获取数据//本次pulldown动作已经完成，继续准备下一次pulldownthis.bs.finishPullDown()})})},beforeDestroy() {// 离开清理资源this.bs = null}}
.scroll {overflow: hidden;}
1.6、城市列表开发
二、个人中心
2.1、界面布局
2.2、登录
2.3、路由验证
如果觉得《web 移动端电影项目 (Vue)》对你有帮助，请点赞、收藏，并留下你的观点哦！
