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

题解为第十四届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组，博主只是个专科生，技术有限，有不妥的地方，希望有大佬可以指正。

01 凭空消失的TA

这题在控制台看一眼网络请求就知道哪出错了，很基础

<!-- 引入正确地址的 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 芝麻开门

主要考察 Promise 的两种状态，稍微了解 Promise 的小伙伴都能很快做出来

// TODO：待补充代码
div.innerHTML = template
document.querySelector('body').appendChild(div) // 添加弹窗盒子
// 返回一个 Promise
return new Promise((resolve, reject) => {
  document.querySelector('#confirm').onclick = () => {// 给 确定按钮 绑定点击事件
    document.querySelector('body').removeChild(div) // 移除弹窗
    resolve(document.querySelector('input').value)
  }
  document.querySelector('#cancel').onclick = () => { // 给 取消按钮 绑定点击事件
    document.querySelector('body').removeChild(div) // 移除弹窗
    reject(false)
  }
})

04 宝贵的一票

这题主要是操作 dom ，略微有一点点麻烦，但是没难度

let initRender = (txt) => {
  return `<div class="mb-3 row">
            <label class="col-sm-2 col-form-label txt">${txt}</label>
            <div class="col-sm-9">
                <input type="text" class="form-control">
            </div>
        </div>`;
};
const delIcon = `
    <div class="col-sm-1">
      <img class="del-icon" src="./images/x.svg" alt="" />
    </div>
    `
$(
  (function () {
    // 初始化的时候渲染两条数据，且不带删除符号
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`选项${index + 1}`);
      $(".list").append(initList);
    }

    // 点击加号逻辑
    $(".add").click(function () {
      // TODO 待补充代码
      const index = parseInt($(".list>div:last-child label").text().charAt(2))
      let initList = initRender(`选项${index + 1}`);
      $(".list").append(initList);
      const len = $(".list>div").length
      if (len > 2) {
        $(".list>div").each((k, e) => {
          const is = $(e).find('img').length
          if (!is) $(e).append(delIcon)
        })
      }
    })
    // 点击 x 删除逻辑，列表小于 2 项时不显示删除图标
    $(document).on("click", ".del-icon", function () {
      // TODO 待补充代码
      $(this).parents()[1].remove()
      $('.list label').each((k, e) => e.innerHTML = `选项${k + 1}`)
      const len = $(".list>div").length
      if (len <= 2)
        $('.list img').each((k, e) => $(e).parent().remove())
    })
  })()
);

05 粒粒皆辛苦

这题考察数据处理能力，博主的解题方法比较笨

// 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 资讯接口

考察 nodejs 的 http 模块，比较基础，学过 nodejs 的话很快就能做出来

// TODO: 待补充代码
const http = require('http')
const server = http.createServer()

server.on('request', (req, res) => {
  const url = req.url
  if (url === '/news') {
    res.setHeader('Content-type', 'text/html;charset=utf8')
    res.end(`
            [
                {
                "channelId": "5572a108b3cdc86cf39001cd",
                "name": "国内焦点"
                },
                {
                "channelId": "5572a108b3cdc86cf39001ce",
                "name": "国际焦点"
                }
            ]`)
  } else {
    res.end('404')
  }
})

server.listen(8080, () => {
  console.log('server running ... ')
})

08 绝美宋词

这题是道综合题，主要考察点在于 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>

09 平地起高楼

这题的考察点在于 数据结构转换 ，将平铺结构转为树状结构，没有写过相关代码的话还是比较头疼的，博主一开始也想了好久

解题思路：使用数组API filter() 过滤符合 参数 rootId 的子项，再利用 map() 遍历子项并给其 children属性递归赋值

function convertToTree(regions, rootId = '0') {
  return regions
    .filter(item => item.pid === rootId)
    .map(item => ((item.children = convertToTree(regions, item.id)), item))
}

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
}