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

    根据第三阶段的作业需求，还需要做MOOC课程页面，我们简单来看看页面内容：

    主要就是框红框这部分，我观察了下其他的页面，培训认证，在线实验等，都是一样的文档结构，所以在做MOOC课程的时候，我将页面主要分成顶部和主体两个部分，也就是两个组件啦

    这几个组件好几个页面有用到，所以我新建了一个目录叫public，用于放置公共组件，下面那几个tab组件，是因为页面主体有个tab切换效果，我就先建了出来。
    新建完所需要的组件，后面的操作步骤和前面首页是一样的，即在MOOC课程组件CloudClassroom.vue内引入组件，使用组件，这里需要提一嘴的是，这个页面，有个tab切换功能：

    需要我们用到@click去绑定一个方法用于实现tab切换功能，代码如下：

<template>
       <div>
              <publicHead></publicHead>
              <div>
                     <span v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}">{{tab.name}}</span>
              </div>
              <component :is="currentView"></component>
       </div>
</template>
 
<script>
       import publicHead from '../components/public/publicHead.vue'
       import tab1Content from '../components/public/tab1Content.vue'
       import tab2Content from '../components/public/tab2Content.vue'
       import tab3Content from '../components/public/tab3Content.vue'
       import tab4Content from '../components/public/tab4Content.vue'
 
       export default {
              data() {
                     return {
                            active: 0,
                            currentView: 'tab1Content',
                            tabs: [{
                                   name: '热门课程',
                                   view: 'tab1Content'
                            }, {
                                   name: '热门活动',
                                   view: 'tab2Content'
                            }, {
                                   name: '云课程',
                                   view: 'tab3Content'
                            }, {
                                   name: '热门活动',
                                   view: 'tab4Content'
                            }]
                     }
              },
              components: {
                     publicHead,
                     tab1Content,
                     tab2Content,
                     tab3Content,
                     tab4Content
              },
              methods: {
                     toggle(i, v) {
                            this.active = i;
                            this.currentView = v;
                     }
              },
       }
</script>
 
<style>
       .active{
              color: #5e7ce0;
              border-bottom: 2px solid #5e7ce0;
              padding-bottom: 5px;
       }
</style>

    组件publicHead的内容我们就略过了，很简单，我们看下classListsContent.vue组件的代码：

<template>
       <div>
              <div>
                            <span :class="{activeIndex:activeIndex==index}" v-for="(value,index) in selectListsData" :key="index" @click="chooseClass(index)">{{value.name}}</span>
              </div>
              <div>
                     <a v-if="activeIndex == 0 || value.classGroup == activeIndex" href="" v-for="value in classListsData">
                            <div></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>
                                          </div>
                                   </div>
                            </div>
                     </a>
              </div>
       </div>
</template>
 
<script>
       export default{
              data(){
                     return {
                            activeIndex: 0,
                            selectListsData:[{
                                   name:'全部',
                                   index:0
                            },{
                                   name:'算法与数据结构',
                                   index:1
                            },{
                                   name:'应用开发',
                                   index:2
                            },{
                                   name:'Android前端影视制作UI产品经理运营',
                                   index:3
                            }],
                            classListsData:[{
                                   courseName:'三天玩转最优路径算法',
                                   classroomUser:'Classroom',
                                   classroomSchool:'华为云',
                                   classGroup:1
                            },{
                                   courseName:'基于ROMA及AppEngine告警...',
                                   classroomUser:'Classroom',
                                   classroomSchool:'华为云',
                                   classGroup:1
                            },{
                                   courseName:'Android核心技术系列之一-初...',
                                   classroomUser:'尚硅谷',
                                   classroomSchool:'华为云',
                                   classGroup:1
                            },{
                                   courseName:'Android核心技术系列之二...',
                                   classroomUser:'尚硅谷',
                                   classroomSchool:'华为云',
                                   classGroup:2
                            },{
                                   courseName:'区块链入门',
                                   classroomUser:'博学谷',
                                   classroomSchool:'华为云',
                                   classGroup:2
                            },{
                                   courseName:'Spring定时任务2步轻松搞定',
                                   classroomUser:'博学谷',
                                   classroomSchool:'华为云',
                                   classGroup:2
                            },{
                                   courseName:'Node.js指南系列之Node NPM',
                                   classroomUser:'尚硅谷',
                                   classroomSchool:'华为云',
                                   classGroup:2
                            },{
                                   courseName:'Node.js指南系列之Node简介',
                                   classroomUser:'尚硅谷',
                                   classroomSchool:'华为云',
                                   classGroup:3
                            },{
                                   courseName:'Node.js指南系列之Node文件操作',
                                   classroomUser:'尚硅谷',
                                   classroomSchool:'华为云',
                                   classGroup:3
                            }]
                     }
              },
              methods:{
                     chooseClass:function(index){
                            console.log(index);
                            this.activeIndex = index;
                     }
              }
       }
</script>
 
<style>
       .activeIndex{
              color: #5e7ce0;
              border-bottom: 2px solid #5e7ce0;
              padding-bottom: 5px;
       }
</style>

    这里大家需要注意看的是我重构的数据结构，以及课程按钮切换功能，我是用chooseClass方法来设置当前选择的标签的index，然后使用v-if去做判断，是否让当前课程显示。具体的同学们可以看看我的代码，MOOC课程页面就搭建完成了，看下效果：

    其实不论是课程切换还是课程标签切换，我用的是一样的方法逻辑，以上就是我完成WEB全栈课程第三阶段作业的大致流程，这里分享给大家，文章中提到的是最常用到的一些用法，涉及到axios和vuex等稍微复杂的技术的，这里没有使用的需求，如果以后我有用到，我会接着分享到博客里哦，如果有不正确的地方，欢迎大家批评指正！