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

发布时间：2023-04-21 文章分类：WEB开发, 电脑百科 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

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

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

📑 目录

  • 🔽 前言
  • 1️⃣ 网页PPT
  • 2️⃣ 西游记之西天取经
  • 3️⃣ 商品销量和销售额实时展示看板
  • 4️⃣ 蓝桥校园一卡通
  • 5️⃣ 会员权益领取中心
  • 6️⃣ 心愿便利贴
  • 7️⃣ 消失的 Token
  • 8️⃣ 封装 Promisefy 函数
  • 🔼 结语

🔽 前言

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

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

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

1️⃣ 网页PPT

使用简单的JQuery就能实习：

function switchPage() {
  // TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类
  // 1. 设置指定页面显示
  $("section").each((index, item) => {
    $(item).css("display", index !== activeIndex ? "none" : "block");
  });
  // 2. 修改页码
  $(".controls .page").text(`${activeIndex + 1} / 5`);
  // 3. 根据情况修改按钮的class
  if (activeIndex === 0) {
    $(".btn.left").addClass("disable");
  } else if (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 {*}
   */
  function validate(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}$/g
  const nameVail = validate(regName, studentName, 'has-error', 'vail_name')
  if (!nameVail) {
    return
  }
  // 学号
  let regStuId = /^\d{1,12}$/g
  const 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 = new Vuex.Store({
    modules: {
        base: BaseModule,
        user: UserModule, // 注意
    },
})

所以在使用UserModule模块的内容时就需要注意要通过命名空间user来引用，之后检查index.html就很容易发现问题所在了：

// TODO 修改下面错误代码
var app = new Vue({
  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 信息，第二个参数代表成功返回的结果。

代码：

const promisefy = (fn) => {
  // TODO 此处完成该函数的封装
  return (...arg) => { // 使用剩余参数arg收集所传递的实参
    return new Promise((resolve, reject) => {
      // 将arg解构传递给fn
      fn(...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来阻断后续代码的执行。

🔼 结语

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

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

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

标签 , ,