位置: 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官方教程)

  • 剪映怎么删除视频中间的一小部分(剪映怎么删除视频保留音频)

    剪映怎么删除视频中间的一小部分(剪映怎么删除视频保留音频)

  • 微信如何批量删除多个聊天窗口(微信如何批量删除账单)

    微信如何批量删除多个聊天窗口(微信如何批量删除账单)

  • airpods2充电盒充不满电(airpods2充电盒充不进去电了)

    airpods2充电盒充不满电(airpods2充电盒充不进去电了)

  • 苹果手机页面变黑怎么回事(苹果手机页面变大怎么缩小)

    苹果手机页面变黑怎么回事(苹果手机页面变大怎么缩小)

  • iphone11左上角触控不灵敏(苹果11左上角屏幕按下去怎么会和后面有声音)

    iphone11左上角触控不灵敏(苹果11左上角屏幕按下去怎么会和后面有声音)

  • 钢化膜没贴好可以重贴几次(钢化膜没贴好可以用吹风机吹嘛)

    钢化膜没贴好可以重贴几次(钢化膜没贴好可以用吹风机吹嘛)

  • soul注销账号要多久(百度怎么注销账号)

    soul注销账号要多久(百度怎么注销账号)

  • 芒果微信会员怎样共享呢(芒果微信会员怎么取消自动续费)

    芒果微信会员怎样共享呢(芒果微信会员怎么取消自动续费)

  • 移动王卡对微信免流吗(移动王卡微信视频聊天免流量吗)

    移动王卡对微信免流吗(移动王卡微信视频聊天免流量吗)

  • 手机摔过之后容易发烫(手机摔后后期会有问题吗)

    手机摔过之后容易发烫(手机摔后后期会有问题吗)

  • 如何看到自己的手机号(如何看到自己的视频号)

    如何看到自己的手机号(如何看到自己的视频号)

  • 为什么抖音看不到本场音浪(为什么抖音看不了图文)

    为什么抖音看不到本场音浪(为什么抖音看不了图文)

  • ipad没贴膜直接用笔会刮花吗(ipad不贴膜会划坏吗)

    ipad没贴膜直接用笔会刮花吗(ipad不贴膜会划坏吗)

  • 华为mate30pro录像模糊(华为mate30pro录像防抖设置)

    华为mate30pro录像模糊(华为mate30pro录像防抖设置)

  • 如何给文档加密码保护(如何给文档加密后发送文件)

    如何给文档加密码保护(如何给文档加密后发送文件)

  • 手机信息打不开闪退怎么回事(手机信息打不开怎么回事)

    手机信息打不开闪退怎么回事(手机信息打不开怎么回事)

  • 苹果手机显示闪电接口有液体怎么办(苹果手机显示闪电接口检测到液体怎么回事)

    苹果手机显示闪电接口有液体怎么办(苹果手机显示闪电接口检测到液体怎么回事)

  • 手机曲面屏幕优缺点(手机曲面屏有啥好的)

    手机曲面屏幕优缺点(手机曲面屏有啥好的)

  • 平板有麦克风吗(平板有没有麦克风)

    平板有麦克风吗(平板有没有麦克风)

  • 现代计算机的基本工作原理是(现代计算机的基本原理)

    现代计算机的基本工作原理是(现代计算机的基本原理)

  • 支付宝删好友是双删吗(支付宝删好友是不是就不能偷能量了)

    支付宝删好友是双删吗(支付宝删好友是不是就不能偷能量了)

  • ios13如何更新(iphone13怎么更新)

    ios13如何更新(iphone13怎么更新)

  • 苹果一定要用原装耳机吗(苹果一定要用原装蓝牙耳机吗)

    苹果一定要用原装耳机吗(苹果一定要用原装蓝牙耳机吗)

  • qq基友关系能有几个(qq基友关系能有亲密度吗)

    qq基友关系能有几个(qq基友关系能有亲密度吗)

  • drvlsnr.exe进程安全吗 drvlsnr是什么进程(drvmgr.exe)

    drvlsnr.exe进程安全吗 drvlsnr是什么进程(drvmgr.exe)

  • 服务器部署Python3.7和Virtualenvwrapper虚拟环境(服务器部署环境)

    服务器部署Python3.7和Virtualenvwrapper虚拟环境(服务器部署环境)

  • 增值税发票税控开票软件
  • 应交代扣利息税
  • 小规模纳税人收入是含税还是不含税
  • 公司中介费收入如何纳税
  • 进料加工出口退税政策
  • 关联企业债资比 企业所得税
  • 长期待摊费用摊销年限规定
  • 个人平均缴费基数
  • 汇算清缴后发生销售退回会计分录
  • 现金流量表上的期末现金余额等于___
  • 购买金蝶软件计入什么费用
  • 营改增对建筑业的影响
  • 奖金部分
  • 新版增值税开票软件怎么下载
  • 支付劳务报酬怎么做账
  • 图书出版费开票怎么开
  • 固定资产报废税费怎么处理
  • 职工报销差旅费会计科目
  • 研发支出与开发成本的区别
  • 什么时候计提减值
  • 合伙企业分配比例税法规定
  • 土地出让金怎么入账
  • 发改委规定电网企业职工福利费
  • 所得税申报表中的营业成本包括费用吗
  • 被强制升为一般纳税人的条件
  • 一次性收取一年服务费怎么确定收入
  • 预提待摊费用怎么做账
  • 建筑工程总包分包的内容
  • 养殖专业合作社业务范围包括哪些
  • windows10 20h2 2004
  • 差错更正未来适用法
  • qbupdate.exe - qbupdate是什么进程 有什么作用
  • php处理ajax
  • 支付公司保洁费未开发票
  • 支付挂靠方的管理费用有进项吗?
  • 老板垫付的货款会计分录
  • 最小型笔记本
  • 外企采购回扣普遍吗
  • 部署文档
  • php声明一个类
  • 固定资产如何抵成本
  • 一般纳税人取得普票会计分录
  • php bool
  • 财务费用为负数是好事还是坏事
  • phpmailer 使用
  • 残保金计入税金还是管理费用
  • 增值税专用发票丢了怎么补救
  • 印花税的花贴在哪里
  • 企业用户怎么在电脑登录
  • 债券发行的分录
  • 学电脑网站
  • 公司车辆出售要交多少税
  • 经营所得预缴申报收入总额
  • 会展服务打印费怎么算
  • 开负数发票的规定是有?
  • 申请电子发票需要什么条件
  • 核定征税是什么意思
  • 汇算清缴后取得上一年发票
  • 备用金预期有什么影响
  • 公司注销其他应收款余额要交税吗
  • 微信支付属于现金支付还是转账支付
  • 制造费用和管理费用怎么结转
  • 规范专户资金使用
  • 毛利润包括什么
  • 年度报告应包括哪些
  • 往来款做其他应收还是其他应付
  • 如何查看连接网络的密码
  • 64位 win10系统安装绿色版mysql-5.7.16-winx64的教程
  • mysql 5.7.9 winx64在windows上安装遇到的问题
  • 批量修改 sql
  • 发生意外错误无法完成您的请求
  • XP IIS5.1 + PHP 5.2.1 + MySQL 5.0.37 + Zend 3.2.6 + phpMyAdmin-2.10.0.2环境配置
  • windows 10 20h2推送
  • linux系统怎么隐藏文件
  • 微信小程序支付的钱怎么退款
  • shell监控进程
  • unityprefab
  • nodejs开启多线程
  • javascriptz
  • 上海市税务局的电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设