第十三届蓝桥杯(Web应用开发)模拟赛大学组第二场

原创已于 2022-03-27 13:26:49 修改 · 3k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #echarts #前端 #vue.js

于 2022-03-27 13:25:08 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

本文分享了第十三届蓝桥杯大学组Web应用开发模拟赛的题目解析，涵盖卡片化标签页、随机数生成器、个人博客等10个题目。文章强调了原生JS操作DOM、CSS基本概念、Echarts使用、数组过滤方法在解题中的应用，并提供了部分代码示例。

文章目录

蓝桥杯大学组模拟赛第二场(web)

蓝桥杯大学组模拟赛第二场(web)

楼主也是今年参加蓝桥杯web的一名大学生，分享记录下本次模拟题的解析，希望对大家有帮助。（ps：楼主比较喜欢数组的过滤，所以本次能用到过滤的地方都优先使用该方法）

01 卡片化标签页

这里考察原生js的tab栏切换，操作dom要比较熟练，xdm眼熟吗？这是pink老师教的方法，楼主再贴一下jQuery实现，虽然没考。

原生js（题目要求）

var lis = document.querySelectorAll('.tabs div');
    var items = document.querySelectorAll('#content div');
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i);
        lis[i].onclick = function() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'active';
            var index = this.getAttribute('index');
            console.log(index);
            for (var i = 0; i < items.length; i++) {
                items[i].className = '';
            }
            items[index].className = 'active';
        }

    }

jQuery实现（楼楼感觉jQuery代码简单很多）

$(function() {
        $('.tabs div').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            var index = $(this).index();
            // $('#content div').eq(index).addClass('active').siblings().removeClass('active');
            $('#content div').eq(index).show().siblings().hide()
        })
    })

02 随机数生成器

题目要求生成不重复的随机数，楼主用了比较离谱的方法，遍历每个数前面的元素，相等的时候重新生成随机数，楼主手动点了接近10分钟的刷新，没得问题。

/**
 * 封装函数，函数名 getRandomNum(min,max,countNum)
 * 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
 */
//生成指定数目和范围的随机数
const getRandomNum = function(min, max, countNum) {
    var arr = [];
    // 在此处补全代码
    for (var i = 0; i < countNum; i++) {
        arr[i] = Math.ceil(Math.random() * (max - min))
        for (var j = 0; j < i; j++) {
            if (arr[j] == arr[i]) {
                arr[i] = Math.ceil(Math.random() * (max - min))
            }
        }
    }
    return arr;
};
module.exports = getRandomNum; //请勿删除

03 个人博客

本题考察CSS基本概念

/* TODO:banner 上的文字 需要居中显示 */

.home-wrapper .banner .banner-conent .hero {
    margin-top: 3rem;
    text-align: center;
}


/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */

.main-wrapper {
    display: flex;
    margin: 1.5rem auto 0 auto;
    max-width: 1100px;
    padding: 0 0.9rem;
    box-sizing: border-box;
    position: relative;
}


/*/* TODO 宽度自适应 居左显示 */

.main-wrapper .main-left {}


/* 宽 245px 居右显示 */

.main-wrapper .main-right>* {
    box-sizing: border-box;
    width: 245px;
}

04 学生成绩统计

这题考察echarts的基本概念，不会的也可以乱试，乱试也是一种前端技巧。（反正就在x 和y哪里试就行）

// TODO:待补充修改代码，定义x轴数据,并让数据正确显示
            // y轴
            xAxis: {
                data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],
            },
            yAxis: {

            },
            series: [{
                name: "成绩",
                type: "bar",
                data: [55, 90, 65, 70, 80, 63],
            }, ]

05 水果摆盘

xdm，这种题可以试出来，当你考试不会的时候，给了你2个属性，还给你了属性的可能取值，你可以乱试，总共也没几种可能，所以这种送分题一定要收下。

/* 菠萝 TODO 待补充代码 */

.yellow {
    align-self: flex-end;
    order: 1;
}

06 给页面化个妆

本题考察CSS综合布局能力

/*TODO：请补充代码*/

.content-container {
    display: flex;
    justify-content: center;
    margin-top: 75px;
}

.content {
    width: 450px;
    height: 600px;
    background-color: rgba(0, 0, 0, .45);
    border-radius: 10px;
}

.content img {
    margin: 0 125px;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.form h2 {
    font-size: 45px;
    text-align: center;
    margin: 0 0 50px;
    font-weight: 800;
    color: #fff;
}

.btns button {
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    font-size: 16px;
    color: white;
    margin: 0 5px;
}

.form form {
    text-align: center;
}

.form input {
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
    color: #000;
    width: 300px;
    margin-bottom: 20px;
    border-color: none;
}

.text {
    text-align: center;
    margin: 5px;
    color: #fff;
    font-size: 16px;
}

.text a {
    color: #fff;
    font-size: 16px;
}

07 小兔子爬楼梯

此题简单分享2种方法：递归和非递归

非递归实现：

const climbStairs = (n) => {
    // TODO：请补充代码
    if (n == 1) return 1;
    if (n == 2) return 2;
    var a, b, c;
    for (var i = 3; i <= n; i++) {
        a = i - 2;
        b = i - 1;
        c = a + b;
    }
    return c;
};
module.exports = climbStairs;

递归实现：

const climbStairs = (n) => {
    if (n == 1 || n == 2) return n;
    else {
        return climbStairs(n - 1) + climbStairs(n - 2)
    }
};
module.exports = climbStairs;

08 时间管理大师

这一题题目并没有要求很严格，你会发现如果你序号哪里如果是用的id，当你从上往下删时，你的id并不会自动更新，还是用的原来的id，但如果用索引的话就会避免类似的问题。
本题主要考察数组的方法，删除和清空哪里我都使用的是数组的过滤，因为博主个人习惯。

<div id="box">
        <div class="head">
            <h2>Todos</h2>
            <p>罗列日常计划，做一个时间管理大师！</p>
            <div class="input">
                <span>内容</span>
                <input type="text" placeholder="请输入你要做的事" v-model="todo" @keyup.enter="adds" />
                <span id="add" @click="adds">确认</span>
            </div>
        </div>

        <ul class="list">
            <li v-show="todoList.length==0">暂无数据</li>
            <li v-for="(todoObj,index) in todoList" :key="todoObj.id">
                <!-- 前面的序号 -->
                <span class="xh ">{{index+1}}</span>
                <!-- 列表内容 -->
                <span>{{todoObj.title}}</span>
                <!-- 删除按钮 -->
                <span class="qc " @click="removeTodo(todoObj.id)"></span>
            </li>
            <li v-show="todoList.length>0">
                <b> 总数：{{todoList.length}} </b>
                <b id="clear " @click="removeAll">清除</b>
            </li>
        </ul>
    </div>

 var top = new Vue({
            el: "#box ",
            // 在此处补全代码，实现所需功能
            data() {
                return {
                    todo: '',
                    todoList: [],
                }
            },
            methods: {
                adds() {
                    if (!this.todo.trim()) {
                        this.todo = '';
                        return;
                    }
                    const todoObjs = {
                        id: this.todoList.length + 1,
                        title: this.todo,
                    }
                    this.todoList.push(todoObjs)
                    this.todo = '';
                },
                removeTodo(id) {
                    this.todoList = this.todoList.filter((value) => {
                        return value.id !== id;
                    })
                },
                removeAll() {
                    this.todoList = this.todoList.filter((value) => {

                    })
                }
            },

        });

09 购物车

本题就简单的考察了axios请求本地json数据和vue基本指令。

<div class="container" id="app">
        <h4>购物车</h4>
        <!--TODO 购物车列表 -->
        <div v-for="item in carlist" :key="item.id">
            <div class="box-card">
                <!-- 商品图片 img -->
                <img :src="item.img">
                <div>
                    <span>
						<!-- 商品名称 name -->
                        {{item.name}}
					</span>
                    <div class="bottom clearfix">
                        <button type="text" class="button">+</button>
                        <button type="text" class="button">
							<!-- 商品数量 num -->
                            {{item.num}}
						</button>
                        <button type="text" class="button">-</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

new Vue({
            el: "#app",
            data: {
                carlist: [] //购物车列表
            },
            created() {
                //TODO 使用axios  请求购物车列表
                axios.get("carList.json").then(resolve => {
                    this.carlist = resolve.data;
                }).catch();
            },
        })

10 菜单树检索

添加颜色我定义了一个yellow类，本题主要考axios请求加多级模糊查询，博主虽然很菜，但是很喜欢用数组的过滤，因为感觉代码相对较少。主要解题思路就是：根据v-model双向绑定的search跟数组里面的title属性来匹配，如果相等的话，就是本题要查询的内容。

<style>
        input {
            width: 200px;
            height: 32px;
            padding-left: 5px;
        }
        
        .yellow {
            background-color: yellow;
        }
</style>

<!-- 需求：输入待查找的字段，输出包含该字段的所有菜单数据。
    1、若该菜单有父级菜单，则返回其父级菜单及同胞菜单。
    2、若该菜单有子级菜单，则返回该菜单及其下子级菜单。
    3、若该菜单既无父级也无子级，则返回菜单本身即可。
    测试字段：查询、首页、管理、配置、维护 -->
    <div id="app">
        <input type="text" placeholder="请输入要搜索的菜单内容" v-model:value="search" />
        <ul v-for="item in filteredList" :key="item.index">
            <li>
                <span :class="{yellow:item.meta.title.match(search)&&search!=''}">{{item.meta.title}}</span>
                <ul>
                    <li v-for="items in item.children" :key="items.index">
                        <span :class="{yellow:items.meta.title.match(search)&&search!=''}">{{items.meta.title}}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

const app = new Vue({
    el: "#app",
    // 在此处补全代码，实现二级菜单搜索功能
    data() {
        return {
            dataList: [],
            search: ''
        }
    },

    created() {
        axios.get('../data.json').then(resolve => {
            this.dataList = resolve.data;
        }).catch()
    },

    computed: {
        filteredList() {
            return this.dataList.filter(value => {
                let flag = false;
                if (value.meta.title.match(this.search)) {
                    flag = true;
                }
                if (value.children) {
                    value.children.filter((val) => {
                        if (val.meta.title.match(this.search)) {
                            flag = true;
                        }
                    })
                }
                return flag;
            })
        }
    }
});