第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组题解

友情链接

第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组
第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组
第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组
第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组
第十三届蓝桥杯大赛（Web 应用开发）国赛-职业院校组
第十三届蓝桥杯大赛（Web 应用开发）省赛-职业院校组

01 网页PPT

function switchPage(e) {// TODO: 请补充该函数，实现根据activeIndex切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加disable类$('section').eq(activeIndex).show().siblings().hide()$('.btn.left').toggleClass('disable', activeIndex === 0)$('.btn.right').toggleClass('disable', activeIndex + 1 === sectionsCount)$('.page').text(`${activeIndex + 1} / ${sectionsCount}`)
}

02 西游记之西天取经

  /* TODO 填空 */animation: a1 0.8s steps(8) infinite; /* 给所有的 animation 属性添加上 infinite 属性值 */

03 商品销量和销售额实时展示看板

// 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.saleObj)
charData.series[0].data = Object.values(result.data.saleObj)
charData.series[1].data = Object.values(result.data.countObj)

04 蓝桥校园一卡通

submit.onclick = () => {// TODO 待补充代码const id = studentId.value // 获取学号const name = studentName.value // 获取姓名const collegeStr = college.value // 获取学院// 定义正则验证对象const idReg = /^\d{1,12}$/const nameReg = /^[\u4e00-\u9fa5]{2,4}$/// 验证输入文本格式是否符合要求const idCheck = idReg.test(id)const nameCheck = nameReg.test(name)// 获取提示文本dom节点const vail_name = document.querySelector('#vail_name')const vail_studentId = document.querySelector('#vail_studentId')if (!nameCheck) { // 验证姓名vail_name.style.display = 'block'studentName.parentNode.classList.add('has-error')}if (!idCheck) { // 验证学号vail_studentId.style.display = 'block'studentId.parentNode.classList.add('has-error')}if (nameCheck && idCheck) { // 姓名学号都符合要求展开卡片vail_name.style.display = 'none' // 姓名输入框提示文本隐藏vail_studentId.style.display = 'none' // 姓名输入框提示文本隐藏// 渲染数据item[0].innerHTML = `姓名：${name}`item[1].innerHTML = `学号：${id}`item[2].innerHTML = `学院：${collegeStr}`// 添加 showCard 类显示放大一卡通的动画，请勿删除cardStyle.classList.add('showCard')}}

05 会员权益领取中心

此题略…

06 心愿便利贴

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' }],
},

07 消失的 Token

// TODO 修改下面错误代码
var app = new Vue({el: '#app',data () { },computed: {welcome () {return store.getters.welcome},// 因为开启了命名空间需要拼上 user/ 前缀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', '登录成功，欢迎你回来！')}}
})
</script>

08 趣购

<!-- TODO: 补充拖拽事件，请不要改动任何 id 属性 -->
<template><div class="container"><div class="good-list"><div v-for="good in goods" :key="good.name" @dragstart="dragstartHandler" class="good"><img :src="good.cover" /><span>{{ good.name }}</span><span>￥{{ good.price }}</span></div></div><!-- @dragover.prevent取消拖拽释放默认事件 --><div id="trolley" class="trolley" @dragover.prevent @drop="dropHandler"><span id="bought" class="bought" v-if="bought.length !== 0">{{ bought.length }}</span><img src="./images/trolley.jpeg" /></div><div class="result"><div>购物车商品：<span id="goods">{{ goodsDetail }}</span></div><div>购物车商品总计：<span id="total">{{ totalPrice }}</span></div></div></div>
</template>
<script>
module.exports = {data() {return {goods: [...], // 数据省略...bought: [],good: {},}},// TODO: 请补充实现代码computed: {totalPrice() {// 计算商品总价return this.bought.reduce((pre, cur) => pre + cur.price, 0)},goodsDetail() {// 拼接购物车字符串return this.goods.map(item => item.name).reduce((pre, cur) => {const count = this.bought.filter(item => item.name === cur).lengthreturn count === 0 ? pre : `${pre} ${cur}*${count}`}, '')},},methods: {dragstartHandler($event) {const e = $event.target.parentNode.children // 获取当前拖拽元素this.good.name = e[1].innerText // 获取商品名this.good.price = Number(e[2].innerText.slice(1)) // 获取商品价格},dropHandler() {this.bought.push(this.good) // 购物车列表中添加一个商品this.good = {} // 将当前商品置空},},
}
</script>

09 分页组件

ajax() 数据请求

async function ajax({ url, method = 'get', data, query: { currentPage, pageSize } }) {// TODO:根据函数参数 `query` 对象  `currentPage, pageSize` 获得当前页的数据let result = { data: [], total: 0 }await axios({ url, method }).then(res => {result.data = res.data.data.slice((currentPage - 1) * pageSize, currentPage * pageSize)result.total = res.total})return result
}

renderPagination() 分页按钮渲染

renderPagination(indexArr) {let template = '' // TODO: 根据 indexArr 数组生成分页组件的字符串模板 templateindexArr.forEach((v, k) => {// 添加允许添加 ...  if (this.totalPages === v && this.currentPage <= this.totalPages - (this.pagerCount - 2))template += `<li class="number more">...</li>`template += `<li class="number ${this.currentPage === v ? 'active' : null}">${v}</li>`if (indexArr[1] >= this.pagerCount - 2 && k === 0)template += `<li class="number more">...</li>`})this.root.innerHTML = `<div class="pagination"><div class="btn btn-left" id="btn-prev">&lt;</div><ul class="pager">${template} </ul><div class="btn btn-right" id="btn-next">&gt;</div></div>`
}

initEvents() 分页按钮事件绑定与数据切换

initEvents() {this.root.querySelector('#btn-prev').addEventListener('click', () => {// TODO:"<" 按钮的点击事件， 点击时 this.currentPage - 1this.currentPage = this.currentPage === 1 ? 1 : this.currentPage - 1this.initPagination()})this.root.querySelector('#btn-next').addEventListener('click', () => {// TODO:">" 按钮的点击事件， 点击时 this.currentPage + 1this.currentPage =this.currentPage === this.totalPages ? this.totalPages : this.currentPage + 1this.initPagination()})this.root.querySelector('.pager').addEventListener('click', e => {...})
}

createPaginationIndexArr() 创建分页数组

const createPaginationIndexArr = (currentPage, totalPages, pagerCount) => {// TODO：根据传参生成分页数组 indexArrlet indexArr = []// 初始化一个最大页码数-2的数组const initArr = Array.from(Array(pagerCount - 2).keys(), n => n + 1)// 判断当前页是否为 pagerCount - 2if (initArr.includes(currentPage)) {indexArr = initArr// 如果总页数大于或等于最大按钮书减一则添加一个按钮if (totalPages >= pagerCount - 1) indexArr.push(pagerCount - 1)}// 如果总页数小于最大按钮数直接返回if (totalPages < pagerCount) return indexArrif (!initArr.includes(currentPage)) {indexArr.push(1)if (currentPage > totalPages - initArr.length) {let min = initArr.lengthfor (let i = 0; i < pagerCount - 1; i++) {indexArr.push(totalPages - min)min--}return indexArr}for (let i = 0; i < pagerCount - 2; i++) {indexArr.push(currentPage + (i - Math.floor(initArr.length / 2)))}}indexArr.push(totalPages)return indexArr
}

10 虚拟滚动列表

<!-- TODO：补全 scroll 事件及其相关属性 -->
<template><div id="virtual-list" class="virtual-list" @scroll="scroll_handler"><div id="scroll-container" :style="{ height: totalHeight + 'px' }"></div><ul id="list" class="list" :style="listOffY"><liv-for="item in showingList":key="item":style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">{{ item }}</li></ul></div>
</template>
<script>
module.exports = {data() {return {itemHeight: 60, // 每个列表项的高度，请勿更改length: 10, // 列表项可视范围内的个数，请勿更改buffer: 5, // 列表项可视范围外，防止出现白屏的 buffer 个数，上方 5 个，下方 5 个，可作为优化项实现list: [],totalHeight: 0,scrollTop: 0,start: 0,}},mounted() {// TODO: 完成数据请求axios.get('./data.json').then(res => {this.list = res.datathis.totalHeight = res.data.length * this.itemHeight})},computed: {listOffY() { // 列表容器偏移量let offY = (this.start - this.buffer) * this.itemHeightif (this.start < this.buffer) offY = 0return { transform: `translateY(${offY}px)` }},showingList() { // 页面渲染数组const startIndex = Math.max(this.start - this.buffer, 0) // 起始下标const endIndex = Math.min(this.length + this.buffer + this.start, this.list.length) // 结束下标return this.list.slice(startIndex, endIndex)},},methods: {// TODO: 完成事件处理scroll_handler($e) {this.scrollTop = $e.target.scrollTop // 获取当前滚动条位置this.start = Math.floor(this.scrollTop / this.itemHeight) // 计算当前页面第一个元素下标},},
}
</script>

第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组题解相关推荐

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴
文章目录 1:网页PPT (5分) ✔✔✔ 2:蓝桥校园一卡通 (10分)✔✔✔ 3:心愿便利贴 (15分) ✔✔✔ 1:网页PPT (5分) ✔✔✔ switchPage( ) switchPage ...
2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题
前言: 因博主申请的线上考试所以留下了真题,本篇文章只有题目没有答案,因博主技术有限(请理解一下),博主只拿了省二蓝桥杯真题网盘地址: 链接:https://pan.baidu.com/s/1x_J ...
第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-职业院校组-知识点题解
这个题解是参考了"海底烧烤店ai"一位非常优秀的全栈领域创作者的博主写的,自己在看的时候发现个人知识点比较欠缺,所以就在题解下面添加了一些知识点,便于理解. 原博主的文章链接如下: ...
蓝桥杯 Web 应用开发模拟赛首次公开！参赛选手速进！
第十三届蓝桥杯大赛报名通道正式开启,你行动起来了吗? 很多细心的小伙伴一定看到了,这届蓝桥杯大赛中新增了 Web 应用开发组.这是 Web 应用开发首次出现在杯赛中,所以没有历年真题可以供参赛选手刷题 ...
【蓝桥杯Web】第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-职业院校组 | 精品题解
【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（上）
第十四届蓝桥杯要开始了（2022年）
今天来安利一个计算机类的算法比赛,不能说是"安利",因为基本上每一个计算机专业的学生都知道这个比赛. 这个比赛的名气大到根本不需要我安利.... 1.多去参加一些竞赛或者社团活动 ...
2022 第十四届蓝桥杯模拟赛第一期（题解与标程）
第十四届蓝桥杯模拟赛第一期 1. 二进制位数问题描述答案提交参考答案 2. 晨跑问题描述答案提交参考答案 3. 调和级数问题描述答案提交参考答案程序验证 4. 山谷问题描述答案 ...
第十四届蓝桥杯第一期模拟赛 python
第十四届蓝桥杯python第一期模拟赛文章目录第十四届蓝桥杯python第一期模拟赛 1. 二进制位数问题描述答案提交思路参考答案 2. 晨跑问题描述答案提交思路参考答案 3. 调 ...

第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组题解

第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组题解

01 网页PPT

02 西游记之西天取经

03 商品销量和销售额实时展示看板

04 蓝桥校园一卡通

05 会员权益领取中心

06 心愿便利贴

07 消失的 Token

08 趣购

09 分页组件

ajax() 数据请求

renderPagination() 分页按钮渲染

initEvents() 分页按钮事件绑定与数据切换

createPaginationIndexArr() 创建分页数组

10 虚拟滚动列表

第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组题解相关推荐

最新文章

热门文章