【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（上）

🧑‍💼 个人简介：一个不甘平庸的平凡人🍬
🖥️ 蓝桥杯专栏：蓝桥杯题解/感悟
🖥️ TS知识总结：十万字TS知识点总结
👉 你的一键三连是我更新的最大动力❤️！
📢 欢迎私信博主加入前端交流群🌹

📑 目录

🔽 前言

好久没更新了，今天上线收到了很多小伙伴的私信，发现有很多朋友正在准备蓝桥杯，问我要不要出几天前开放的模拟赛 3 期的解析，其实这一期的模拟赛刚开始时我就知道了，但根据以往CSDN平台的限制以及我确实没想到会有这么多人想看，于是就没第一时间出。

看到了大家的催更后，我想着就发一下试试吧，希望能顺利发出，话不多说，开干！

由于篇幅有限，这次题解将分为上下两篇，这一篇先讲本科组的前八题，下一篇中我们再讲本科组的最后两题和职业院校组中和本科组不一样的题。

1️⃣ 网页PPT

使用简单的

JQuery

就能实习：

functionswitchPage(){// TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类// 1. 设置指定页面显示$("section").each((index, item)=>{$(item).css("display", index !== activeIndex ?"none":"block");});// 2. 修改页码$(".controls .page").text(`${activeIndex +1} / 5`);// 3. 根据情况修改按钮的classif(activeIndex ===0){$(".btn.left").addClass("disable");}elseif(activeIndex === sectionsCount -1){$(".btn.right").addClass("disable");}else{$(".btn.left").removeClass("disable");$(".btn.right").removeClass("disable");}}

2️⃣ 西游记之西天取经

考察

CSS3

动画属性，题目中说动画只动一次就会停下来，这明显是没有设置动画的

animation-iteration-count

（动画执行次数）导致的，所以想要让动画无限循环起来，只需要为每个

animation

复合属性添加

infinite

（无限循环）即可：

/* TODO 填空 */animation: a3 0.8s steps(8) infinite ;

3️⃣ 商品销量和销售额实时展示看板

考查

echarts

的基础使用，挺简单的，直接上代码：

// TODO：补全 `yAxis` 的设置，要求“销售额”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的左侧，“销量”（即，配置项 `name`）的位置（即，配置项 `position`）在图表的右侧。yAxis:[{type:'value',name:'销售额',position:'left',},{type:'value',name:'销量',position:'right',}],

// TODO：补全代码，正确给 X 轴的时间，以及 Y 轴的商品的销售额 saleObj 和销量赋值 countObj。
charData.xAxis.data = Object.keys(result.data.countObj);// 获得由全部key组成的数组
charData.series[0].data = Object.values(result.data.saleObj);// 获得由全部value组成的数组
charData.series[1].data = Object.values(result.data.countObj);

4️⃣ 蓝桥校园一卡通

考察一些简单的正则与表单验证，这里我封装了一个

validate

函数专门用来验证输入与控制

DOM

：

submit.onclick=()=>{// TODO 待补充代码/**
   * 用于验证输入并控制相关DOM操作
   * @param {RegExp} reg 用于检验文本的正则
   * @param {Element} inputNode input元素
   * @param {String} parentNodeClass 需要给父节点添加的类名
   * @param {String} errorNodeId 错误信息节点的id
   * @return {*}
   */functionvalidate(reg, inputNode, parentClass, errorId){const parentElement = inputNode.parentElement // 获取父元素const errorElement = parentElement.querySelector('#'+ errorId)// 获取错误信息元素let result =false// 是否通过验证if(!reg.test(inputNode.value)){// 输入不匹配
      parentElement.classList.add(parentClass)// 给父节点添加class
      errorElement.style.display ='block'// 显示错误信息}else{// 输入匹配
      parentElement.classList.remove(parentClass)// 移除父节点class
      errorElement.style.display ='none'// 隐藏错误信息
      result =true}return result
  }// 姓名let regName =/^[\u4e00-\u9fa5]{2,4}$/gconst nameVail =validate(regName, studentName,'has-error','vail_name')if(!nameVail){return}// 学号let regStuId =/^\d{1,12}$/gconst stuIdVail =validate(regStuId, studentId,'has-error','vail_studentId')if(!stuIdVail){return}

  item[0].innerHTML = studentName.value
  item[1].innerHTML = studentId.value
  item[2].innerHTML = college.value

  // 添加 showCard 类显示放大一卡通的动画，请勿删除
  cardStyle.classList.add('showCard')}

5️⃣ 会员权益领取中心

每次蓝桥杯的题中都会有一道这种仿页面的题，没啥技术含量，就是纯体力活，这里就不贴代码了。大家在考试的时候切记不要浪费太多时间在这道题上，很容易吃力不讨好。

6️⃣ 心愿便利贴

这题主要考察了

element-ui

表单验证，根据代码中的提示发现有两处需要修改。

一是，题中给出的代码中

v-for

遍历的是一个空数组

v-for="(item,index) in []"

，我们需要找到存放数据的数据来替换这个空数组，翻到下面的提交方法

onSubmit

中很容易发现数据存放在

wishList

中，所以：

<!-- TODO 待修改的代码 -->
<div class="card" :class="item.css" v-for="(item,index) in wishList" ...

二是，需要补充

rules

中的验证规则：

rules:{// TODO 待补充验证的代码name:[{required:true,message:'请输入姓名',trigger:'blur'},{min:2,max:4,message:'长度在 2 到 4 个字符',trigger:'blur'}],content:[{required:true,message:'请输入许愿内容',trigger:'blur'},{min:1,max:30,message:'长度在 1 到 30 个字符',trigger:'blur'}],},

每条规则的

key

对应的是

el-form-item

上的

prop

属性，根据题目的示例，这两天规则很容易写出，这里就不多说了。

7️⃣ 消失的 Token

考察

Vuex

的使用，题目中明确说了：“仔细阅读

store

文件夹下的相关代码并结合

Vuex

相关知识，排查代码中存在的问题”。

所以我们应该先去看一下

Vuex

相关的代码，在

UserModule.js

中会发现

UserModule

这个模块开启了命名空间：

UserModule.js

const UserModule ={namespaced:true,// 开启了命名空间...

index.js

中是通过

user

字段来引入

UserModule

的：

index.js

const store =newVuex.Store({modules:{base: BaseModule,user: UserModule,// 注意},})

所以在使用

UserModule

模块的内容时就需要注意要通过命名空间

user

来引用，之后检查

index.html

就很容易发现问题所在了：

// TODO 修改下面错误代码var app =newVue({el:'#app',data(){},computed:{welcome(){return store.getters.welcome
    },username(){return store.getters['user/username']// 修改处：通过命名空间引用},token(){return store.getters['user/token']// 修改处：通过命名空间引用}},methods:{// 回车/点击确认的回调事件login(username){// 修改处：通过命名空间引用
      username && store.commit('user/login',{ username,token:'sxgWKnLADfS8hUxbiMWyb'})
      username && store.commit('say','登录成功，欢迎你回来！')}}})

8️⃣ 封装 Promisefy 函数

考查了

promise

的使用，在题中我们很容易发现

promisefy

有以下几个需求：

1. 需要返回一个函数，并且返回的这个函数还需要返回一个promise
2. promisefy接收的fn参数是个函数，它最后一个参数是个回调函数，回调函数的第一个参数代表 err 信息，第二个参数代表成功返回的结果。

代码：

constpromisefy=(fn)=>{// TODO 此处完成该函数的封装return(...arg)=>{// 使用剩余参数arg收集所传递的实参returnnewPromise((resolve, reject)=>{// 将arg解构传递给fnfn(...arg,(err, contrast)=>{if(err){// err存在代表fn运行出错了，调用reject将promise的状态转换为rejected并传递err，此时该promise的catch方法将捕捉到该err错误reject(err)}// 如果代码运行到这说明没出错，调用resolve将promise的状态转换为fulfilled并传递contrast，此时该promise的then方法将捕捉到该contrast信息resolve(contrast)})})}}

上面代码也挺简单的，需要注意的一点就是

promise

的状态一旦改变就不能再次改变了，所以上面代码中如果先调用了

reject

，则后面的

resolve

调用就不再起作用了，所以在

if

语句中不需要加

return

来阻断后续代码的执行。

🔼 结语

距离第十四届蓝桥杯的正式比赛还有不到一个月的时间，好好复习，祝大家都能在正式比赛中取得满意的成绩！

如果本篇文章对你有所帮助，还请客官一件四连！❤️