第十四届蓝桥杯全国软件和信息技术专业人才大赛（Web 应用开发）

# 第十四届蓝桥杯全国软件和信息技术专业人才大赛（Web 应用开发） # 国赛（大学组） ## 试题列表和分值 试题序号、试题名称及基础源代码文件夹名称对应如下： - 01 植物灌溉（5 分） - 02 萌宠小玩家（5 分） - 03 element-ui 轮播图组件二次封装（10 分） - 04 抢红包啦（10 分） - 05 讨论区（15 分） - 06 github contribution（15 分） - 07 文本查重小能手（20 分） - 08 找到未引用的图片（20 分） - 09 表单生成器（大学组）（25 分） - 10 恶⻰与公主（25 分） ## 试题提交说明 1. 考试给出题目压缩包中包含 PDF 题面，和 10 道题目的基础代码子文件夹，和题目序号一一对应。 2. 考生需根据题意和目标，在考试给出的基础代码上新增、修改代码。请勿修改给出代码文件夹名称，层次结构。 3. 相应题目的代码完成之后，考生需将题目对应代码文件夹压缩成 `zip` 或 `rar` 格式后上传提交，其他格式为 0 分。例如 01 代码文件夹，应该在此文件夹基础上直接压缩后，为 `01.zip`，然后提交压缩包到对应题目。请注意不要给压缩包添加密码。 4. 请务必严格按照规范提交题目代码，否则会造成无法被系统正确判分。 # 植物灌溉 ## 介绍 朋友花园内的植物严重缺水，急需你的帮助，让我们用目前 CSS3 中新增的 Grid 布局去完成灌溉任务吧！ ## 准备 开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： ``` ├── css ├── images └── index.html ``` 其中： - `images` 是图片文件夹。 - `css/style.css` 是需要补充样式的文件。 - `index.html` 是主⻚面。 ## 目标 请使用 Grid 布局中的 `grid-area` 属性完善 `css/style.css` 中的 TODO 代码，帮助你的朋友顺利完成植物灌溉。 ### 提示： ```css grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; grid-area: 1 / 2 / 3 / 4; ``` ## 规定 请勿修改 `css/style.css` 文件外的任何内容。 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。 ## 判分标准 本题完全实现题目目标得满分，否则得 0 分。 # 萌宠小玩家 ## 介绍 萌宠小玩家是一款宠物养成类游戏，玩家在游戏中，可以通过给宠物换衣服、跟它玩、吃零⻝跟宠物进行互动交流。在萌宠小玩家中，玩家可以体验到养成宠物的乐趣，同时也可以结交新朋友，分享自己的养宠心得，是一款适合所有年龄段玩家的休闲娱乐游戏。 ## 准备 开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： ``` ├── css ├── effect.gif ├── images ├── index.html └── js └── index.js ``` 其中： - `index.html` 是主⻚面。 - `css` 是存放项目样式的文件夹。 - `images` 是存放项目图片的文件夹。 - `effect.gif` 是项目完成后的效果图。 - `js/index.js` 是需要补充代码的 js 文件。 ## 目标 请在 `js/index.js` 文件中补全代码，具体需求如下： 1. 完善 `verifyName` 方法，在点击穿衣服、不穿衣服、跟它玩、吃零⻝按钮（四个按钮均已绑定点击 事件）时，如果宠物昵称输入框（`(^) id=nickname`）的值不存在，则显示报错信息 （`id=vail_name`）元素；如果该值存在，则将其赋给宠物实例（`pet`）的 name 属性，并隐藏报 错信息（`(^) id=vail_name`）元素。 2. 如果宠物昵称存在，则点击穿衣服、不穿衣服、跟它玩、吃零⻝按钮（四个按钮均已绑定点击事 件）均会记录不同的日志。现在需要完善 `showLog` 方法，实现宠物互动记录。 `showLog` 方法的参 数 record 表示要记录的互动消息。最多记录 10 条最新的互动消息，并将最新的互动消息记录在 最上面。每一条日志都应添加到日志列表元素（`id=list`）中，DOM 结构如下： ```html // DOM 结构必须按照此写法 <div id="list"> <!-- 最新的互动在最上面且只能记录 10 条 --> <div>第 2 次互动：你喂小蓝吃了零⻝，体重 +1kg</div> <div>第 1 次互动：你喂小蓝吃了零⻝，体重 +1kg</div> </div> ``` 最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。 ## 规定 请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。 ## 判分标准 - 完成目标 1 ，得 3 分。 - 完成目标 2 ，得 2 分。 # element-ui 轮播图组件二次封装 ## 介绍 element-ui 的轮播图指示点样式默认为⻓条状，在某些场景下不一定符合设计的要求。如果在某个项 目中我们需要使用自定义的指示点，在每个用到轮播图的位置都去写一份自定义指示点的逻辑显然是没 有必要的，因此我们可以对组件进行二次封装。 本题需要二次封装一个自定义指示点的 element-ui 轮播图组件。 ## 准备 开始答题前，需要先打开本题的项目代码文件夹，目录结构如下： ``` ├── css │ └── style.css ├── effect.gif ├── element-ui-2.15. │ ├── element-ui.min.js │ └── index.css ├── images ├── index.html ├── js │ ├── http-vue-loader.min.js │ └── vue.min.js └── my-carousel.vue ``` 其中： - `css/style.css` 是样式文件。 effect.gif 是⻚面最终的效果图。 - `element-ui-2.15.10` 是 element-ui 组件库的代码。 - `images` 是图片文件夹。 - `index.html` 是主⻚面。 - `js/vue.min.js` 是 vue 文件。 - `js/http-vue-loader.min.js` 用于加载 `.vue` 文件的库。 - `my-carousel.vue` 是待补充的轮播图组件代码。 请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。 **注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。** ## 目标 请在 `my-carousel.vue` 文件中补全代码，具体需求如下： 1. 修改 template 模版和 script 脚本内容，使⻚面展示与图片数量对应的指示点，并使指示点的样式变化和轮播图切换同步（例如当展示到第四张图片时，就给第四个指示点添加 `.active` 类）。 2. 当用户点击某个指示点时，将轮播图切换到指示点对应的图片。 最终效果可参考文件夹下面的 gif 图，图片名称为 `effect.gif`（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。 实现上述功能所需的 API 如下： `Carousel` 事件参数： | 事件名称 | 说明 | 回调参数 | | -------- | ---------------- | ------------------------------------- | | `change` | 幻灯片切换时触发 | 目前激活的幻灯片的索引,原幻灯片的索引 | 使用示例： ```vue <template> <el-carousel ... @change="onCarouselChange"> ... </el-carousel> </template> ``` ```js <script> module.exports = { ... methods: { onCarouselChange(index) { // 该方法会在轮播图切换至第二⻚时打印 1 ，第三⻚时打印 2 ，以此类推 console.log(index); }, }, }; </script> ``` `Carousel` 方法： `setActiveItem` 手动切换幻灯片，需要切换的幻灯片的索引，从 0 开始 使用示例： ```vue <template> <el-carousel ... ref="carousel"> ... </el-carousel> </template> ``` ```js <script> module.exports = {