第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组（被题目描述坑惨了）

目录

1.创意广告牌

2.原子化css

3.神秘咒语

4.朋友圈

5.美食蛋白揭秘

6.营业状态变更

7.小说阅读器

8.冰岛人

9.这是一个”浏览器“

10.趣味加密解密

总结

---

1.创意广告牌

这个题目不多说了，只要知道这些css应该都能写出来，不会的平时多查查文档就记住了。

代码：

1. .billboard {
2. position: relative;
3. background-color: #8e6534;
4. color: #fff;
5. padding: 20px;
6. box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
7. background-size: cover;
8. /* TODO：待补充代码 设置圆角 10px，背景图片为woodiness.jpg */
9. border-radius: 10px;
10. background: url('../images/woodiness.jpg');
11. }
13. .top-sign {
14. position: relative;
15. width: 200px;
16. height: 100px;
17. background-color: #a87f4a;
18. display: flex;
19. justify-content: center;
20. align-items: center;
21. font-size: 1rem;
22. /* TODO：待补充代码 上面两个角是圆角 15px，下面两个角是直角 元素 x 轴倾斜 20度*/
23. border-top-left-radius: 15px;
24. border-top-right-radius: 15px;
25. transform: skewX(-20deg);
26. }

2.原子化css

这个题目主要需要知道的是css的属性选择器，可以查文档看看就知道了，不会的话其实看看其他的css应该也能联想到哈。

代码：

1. /* TODO: 实现原子化 flex */
2. div[flex="~ col"] {
3. display: flex;
4. flex-direction: column;
5. }

3.神秘咒语

这个考的也就是请求头携带参数，还不会的得抓紧学一下XML，fetch，axios了，这个从蓝桥杯模拟题的趋势来看，考的很频繁，甚至后面的题目发个请求就有3，5分。

代码：

1. const key1Button = document.getElementById('key1') // 钥匙 1
2. const key2Button = document.getElementById('key2') // 钥匙 2
3. const spell1 = document.getElementById('spell1') // 咒语 1
4. const spell2 = document.getElementById('spell2') //咒语 2
6. // TODO：新增或者修改以下代码
8. key1Button.addEventListener('click', async () => {
9. // 从后台请求钥匙1的咒语部分
10. key1Button.disabled = true
11. try {
12. let { data } = await axios.get('/spellone', {
13. headers: {
14. Authorization: 'Bearer 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' // 添加 Authorization 字段携带 token
15. }
16. })
17. console.log(data)
18. spell1.innerHTML = data
19. tryOpenTreasureBox()
20. } catch (error) {
21. console.error('请求钥匙1咒语失败：', error)
22. }
23. })
25. key2Button.addEventListener('click', async () => {
26. // 从后台请求钥匙2的咒语部分
27. key2Button.disabled = true
28. try {
29. let { data } = await axios.get('/spelltwo', {
30. headers: {
31. Authorization: 'Bearer 2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7' // 添加 Authorization 字段携带 token
32. }
33. })
34. spell2.innerHTML = data
35. tryOpenTreasureBox()
36. } catch (error) {
37. console.error('请求钥匙2咒语失败：', error)
38. }
39. })
41. function tryOpenTreasureBox() {
42. if (spell1.innerHTML == '星辰闪耀' && spell2.innerHTML == '众星归位') {
43. const box = document.getElementById('treasureBox')
44. const suceessmessage = document.getElementById('suceess-message')
45. box.classList.add('opened')
46. suceessmessage.style.display = 'block'
47. }
48. }

4.朋友圈

1.防抖函数的实现

其实这个还算挺简单的，就是一个非常常规的防抖，会的自然肯定是会的，不会的可以花几分钟时间看看视频学一下，很快的。

代码：

1. function debounce(fn, delay) {
2. let timer = null
3. return function () {
4. const context = this
5. const args = arguments
6. clearTimeout(timer)
7. timer = setTimeout(function () {
8. fn.apply(context, args)
9. }, delay)
10. }
11. }

2.将内容存储到localStorage中

这个按照要求做就好了，需要做哪些提示，加哪些属性都有说明。

1. document.getElementById('text').addEventListener(
2. 'input',
3. debounce(function () {
4. // 提示正在保存中
5. document.getElementById('prompt').textContent = '正在保存中...'
7. // 设置缓存
8. const text = document.getElementById('text').value
9. if (text.length <= 0) {
10. document.getElementById('post').setAttribute('disabled', 'disabled')
11. } else {
12. document.getElementById('post').removeAttribute('disabled')
13. }
14. localStorage.setItem('savedText', text)
16. // 过一段时间后提示保存完成
17. setTimeout(function () {
18. document.getElementById('prompt').textContent = '内容已保存'
19. }, 750)
20. }, 200)
21. )

3.这个就是对页面的一些动态展示了，需要理清页面渲染的流程是怎么样的，什么时候显示什么，什么情况下该显示什么，经过一些判断后添加必要的属性，类名等就行。

1. document.getElementById('post').addEventListener('click', function () {
2. const content = document.getElementById('text').value
3. const element = createContent(content)
4. document.querySelector('.contents').appendChild(element)
5. document.getElementById('prompt').textContent = ''
7. // TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
8. document.getElementById('text').value = ''
9. localStorage.removeItem('savedText')
10. // 同时需要将按钮的 disabled 属性设置回来
11. document.getElementById('post').setAttribute('disabled', 'disabled')
12. })

页面初次加载的缓存

1. document.addEventListener('DOMContentLoaded', function () {
2. // 页面加载时检查 localStorage 中是否有缓存文本数据
3. const savedText = localStorage.getItem('savedText')
4. if (savedText) {
5. document.getElementById('text').value = savedText
6. // 页面加载时检查输入框内容，设置按钮状态
7. if (savedText.length > 0) {
8. document.getElementById('post').removeAttribute('disabled')
9. } else {
10. document.getElementById('post').setAttribute('disabled', 'disabled')
11. }
12. } else {
13. // 如果没有缓存文本数据，则将按钮设置为禁用状态
14. document.getElementById('post').setAttribute('disabled', 'disabled')
15. }
16. })

5.美食蛋白揭秘

1.发请求拿到需要的数据

这里的小坑就是拿到的数据渲染出来是不对的，要去除掉多余的数据

1. async function fetchData() {
2. // TODO:待补充代码
3. let data = await fetch(MockURL).then(res => res.json())
4. data.unshift({
5. name: '表头',
6. icon: 'none'
7. })
8. echartsInit(data)
9. //去除第一个元素
10. dataList.value = data.slice(1)
11. }
13. onMounted(() => {
14. fetchData();
15. });
16. return {
17. echartsInit,
18. fetchData,
19. dataList
20. };

2.渲染页面

2. <div class="protein-item" v-for="data in dataList" :key="data.name">
3. {{data.name}}
4. {{data.value}}
5. div>

6.营业状态变更

这个题目要实现切换状态，通过观察题目可以看到，需要返回的是一个Boolean值，这个是来确定页面该如何渲染的，第二个需要返回的是一个函数，用来切换状态的。

首先我们要想要的是，返回的值肯定需要是一个ref()，响应式的值，因为我们知道啊，在页面不刷新的情况下，ref()，响应式数据发生变化，页面也会发生变化的，那么想到这个就好办了。

1. function useToggle(state) {
2. // TODO:待补充代码
3. const toggledState = ref(state)
5. function toggle() {
6. toggledState.value = !toggledState.value
7. }
8. return [toggledState, toggle]
10. }

7.小说阅读器

这个题目真的是把我坑惨了，坑的我想哭。

 但是我的解法可能有点粗糙哈，大佬看到了见谅。

刚开始看到这个题目的数据，在解析数据过程中还好，我用的比较笨拙的办法一步步的解析出来了，提交后也能运行，json文件中的数据也有了，可是正当我提交的时候却出错了。

这是题目描述的格式：

这是我第一次运行出来的格式：

感觉没有一点问题了，不过还是不行，就在我绞尽脑汁没想到办法，重新读了一遍题目，看到了这句话：

我就修改代码将写入格式改成这种了： 空格都已经去掉了，就在我满心欢喜的提交代码时，还是出错不给过，我真的想不通到底哪里出了问题。

最后在我看了一遍txt文件后，我再想是不是标题的问题，

但是看题目描述的结果又是这样的，我抱着试试的感觉修改提交后，终于通过了