第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组题解

若始.

已于 2023-04-03 01:11:43 修改

阅读量552

点赞数

分类专栏：蓝桥杯文章标签：蓝桥杯前端 css javascript vue.js

于 2023-04-02 16:10:55 首次发布

本文链接：https://blog.csdn.net/Cai____/article/details/129912313

版权

蓝桥杯专栏收录该内容

7 篇文章 5 订阅

订阅专栏

第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组题解

友情链接

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 封装 Promisefy 函数

const promisefy = fn => {
  // TODO 此处完成该函数的封装
  return (textPath, coding) =>
    new Promise((resolve, reject) => {
      fn(textPath, coding, (err, contrast) => {
        if (err) reject(err)
        resolve(contrast)
      })
    })
}

09 趣购

<!-- 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).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>

10 分页组件

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 += `<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 - 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
}