位置: IT常识 - 正文

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)(蓝桥杯b组2020)

编辑:rootadmin
【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)

推荐整理分享【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)(蓝桥杯b组2020),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:蓝桥杯2022,蓝桥杯2021年,蓝桥杯2021年,蓝桥杯b组2021,蓝桥杯资料,蓝桥杯答疑,蓝桥杯资料,蓝桥杯2022,内容如对您有帮助,希望把文章链接给更多的朋友!

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

📑 目录🔽 前言1️⃣ 网页PPT2️⃣ 西游记之西天取经3️⃣ 商品销量和销售额实时展示看板4️⃣ 蓝桥校园一卡通5️⃣ 会员权益领取中心6️⃣ 心愿便利贴7️⃣ 消失的 Token8️⃣ 封装 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️⃣ 心愿便利贴【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)(蓝桥杯b组2020)

这题主要考察了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有以下几个需求:

需要返回一个函数,并且返回的这个函数还需要返回一个promisepromisefy接收的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来阻断后续代码的执行。

🔼 结语

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/298386.html 转载请保留说明!

上一篇:查询数据库空间(mysql和oracle)(如何查询数据库表空间)

下一篇:Vue3实战教程(快速入门)(vue3官方教程)

  • 电脑没有声音怎么办(电脑没有声音怎么办)(电脑没有声音怎么回事 不是静音)

    电脑没有声音怎么办(电脑没有声音怎么办)(电脑没有声音怎么回事 不是静音)

  • 微信群怎样接龙(微信群怎样接龙报名发送)

    微信群怎样接龙(微信群怎样接龙报名发送)

  • word如何设置单页纸张方向(word如何设置单词不断开)

    word如何设置单页纸张方向(word如何设置单词不断开)

  • 酷狗歌词状态栏怎么关(酷狗歌词状态栏怎么开启)

    酷狗歌词状态栏怎么关(酷狗歌词状态栏怎么开启)

  • 华为nova6耳机孔和充电孔是一个的吗(华为Nova6耳机孔插了耳机没反应)

    华为nova6耳机孔和充电孔是一个的吗(华为Nova6耳机孔插了耳机没反应)

  • 微信注销后头像显示什么(微信注销后头像会变黑吗)

    微信注销后头像显示什么(微信注销后头像会变黑吗)

  • wps转word后格式变了怎么办(wps转成word文本格式变了咋办)

    wps转word后格式变了怎么办(wps转成word文本格式变了咋办)

  • 淘宝直播为什么一点流量都没有(淘宝直播为什么要换直播间)

    淘宝直播为什么一点流量都没有(淘宝直播为什么要换直播间)

  • vivo手机充电标志变黄圈了(vivo手机充电标准)

    vivo手机充电标志变黄圈了(vivo手机充电标准)

  • 微信授权登录出现两个账号(微信授权登录出现第二昵称)

    微信授权登录出现两个账号(微信授权登录出现第二昵称)

  • 电脑没有信号输出给显示器(电脑没有信号输入怎么解决)

    电脑没有信号输出给显示器(电脑没有信号输入怎么解决)

  • qq好友辅助成功后多久发短信(qq好友辅助成功没反应)

    qq好友辅助成功后多久发短信(qq好友辅助成功没反应)

  • 水滴筹回复怎么删除(水滴筹怎样回复)

    水滴筹回复怎么删除(水滴筹怎样回复)

  • 微信注销后多久再申请(微信注销后多久查不到转账记录)

    微信注销后多久再申请(微信注销后多久查不到转账记录)

  • 笔记本网速慢如何解决(笔记本网速慢如何修复)

    笔记本网速慢如何解决(笔记本网速慢如何修复)

  • iphone6支持无线充电吗(iphone6s支持无线)

    iphone6支持无线充电吗(iphone6s支持无线)

  • 快手附近的人啥意思(快手附近的人是不是在附近)

    快手附近的人啥意思(快手附近的人是不是在附近)

  • 天猫精灵带录音功能吗(天猫精灵带录音功能么)

    天猫精灵带录音功能吗(天猫精灵带录音功能么)

  • 抖音禁止下载视频怎么解决(抖音禁止下载视频吗)

    抖音禁止下载视频怎么解决(抖音禁止下载视频吗)

  • 探探好友没了怎么恢复(探探好友没了怎么找到他)

    探探好友没了怎么恢复(探探好友没了怎么找到他)

  • 淘宝服务即将恢复要多久(淘宝服务下降)

    淘宝服务即将恢复要多久(淘宝服务下降)

  • nova优享版什么意思(华为优享版和普通版区别)

    nova优享版什么意思(华为优享版和普通版区别)

  • 一加手机6的屏幕占比(一加6屏幕是什么)

    一加手机6的屏幕占比(一加6屏幕是什么)

  • 苏宁易购怎样实名认证(苏宁易购试用怎么申请)

    苏宁易购怎样实名认证(苏宁易购试用怎么申请)

  •  美版iphonexs max是双卡双待吗(美版iphonexs max有nfc功能吗)

    美版iphonexs max是双卡双待吗(美版iphonexs max有nfc功能吗)

  • 苹果手机屏幕显示时间怎么调长(苹果手机屏幕显示不可用怎么解决)

    苹果手机屏幕显示时间怎么调长(苹果手机屏幕显示不可用怎么解决)

  • 触宝电话如何收费(触宝电话怎么设置才能用)

    触宝电话如何收费(触宝电话怎么设置才能用)

  • 税务局纳税申报网站官网
  • 可回收再生资源有哪些
  • 资产负债表其他流动资产计算公式
  • 一般纳税人报税流程详细操作
  • 办理税务登记之后
  • 银行汇票可以异地跨行使用吗
  • 会计忘记申报税款会有什么影响
  • 固定资产不能抵扣进项税额
  • 基金收入交增值税吗
  • 以旧换新的会计处理规定
  • 代销产品缴纳增值税吗
  • 开出产品折扣的发票怎么入账?
  • 农产品流通环节税收优惠政策
  • 政府补助怎么开票入账
  • 离线开票时间超限怎么办 发票都已经报送
  • 在外地的分公司可以独立核算开发票吗
  • 已付款后收到发货通知
  • 怎样提取word中的图片
  • uefiu盘安装系统步骤win10
  • 赔偿款支出会计处理
  • 有留抵税额怎么做分录
  • 自行建造完成交付的房子
  • 通知单位发放过节补助怎么说
  • 跨行政区域是跨省吗
  • 企业无偿借款的税务处理
  • 为公司垫付费用,怎么要回
  • h5与小程序交互
  • 销售货款无法收到怎么办
  • 什么情况下可以提取公积金
  • 织梦cms怎么样
  • 帝国cms自动采集插件
  • 非独立核算与独立核算
  • 企业编制现金流量表的主要目的是什么
  • 以前年度亏损要调整吗
  • 建筑企业预缴税率
  • 公司的财产保险业务
  • sql已成功与服务器建立连接但登录中发生错误
  • 在建工程如何转固
  • 应收账款科目的期末余额
  • 备用金支出没有发票怎么办
  • 公司收到拆迁补偿金,于评估公司的区别
  • 相同的商品附带不同的赠品发布
  • 建筑工程公司需要哪些资质证书
  • 对公账户付个人工资怎么入账
  • 记账凭证是不是转账凭证
  • 小规模纳税人增值税计算公式
  • 工资费用核算的原始记录有
  • 实际到货跟采购不一致
  • 数据库语言主要有哪几种
  • 让Vista响应更快
  • mac系统操作的小技巧
  • imessage对方看了会显示已读吗
  • 快速切换用户是什么意思
  • ubuntu16.04输入法
  • win10周年版
  • linux系统怎么配置路由
  • 保存 linux
  • 正版win10怎么用
  • win8开机进入开始界面
  • 开启win7
  • 联想 恢复
  • opengl es programming guide
  • angular.js
  • bootstrap tooltip
  • 巧用dos命令合并图层
  • 批处理文件教程
  • unity核心模块
  • node drain事件
  • python怎么多进程
  • c#委托的理解
  • 工具类软件有哪些
  • python项目打包发布
  • 手把手教你自己做菜
  • javascript create
  • 湖南国家电子税务局手机版
  • 税务通知书一般什么内容
  • 彩票中奖归出钱人还是中奖人
  • 电子税务密码输入错误五次怎么办
  • 地税滞纳金如何做账
  • 浙江国地税联合电子税务局哪里看收到的发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设