2024年蓝桥杯Web开发【大学组：模拟题一】15届

已于 2024-05-25 13:42:15 修改
阅读量836 收藏 23
点赞数 26
分类专栏： 竞赛--考证 文章标签： 蓝桥杯 前端
于 2024-05-25 00:34:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62421736/article/details/139187216
版权

1.动态的Tab栏

日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。

1.1 题目要求

请在 style.css 文件中补全代码。

  1. 当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。

完成后效果如下

图片描述

1.2 题目分析

第一题比较简单，就是让我们在style.css中添加代码实现定位的效果，想到定位我们脑子里应该想到的是：position，没错就是用它，如果你忘记了它有哪些用法，请看下面的表格:

定位作用
static元素处于正常文档流中，不受 top, right, bottom, left 影响。
relative元素相对于其正常位置进行定位。元素仍保持正常文档流，但会对其进行相对调整。
absolute元素相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（通常是 <html> 元素）进行定位。
fixed元素相对于视口进行定位，即使页面滚动，元素位置也不会改变
sticky元素根据用户的滚动位置在父元素中定位。在元素在屏幕中可见时，它的位置是相对定位的，当页面滚动超出范围时，它的位置是固定的。

当我们知道各个属性的作用后，在根据题目需要达到的效果，很明显这里要使用的是：sticky

1.3 源代码

  /* TODO: 请在此补充代码实现tab栏动态固定 */
  position: sticky;
  top: 0;

2.地球环游

“地球漫游”：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。

2.1 题目要求

找到 css/style.css 文件中的 TODO 部分，完成以下目标：

给 .earth-con 元素添加动画，设置如下:

  • 动画名称: orbit
  • 动画时间: 36.5 秒
  • 速度函数:线性
  • 播放方式:无限循环

完成后效果如下：

完成效果

2.2 题目分析

这一题只要你知道css动画的使用方法，简直就是送分，所有动画的要求都已经给你了，而且还标注出来了动画的名称，直接在对应的css部分添加动画代码即可。

2.3 源代码

/* TODO:待补充代码，添加动画 */
    animation: orbit 36.5s linear infinite;

3.迷惑的this

团队开发中为了解决变量相互覆盖的问题，会将相关的功能的涉及到变量收编到一个对象内。但使用对象收编变量后需要注意 this 合理使用。

3.1 题目要求

完善 js/index.js 中的 handle 函数中的 TODO 部分，实现以下功能:

  1. 为输入框（即 this.inputEl）绑定 input 事件，当输入框的值发生变化时，调用已经提供的 handleInput 方法进行搜索处理，注意 handleInput 方法调用时的 this 指向应为 search 对象本身。

完成后效果如下：

效果图

3.2 题目分析

根据题目的名称可以看出来这一题应该是与this相关的问题，js文件中需要用到的dom元素和函数都已经给我们写好了，只需要我们给input绑定一个input事件，我们相当然的就会写出这样的代码：

handle() {
    // TODO：待补充代码
    this.inputEl.addEventListener('input', this.handleInput)
  },

但是运行发现不对，达不到效果，错误的原因就是忽略了this的指向问题，当你使用addEventListener将一个函数作为事件处理程序附加到元素时，该函数会失去其原始上下文，函数内部的this将指向触发事件的元素。我们可以打印此时的this看看：

可以看到此时的this指向已经变成了input这个dom元素了，他的身上并没有hanleInput()这个方法，此时我们就要使用bind来修改this的指向。在面向对象中bind是很重要的，关乎到整个class对象的this问题。

3.3 源代码

handle() {
    // TODO：待补充代码
    //使用bind来纠正 this的指向
    this.inputEl.addEventListener('input', this.handleInput.bind(this))
  },

4.魔法失灵了

oh ~ 糟糕 😰 ，dr.小蓝正在研究一项伟大的发明，实验进行中控制重要的元素 Magic 的按钮突然失灵了，快来用你的魔法帮助 dr.小蓝吧。

4.1 题目要求

找到 index.html 中 TODO 部分，正确修复代码使 data 对象恢复响应式特性，即点击页面上的 - 与 + 按钮可以改变 value 的值。

正确实现后效果如下：

图片描述

4.2 题目分析

这个题目主要是按钮事件失灵了，如果不仔细看可能一时半会看不出来问题，其实就是

//TODO：待修复代码
    let { value }={ ...data }

这行代码将value从data中结构出来后，value就失去了响应式效果了，而且仔细看的话，可以看到题目中引入了toRefs，但是没有使用，toRefs的作用就是让结构出来的元素不失去响应式，在日常开发中主要是为了简化代码，如果不结构，在html中就要使用这种：data.value的形式渲染数据。

4.3 源代码

   //TODO：待修复代码
    let { value } = toRefs(data)  //结构赋值将value失去的响应式
    //利用toRefs 恢复响应式

5.燃烧你的卡路里

为了瘦，为了美，为了穿衣服好看，小蓝决定减肥，管住嘴迈开腿，燃烧卡路里不止需要运动，还需要合理制定饮食规划。为了瘦，为了美，为了穿衣服好看，小蓝决定减肥，管住嘴迈开腿，燃烧卡路里不止需要运动，还需要合理制定饮食规划。

5.1 题目要求

请在 js/index.js 和 index.html 文件中补全代码，完成以下目标：

  1. 点击“定制方案”按钮后，弹出侧滑页面，所使用的组件为 el-drawer

    参数说明类型默认值
    v-model是否显示 Drawerbooleanfalse

  2. 封装 sortItem 函数，按照食物属性名称将早餐/午餐/晚餐的数组数据从大到小排序，然后找到排序后的数组中第一个不大于对应摄入量上限的食材对象，并将其返回。

sortItem 参数：

  • arr：早餐/午餐/晚餐的数据。
  • pro：食物属性名称，可取值 carbohydrate/protein/fat。
  • compare：糖类、蛋白质、脂肪的对应摄入量上限值，作为比较条件用的，已传入具体值。

sortItem 返回值示例

{   
    "name": "鸡蛋",
 	"carbohydrate": 1.5,
 	"protein": 12.7,
 	"fat": 9,
 	"kcal": 138,
 	"weight": 100 
}

早餐/午餐/午餐中数据字段说明如下：

名称说明
name食材名称
carbohydrate碳水化合物（单位：克）
protein蛋白质（单位：克）
fat脂肪（单位：克）
kcal食物热量（单位：克）
weight重量（单位：克）

完成后，点击定制方案按钮，效果如下：

完成效果

5.2 题目分析

第一个要求很简单，就是在el-drawer上绑定它的开关属性，在触发按钮事件时将其改成 true即可

第二个要求涉及到的是排序以及遍历，排序我们直接使用 sort对属性名称进行排序即可，然后再遍历查找到对应的元素进行比较返回对应的值即可。

5.3 源代码

第一处：

img

img

第二处：

这里提供二种方法，如果对js的array方法熟练的可以直接使用方法，不熟练的可以遍历

const sortItem = (arr, pro, compare) => {
      // TODO 根据 compare 匹配食材对象后返回这个对象
      // 按照食物属性名称将早餐/午餐/晚餐的数组数据从大到小排序，
      //然后找到排序后的数组中第一个不大于对应摄入量上限的食材对象，并将其返回。
      //第一种
      const sortedArr = arr.sort((a, b) => b[pro] - a[pro]);
      const optimalItem = sortedArr.find(item => item[pro] < compare);
      return optimalItem;
      //第二种
      arr.sort((a, b) => b[pro] - a[pro])
      for (const item of arr) {
        if (item[pro] < compare) {
          return item
        }
      }
    }

6.司龄统计

M 公司马上要进行周年庆典活动了，公司让小蓝做一个员工司龄统计，用来根据司龄给大家发放纪念品，便于计算纪念品费用。但是眼看时间到了小蓝来不及编写，请热心的你帮他完成这个任务吧～

6.1 题目要求

找到 js/index.js 中的，完成其中的 TODO 部分，完成以下目标：

  1. 找到 groupByAge 函数，groupByAge 接收一个参数，参数为数组对象，age 代表司龄，name 代表人名，返回一个根据司龄进行分组的对象，key 是司龄，value 是一个数组，其中包含了所有当前司龄的人的对象。

    参数格式如下:

     [
  { name: "杰克", age: 1 },
  { name: "丽莎", age: 2 },
  { name: "艾娃", age: 5 },
  { name: "约翰", age: 1 },
  { name: "豪尔赫", age: 2 },
]

    返回值为 object，格式示例如下

    // 根据司龄（`age`）进行分组，司龄对应司龄人数的数组：
{
   1: [{ name: '杰克', age: 1 }, { name: '约翰', age: 1 }], // 司龄为 1 的数组 
   2: [{ name: '丽莎', age: 2 }, { name: '豪尔赫', age: 2 }], // 司龄为 2 数组 
   5: [{ name: '艾娃', age: 5 } ]// 司龄为 5 数组 
}

  2. 正确设置 ECharts 图表中的 x 轴和 y 轴数据，x 轴表示司龄，从小到大排序，y 轴表示司龄对应的人数个数。如 1 年司龄的有 4 人，则 y 轴对应的数据为 4。

完成后效果如下：

完成效果

6.2 题目分析

这个题目首先第一步就是要对数据进行重新改装，将数据按照age进行分组改装，要实现其实比较简单，直接遍历插入即可

第二步是要设置Echarts的X轴数据和Y轴数据，x轴的数据是司龄，也就是age，但是有个要求是要进行升序排序，这里又用到了sort排序，y轴的数据是人数，也就是对应的age数组的长度，因为前面已经进行了排序，我们直接遍历返回数组长度就行。

6.3 源代码

 
// 按照年龄分组的函数
const groupByAge = (peoples) => {
  // TODO:待补充代码，按照年龄进行分组
  //按照age进行排序
  const data = {}
  peoples.forEach((item) => {
    //判断data中是否存在
    if (!data[item.age]) {
      data[item.age] = []
    }
    data[item.age].push(item)
  })
  return data
}
 
 
// TODO: 设置 Echars X 轴数据 xAxisData 和 Y 轴数据 seriesData
      xAxisData.value = Object.keys(groupedPeople.value).sort((a, b) => a - b)
      seriesData.value = Object.values(groupedPeople.value).map((item) => {
        return item.length
      })

7.不翼而飞的余额

小蓝开发了一个 web3 钱包，用于在浏览器中管理以太坊账户。为了方便用户使用，小蓝决定将钱包分为两个页面：

  • 存款页面，用于用户存款。
  • 钱包页面，用于查看账户余额。

7.1 题目要求

完善 index.html、js/store.js 和 component/DepositPage.js 中的代码。实现以下效果：

  1. 找到 index.html 中的 TODO 部分，为项目配置 history 模式路由，浏览器中访问 / 的时候显示 WalletPage 组件，访问 /deposit 的时候显示 DepositPage 组件。

    tips: 目标 1 完成后点击 deposit 按钮或底部的导航的 deposit 导航文字，均会跳转到 DepositPage 存款页面。

  2. 找到 DepositPage.js 中的 TODO 部分，在 DepositPage 页面中的 （id = deposit-balance）元素正确显示钱包余额（store 中的 balance）。

  3. 完善 js/store.js 和 component/DepositPage.js中的 TODO 部分，在 DepositPage 页面中，在输入框（input）输入数字（只考虑正整数），点击 “Deposit” 按钮（button）后，余额 = 现在的余额 + 输入框中输入的金额，在 DepositPage 页面正确显示钱包余额（两个页面的余额相同）。初始余额为 23。

完成后效果：

完成效果

7.2 题目分析

  • 第一步就是配置路由，如果不会的建议学习一下vue-router:https://router.vuejs.org/zh/guide/essentials/history-mode.html,这里二种模式都是可以使用的，按照要求配置即可，没什么难的。
  • 第二步是再DepositPage组件中修改balance的数据，需要保持组件间的数据统一性，这里使用了Pinia仓库，不过这里不知道pinia也没事，这里唯一要注意的是数据的正确性，题目要求是要正整数，所以做一个判断即可，最后加上后清空input框。

7.3 源代码

第一步：

 const { createRouter, createWebHistory } = VueRouter;  // TODO：待补充代码，在此引入路由相关 API 
    const app = createApp({});
    app.use(createPinia());
 
    const router = createRouter({
      // TODO:待补充代码，为项目配置 history 模式的路由
      history: createWebHistory(),
      routes: [
        {
          path: '/',
          component: WalletPage
        },
        {
          path: '/deposit',
          component: DepositPage
        }
      ]
    })

第二步：

img

第三步：

 setup() {
    const depositAmount = Vue.ref() // 输入框中的的值->存款金额
    const store = useMoneyStore() // 引入 store
 
    // TODO：待补充代码，完善点击存款按钮事件
    function deposit() {
      if (!isNaN(depositAmount.value) && depositAmount.value >= 0) {
        store.balance += depositAmount.value
        depositAmount.value = null
      }
    }
    return {
      deposit,
      depositAmount,
      store
    }
  }

8.个性化推荐

当下，移动互联网技术和智能手机的发展，使得采集用户数据的能力变得空前强大，无时无刻，无所不在。拥有这些数据后，全行业的个性化推荐能力变得更加容易实现，不论是淘宝京东，还是今日头条，无疑是这个时代的最大受益者。个性化推荐的本质是根据不同的人群，将最有可能感兴趣的内容优先推荐给相应的用户，最大限度的提高转化率。

8.1 题目要求

请在 js/index.js 文件中补全代码，最终实现个性化推荐的功能

首先，在终端运行以下命令启动服务器：

node ./js/index.js

当看到终端输出：server is running in port 8080，表明服务器启动成功。

并在浏览器中通过 8080 端口预览 index.html 页面，显示如下所示：

起始页面

在完成勾选后，点击确认，页面会发送 post 请求并跳转到新的页面，你需要根据用户的勾选项，从 data.json 中查询对应的数据，并读取 customized.html 文件的内容，两者结合生成结果页面数据，并返回给前端浏览器：

  1. 如果用户没有勾选任何标签，直接点击确认，新页面给与提示：

    提示

    提示信息的 DOM 结构如下：

    <div class="unselect">你还未选择任何感兴趣的标签！</div>

  2. 如果用户勾选了标签，则返回对应的标签的查询信息以及相关推荐，比如用户选择了标签

    Javascript，除了查询tag为Javascript的内容，也需要查询Javascript的相关推荐标签HTML5

    ，CSS3的内容（即relevance字段对应的数据），一并返回。

    • 注意：不再需要进一步查询相关推荐的相关推荐，即不需要查询 HTML5 的相关推荐标签的内容。
    • 多个标签之间的相关标签可能重复，需要对查询内容进行去重，比如选择了标签 Javascript 和 CSS3，最终的去重结果应该是标签 Javascript、CSS3、HTML5 的内容。

选择

结果

每一条信息的 DOM 结构如下：

<div class="interest">
    <div class="tag">标签名</div>
    <div>标签内容</div>
</div>

customized.html 文件中已提供基础的样式，请保证你生成的节点带有指定的 class 信息，并填充到 body 中。 在代码更新后，请记得重启服务器！

8.2 题目分析

初看题目，我们要写的地方都在js文件中，如果会nodejs的人，应该能读懂代码，我简单解释一下，（如果能看懂可以跳过）这里就是启动服务在8080端口，如果访问的是：‘/’，则会读取index.html文件相应给客户端，而在index.html中有一个表单，它的提交地址是：‘/customized’，所以当submit按钮单击后就会跳到此页面，并携带这些数据。

此时我们需要相应对应的页面给客户端，这里就需要进行判判表单元素有没有数据了，如果没有则相应一段提示文本，否则相应对应的提示，这里的提示还算简单，主要看怎么根据对应的数据解析出所有需要的推荐数据。

8.3 源代码

 // TODO: 补充个性化页面处理代码
      //1.读取文件
      const customizedPage = fs.readFileSync(path.join(__dirname, '../customized.html'), {
        encoding: 'utf8'
      })
      let indexHtml = ''
 
      if (interested.length === 0) {
        indexHtml = customizedPage.replace('<body></body>', `<body><div class="unselect">你还未选择任何感兴趣的标签！</div></body>`)
      } else {
        //2.首先查出所有的tag以及附带的tag (将interested转为数组)
        let tags = Array.isArray(interested) ? interested : [interested]
        tags.forEach((item) => {
          const found = data.find((foundData) => {
            return foundData.tag == item
          })
          //查出来后再去对比relevance
          if (found && found.tag != 'HTML5') {
            //小坑，
            found.relevance.forEach((relevance) => {
              if (!tags.includes(relevance)) {
                tags.push(relevance)
              }
            })
          }
        })
        let html = ''
        tags.forEach((item) => {
          const found = data.find((foundData) => {
            return foundData.tag == item
          })
          if (found) {
            html += `
            <div class="interest">
            <div class="tag">${found.tag}</div>
            <div>${found.content}</div>
            </div>`
          }
        })
        indexHtml = customizedPage.replace('<body></body>', `<body>${html}</body>`)
      }
      res.writeHead(200, { 'Content-Type': 'text/html' })
      res.write(indexHtml)
      res.end()

9.贪吃蛇

贪吃蛇作为一款经典休闲益智类游戏，通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。在 90 年代拥有一部可以玩贪吃蛇的手机可以玩上一整天，如今可玩的游戏越来越多，但是当时玩一天的快乐再也找不回了。

9.1 题目要求

找到 index.js 文件中的 nextStep 函数,完成函数中的 TODO 部分：

  1. 根据当前蛇的移动方向（this.direction）以及蛇身块的大小（this.size），计算新的蛇头位置，更新蛇身坐标数组 （this.snakeBody），即可实现蛇的正确移动。蛇的移动和增加蛇的长度代码已提供。

蛇身坐标示例如下：

 [{ left: 2, top: 0 }, { left: 1, top: 0 }, { left: 0, top: 0 }]`

蛇的身体是由多个坐标点组成的，每个坐标点包含了 left 和 top 属性，分别表示在游戏界面中的水平和垂直位置，第一个坐标表示当前蛇头的位置。

完成后，效果如下：

完成效果

9.2 题目分析

这一题乍一看挺难的，代码很长，但其实通过观察发现，其实大多数代码都已经写好了，我们只需要拿到蛇头的方向对它的坐标进行替换就行，后面身子部分啥的坐标都不用管。所以我们只要拿到蛇头的坐标，判断其目前的方向，坐标加上自身的大小（size）即可。

9.3 源代码

  // 移动蛇的头部
  nextStep() {
    // TODO：待补充代码
    const snake = this.snakeBody
    const head = { ...snake[0] }
    switch (this.direction) {
      case 'right':
        head.left += this.size
        break
      case 'down':
        head.top += this.size
        break
      case 'left':
        head.left -= this.size
        break
      case 'up':
        head.top -= this.size
        break
    }
    this.snakeBody.unshift(head) // 在头部插入新坐标
    this.snakeBody.pop() // 删除尾部坐标
    this.render() // 重新渲染蛇身体
  }

10.自定义表单验证

自定义表单验证器是一种在 Web 开发中常用的技术，用于验证用户输入的数据是否符合特定的规则或要求。通过自定义表单验证器，我们可以对表单字段进行验证，并在用户提交表单之前检查数据的有效性。

10.1 题目要求

  1. 完成 FormInput.js 中的 TODO 部分，当输入框（class= form-input） 的值变化时，触发事件更新index.html 中组件（form-input）的 v-model 值。（调试 tips：考生可以在点击按钮时通过打印 formData 的值进行查看）。
  2. 完成 js/util.js 中的 is_email 函数，参数是邮箱地址，是合法邮箱返回 true，否则返回 false。

合法邮箱包含两个部分：

  1. 用户名部分：
    • 用户名的结尾是 @ 符。
    • @ 符之前为至少 1 位字符（数字或字母）。
  2. 域名部分：
    • 中间必须是 .。
    • . 之前为至少 1 位字符（数字、字母）。
    • . 之后为 2 到 4 位字母。

合法邮箱示例： a@b.cn、1A@88.com

不合邮箱示例： 1@1.c、1@、33.cn、Ab.cn@

  1. 完成 components/FormValidator.js 中通用表单验证函数 validateForm 中的 TODO 部分。如果表单验证通过，则 Promise 为 resolve(true)，否则为 resolve(false)（此部分代码已提供）。 index.html 中定义的 formRules **对象对应字段的表单值验证失败时，使用 validateForm 函数中提供的 errors 对象，在对应字段中存储错误信息。若某个字段对应的错误信息为多个时，将按照验证规则数组的顺序优先显示，即只显示第一个错误信息。**函数使用的数据通过 props.rules（字段名和对应的验证规则） 和 props.formData（表单数据的键值对） 进行获取。

例： email为空显示了错误信息 邮箱不能为空，则不再显示 邮箱不符合规则或者长度不符 这个错误信息。

errors 数据结构示例：

{
    phone: "请输入密码", // 对应字段为 phone 的错误信息
    email: "邮箱不能为空" // 对应字段为 email 的错误信息
}

表单每个字段对应的验证规则为一个数组，验证规则示例的配置如下：

// 定义表单验证规则
const formRules = {
  phone: [{ validator: validatePass }], // 针对 phone 字段的验证规则
  email: [
    { required: true, message: "邮箱不能为空" }, // 邮箱字段必填规则
    { type: "email", min: 8, max: 20, message: "类型必须为邮箱" }, // 邮箱格式规则
  ],
};

formRules 对应字段说明如下：

注意：自定义验证函数 validator 不会和其他字段同时出现，其他字段均可同时出现。

参数名（Parameter）类型（Type）描述（Description）
validatorFunction表单自定义验证函数，接受三个参数，分别为 rule 表单验证规则数组，value 验证表单的值，callback 回调函数。如果验证成功，callback 函数不做任何处理；如果验证失败，callback 函数接收参数 error 并将其中的文字存储在 errors 对象中，且参数 error 的值为其调用者传递过来的 new Error('这里是错误信息')，其中错误信息是验证失败的具体描述。callback 函数的调用逻辑 index.html 中已经提供，考生只需实现字段验证及 errors 错误信息存储的逻辑即可。
requiredBoolean表示表单字段是否为必填项。
typeString字段类型，通过 FormValidator 中已提供的 validateByType 函数进行验证，该函数接收的参数为 type，类型正确则返回 true，否则返回 false
minNumber指定表单输入的最小长度。
maxNumber指定表单输入的最大长度。
messageString验证失败时的错误信息

完成后示例效果如下：

完成效果

10.2 题目分析

第一问，改变父组件中的数据，我们首先应该想到的是自定义事件，子传父嘛，但是通过观察后发现父组件好像并没有定义自定义事件，而且题目要求我们只修改子组件，然后通过观察可以知道子组件引入了emit，而父组件使用了v-model对表单进行了绑定，此时我们就可以使用v-model来进行通信，如果对如果使用v-model来通信不了解的，可以查看这篇文章，里面列举了vue3组件间的通信方式:https://blog.csdn.net/m0_64642443/article/details/131787640
第二问是邮箱正则没啥好说的，不会的可以先去学习一下正则怎么写喔。
第三问：题目要求中也写出来了数据从，props.rules和props.formData中拿，我们拿到数据对其进行验证然后返回相应的错误信息就行（message）。

10.3 源代码

第一问：

   //  TODO：目标 1 当输入框的值变化时，触发 input 事件更新父组件的 v-model 值
    watch(inputValue, (newValue) => {
      emit('update:value', newValue)
    })
    //  TODO：end

第二问：

const is_email = (val) => {
  // TODO：目标 2 待补充代码
  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/
  return emailRegex.test(val)
}

第三问：

        // TODO：目标 3 编写通用的表单验证规则，并将错误信息放置到 errors 对象中
        for (const field in props.rules) {
          const fieldRules = props.rules[field]

          for (const rule of fieldRules) {
            if (rule.required && !props.formData[field]) {
              errors.value[field] = rule.message
              break
            }

            if (rule.type && !validateByType(rule.type, props.formData[field])) {
              errors.value[field] = rule.message
              break
            }

            if (rule.min && props.formData[field].length < rule.min) {
              errors.value[field] = rule.message
              break
            }

            if (rule.max && props.formData[field].length > rule.max) {
              errors.value[field] = rule.message
              break
            }
          }
        }

        // 添加对 nickname 字段的非空判断
        if (props.rules.nickname && !props.formData.nickname) {
          errors.value.nickname = '昵称不能为空'
        }
                 }

            if (rule.type && !validateByType(rule.type, props.formData[field])) {
              errors.value[field] = rule.message
              break
            }

            if (rule.min && props.formData[field].length < rule.min) {
              errors.value[field] = rule.message
              break
            }

            if (rule.max && props.formData[field].length > rule.max) {
              errors.value[field] = rule.message
              break
            }
          }
        }
尽欢i
关注
专栏目录
第十三届蓝桥杯（Web 应用开发）线上模拟赛 第四题flex布局之筛子
weixin_46201450的博客
11-07 3372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>骰子布局</title> <style> body { .
第十三届蓝桥杯(Web应用开发)模拟赛 大学组 第二场
yinuo886的博客
03-27 2914
蓝桥杯Web应用开发大学组模拟赛第二场
蓝桥杯Web应用开发
weixin_51735748的博客
05-17 6945
蓝桥杯在近两期新增了一个Web应用开发赛道。如果对前端感兴趣的同学，可以尝试一下。
第十三届蓝桥杯Web应用开发（大学组）
weixin_46015250的博客
04-13 8967
文章目录前言01.水果盘02.展开你的扇子题目解答：03.和手机相处的时光题目解答04.灯的颜色变化题目解答05.冬奥大抽奖题目解答总结 前言 蓝桥杯，准备挺久的，参加这个比赛的过程蛮曲折，院内选拔的时候被刷了，出了结果后，emo了一会。后来自己交了钱比赛。因为这是第一届web蓝桥杯赛，能供练习的题超级少。官方出了2套题，学院老师给了一套。其他都是跟着一些文档学，边学边敲那种。实战经验还是少。这次我完全做出来的题，五五开吧。有些题做出来一半。应该不给分。猛猪流泪。。。结束后把自己..
蓝桥杯竞赛类型：Web应用开发 全程详解
Zrf2191318455的博客
04-19 1791
既然大家准备报名蓝桥杯，那么对蓝桥杯就应该有一定的了解了。没有了解也没关系，简单来说，蓝桥杯就是一个计算机竞赛，竞赛类型大多是使用各种语言写算法，当然还有本文的主体——Web应用开发。对蓝桥杯有了基本了解之后，我将根据本次参赛真实经历，全方位、深层次的为大家讲解Web应用开发的流程、考点、注意事项，最后为大家附上本次的准考证。
蓝桥杯新增web应用开发科目—送给想要参赛的小伙伴们一份备赛指南
热门推荐
孤寒者的博客
11-24 45万+
 ????偷偷告诉读者朋友们一个秘密：蓝桥杯大赛最新一届赛事新增了web科目，搞前端的小伙伴们快点来参与起来鸭！????  ????为了让想要报名参加本赛项的小伙伴们充分了解本赛事，在赛前做好充足的准备。本篇博文就这样诞生了！???? 主标题： 《 关于“第十三届蓝桥杯全国软件和信息技术专业人才大赛个人赛 （软件类）Web 应用开发组竞赛”》 赛事必知： 有关于组别： 具有正式学籍的在校全日制研究生、本科、高职高专及中职中专学生（以报名时状态为准），以个人为单位进行比赛。该专业方向设大学组和职业院校组
第十三届蓝桥杯(Web应用开发)省赛 大学组
yinuo886的博客
04-14 4203
文章目录蓝桥杯大学组省赛(web)01 水果拼盘（5分）02 展开你的扇子（5分）03 和手机相处的时光（10分）04 灯的颜色变化（10分）05 冬奥大抽奖（15分）06 蓝桥知识网（15分）07 布局切换（20分）08 购物车（20分）09 寻找小狼人（25分）10 课程列表（25分） 蓝桥杯大学组省赛(web) 01 水果拼盘（5分） Todo：相同颜色的水果放在相同颜色的圆盘正中间。 思路：flex布局，使用flex-direction和flex-wrap属性即可实现。 代码实现 /* TODO
蓝桥杯web开发组模拟题—给页面化个妆，前端组件化和插件化
m0_61418075的博客
04-02 304
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
蓝桥杯2024模拟赛
12-01
2024年蓝桥杯模拟赛一共有两期，包含C/C++程序设计、Java软件开发、Python程序设计、Web应用开发所有省赛科目。这两场模拟赛都是免费的，您可以在注册大赛官网dasai.lanqiao.cn后免费参加。如果您对算法感兴趣，不妨...
蓝桥杯软件类个人赛历届真题汇总（资料整理）-附件资源
03-02
蓝桥杯软件类个人赛历届真题汇总（资料整理）-附件资源
蓝桥杯例程，比赛答案，模拟题答案
03-20
5、6、7三年的比赛模拟题答案，以及各个模块的例程代码，详细资料！
所有方向你要的资料干货这都有，从入门到实战！【CSDN宝藏资料图鉴第一期】_csdn上的资料都是和什么相关的(1)
最新发布
2301_76379606的博客
04-20 832
Qt是跨平台的C++图形界面开发平台，开发的应用可以跨平台使用，PyQt是基于Qt基础之上进行的Python封装，既能利用Qt图形界面开发的便捷性和内部实现的高效性，又能利用Python语言的便捷性和优雅特色。本课程介绍基于Qt Designer的图形设计来实现Python图形界面开发。
第十五届蓝桥杯（Web 应用开发）模拟赛 2 期-大学组（详细分析解答）
m0_64642443的博客
11-30 6265
刚做完第一期的模拟题目，第二期又开始发布了，花了点时间做完了，分享下自己的解题思路。
【蓝桥杯Web】第十五届蓝桥杯（Web应用开发）模拟赛1期-大学组 | 全部答案
m0_62398656的博客
11-08 2876
蓝桥杯第十五届web应用开发大学组第一期全部详细答案解答
蓝桥杯Web应用开发第二次线上模拟赛【职业院校组题目】
qq_45367710的博客
03-15 3029
蓝桥杯Web应用开发第二次线上模拟赛【职业院校组题目】题解01搜一搜呀02折叠手风琴03营销号生成器04卡片化标签页05个人博客06水果摆盘07新年贺卡 前言：最近蓝桥杯Web 应用开发第二次线上模拟赛题目上线了，题主也顺便做了一遍，在这里做个记录。附题目地址链接：https://www.lanqiao.cn/questions/229066/ 01搜一搜呀 题目要求就是将数据渲染到视图，并且根据搜索框中输入的内容动态的根据输入款里的内容模糊查询显示相应的数据。 以下是代码结构： 可以看到数据在pos
蓝桥杯 —— Web前端（功能实现类）【标题即题目链接，点击查看具体要求】
HuoZhiyan 的博客
04-03 2768
蓝桥杯 —— Web前端（功能实现类）
第十三届蓝桥杯web应用开发知识总结
m0_62701594的博客
11-05 342
思路：在代码上找到有关水印的要求，然后开始填充DOM 节点。关于两列有比较大的间距，就用nth-child()思路：首先把座位排成6行8列，然后再处理细节。不溢出：flex-wrap:wrap;坐位之间的距离用margin。把二维数组平铺成一维数组。这样可以产生一个水印。
第十三届蓝桥杯(web组)模拟题，第五题页面布局
qq_51598807的博客
11-26 642
body{ width: 1024px; } a{ text-decoration: none; } /*nav*/ .navbox{ display: flex; justify-content: space-between; text-align: baseline; background-color: #F0F9FF; height: 78px; color: #0099f
第十五届蓝桥杯web模拟赛
03-11
第十五届蓝桥杯web模拟赛是蓝桥杯全国软件和信息技术专业人才大赛中的一个分赛项，主要面向对web开发感兴趣的学生。该比赛旨在通过实际项目的开发，考察参赛选手在web开发方面的能力和创新思维。 在比赛中，参赛选手需要根据题目要求，使用HTML、CSS、JavaScript等技术进行网页设计和开发。比赛内容通常包括网页布局、样式设计、交互功能实现等方面的要求。选手需要具备一定的前端开发基础知识，并能够熟练运用相关技术进行网页设计和开发。 参加蓝桥杯web模拟赛可以提升学生的web开发技能，培养创新思维和团队合作能力。同时，该比赛也为学生提供了展示自己才华和能力的平台，有助于拓宽就业渠道和提升竞争力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值