文章目录

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

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

   静态页面的实现——  

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

   拆分组件 ——  

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

  目录结构 —— 如下图所示

二、主页的实现

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

1.导航栏的跳转

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

解决方法：为每一个标签设置一个声明式导航。注意：使用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向相应的接口请求数据。
  • 获取数据后，声明一个数据格式与获取到的数据相同的变量，用此变量接收获取到的数据，在页面动态使用这个数据，也就是说如果后台传入的数据是一个数组，那么我们也应该使用一个数组接收。
  • 查看获取到的数据格式，在对应的页面结构中使用对应的字段名。

获取数据：

将数据传递给子组件:

在页面中使用数据

  <!-- 电影列表 --><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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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;
}

总结

以上就是今日的分享，最后依旧诚挚祝福屏幕前的你健康幸福、平安喜乐。

Vue2 —— 项目实战（电影网首页的制作） 附源码相关推荐

  1. 用html语言编写美食栏目 源码,仿美食网首页html+css 完全源码和图片

    [实例简介] 用了一个多星期仿的美食网的首页,html和css分离,完整的源码及图片: [实例截图] [核心代码] kikibingo_6821075 └── 仿美食网首页html+css 完全源码和 ...

  2. JAVA计算机毕业设计网课系统（附源码、数据库）

    JAVA计算机毕业设计网课系统(附源码.数据库) 目运行 环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Inte ...

  3. Java毕设项目大学生校园兼职系统计算机（附源码+系统+数据库+LW）

    Java毕设项目大学生校园兼职系统计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ E ...

  4. Java毕设项目超市会员积分管理系统计算机（附源码+系统+数据库+LW）

    Java毕设项目超市会员积分管理系统计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...

  5. Java毕设项目保险公司风险测评管理系统计算机（附源码+系统+数据库+LW）

    Java毕设项目保险公司风险测评管理系统计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行) ...

  6. Java毕设项目茶店订购管理系统2021计算机（附源码+系统+数据库+LW）

    Java毕设项目茶店订购管理系统2021计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行) ...

  7. Java毕设项目学生二手书籍交易平台计算机（附源码+系统+数据库+LW）

    Java毕设项目学生二手书籍交易平台计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...

  8. Java毕设项目社区团购系统计算机（附源码+系统+数据库+LW）

    Java毕设项目社区团购系统计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...

  9. Java毕设项目羽毛球馆场地管理系统计算机（附源码+系统+数据库+LW）

    Java毕设项目羽毛球馆场地管理系统计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...

  10. Java毕设项目早教课程管理系统计算机（附源码+系统+数据库+LW）

    Java毕设项目早教课程管理系统计算机(附源码+系统+数据库+LW) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...

最新文章

  1. 计算机网络安全防护体系研究
  2. 第十七届全国大学生完全车模组竞速赛方案 - 草案
  3. Tensorflow【实战Google深度学习框架】TensorFlow模型的保存与恢复加载
  4. “Java是编译执行的语言”这句话对吗？
  5. 业务专题篇：AB测试实验设计与评估
  6. MySQL的变量分类总结
  7. java中哲学家就餐死锁_哲学家就餐问题与死锁总结
  8. 笑谈Android图表-MPAndroidChart
  9. DNE-1 测试方法
  10. 【课本】【No.3】随机向量定义、联合分布函数、边缘分布、统计特征的分布函数的差分，独立性、离散型条件分布列，连续型分布函数与密度函数、随机向量的函数分布
  11. python属性是什么意思_什么是python类属性
  12. sougou ubuntu 优麒麟_Ubuntu20.04LTS安装搜狗输入法
  13. android手机主流屏幕大小,如何选择适合自己的手机屏幕大小 屏幕大小选择标准【详解】...
  14. 技嘉服务器主板装系统,技嘉主板u盘装系统怎么进行bios设置的方法
  15. Memcached详解
  16. Android流媒体播放器介绍
  17. 【Python】三维画图——matplotlib以及np.mgrid的使用
  18. 华为防火墙（usg5500）区域间实验
  19. ARKit之路－ARKit概述之二
  20. SuperMap许可使用随手记

热门文章

  1. Maya2022和C4D哪个更好用？
  2. 常见SOC启动流程分析
  3. 兮°Android下的屏幕适配问题的一点心得
  4. 7000字长文深度解读：DTC商业模式，对品牌增长的颠覆式影响
  5. 扭转二战战局的密码系统 | 历史上的今天
  6. 周 7 福利日：中奖名单公布
  7. 浏览器网页缩放对页面的影响
  8. 谷歌地图开发：地理编码和反地理编码
  9. 【总结】办公编程学习你可能需要这些小利器！
  10. ASCII码表（图），很有用的东西