Vue2 —— 项目实战(电影网首页的制作) 附源码

这篇具有很好参考价值的文章主要介绍了Vue2 —— 项目实战(电影网首页的制作) 附源码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

文章目录

  • 前言
  • 一、静态页面的实现以及拆分组件
  • 二、主页的实现
    • 1.导航栏的跳转
    • 2.榜单列表的呈现
  • 相应源码
    • 1.首页HTML结构
    • 2.首页CSS样式
  • 总结

一、静态页面的实现以及拆分组件

   静态页面的实现——  

关于静态页面的实现过程,在下文的源码中会有所呈现。以下重点阐述如何利用vue2实现本项目的过程。

   拆分组件 ——  

关于拆分组件在前文已经讲过,在这里就不再赘述。

  目录结构 —— 如下图所示  

vue2项目实战,Vue2.js,前端,前端框架,vue.js,html,学习

二、主页的实现

因为时间关系,在这里我们就详细介绍主页的实现过程。

1.导航栏的跳转

vue2项目实战,Vue2.js,前端,前端框架,vue.js,html,学习

 如上图所示,首先我们先实现导航栏列表的跳转,这里我们所要实现的就是当用户点击相应的标签时呈现相应的榜单列表数据。那么如何实现呢?

解决方法:为每一个标签设置一个声明式导航。注意:使用router-link进行路由跳转时,一定要记得增加 router-view 进行页面占位,否则将不会生效。

<template>
    <div>
 <!-- 导航部分 -->
		<div class="main nav">
			<router-link to="/opinionList" active-class="hover">热门口碑榜</router-link>
			<router-link to="/wishlist" active-class="hover">最受期待榜</router-link>
			<router-link to="/boxoffice" active-class="hover">国内票房榜</router-link>
			<div class="c"></div>
		</div>
	<router-view></router-view>
    </div>
</template>

2.榜单列表的呈现

实现思路——

  • 如上图所示的三个榜单列表的页面结构都是相同的,所以可以在这三个列表标签中分别注册与复用同一个组件,组件之间也就是父子关系,在这里榜单列表应该是这三个列表标签中的公共子组件.
  • 之前的页面是静态的,所谓静态就是所有的数据都是“死的”,这就需要我们调取后台接口获取数据并把数据动态的渲染到页面中,这样的业务逻辑在后期的学习中十分常见。在父组件中获取相应数据后传给子组件。
  • 如何获取后台数据,在这里我是用的是axios,利用axios向相应的接口请求数据。
  • 获取数据后,声明一个数据格式与获取到的数据相同的变量,用此变量接收获取到的数据,在页面动态使用这个数据,也就是说如果后台传入的数据是一个数组,那么我们也应该使用一个数组接收。
  • 查看获取到的数据格式,在对应的页面结构中使用对应的字段名。

   获取数据:

vue2项目实战,Vue2.js,前端,前端框架,vue.js,html,学习

   将数据传递给子组件:  

vue2项目实战,Vue2.js,前端,前端框架,vue.js,html,学习

  在页面中使用数据  

  <!-- 电影列表 -->
		<div class="main list">
			<ul>
				<li v-for="(item, index) in opinion" :key="item.id">
					<i>{{++index}}</i>
					<a href="javascript:;" class="img" @click="goDetail(item.id)">
						<img  :src="require(`@/${item.movie_poster}`)"/>
					</a>
					<div class="des">
						 <h2>{{item.movie_name}}</h2>
						 <p>主演:{{item.starring?item.starring:'王宝强'}}</p>
						 <span>上映时间:{{item.create_time}}</span>
					</div>
					<span class="r" v-show="listType==1" style="color: orange">
						评分:{{item.movie_score}}
					</span>
					<span class="r" v-show="listType==2" style="color:orange">
						想看人数:{{item.movie_anticipate}}
					</span>
					<span class="r" v-show="listType==3" style="color:red">
						票房:{{item.movie_anticipate}}
					</span>
					<div class="c"></div>
				</li>
			</ul>
		</div>	

三、相应源码

1.首页HTML

<!-- logo部分 -->
		<div class="logo">
			<div class="main">
				<a href=""><img  src="images/logo.jpg"/></a>
			</div>
			<h3>榜单</h3>
		</div>
	
		
		<!-- 导航部分 -->
		<div class="main nav">
			<a href="" class="hover">热门口碑榜</a>
			<a href="">最受期待榜</a>
			<a href="">国内票房榜</a>
			<div class="c"></div>
		</div>
		
		<!-- 电影列表 -->
		<div class="main list">
			<ul>
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
				
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
				
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
				
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
				
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
				
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
				
				<li>
					<i>1</i>
					<a href="" class="img">
						<img  src="images/test.jpg"/>
					</a>
					<div class="des">
						 <h2>唐人街探案3</h2>
						 <p>主要:王宝强</p>
						 <span>上映时间:2021-08-09</span>
					</div>
					<span class="r">
						想看人数:123123123人
					</span>
					<div class="c"></div>
				</li>
			</ul>
		</div>
		

2.首页CSS样式

/* 公共样式 */
* {
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	color: #666;
}

.l {
	float: left;
}

.r {
	float: right;
}

.c {
	clear: both;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

.main {
	width: 1100px;
	margin: auto;
}

/* 电影网样式 */
.logo {
	height: 54px;
	padding: 5px 0px;
	border-bottom: 1px solid #d8d8d8;
	position: relative;
	margin-bottom: 20px;
}

.logo h3 {
	color: #ff701d;
	width: 50px;
	text-align: center;
	font-size: 20px;
	position: absolute;
	left: 50%;
	top: 0px;
	line-height: 60px;
	border-bottom: 4px solid #ff701d;
	transform: translateX(-50%);
}

.nav {
	border-bottom: 1px solid #d8d8d8;
}

.nav a {
	display: block;
	float: left;
	height: 45px;
	line-height: 45px;
	margin-right: 40px;
	color: #333;
}

.nav a.hover,
.nav a:hover {
	color: #ef4238;
	border-bottom: 2px solid #ef4238;
}

/* 电影列表 */
.list {
	padding: 40px;
}

.list li {
	height: 220px;
	border-bottom: 1px solid #d8d8d8;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

.list li i {
	width: 50px;
	height: 50px;
	background: #9d9d9d;
	color: #fff;
	text-align: center;
	line-height: 50px;
	display: block;
	margin-top: 85px;
	float: left;
}

.list li:nth-child(1) i,
.list li:nth-child(2) i,
.list li:nth-child(3) i {
	background: #ffb400;
}

.list li .img {
	float: left;
	width: 160px;
	height: 220px;
	margin-left: 50px;
	margin-right: 50px;
}

.des {
	padding-top: 50px;
	float: left;
}

.des h2 {
	font-size: 20px;
}

.des p {
	padding-top: 10px;
	padding-bottom: 5px;
}

.list li>span {
	margin-top: 80px;
	color: #ffb400;
	font-size: 20px;
}

总结

以上就是今日的分享,最后依旧诚挚祝福屏幕前的你健康幸福、平安喜乐。文章来源地址https://www.toymoban.com/news/detail-530986.html

到了这里,关于Vue2 —— 项目实战(电影网首页的制作) 附源码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue2+3入门到实战】(17)VUE之VueCli脚手架自定认创建项目、ESlint代码规范与修复、 ESlint自动修正插件的使用 详细示例

    VueCli脚手架自定认创建项目 ESlint代码规范与修复 ESlint自动修正插件 1.安装脚手架 (已安装) 2.创建项目 选项 手动选择功能 选择vue的版本 是否使用history模式 选择css预处理 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范) 比如:const age = 18; = 报错!多加

    2024年02月03日
    浏览(58)
  • 【电商项目实战】基于SpringBoot完成首页搭建

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《电商项目实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的加入,

    2024年02月04日
    浏览(45)
  • 项目实战:通过axios加载水果库存系统的首页数据

    axios会自动将响应的数据解析为js对象,所以不需要手动将json字符串解析为js对象,不需要再进行parse(如果是原始的ajax操作,那么一定需要parse) ​​​​​​​    

    2024年02月05日
    浏览(47)
  • NLP项目实战01--之电影评论分类

    欢迎来到本篇文章!在这里,我们将探讨一个常见而重要的自然语言处理任务——文本分类。具体而言,我们将关注情感分析任务,即通过分析电影评论的情感来判断评论是正面的、负面的。 展示: 训练展示如下: 实际使用如下: 实现方式: 选择PyTorch作为深度学习框架,

    2024年02月05日
    浏览(40)
  • 首页以卡片形式来展示区块链列表数据(Web3项目一实战之五)

    我们已然在 Web3 分布式存储 IPFS(Web3项目一实战之四) 介绍了什么是 IPFS ,以及在本地电脑如何安装它。虽然在上一篇讲解了该怎么安装 IPFS ,也做了相应的配置,但在本地开发阶段,前端总是无法避免 跨域 这个远程请求 api 的”家常便饭的通病“。 很显然,对于出现 跨域

    2024年02月05日
    浏览(46)
  • vue3-实战-12-管理后台-权限管理之菜单管理模块-首页-主题颜色-暗黑模式

    目录 1-列表页面功能开发 1.1-需求原型分析 1.2-接口和数据类型定义 1.3-获取服务端数据渲染页面 2-新增编辑菜单 2.1-原型需求分析 2.2-表单数据收集和页面结构开发 2.3-提交或者取消 3-删除菜单 4-首页开发 5-暗黑模式的切换和主题颜色 5.1-暗黑模式 5.2-主题颜色切换       我们

    2024年02月10日
    浏览(56)
  • 《vue3实战》运用push()方法实现电影评价系统的添加功能

    目录 前言 电影评价系统的添加功能是什么? 电影评价系统的添加功能有什么作用? 一、push()方法是什么?它有什么作用? 含义: 作用: 二、功能实现 这段是添加开始时点击按钮使添加框展示的代码部分: 这段是添加过程中结合elment plus组件实现的添加框的代码部分:

    2024年02月10日
    浏览(41)
  • 《vue3实战》运用splice方法实现电影评价系统的查看、修改、删除功能

    目录          前言          电影评价系统是什么?它能具有什么功能的体现? 一、splice方法的含义和作用 splice是什么?splice的作用体现在哪些方面?          二、功能实现 以下是实现查看逻辑功能的代码 以下是实现修改逻辑功能的代码  以下是实现删除逻辑功能的代

    2024年02月12日
    浏览(38)
  • 《vue3实战》通过indexOf方法实现电影评价系统的模糊查询功能

    目录 前言 一、indexOf是什么?indexOf有什么作用? 含义: 作用: 二、功能实现 这段是查询过程中过滤筛选功能的代码部分: 分析: 这段是查询用户和性别功能的代码部分: 分析: 三、最终效果图 查询输入框所在图: 输入姓名羊和性别男模糊查询后的效果图: 输入姓名羊和

    2024年02月10日
    浏览(42)
  • 爬虫项目实战:利用基于selenium框架的爬虫模板爬取豆瓣电影Top250

    👋 Hi, I’m @货又星 👀 I’m interested in … 🌱 I’m currently learning … 💞 I’m looking to collaborate on … 📫 How to reach me … README 目录(持续更新中) 各种错误处理、爬虫实战及模板、百度智能云人脸识别、计算机视觉深度学习CNN图像识别与分类、PaddlePaddle自然语言处理知识图谱、

    2024年02月04日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包