一、电影模块开发

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、基本信息展示

实际操作

创建电影详情组件

创建位置位于 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 : 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)相关推荐

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
详细介绍：如何用Vue完成喵喵电影项目？
Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...
php开源饭馆记账软件_GitHub - CNYoki/xxjzWeb: 小歆记账WebApp项目(Web服务端)
小歆记账WebApp项目(Web服务端) 1.简介小歆记账WebApp是一个面向移动端的记账工具,此项目为Web服务端:使用ThinkPHP+MySQL作为后台,AmazeUI作为前端. 项目基础版 ...
小歆记账 php,小歆记账WebApp项目(Web服务端)
小歆记账WebApp项目(Web服务端) V2.x版本 | V1.x版本 | 基础版本 | 微信小程序 1.简介小歆记账WebApp是一个面向移动端的记账工具,此项目为Web服务端:使用ThinkP ...
视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java
Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...
Vue 搭建移动端 h5 项目步骤
Vue 搭建移动端 h5 项目步骤简介最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体的思路,于是我就写了这个步骤. 提示:(2022-10-28更新) vue-cli 和vue ...
vue(4)电影项目
文章目录路由二级路由 vue电影项目思路和需求后端: 前端: 路由传参程序式路由传参路由守卫全局路由守卫局部路由守卫 vuex 验证登录后端: 前端: Element 路由配置路由 ...
vue中文字转语言，适配web移动端
在PC端文字转语音可以使用HTML5中的API,SpeechSynthesisUtterance const synth = window.speechSynthesis; const msg = n ...
好程序员web前端分享MVVM框架Vue实现原理
好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁 ...

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、路由验证

web 移动端电影项目 (Vue)相关推荐

最新文章

热门文章