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

若始.

已于 2023-04-03 01:12:34 修改

阅读量466

点赞数 2

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

于 2023-04-01 22:25:51 首次发布

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

版权

蓝桥杯专栏收录该内容

7 篇文章 5 订阅

订阅专栏

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

友情链接

01凭空消失的TA

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

02【真题练习】用户名片

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

03芝麻开门

// 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宝贵的一票

// 初始化的时候渲染两条数据，且不带删除符号
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资讯接口

// 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【真题练习】绝美宋词

<!-- 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【真题练习】平地起高楼

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
}