{"id":18040595,"url":"https://github.com/overflowcat/lanqiao-2023-web","last_synced_at":"2026-01-06T23:15:25.329Z","repository":{"id":242098548,"uuid":"651830198","full_name":"OverflowCat/lanqiao-2023-web","owner":"OverflowCat","description":"(WIP) 第 14 届蓝桥杯国赛 Web 题解 (2023 年 6 月 10 日)","archived":false,"fork":false,"pushed_at":"2024-05-31T16:42:41.000Z","size":324,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T09:56:12.309Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OverflowCat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-10T08:15:49.000Z","updated_at":"2024-05-31T16:42:44.000Z","dependencies_parsed_at":"2024-05-31T17:17:37.876Z","dependency_job_id":"43d3790e-48a8-43bb-bd5e-aa9fb997d91c","html_url":"https://github.com/OverflowCat/lanqiao-2023-web","commit_stats":null,"previous_names":["overflowcat/lanqiao-2023-web"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OverflowCat%2Flanqiao-2023-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OverflowCat%2Flanqiao-2023-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OverflowCat%2Flanqiao-2023-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OverflowCat%2Flanqiao-2023-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OverflowCat","download_url":"https://codeload.github.com/OverflowCat/lanqiao-2023-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245836415,"owners_count":20680369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-30T15:07:01.803Z","updated_at":"2026-01-06T23:15:25.291Z","avatar_url":"https://github.com/OverflowCat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 第十四届蓝桥杯全国软件和信息技术专业人才大赛（Web 应用开发）\r\n\r\n# 国赛（大学组）\r\n\r\n## 试题列表和分值\r\n\r\n试题序号、试题名称及基础源代码文件夹名称对应如下：\r\n\r\n- 01 植物灌溉（5 分）\r\n- 02 萌宠小玩家（5 分）\r\n- 03 element-ui 轮播图组件二次封装（10 分）\r\n- 04 抢红包啦（10 分）\r\n- 05 讨论区（15 分）\r\n- 06 github contribution（15 分）\r\n- 07 文本查重小能手（20 分）\r\n- 08 找到未引用的图片（20 分）\r\n- 09 表单生成器（大学组）（25 分）\r\n- 10 恶⻰与公主（25 分）\r\n\r\n## 试题提交说明\r\n\r\n1. 考试给出题目压缩包中包含 PDF 题面，和 10 道题目的基础代码子文件夹，和题目序号一一对应。\r\n2. 考生需根据题意和目标，在考试给出的基础代码上新增、修改代码。请勿修改给出代码文件夹名称，层次结构。\r\n3. 相应题目的代码完成之后，考生需将题目对应代码文件夹压缩成 `zip` 或 `rar` 格式后上传提交，其他格式为 0 分。例如 01 代码文件夹，应该在此文件夹基础上直接压缩后，为 `01.zip`，然后提交压缩包到对应题目。请注意不要给压缩包添加密码。\r\n4. 请务必严格按照规范提交题目代码，否则会造成无法被系统正确判分。\r\n\r\n# 植物灌溉\r\n\r\n## 介绍\r\n\r\n朋友花园内的植物严重缺水，急需你的帮助，让我们用目前 CSS3 中新增的 Grid 布局去完成灌溉任务吧！\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── css\r\n├── images\r\n└── index.html\r\n```\r\n其中：\r\n\r\n- `images` 是图片文件夹。\r\n- `css/style.css` 是需要补充样式的文件。\r\n- `index.html` 是主⻚面。\r\n\r\n## 目标\r\n\r\n请使用 Grid 布局中的 `grid-area` 属性完善 `css/style.css` 中的 TODO 代码，帮助你的朋友顺利完成植物灌溉。\r\n\r\n### 提示：\r\n\r\n```css\r\ngrid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;\r\ngrid-area: 1 / 2 / 3 / 4;\r\n```\r\n\r\n## 规定\r\n\r\n请勿修改 `css/style.css` 文件外的任何内容。\r\n\r\n请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。\r\n\r\n## 判分标准\r\n\r\n本题完全实现题目目标得满分，否则得 0 分。\r\n\r\n\r\n# 萌宠小玩家\r\n\r\n## 介绍\r\n\r\n萌宠小玩家是一款宠物养成类游戏，玩家在游戏中，可以通过给宠物换衣服、跟它玩、吃零⻝跟宠物进行互动交流。在萌宠小玩家中，玩家可以体验到养成宠物的乐趣，同时也可以结交新朋友，分享自己的养宠心得，是一款适合所有年龄段玩家的休闲娱乐游戏。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── css\r\n├── effect.gif\r\n├── images\r\n├── index.html\r\n└── js\r\n└── index.js\r\n```\r\n其中：\r\n\r\n- `index.html` 是主⻚面。\r\n- `css` 是存放项目样式的文件夹。\r\n- `images` 是存放项目图片的文件夹。\r\n- `effect.gif` 是项目完成后的效果图。\r\n- `js/index.js` 是需要补充代码的 js 文件。\r\n\r\n## 目标\r\n\r\n请在 `js/index.js` 文件中补全代码，具体需求如下：\r\n\r\n1. 完善 `verifyName` 方法，在点击穿衣服、不穿衣服、跟它玩、吃零⻝按钮（四个按钮均已绑定点击\r\n事件）时，如果宠物昵称输入框（`(^) id=nickname`）的值不存在，则显示报错信息\r\n（`id=vail_name`）元素；如果该值存在，则将其赋给宠物实例（`pet`）的 name 属性，并隐藏报\r\n错信息（`(^) id=vail_name`）元素。\r\n2. 如果宠物昵称存在，则点击穿衣服、不穿衣服、跟它玩、吃零⻝按钮（四个按钮均已绑定点击事\r\n件）均会记录不同的日志。现在需要完善 `showLog` 方法，实现宠物互动记录。 `showLog` 方法的参\r\n数 record 表示要记录的互动消息。最多记录 10 条最新的互动消息，并将最新的互动消息记录在\r\n最上面。每一条日志都应添加到日志列表元素（`id=list`）中，DOM 结构如下：\r\n    ```html\r\n    // DOM 结构必须按照此写法\r\n    \u003cdiv id=\"list\"\u003e\r\n    \u003c!-- 最新的互动在最上面且只能记录 10 条 --\u003e\r\n    \u003cdiv\u003e第 2 次互动：你喂小蓝吃了零⻝，体重 +1kg\u003c/div\u003e\r\n    \u003cdiv\u003e第 1 次互动：你喂小蓝吃了零⻝，体重 +1kg\u003c/div\u003e\r\n    \u003c/div\u003e\r\n    ```\r\n最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n## 规定\r\n\r\n请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。\r\n\r\n## 判分标准\r\n\r\n- 完成目标 1 ，得 3 分。\r\n- 完成目标 2 ，得 2 分。\r\n\r\n# element-ui 轮播图组件二次封装\r\n\r\n## 介绍\r\n\r\nelement-ui 的轮播图指示点样式默认为⻓条状，在某些场景下不一定符合设计的要求。如果在某个项\r\n目中我们需要使用自定义的指示点，在每个用到轮播图的位置都去写一份自定义指示点的逻辑显然是没\r\n有必要的，因此我们可以对组件进行二次封装。\r\n\r\n本题需要二次封装一个自定义指示点的 element-ui 轮播图组件。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── css\r\n│ └── style.css\r\n├── effect.gif\r\n├── element-ui-2.15.\r\n│ ├── element-ui.min.js\r\n│ └── index.css\r\n├── images\r\n├── index.html\r\n├── js\r\n│ ├── http-vue-loader.min.js\r\n│ └── vue.min.js\r\n└── my-carousel.vue\r\n```\r\n其中：\r\n\r\n- `css/style.css` 是样式文件。\r\n effect.gif 是⻚面最终的效果图。\r\n- `element-ui-2.15.10` 是 element-ui 组件库的代码。\r\n- `images` 是图片文件夹。\r\n- `index.html` 是主⻚面。\r\n- `js/vue.min.js` 是 vue 文件。\r\n- `js/http-vue-loader.min.js` 用于加载 `.vue` 文件的库。\r\n- `my-carousel.vue` 是待补充的轮播图组件代码。\r\n\r\n请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。\r\n\r\n**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**\r\n\r\n## 目标\r\n\r\n请在 `my-carousel.vue` 文件中补全代码，具体需求如下：\r\n\r\n1. 修改 template 模版和 script 脚本内容，使⻚面展示与图片数量对应的指示点，并使指示点的样式变化和轮播图切换同步（例如当展示到第四张图片时，就给第四个指示点添加 `.active` 类）。\r\n2. 当用户点击某个指示点时，将轮播图切换到指示点对应的图片。\r\n\r\n最终效果可参考文件夹下面的 gif 图，图片名称为 `effect.gif`（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n实现上述功能所需的 API 如下：\r\n\r\n`Carousel` 事件参数：\r\n\r\n| 事件名称 | 说明             | 回调参数                              |\r\n| -------- | ---------------- | ------------------------------------- |\r\n| `change` | 幻灯片切换时触发 | 目前激活的幻灯片的索引,原幻灯片的索引 |\r\n\r\n\r\n使用示例：\r\n\r\n```vue\r\n\u003ctemplate\u003e\r\n    \u003cel-carousel ... @change=\"onCarouselChange\"\u003e ... \u003c/el-carousel\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\n```js\r\n\u003cscript\u003e\r\nmodule.exports = {\r\n    ...\r\n    methods: {\r\n        onCarouselChange(index) {\r\n            // 该方法会在轮播图切换至第二⻚时打印 1 ，第三⻚时打印 2 ，以此类推\r\n            console.log(index);\r\n        },\r\n    },\r\n};\r\n\u003c/script\u003e\r\n```\r\n\r\n `Carousel` 方法：\r\n\r\n`setActiveItem` 手动切换幻灯片，需要切换的幻灯片的索引，从 0 开始\r\n\r\n使用示例：\r\n\r\n```vue\r\n\u003ctemplate\u003e\r\n    \u003cel-carousel ... ref=\"carousel\"\u003e ... \u003c/el-carousel\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\n```js\r\n\u003cscript\u003e\r\nmodule.exports = {\r\n    ...\r\n    methods: {\r\n        // 调用该方法会使轮播图跳转至第一⻚\r\n        setActive() {\r\n            this.$refs.carousel.setActiveItem(0);\r\n        },\r\n    },\r\n    };\r\n\u003c/script\u003e\r\n```\r\n\r\n最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n## 规定\r\n\r\n请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。\r\n\r\n## 判分标准\r\n\r\n- 完成目标 1 ，得 5 分。\r\n- 完成目标 2 ，得 5 分。\r\n\r\n# 抢红包啦\r\n\r\n## 介绍\r\n\r\n小蓝想给同学们发一个红包，慰劳大家学习前端的辛苦，可是到了开红包这一步，大家收到的红包金额列表竟然一片空白，这可急坏了小蓝，快来帮小蓝解决这个问题吧！\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── css\r\n├── effect.gif\r\n├── images\r\n├── index.html\r\n└── js\r\n├── index.js\r\n└── randomAllocation.js\r\n```\r\n其中：\r\n\r\n- `index.html` 是主⻚面。\r\n- `images` 是图片文件夹。\r\n- `css` 是样式文件夹。\r\n- `js/index.js` 是项目的 js 文件。\r\n- `js/randomAllocation.js` 是需要补充代码的 js 文件。\r\n- `effect.gif` 是项目完成的效果图。\r\n\r\n## 目标\r\n\r\n目前存在的问题是：输入金额和红包个数，点击开红包后原本需要展示的红包金额列表出现一片空白。\r\n\r\n请实现 `js/randomAllocation.js` 文件中 `randomAllocation` 函数，修复此问题。\r\n\r\n`randomAllocation` 函数共接收二个参数，参数 total 为红包总金额，参数 n 为红包个数。抽取到的红包的最小金额为 0.01 元，且最多保留两位小数。每次发放红包的个数为 n ，每个红包的金额随机，最终将本次抽取的所有红包金额组成数组返回。需要注意的是，要确保 n 个红包的金额加起来必须等于总金额 `total`。\r\n\r\n```js\r\n// 例：总金额为 100 元的 10 个红包，函数的返回结果可能如下：\r\n// 示例 1\r\n[23.34, 71.1, 4.97, 0.28, 0.26, 0.01, 0.01, 0.01, 0.01, 0.01]\r\n// 示例 2\r\n[60.81, 15.26, 12.68, 6.75, 2.66, 0.06, 1.16, 0.3, 0.12, 0.2]\r\n```\r\n\r\n最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n## 规定\r\n\r\n请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。\r\n\r\n## 判分标准\r\n\r\n本题完全实现题目目标得满分，否则得 0 分。\r\n\r\n# 讨论区\r\n\r\n## 介绍\r\n\r\n讨论区提供了一个与其他学习者交流和讨论的场所，以便共同探讨和理解各种知识和主题。在讨论区中，学习者可以创建和加入不同的讨论组，参与到热⻔话题的讨论中，也可以发起新的话题和问题。学习者可以分享自己的知识、经验和观点，也可以向其他学习者请教问题和寻求帮助。现邀请你来建设讨论区⻚面，快来发光发热吧。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── css\r\n│ └── style.css\r\n├── data.txt\r\n├── images\r\n├── mark\r\n│ ├── preview\r\n│ └── index.html\r\n└── index.html\r\n```\r\n其中：\r\n\r\n- `css/style.css` 是样式文件。\r\n- `data.txt` 是⻚面用到的文本。\r\n- `images` 是⻚面布局需要用到的图片素材。\r\n- `mark/preview` 是⻚面效果图。\r\n- `mark/index.html` 是布局参数标记⻚面。\r\n- `index.html` 是主⻚面。\r\n\r\n## 目标\r\n\r\n请完善 `css/style.css` 和 `index.html` 文件。\r\n\r\n请根据 `mark/preview` 最终效果图和 `mark/index.html` 上的参数标注来完成⻚面布局。\r\n\r\n在浏览器中打开 `mark/index.html` ⻚面，鼠标点击⻚面可以在右侧看到相应的参数标注。\r\n\r\n## 规定\r\n\r\n本题只能使用项目文件夹中提供的素材。请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成判题无法通过。\r\n\r\n## 判分标准\r\n\r\n本题根据⻚面布局的相似度给分，低于 50% 得 0 分，高于 50% 则按比例给分。\r\n\r\n# github contribution\r\n\r\n## 介绍\r\n\r\n像 github 这样的平台，都会提供全年日期图表，来展示今年该用户的 commit 提交情况，可以很直观的\r\n看出全年的编码分布。\r\n\r\n本题需要在已提供的基础项目中，使用 echarts 实现一个类似的提交记录图表。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── data.json\r\n├── index.html\r\n├── effect.gif\r\n└── js\r\n├── axios.min.js\r\n├── echarts.min.js\r\n├── jQuery.min.js\r\n└── index.js\r\n```\r\n\r\n其中：\r\n\r\n- `index.html` 是主⻚面。\r\n- `data.json` 是需要请求的数据文件。\r\n- `effect.gif` 是实现的效果图。\r\n- `js/echarts.min.js` 是 echarts 库文件。\r\n- `js/axios.min.js` 是 axios 网络请求库文件。\r\n- `js/jQuery.min.js` 是 jQuery 库文件。\r\n- `js/index.js` 是需要补充的脚本文件。\r\n\r\n请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。\r\n\r\n**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**\r\n\r\n## 目标\r\n\r\n请在 **js/index.js** 文件中补全代码，最终实现提交记录图表功能：\r\n\r\n1. 实现异步数据读取功能，使用 ajax 请求 ./data.json （必须使用该路径请求，否则可能会请求不到数据）的数据。\r\n2. 对请求到的数据做相应的转换处理和渲染，其中 series.data 配置接收一个二维数组，数组中每一个数组子项包含两个数据，分别是日期和数据，形如：`[[\"2022-10-10\",5],...]`。并完成日期图的配置：\r\n    - 每个格子的大小是 `15`。\r\n    - 每个格子的 `border` 宽度是 `1px`，且格子在没有数据时，默认填充色是 #ebedf0 ，有数据的填充颜色已经设置完成。\r\n    - 不显示每月的分割线。\r\n    - 不显示年度 `label` 信息。\r\n3. 自定义 tooltip，每个 tooltip 显示当前日期和提交次数。自定义 tooltip 返回的 DOM 结构请用包含\r\n    id=\"tooltip\" 的标签包裹，比如：\r\n    ```html\r\n    \u003cdiv id=\"tooltip\"\u003e\r\n    \u003c!-- 自定义tooltip内容 --\u003e\r\n    \u003c/div\u003e\r\n    ```\r\n\r\n完成后的最终效果⻅文件夹下面的 gif 图，图片名称为 `effect.gif`（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n实现上述功能所需的 echarts Api 如下：\r\n\r\n`calendar` Api：\r\n**参数 说明**\r\ncellSize\r\n\r\n### 日历每格框的大小，可设置单值 或数组 第一个元素是宽 第二个元素是高。\r\n\r\n```\r\n支持设置自适应：auto, 默认为高宽均为 20\r\n```\r\n```\r\nitemStyle\r\n```\r\n对象属性，设置日历格的样式; 其中：\r\n\r\n```\r\ncolor 用于设置图形的默认颜色\r\nborderWidth 用于设置描边线宽。为 0 时无描边\r\n```\r\n```\r\nsplitLine\r\n```\r\n\r\n对象属性，设置日历坐标分隔线的样式；其中：\r\n\r\n- `show` 为 `boolean` 类型，用于设置是否显示分隔线。默认显示\r\n- `yearLabel` 对象属性，设置日历坐标中年的样式；其中：\r\n  - `show` 为 `boolean` 类型，用于是否在普通状态下显示标签\r\n\r\ntooltip Api：\r\n\r\n```\r\n参数 说明\r\n```\r\n```\r\nformatter\r\n```\r\n\r\n提示框浮层内容格式器，支持回调函数的形式。回调函数格式：\r\n\r\n```typescript\r\n(params: Object | Array, ticket: string, callback: (ticket: string, html: string)) =\u003e string | HTMLElement | HTMLElement [] ，支持返回 HTML 字符串或者创建的 DOM 实例，第一个参数 params 是 formatter 需要的数据集。\r\n```\r\n\r\n## 规定\r\n\r\n```\r\n请勿修改 `js/index.js` 文件外的任何内容。\r\n请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。\r\n```\r\n## 判分标准\r\n\r\n- 完成目标 1 ，得 3 分。\r\n- 完成目标 2 ，得 7 分。\r\n- 完成目标 2 的基础上，目标 3 实现，得 5 分。\r\n\r\n# 文本查重小能手\r\n\r\n## 介绍\r\n\r\n大家在编写论文的时候一定都用到过论文查重，论文查重对于保障学术诚信、提高学术水平、维护学术声誉和增强学术合作都具有重要的意义。本题目要求实现一个基于前端界面的文本查重工具，用户可以在⻚面上输入两段文本，系统会自动计算显示它们的重复率。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── css\r\n│ └── style.css\r\n├── data.json\r\n├── effect.gif\r\n├── index.html\r\n└── js\r\n├── checkPlagiarism.js\r\n└── index.js\r\n```\r\n其中:\r\n\r\n- `index.html` 是主⻚面。\r\n- `css` 是存放项目样式的文件夹。\r\n- `data.json` 是请求需要用到 JSON 数据。\r\n- `js` 是存放项目 js 的文件夹。\r\n- `effect.gif` 是项目最终完成效果图。\r\n\r\n请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。\r\n\r\n\r\n**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**\r\n\r\n## 目标\r\n\r\n找到 js 下面的 `index.js` 和 `checkPlagiarism.js`，找到其中的 TODO 部分，完成代码，达到以下目标：\r\n1. 完善 `index.js` 的 TODO 部分，在 **不使用任何第三方库** 的情况下完成文章数据请求（数据来源 `./data.json`，其中 `articleOne` 为第一篇文章， `articleTwo` 为第二篇文章，以此类推）。\r\n2. 完善 index.js 的 TODO 部分，对比文章（`(^) id = compareText`）元素 **默认显示第一篇文章** ，当（`id = articleSelect`）下拉框切换时，（`id = compareText`）中显示对应的文章数据。\r\n3. 完善 `checkPlagiarism.js` 下的分词函数 `wordSegmentation` ，该分词函数接受一个参数，参数为文章内容，返回文章内容分词后的数组。分词规则如下：\r\n\r\n当文字内容前后是标点符号、英文和停用词（代码中已提供）则去掉标点符号、英文和停用词进行分词。\r\n\r\n\u003e 如：`人工智能（Artificial Intelligence，缩写为 AI）英文名。是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一⻔新技术科学。`\r\n\r\n1. “人工智能”后面是标点符号，分词后为“人工智能”。\r\n2. （Artificial Intelligence，缩写为 AI）中“缩写”的前面是英文和标点符号，后面的“ **为** ”是停用词，分词后为 “缩写”。\r\n3. “是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、”前后都是符号， 其中”是研究”中的“ 是 ”为停用词，后面是标点符号，则分词后为“研究”，“开发用于模拟” 前后都是符号直接分词，“延伸和扩展人的智能的理论”其中，“ 和 ”和“ 的 ”是停用词，则分词后为：“延伸”, “扩展人”, “智能”, “理论”。\r\n\r\n`wordSegmentation` 函数测试用例， **以下用例仅供参考，实际判题时会修改测试用例**：\r\n\r\n```js\r\n// 第一个测试用例原文：\r\n\"人工智能（英语：Artificial Intelligence，缩写为AI）是研究、开发用于模拟、延伸和扩展人的智能的理论、\r\n方法、技术及应用系统的一⻔新技术科学。\"\r\n// 分词结果：\r\n[\"人工智能\",\"英语\",\"缩写\",\"研究\",\"开发用于模拟\",\"延伸\",\"扩展人\",\"智能\",\"理论\",\"方法\",\"技术\",\r\n\"应用系统\",\"一⻔新技术科学\"];\r\n// 第二个测试用例原文：\r\n\"自然语言处理（Natural Language Processing）是计算机科学、人工智能、语言学三者交叉的领域，\r\n涉及人类语言与计算机的相互作用。\"\r\n// 分词结果：\r\n[\"自然语言处理\",\"计算机科学\",\"人工智能\",\"语言学三者交叉\",\"领域\",\"人类语言\",\"计算机\",\"相互作用\"];\r\n// 第三个测试用例原文：\r\n\"人工智能（Artificial Intelligence，缩写为AI）是一⻔涉及机器智能的新兴科技，它的发展将会改变我们的\r\n生活方式和工作方式。机器学习（Machine Learning）是人工智能的一个分支，它使用算法和统计学来让计算机学习\r\n从而不断改进自身的性能。\"\r\n// 分词结果：\r\n[\"人工智能\",\"缩写\",\"一⻔\",\"机器智能\",\"新兴科技\",\"发展\",\"改变\",\"生活方式\",\"工作方式\",\"机器学习\",\r\n\"人工智能\",\"一个分支\",\"使用算法\",\"统计学\",\"计算机学习\",\"数据中提取规律\",\"改进自身\",\"性能\"];\r\n// 第四个测试用例原文：\r\n\"人工智能（Artificial Intelligence，缩写为AI）英文名。是研究、开发用于模拟、延伸和扩展人的智能的理论\r\n、方法、技术及应用系统的一⻔新技术科学。\"\r\n// 分词结果：\r\n[\"人工智能\",\"缩写\",\"英文名\",\"研究\",\"开发用于模拟\",\"延伸\",\"扩展人\",\"智能\",\"理论\",\"方法\",\"技术\",\r\n\"应用系统\",\"一⻔新技术科学\"];\r\n```\r\n\r\n最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n## 判分标准\r\n\r\n- 完成目标 1 ，得 5 分。\r\n- 完成目标 1 的基础上，完成目标 2 ，得 5 分。\r\n- 完成目标 3 ，得 10 分。\r\n\r\n# 找到未引用的图片\r\n\r\n## 介绍\r\n\r\n小蓝在公司负责图文编辑器的开发，每次在编辑器中插入图片都会调用一次上传接口，将图片上传至服务器中，但是文章最终编辑完成时可能并未引用所有上传的图片，这就导致许多“无效文件”的产生，于是小蓝想编写一个维护脚本，定期清理那些未被引用的图片文件。\r\n\r\n下面就请你使用 Node.js 帮助小蓝找出那些未引用的图片。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── articles\r\n├── images\r\n├── index.js\r\n└── test.min.js\r\n```\r\n其中:\r\n\r\n- `articles` 是项目的文章目录。\r\n- `images` 是项目的图片目录。\r\n- `test.min.js` 是验证答案是否正确的工具方法。\r\n- `index.js` 是需要补充代码的 js 文件。\r\n\r\n## 目标\r\n\r\n找到 index.js 中的 `findUnlinkImages` 函数，完善其中的 TODO 部分。使用 Node.js 中的 fs 等内置模块进行文件操作，查找出 images 目录下 **未被任何文章（** **`articles` 文件夹下的 .md 文档）引用的“无效图片”** ，最终需要在 findUnlinkImages 这个函数中返回包含这些“无效图片”的数组。\r\n\r\n\u003e **提示**：Markdown 中插入图片语法为： `![](xxxxxx.png)`\r\n\r\n\u003e **提示**：代码中提供了工具函数 `traversalDir`、`searchImage` 可供参考使用。\r\n\r\n请保证封装的函数满足所有测试用例，并在终端运行以下命令：\r\n\r\n```sh\r\nnode test.min.js\r\n```\r\n如果你的结果正确，则在终端将会输出“测试通过”。\r\n\r\n## 规定\r\n\r\n请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。\r\n\r\n## 判分标准\r\n\r\n本题完全实现题目目标得满分，否则得 0 分。\r\n\r\n# 表单生成器\r\n\r\n## 介绍\r\n\r\n小蓝现在遇到一个需求，要求是设计在线动态表单生成器，通过请求到的 JSON 数据即快速生成网⻚表单，这可把他难倒了。请你按照题目中给出的 Vue 组件与 JSON 数据格式，帮助小蓝完成多选框和下拉框件的代码编写。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── components\r\n├── css\r\n├── data.json\r\n├── effect-1.gif\r\n├── effect-2.gif\r\n├── index.html\r\n└── lib\r\n├── axios.min.js\r\n└── vue.min.js\r\n```\r\n其中:\r\n\r\n- `index.html` 是主⻚面。\r\n- `components` 是项目组件文件夹。\r\n- `lib` 是存放项目依赖的文件夹。\r\n- `css` 是存放项目样式的文件夹。\r\n- `data.json` 是请求需要用到 JSON 数据。\r\n- effect-1.gif 和 effect-2.gif 是项目完成后的效果图。\r\n\r\n请通过 VS Code 中的 live server 插件启动本项目，让项目运行起来。\r\n\r\n**注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。**\r\n\r\n项目中的评分组件（`rate.js`）已完成。\r\n\r\n## 目标\r\n\r\n找到 index.html 以及 components 下面的多选框组件（`checkbox.js`）和下拉框组件（`select.js`）中的 TODO 部分，达成以下目标：\r\n\r\n1. 请仔细阅读接口设计，完成 index.html 中的 `TODO` 部分，根据请求回来的 JSON 数据中 `type` 的不同，动态生成对应的表单组件。完成多选框组件（`checkbox.js`）和下拉框组件（`select.js`）初始化时需要定义的 `data` 以及方法，将数据正确显示到对应的组中，确保⻚面无报错且组件正常显示。\r\n\r\n   **接口数据设计如下：**\r\n   - `type` 表示组件类型\r\n   - `title` 为表单项的名称\r\n   - `field` 为数据所对应的原始字段名\r\n   - `value` 为表单项对应的值，有多种类型\r\n   - `options` 有选项的表单选择内容\r\n\r\n   具体各个组件的数据结构说明如下：\r\n\r\n   ### 多选框\r\n\r\n   ```js\r\n   {\r\n       type: 'checkbox'\r\n       title: 表单项名称, 例：选择美⻝\r\n       field: 对应接口字段, 例：likes\r\n       value: 多选选中的值, 例：[\"spn\",\"oaj\"]\r\n       options: 选项值，例： [\r\n           {\r\n               \"name\": \"⻩金糕\",\r\n               \"label\": \"hjg\"\r\n           },\r\n           {\r\n               \"name\": \"双皮奶\",\r\n               \"label\": \"spn\"\r\n           },\r\n           {\r\n               \"name\": \"蚵仔煎\",\r\n               \"label\": \"oaj\"\r\n           },\r\n           {\r\n               \"name\": \"⻰须面\",\r\n               \"label\": \"lxm\"\r\n           }\r\n       ]\r\n   }\r\n   ```\r\n\r\n   ### 下拉框\r\n   ```js\r\n   {\r\n       type: 'select'\r\n       title: 表单项名称, 例：参加活动\r\n       field: 对应接口字段, 例：activity\r\n       value: 选中的值, 例：online\r\n       options: 选项值，例： [\r\n           { \"label\": \"online\", \"name\": \"线上活动\" },\r\n           { \"label\": \"ground\", \"name\": \"地推活动\" },\r\n           { \"label\": \"topic\", \"name\": \"线下主题活动\" }\r\n       ]\r\n   }\r\n   ```\r\n\r\n   ### 评分组件\r\n\r\n   ```js\r\n   {\r\n       type: 'rate'\r\n       title: 表单项名称, 例：评分\r\n       field: 对应接口字段, 例：score\r\n       value: 分值 1 ~ 5 , 例： 5\r\n   }\r\n   ```\r\n2. 继续完善多选框组件（`checkbox.js`）和下拉框组件（`select.js`）， 使组件数据改变时在 `index.html` （即父组件中）点击获得数据按钮能够正常获取表单数据。**目标 2 完成后效果** ⻅文件夹下面的 gif 图，图片名称为 `effect-1.gif` （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n3. 在 index.html （即父组件） 中点击渲染数据，表单中的数据（即对应的子组件数据）需要正确显示。**目标 3 完成后效果（考生可以根据提供的 JSON 数据自行测试）** ⻅文件夹下面的 gif 图，图片名称为 `effect-2.gif` （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n## 判分标准\r\n\r\n- 完成目标 1 ，得 10 分。\r\n- 目标 2 中每完成一个组件，得 5 分，共 10 分。\r\n- 完成目标 3 ，得 5 分。\r\n\r\n# 恶⻰与公主\r\n\r\n## 介绍\r\n\r\n恶⻰与公主是一个很经典的故事，恶⻰抓住公主关在自己的洞府内，骑士激斗并战胜恶⻰最后解救公主。下面我们通过编码模拟出这个场景：公主被关在地图中央，骑士最开始在二维地图 `[0,0]` 的位置，恶⻰位置和数量随机生成，左下⻆固定位置有天使，骑士初始血量为 `3`。点击“⻢上营救”按钮，系统随机生成 1-3 步，骑士按照随机生成的步数进行移动（蓝色边框位置变换）。\r\n\r\n- 若骑士停留位置（红色边框 `class` 包含 `active`）有恶⻰，则进行战斗并扣除 2 点血量。\r\n- 若骑士停留位置（蓝色边框 `class` 包含 `active`）有天使，则增加 3 点血量。\r\n- 如果血量小于等于 0 ，则弹出红色背景提示框，提示重伤不治。\r\n- 如果骑士（蓝色边框 class 包含 active ）顺利到达公主的位置，则弹出绿色背景提示框，提示营救成功。\r\n\r\n## 准备\r\n\r\n开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：\r\n\r\n```\r\n├── effect-1.gif\r\n├── effect-2.gif\r\n├── css\r\n├── index.html\r\n├── images\r\n└── js\r\n└── index.js\r\n```\r\n\r\n其中：\r\n\r\n- `index.html` 是主⻚面。\r\n- `js/index.js` 是待完善的 js 文件。\r\n- `css/index.css` 是 css 样式文件。\r\n- `images` 是存放图片的文件夹。\r\n- `effect-1.gif` 是营救成功效果图。\r\n- `effect-2.gif` 是营救失败效果图。\r\n\r\n在浏览器中预览 `index.html` ⻚面，显示如下所示：\r\n\r\n## 目标\r\n\r\n请在 `js/index.js` 文件中补全代码。\r\n\r\n最终效果可参考文件夹下面的 gif 图，营救成功图片名称为 effect-1.gif ，营救失败图片名称为 effect-2.gif （提示：可以通过 VS Code 或者浏览器预览 gif 图片）。\r\n\r\n具体需求如下：\r\n1. 补全 js/index.js 中的 `mazePath` 函数，将起点到终点顺时针经过的每个元素（即 class 包含 box ） data-index 属性值依次保存在数组中并返回。\r\n    ```js\r\n    // 本题中输入的二维数组 dyadicArray 值为\r\n    dyadicArray = [\r\n        [\"start\", 1, 2, 3, 4 ],\r\n        [ 5, 6, 7, 8, 9 ],\r\n        [ 10, 11, \"end\", 13, 14 ],\r\n        [ 15, 16, 17, 18, 19 ],\r\n        [ 20, 21, 22, 23, 24 ],\r\n    ];\r\n    // 执行 `mazePath` 函数\r\n    pathArr = mazePath(dyadicArray);\r\n    // 得到的数据为\r\n    pathArr = [\"start\", 1, 2, 3, 4, 9, 14, 19, 24, 23, 22, 21, 20, 15, 10, 5, 6, 7, 8, 13, 18, 17, 16, 11, \"end\"];\r\n    ```\r\n    注意： `mazePath` 函数检测时使用的输入数据与题目中给出的示例数据可能是不同的。考生的程序必须是通用的，不能只对需求中给定的数据有效。\r\n2. 补全 js/index.js 中的 `moveHandler` 函数，需求如下：\r\n    - 根据点击“⻢上营救”按钮后获得的随机步数，由外向内顺时针到达指定位置。\r\n    - 根据骑士到达位置（`(^) class 包含 active`）是否存在恶⻰（该元素节点 class 包含 dragon）或者天使（该元素节点 class 包含 angel ）执行函数 bloodCalculator(boxEle) 计算出目前目前骑士剩余的血量。\r\n    - 根据血量和位置显示正确的提示框：血量为  0  时，执行函数 tipRender(\"warning\") ；到达公主所在位置，执行函数 tipRender(\"success\") 。\r\n\r\n## 规定\r\n\r\n`mazePath` 函数检测时使用的输入数据与题目中给出的示例数据可能是不同的。考生的程序必须是通用的，不能只对需求中给定的数据有效。\r\n\r\n## 判分标准\r\n\r\n- 完成目标 1 ，得 15 分。\r\n- 完成目标 2 ，得 10 分。\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foverflowcat%2Flanqiao-2023-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foverflowcat%2Flanqiao-2023-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foverflowcat%2Flanqiao-2023-web/lists"}