前端小白历险记（四）拼死拼活过考核——思想与方法

Web前端全栈成长计划的万里长征总算要走到最后一步了。

第三阶段的考核看起来内容不多，只要开发两个页面就好，但是细分析起来，还真的有不少问题需要解决，特别是在笔者7天速成vue的情况下。

笔者经过好几天的折腾，终于像打怪升级那样，提交了一副尚不完全满意的作品（还是临摹的），本文就是将在这段完成考核过程中遇到的一些问题梳理一下，也给自己做个小结吧（远处传来回音：小结巴小结巴小结巴。。。）当然，这里只提一些思路，以及找到的一些解决方法。具体的代码不细贴了。

（一）页面安排和vue-route的路由设置

从题目给出的要求来看，其实是要完成一个单页面的vue工程。从界面上分析，

打开首页，出现的是/home页面。

点击 MOOC课程，出现的是/home/course/cloudclassroom页面。

那么显然需要在vue-router 的设置中设置这两个path。

那么，页面上导航条点击各个链接后，分别要跳到不同的模块。所以至少需要配置导航，home和cloudclassroom三个模块。由于每个模块都可能包含一个或多个子模块，所以可以为这三个上层模块建3个目录——layout,home和cloudclassroom。并记得在vue-router的设置里面将 根自动跳转到/home即可。

（二）/home页面的拆分和实现

/home页面其实在第一阶段考核时就做过了。只不过当时都是写死在HTML页面中的，但是其实当时的考试也已经给大家分好了类。具体包含：

a）导航（这个拆分到layout去了）

b）轮播栏

c）classroom介绍栏

d）云课堂栏

e）教育市场栏

f）活动公告栏

g）页尾版权信息

所以，我们就需要在建好的home目录下分别建立以上模块的vue文件：

lunbo.vue

classintro.vue

cloudclass.vue

edumarket.vue

activitynotice.vue

footer.vue

最简单的方法，就是把第一阶段的考核作业按以上分类分别贴到相关的vue中即可。

这样，我们随时都可以看到一个完整的home页面。然后我们不管去改哪个模块，其他页面都会给我们一个好的参考。这样有利于我们一块一块的完善页面，当然了，如果时间实在来不及，我们就随时将这个页面的成果提交，管他行不行，至少是有结果的。。多少老师应该都会给点分数吧。。。（笔者心里这点小心思如此细腻，自己都不觉得要去给自己树二十个大拇指）。

（3）轮播图部分

轮播图其实第二阶段也考核过了。笔者也想过了，实在不行，就把第二阶段的成果贴到lunbo.vue中去。（请问为啥其他的都是英文，轮播就是中文呢？——因为直播是中国特色，如抖音，虎牙，微吼，AB站，Tiktok之类的。。。）

当然，考试中的提示swiper给了我们一点想象的空间。而笔者根据swiper通过度娘搜索出来的 vue-awesome-swiper，听说是一个比较好的轮播插件。笔者试了一下，也确实如此，包含轮播的图片配置在内，大概120行代码就搞定了。网上有现成的。

（4）云课堂和教育市场栏

这两个栏位的风格类似，关键是内容按考试要求不能写死。那么简单的方法，就是写到data里面，然后template里面通过v-for去循环引用即可。这点看起来不难，其实也有很多小的细节需要注意，比如有些有课程时长，有些没有，有些有限时免费，有些也没有。这个时候，可能需要请出v-if进行html元素的筛选。

上图就是作者自己画的，看看，是不是跟原图很像——

是的，笔者连一些配色和字体都对过了。。。具体的方法就是在原页面上按F12，找到相关的元素，

比如想找到上图中的字号有多大，那么

看右边的font-size就可以了。然后你要做的事情，就是把这个font-size放入自己页面的<style>区就可以了。

（5）活动公告栏

公告栏笔者做的时候，一开始是这个效果：

跟实际的

少了分割线。。笔者为此想了半天，到底怎么画出这根线。。。后来终于想通了，其实用个单边的border就可以了啊。。。

（三）/cloudclassroom页面的拆分和实现

其实这个页面比home页面要简单。除了导航栏不需要写之外，就是一张图片，加两行筛选栏，再加上搜索的结果即可。

尽管如此，这里的实现还是不得不请出vuex这个神级工具。因为笔者看到了这里面的初始页面显示，点任何标签后的显示结果，每个都是个搜索结果。这个时候，数据最好是存在store里面，而过滤的过程依然要遵循vuex的原则，即：

a）在state去初始化相关对象

b）在vue页面去dispatch action

c）在action去调用 commit mutation

d）在mutation去操作state

点击筛选条件两行的任意一个按钮，都应该触发相关的搜索效果。只不过逻辑上会有所不同。具体的逻辑，这里也不细说了。只是表明一下处理的方向。

（四）其他问题及解决

问题1：

在完成MOOC课程页面的过程中，一开始选中了并没有颜色。如下图所示：

笔者提交第一次考核作业的时候，就把这个交上去了。后来想想不对，必须在第二次上交前解决这个问题。

那么，上面的所有元素都是动态显示的，包含第一行和第二行，那么如何才能显示选中的两个类别（大类和子类）呢？笔者想了一下，必须在store中存储当前选中的type和subtype，并能根据处理的那个元素是否是被选中的元素的判断，来控制相关的class名称。并且在对应的class中显示颜色即可。

于是，笔者定义了以下两个css：

/* 未选中的黑色 */
.class-black{
  color: black;
}
/* 选中的蓝色 */
.class-blue{
  color: #5e7ce0;
  font-weight: bold;
}

并在template中通过v-for遍历找到元素后，通过条件判断实现了对不同class的选择。

:class="['class-black',$store.state.selectedClass === item.id && 'class-blue' ]"

有没有感觉到神奇？vue就是这么强大。当然这是需要在你非常会用的情况下。

如果你实在不会用，你还有嘴巴，还有搜索工具，甚至还有小艺小艺。当然，最后的那个小艺其实没那么智能，否则，你就跟她说一句：小艺小艺，把考核的代码结果传到我的邮箱！ 小艺就应该会苦逼地做了一晚上，第二天在你睡懒觉醒来的时候，友情提醒你，答案已经准备好了，就等着宇神批改了。。。

笔者觉得，有了上面的思路，这个考核作业就不会感觉到那么难了。笔者不喜欢抄袭，也不喜欢泄题，但是笔者喜欢讲方式方法，也希望很多人能学会方式方法。我们都是从不会到会再到不会的过程（为啥不会，因为Vue3.0,作为Vue2的初学者的你知道是啥样吗？）你只能感谢出题的老司机只让你用2.6版本的vue，而不是3.0.不然，所有初学者大概都会挂科的吧。。

（全文完，谢谢阅读）