【WEB前端全栈成长计划】第三阶段 考核开发实录（三）

    上一文中，我们搭建了页面路由，本文主要完成首页组件的开发。

    观察一下首页有哪几块内容：轮播区域、开始上课区块、云课堂、教学市场、活动公告以及底部，下面我们开始一块一块来搭建。
    根据我上面分的这几大块，我在components里新建对应的组件，轮播和开始上课这两块我合并到一个组件了，大家看下截图，我一共建了这么几个组件：

    大家可以看到，我新建了个目录，把首页用到的组件，都放到home目录下了，这样能开发清晰一些。
    然后我们把首页的非路由组件引入到首页Home.vue文件中：

<template>
       <div>
              <homeTop/>
              <cloudClass/>
              <cloudClass/>
              <notices/>
              <homeBottom/>
       </div>
</template>
 
<script>
       import cloudClass from "../components/home/cloudClass.vue"
       import homeBottom from "../components/home/homeBottom.vue"
       import homeTop from "../components/home/homeTop.vue"
       import notices from "../components/home/notices.vue"
      
       export default {
              components:{
                     cloudClass,
                     homeBottom,
                     homeTop,
                     notices
              }
       }
</script>
 
<style>
</style>

    这里有个注意事项，组件不能直接放置到template标签中，需要在template里组件外包裹一次div，不然会报错哦：

    注意看截图的那句话，让你有个root element，开发中同学们要注意哦~

    上面的截图可以看到，首页我已经成功把非路由组件引入进来了。
    这里细心的同学可能会观察到，我的cloudClass组件引用了两次，这是因为，我观察到云课堂和教学市场这两部分的展示内容结构很相似，所以我抽离出来一个组件为两部分内容所用。
    因为我做的是华为WEB全栈第三阶段的作业哈，在第一阶段，我已经写过了首页了，所以我把我之前首页的内容做了拆分，直接填入到各个组件内部了，然后把样式统一放到了assets目录下的public.css文件里了：

    因为我之前写的样式有点乱，把样式做拆分有点费劲，所以我就直接放到public.css文件里，然后再main.js文件里引入，当做全局样式来调用了：

    当然最好的习惯还是要做拆分哦，把公用的提出来就好了，这样维护起来比较方便~
    经过我一番整合，首页内容展示已经没有问题了

    但是，页面里展示的内容，都是死数据啊，我们下下一阶段，主要要完成的，就是数据动态展示这么一个功能，说到这个功能，我们首先要想到的是，根据现有需求，我们需要一个什么格式的数据，然后使用v-for去实现循环，由于云课堂和教学市场的展示相似，我前面提到了我抽离出来了一个组件，那这个组件的数据，我想要从home.vue传递给子组件，这就要用到props，所以技术点也就是数据整合、v-for、props，很简单，只需要它们几个就可以完成首页数据动态展示了（除了banner图哈，这个我们放到后面实现）
    我们以云课堂为例：
    先打开cloudClass.vue组件，实现对子组件数据改造，这里我直接贴代码了：

<template>
       <div>
              <div>
                     <h3>{{ccLists.title}}</h3>
                     <p>{{ccLists.desc}}</p>
              </div>
              <div>
                     <a href="" v-for="value in ccLists.listsData">
                            <div :style="{backgroundPosition: value.positionY}"></div>
                            <div>
                                   <div>
                                          <div>
                                                 <span>{{value.courseName}}</span>
                                          </div>
                                          <div>
                                                 <span>
                                                        <i></i>
                                                        <span>{{value.classroomUser}}</span>
                                                 </span>
                                                 <span>
                                                        <i></i>
                                                        <span>{{value.classroomSchool}}</span>
                                                 </span>
                                                 <span v-if="value.showTime">
                                                        <span>{{value.time}}</span>
                                                 </span>
                                          </div>
                                   </div>
                                   <div>{{value.desc}}</div>
                                   <div></div>
                                   <div>
                                          <div>
                                                 <p>{{value.operate}}</p>
                                          </div>
                                   </div>
                            </div>
                     </a>
              </div>
              <div>
                     <span> 查看更多 ></span></span>
              </div>
       </div>
      
</template>
 
<script>
       export default{
              props:{
                     ccLists: Object,
                     tmLists: Object
              }
       }
</script>
 
<style>
</style>

    大家可以看看，页面展示的内容都是用props拿的哦，课程列表用了v-for循环，需要注意的是，我在课程时间元素上使用了一个v-if指令，因为这一部分内容在云课程显示，在教学市场不显示，所以我需要做一下区别处理。
    首页的云课堂和教学市场的数据我是这样构造的，home.vue：

<template>
       <div>
              <homeTop/>
              <cloudClass :ccLists='ccLists'/>
              <cloudClass :ccLists='tmLists'/>
              <notices/>
              <homeBottom/>
       </div>
</template>
 
<script>
       import cloudClass from "../components/home/cloudClass.vue"
       import homeBottom from "../components/home/homeBottom.vue"
       import homeTop from "../components/home/homeTop.vue"
       import notices from "../components/home/notices.vue"
      
       export default {
              data(){
                     return {
                            ccLists:{
                                   title:'云课堂',
                                   desc:'免费精品公开课，覆盖丰富知识点、课件与在线习题',
                                   listsData:[{
                                   courseName:'区块链精品实践课',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   time:'6小时',
                                   desc:'本课程由浅入深的介绍区块链技术缘起、原理机制、演进和发展现状，分享区块链典型应用场景及特点。了解华为云区块链的方案及特点，参与动手实验。从入门到实践，循序渐进一站式学习。',
                                   operate: '限时免费',
                                   positionY:'0px 0px',
                                   showTime:true
                            },{
                                   courseName:'技术大咖在线论道-华为云技术开放视频合集课堂入口',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   time:'90小时',
                                   desc:'【技术大咖在线论道 百万+开发者精益成长】 汇聚多领域资深技术专家视频课程； 探讨国内外前沿技术领域发展趋势； 助力开发者专业技术能力精益成长； 分享可借鉴研发技术实践成功经验。',
                                   operate: '限时免费',
                                   positionY:'0px -200px',
                                   showTime:true
                            },{
                                   courseName:'HE2E DevOps实践',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   time:'16小时',
                                   desc:'HE2E即华为端到端的DevOps实施框架，集合了业界先进的实践，结合华为30年研发经验，形成的一套可操作可落地的敏捷开发方法论，并基于DevCloud工具链进行承载。',
                                   operate: '限时免费',
                                   positionY:'0px -400px',
                                   showTime:true
                            },{
                                   courseName:'C语言程序设计',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   time:'96小时',
                                   desc:'本课程适合作为高等学校计算机专业及相关专业C语言程序设计课程的教材，也可作为计算机等级考试参考书，还可供从事计算机软件开发人员参考使用。主要包含，C语言概述，数据类型，基本语句与结构化程序设计，数组，函数和模块化程序设计，指针，预处理命令，复杂数据类型，文件。附有习题，习题覆盖知识重点，题型丰富。',
                                   operate: '限时免费',
                                   positionY:'0px -600px',
                                   showTime:true
                            },{
                                   courseName:'Web实践课',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   time:'96小时',
                                   desc:'本门课程涵盖：WEB基础、CSS、JS、H5等教学内容组成，学生可以逐步提升前端开发能力。',
                                   operate: '限时免费',
                                   positionY:'0px -800px',
                                   showTime:true
                            },{
                                   courseName:'人工智能：算法与实践',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   time:'96小时',
                                   desc:'本课程讲述的是有关人工智能算法与实践的内容，并介绍相关的数学基础、相关应用及工具，以及如何在实际环境中使用它们。课程不仅仅介绍了各种人工智能算法的理论知识，更是通过建立多个实际案例、习题测评，引导学生在实际项目中学到相关知识经验，同时老师可以灵活安排学生的学习任务，有效地对学生的知识吸收情况做针对性的解决。课程开发环境为python3.6及以上 + Anaconda3 。',
                                   operate: '限时免费',
                                   positionY:'0px -1000px',
                                   showTime:true
                            }]},
                            tmLists:{
                                   title:'教学市场',
                                   desc:'丰富教学资源辅助高效教学，免费习题库一键获取',
                                   listsData:[{
                                   courseName:'JAVA-习题库',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   desc:'本习题库覆盖JAVA的相关知识，习题涉及到基本数据类型、语句、类、封装继承、对象、接口、内部类、异常处理、字符串、实用类、多线程、输入输出流等相关知识。 习题类型包括单选题、编程题、单人项目题等，每个习题都与知识点相对于，通过这些习题，可以很好的检查学生对JAVA知识的掌握程度，提升学生的动手编码能',
                                   operate: '限时免费',
                                   positionY:'0px -1200px',
                                   showTime:false
                            },{
                                   courseName:'C-习题库',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   desc:'本习题库覆盖C语言的相关知识，习题涉及到C语言概述，数据类型，基本语句与结构化程序设计，数组，函数和模块化程序设计，指针，预处理命令，复杂数据类型，文件操作等。习题类型包括单选题、编程题，每个习题都与知识点相对应，所有习题支持自动判题，通过这些习题，可以很好的检查学生对C语言知识的掌握程度，提升学的动手编码能',
                                   operate: '限时免费',
                                   positionY:'0px -1400px',
                                   showTime:false
                            },{
                                   courseName:'Web-习题库',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   desc:'本习题库覆盖web开发相关知识点，对HTML、CSS、JavaScript等内容，进行了习题覆盖。习题类型包括单选题、编程题，每个习题都与知识点相对于，通过这些习题，可以很好的检查学生对Web知识的掌握程度，提升学生的动手编码能力。',
                                   operate: '限时免费',
                                   positionY:'0px -1600px',
                                   showTime:false
                            },{
                                   courseName:'系统分析与设计',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   desc:'本课程通过DevOps与云服务相结合，基于“项目驱动”的工程实践进行能力训练，采取“基础知识-->核心应用-->综合案例-->企业实践”的结构和“由浅入深，由深到精”的学习模式进行讲解，掌握产品经理与项目经理应具备的技能知识点，具备云服务与开发的基本能力。',
                                   operate: '限时免费',
                                   positionY:'0px -1800px',
                                   showTime:false
                            },{
                                   courseName:'数据结构（C语言）实践教学精品课',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   desc:'本课程对常用的数据结构做了系统的介绍，力求概念清晰，注重实际应用。课程依次介绍数据结构的基本概念、线性表、栈和队列、串和数组、树和二叉树、图结构，以及查找和排序等基本运算，用C语言作为算法描述语言，并附有典型例题与小结，便于读者总结和提高',
                                   operate: '限时免费',
                                   positionY:'0px -2000px',
                                   showTime:false
                            },{
                                   courseName:'Python程序设计精品课',
                                   classroomUser:'Classroom',
                                   classroomSchool:' 华为云',
                                   desc:'本课程主要介绍Python语言的语法及常用模块的使用，重点介绍面向对象设计，字符串操作，正则表达式等知识，同时通过游戏设计，展示Python语言的简易和强大。',
                                   operate: '限时免费',
                                   positionY:'0px -2200px',
                                   showTime:false
                            }]}
                     }
              },
              components:{
                     cloudClass,
                     homeBottom,
                     homeTop,
                     notices
              }
       }
</script>
 
<style>
</style>

    大家可以参考一下。至于活动公告版块，道理跟坐云课堂一样的，大家可以自己试试~

    由于banner图我们用swiper来实现的，我放到下一篇文章里说啦~