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

第十四届蓝桥杯（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 趣购

<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>
    
    <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).length
          return 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 数组生成分页组件的字符串模板 template
  indexArr.forEach((v, k) => {
    // 添加允许添加 ...  
    if (this.totalPages === v && this.currentPage <= this.totalPages - (this.pagerCount - 2))
      template += `
...`
    template += `
${this.currentPage === v ? 'active' : null}">${v}`
    if (indexArr[1] >= this.pagerCount - 2 && k === 0)
      template += `
...`
  })
  this.root.innerHTML = `
      

          
<
          
${template} 
          
>
      `
}

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

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

createPaginationIndexArr() 创建分页数组

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

  if (!initArr.includes(currentPage)) {
    indexArr.push(1)
    if (currentPage > totalPages - initArr.length) {
      let min = initArr.length
      for (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 虚拟滚动列表

<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">
      <li
        v-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.data
      this.totalHeight = res.data.length * this.itemHeight
    })
  },
  computed: {
    listOffY() { // 列表容器偏移量
      let offY = (this.start - this.buffer) * this.itemHeight
      if (this.start < this.buffer) offY = 0
      return { 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>