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

以下是第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-职业院校组题解；博主只是个专科生，技术有限，题都是自己苦思冥想写出来的；官网检测全部通过，仅供大家参考。

01 凭空消失的TA

这题在控制台看一眼网络请求就知道哪出错了，element-ui 引入地址写错了，很基础

<!-- 引入正确地址的 element-ui 脚本 -->
<script src="./element-ui-2.15.10/index.js"></script>

02 用户名片

主要考察 css ，水平垂直居中，有多种实现方式，这里提供了 绝对定位 和 flex弹性盒 两种题解

/* 第一种：通过绝对定位实现 */
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 第二种：通过弹性盒实现 */
body,
.user-card{
  display: flex;
  justify-content: center;
  align-items: center;
}

03 偷梁换柱

主要考察 JavaScript 代理对象，本题提供两种提交

• 第一种：通过 Object.defineProperty() 方法实现
• 第二种：使用 ES6 新特性，Proxy 对象实现

// 第一种：通过 Object.defineProperty() 实现
let age = 0
Object.defineProperty(person, 'age', {
  get() {
    return age
  },
  set(val) {
    if (val < 0) val = 0
    if (val > 150) val = 150
    age = val
  },
})
// 第二种：通过 Proxy 实现
person = new Proxy(person, {
  get(target, key) {
    if (target[key] < 0) return 0
    if (target[key] > 150) return 150
    return target[key]
  }
})

04 大电影

主要考察使用 JQuery 进行 Dom操作，细心即可，没难度

// TODO：待补充代码
$('.card-body-option-favorite img').click(function () {
  this.src = this.src.includes('hollow') ? './images/solid.svg' : './images/hollow.svg'
  if (this.src.includes('solid')) {
    $('#toast__container').show()
    setTimeout(() => $('#toast__container').hide(), 2000)
  }
})
$('.toast__close').click(() => $('#toast__container').hide())

05 粒粒皆辛苦

这题是数据处理和 echarts 结合的综合题，蓝桥 echarts 题的惯用方式，主要考察数据处理能力，博主的解题方法比较笨，仅供参考

// TODO: 待补充代码
axios.get('./data.json').then(res => {
  // 获取数据
  const data = res.data.data
  // 初始化数据数组
  const year = ['全部']
  const corn = ['玉米']
  const wheat = ['小麦']
  const soybean = ['大豆']
  const potato = ['马铃薯']
  // 解析获取到的数据
  for (k in data) {
    year.push(k) // 解析年份
    for (k2 in data[k]) {
      if (k2 === 'corn') corn.push(data[k][k2]) // 解析玉米数据
      if (k2 === 'wheat') wheat.push(data[k][k2]) // 解析小麦数据
      if (k2 === 'potato') potato.push(data[k][k2]) // 解析马铃薯数据
      if (k2 === 'soybean') soybean.push(data[k][k2]) // 解析大豆数据
    }
  }
  // 将解析的数据合并
  const source = new Array(year, wheat, soybean, potato, corn)
  // 修改图表数据
  option.dataset.source = source
  // 重新设置图标
  myChart.setOption(option)
})

06 618 活动

此题略...

07 绝美宋词

这题是道综合题，主要考察点在于 axios、数据过滤、v-html渲染 ，没啥难度，重在细心

<!-- TODO：待补充代码 -->
<div class="search-form">
  <input type="text" id="search" class="search" placeholder="词牌名 词句 词人" v-model="keyword" />
  <ul class="suggestions">
    <li v-for="item in dataList">
      <span class="poet" v-html="highlight(item.poetry_content)"></span>
      <span class="title">
        <span v-html="highlight(item.title)"></span>
        -
        <span v-html="highlight(item.author)"></span>
      </span>
    </li>
  </ul>
</div>
<script>
  let vm = new Vue({
    el: '#app',
    // TODO：待补充代码
    data () {
      return {
        keyword: '',
        list: [],
      }
    },
    mounted () {
      axios.get('./data.json').then(res => this.list = res.data)
    },
    computed: {
      dataList () { // 过滤符合条件的数据
        return this.keyword ? this.list.filter((e) =>
          e.poetry_content.includes(this.keyword) ||
          e.title.includes(this.keyword) ||
          e.author.includes(this.keyword)
        ) : []
      },
    },
    methods: {
      highlight (val) { // 返回具有高亮效果的html结构
        // $& 占位符，代表插入匹配的子串
        return val.replaceAll(this.keyword, `<span class="highlight">$&</span>`)
      }
    },
  })
</script>

08 乾坤大挪移心法

返回值是一个函数，只有当rest参数的长度为0时才返回字符串

function mentalMethod(...args) {
  // TODO 待补充代码
  if (args.length) return mentalMethod
  return '战胜峨眉,武当,少林'
}

09 不能说的秘密

主要难点在于，在选择生成四位密码时，且同时包含 大小写字母、数字、特殊符号，需要每一项都做判断；个人觉得自己的这个代码有点不够优雅，希望大佬提出优雅的解决方案。

function generatePassword(lower, upper, number, symbol, length) {
  //TODO：待补充代码
  let result = ''
  while (true) {
    if (upper) result += generateUpper()
    if (result.length === length) break
    if (lower) result += generateLower()
    if (result.length === length) break
    if (number) result += generateNumber()
    if (result.length === length) break
    if (symbol) result += generateSymbol()
    if (result.length === length) break
  }
  return result
}

// 生成26个大写字母数组
const uppers = Array.from(Array(26), (e, i) => String.fromCharCode(65 + i))
// 生成26个小写字符数组
const lowers = uppers.map(e => e.toLowerCase())
// 生成 0 - 9 数组
const numbers = Array.from(Array(10), (e, i) => i)
// 生成特殊字符数组
const symbols = '!@#$%^&*(){}[]=<>/,.'.split('')

// 根据传入的参数生成对应范围随机数
function ran(length) {
  return Math.floor(Math.random() * length)
}
// 随机生成一个大写字母
function generateLower() {
  return lowers[ran(lowers.length)]
}
// 随机生成一个小写字母
function generateUpper() {
  return uppers[ran(uppers.length)]
}
// 随机生成一个数字
function generateNumber() {
  return numbers[ran(numbers.length)]
}
// 随机生成一个特殊字符
function generateSymbol() {
  return symbols[ran(symbols.length)]
}

10 收快递了

这题的考察点在于树状检索，因为题目只有三层，使用 循环 或者 递归 都行，根据自己能力选择，博主使用递归方式，代码仅供参考。

function findRegion(regions, regionName) {
  let result = null
  for (const region of regions) {
    if (region.name === regionName) result = [region.name]
    if (Boolean(region.children.length)) {
      const result = findRegion(region.children, regionName)
      const isAdd = Boolean(result ? result.length : result)
      if (isAdd) return [region.name, ...result]
    }
  }
  return result
}