- 博客(29)
- 收藏
- 关注
原创 蓝桥杯前端Web赛道-输入搜索联想
在控制台上直接输入代码,会有非常清楚的提示,下面是动画演示,其实其他的函数也可以靠这个方法来试出它的用法,但是前提是你知道过这个函数怎么用,这只是起到一个让记忆回笼的作用。呢,其实这是题目的一个要求之一,因为题目要求的模糊查询是无视大小写的,所以我们可以“曲线救国”,干脆在进行判断的时候,就把当前需要进行查询的字段。内部也可以做计算,我们可以直接在原地添加即可,上面的动画已经演示过如何使用技巧取出我们需要的值,这里就不过多赘述。思路如下,将原先单词的第一个字母变成大写字母,然后把剩下的字母都拼接在一起。
2024-03-14 17:51:02
2145
原创 蓝桥杯前端Web赛道-水果消消乐
至此完成题目所有要求,由于题目没有要求效果必须要和实例一样,所以我并没有留显示水果的时间,所以点击第二个水果的时候会出现看不到它的情况,代码直接就往下走继续判断了,实际上代码也是可以通过的,如果想要达到题目的效果,使用。这里我们先判断数组内的元素是否已经有两个元素,这样我们才能继续对比然后对比这俩元素是否为相同的水果,如果是,我们就把当前元素的父元素透明度设置为0。现在就剩下计分的需求了,由于每次判断后,分数就应该相应的发生变化,所以我们将分数的改变放到我们刚刚的判断里然后再渲染上去。
2024-03-14 17:16:04
1114
原创 蓝桥杯前端Web赛道-收集帛书碎片
是 ES6 中的语法,用于将 Set 对象转换为数组。Set 对象是一种集合数据结构,其中的元素是唯一的,不会重复。是调用一个数组方法,用于将多维数组(嵌套数组)转换为一维数组。其实通过这个目标我们可以看出其实就是筛选出数组中多余的元素,那么我们可以通过。来判断,当前数组是否已经拥有过这个碎片,如果没有拥有过就。通过控制台打印出现在的数据是这个样子的,是一个二维数组。操作符,可以将 Set 对象中的元素转换为数组形式。方法,可以将其内部的所有元素平铺到一个新数组中。是一个二维数组,通过调用。
2024-03-06 10:40:13
578
原创 蓝桥杯前端Web赛道-新鲜的蔬菜
此时相当于只实现了垂直居中,我们还需要做到水平居中,才能让盒子中的白菜整齐的摆放在中间,这个时候就需要用到。第二个盒子里有两个元素,根据需求我们确定只需要把第二个辣椒移动到右下角即可,控制一个元素的位置我们可以使用。属性,该属性可以让盒子内的元素两端对齐,项目之间的间隔都相等。第三个盒子的样式可以直接依照上面的给出的属性和思路依葫芦画瓢,下面直接给出完整代码。是要设定在你需要控制的那个元素的样式里,而不是写在父盒子中。布局的使用到的各种属性有非常详细的解释。,也就是控制的纵向的排布,反之亦然。
2024-03-04 15:31:21
1136
1
原创 蓝桥杯前端Web赛道-自适应页面
这个时候我们通过观察页面可以发现,紧邻着按钮的下面有个单选框,当我们在控制台点击按钮的时候,会发现单选框也会被选上,所以通过这个特性我们可以使用在css中使用单选框。浮在内容之上,简而言之就是需要让它脱离标准流,也就是使用定位和浮动来做,不使用浮动的原因是浮动需要标明是左浮动还是右浮动,这里我们的菜单不需要。媒体查询通俗易懂的来说就是可以针对不同的屏幕尺寸设置不同的样式,非常符合当前题目的要求。第一组是完成菜单浮动的功能,第二组是完成二级菜单竖向排列的功能,之所以不用子绝父相是因为。
2024-02-28 11:32:09
2151
原创 蓝桥杯前端Web赛道-课程列表
第二步的思路如下:当点击第一页的时候,我们就只渲染第一页应该出现的数据量,点击第二页的时候再出现第二页应该出现的数据量,所以。点击按钮进行跳转并且页码为第一页的时候禁用上一页的按钮,页码为第二页的时候禁用下一页的按钮。的基础上+1,这样循环就只会遍历一次,从而将最后一条数据遍历出来,否则则在此基础上加上4。这个函数在点击上一页和下一页的时候是会被反复调用的,我们只需要确定从第几个数据开始遍历。根据要求可以轻易的得出,当页数为第一页的时候,上一页的按钮就应该添加。第二页的数据对应的是数组下标5到第9条数据。
2024-02-27 16:11:33
974
原创 蓝桥杯前端Web赛道-寻找小狼人
其实通过题目要求以及题目中提供的gif可知,该题就是需要我们手动写出能够代替。就是这个新数组应该满足的条件,我们可以通过这个回调函数的特性来进行过滤。函数返回的是一个新数组,所以我们还需要在内部定义一个新数组。的括号里提供的是一个回调函数,这个回调函数会返回。则证明当前元素满足要求,将当前元素添加到结果数组。然后我们利用回调函数进行判断,最后返回新的数组。然后再通过一些逻辑,真正完成过滤的要求。以上代码就是条件,满足这个条件就会返回。根据提供的代码对比,我们就能知道。这个数组,于是此时的。
2024-02-26 19:01:40
507
原创 蓝桥杯前端Web赛道-展开你的扇子&&和手机相处的时光
在做题的时候我使用的,虽然能完成要求但是不给我过,所以还是使用上面的代码比较好。特别需要注意的是题目要求是鼠标放上去的时候变化,所以需要加上。的这个盒子包含了所有元素,为了让它们都展开,所以必须。这两道题都很简单所以写在一起,先看展开你的扇子。都需要更改角度,按照要求使用下面的代码即可。其实我们和题目比较观察可以发现两点。其实就是在鼠标放上去的时候,每个。现在我们来看和手机相处的时光。所以我们只需要交换x,y轴的。我直接放完整代码在下面。
2024-02-16 21:37:07
527
原创 蓝桥杯前端Web赛道-水果拼盘
布局的特殊性,当空间不够的时候,它就会自动缩小空间里的盒子,让它们弹性的变化,在不改变盒子占用空间的比例的情况下来适应现在的空间。我们通过观察题目发现现在的水果都是横向排列的,所以我们需要把水果竖着排,于是我们可以这样写。另外推荐大家去看阮一峰老师编写的关于flex布局的教程,非常详细。刚刚的代码实际上是改变了整个页面的主轴,默认的主轴是。所以最后一步,我们只需要设置换行则可以达到题目要求。也就是说按行来排的,简单用图片表示就是这样。布局,所以我们在提示的位置先写上。布局里,默认是不换行的,由于。
2024-02-16 21:07:50
486
原创 蓝桥杯前端Web赛道-卡片化标签
虽然我们成功添加了类名,我们还需要删除之前已经添加的内容,不然只要是点过的地方都会被加上类名。那么,首要工作就是我们需要获取到选项和内容,方便我们添加类名,由于题目要求页面布局部分不能做任何修改操作,所以我们不能使用。这个类名的内容,就是当前选择的内容,所以我们只需要在选项这个地方添加监听事件,当点击改选项的时候,对应的内容也添加。运行题目,通过观察我们可以发现,其实这道题就是一个类名的切换,拥有。这两行代码的意思是,当监听到鼠标点击事件的时候,给当前的选项添加。, 但不同的是,我们需要判断当前。
2024-02-15 16:46:33
513
1
原创 蓝桥杯前端Web赛道-新年贺卡
这个函数可获取小于x,且与x最相近的整数,换言之就是会返回当前数的整数位,所以我们需要把这两个函数结合起来一起使用。根据题目提供的数组得知,我们需要生成十以内的数字,所以我们可以写成。首先我们根据提示得出,这是一个生成随机数的题目,通过生成的随机数,相对应的渲染到页面上。: 将上一步得到的随机整数对数组长度取模,得到一个 0 到。时会发现,这个函数生成的随机数实际上并不都是整数,而是。: 使用上一步得到的随机整数作为索引,从数组。的长度,这样生成的随机数的范围就在。得出的结果即为我们需要的随机数范围。
2024-02-15 16:16:04
386
1
原创 封装axios使用AntdVue实现分页查询
在日常开发的时候经常会使用到分页的功能,Antd自带的表格本身就具有分页的功能,但是实际开发中如果后端给我们返回了上万条数据,那么再由前端进行分页是不显示的,所以还是需要后端返回具体的参数来帮助前端进行分页。但此时点击2,3,4发现页面的数据并没有变化,原因是因为,虽然我们传入了我们定义的数据,但此时当我们点击的时候,查看文档我们发现有这样一个事件,在分页的时候会触发,回调参数是指,在这个事件发生的时候,系统会自动调用先定义好的函数,然后再把相关的参数传递给这个函数。请求,这样才能更方便的获取多个接口。
2023-12-06 20:20:37
1103
1
原创 蓝桥杯前端Web-电影院排座位
的右边距,由于空间不够,再加上每个椅子都有10px的外边距,所以就只能把其他盒子挤下去。会出现以下情况,那么为什么会出现这种情况呢,原因是我们前面给。布局,椅子数量太多,并且有规律的拜访,所以挨个移动不现实。效果如下,我们发现座位并没有位于屏幕的中间,所以再在。现在座椅宽度正常了但是都在一行上,所以我们需要使用。变成这样的原因是因为,包裹的宽度有限,由于使用了。这次居中了,我们再来解决每个椅子间隔的问题。布局所以椅子会自动的缩小自己的宽度。的上边距,所以我们最后还要减去。的上边距,所以我们最后还要减去。
2023-12-04 13:19:36
2253
原创 vue-router基础知识
在src目录下面新建router 文件 然后在router 文件夹下面新建 index.ts是Vue Router提供的一个函数,用于创建路由实例。是路由实例的配置项,它用于指定路由的历史模式。在这里,我们使用创建了一个 Web 历史模式对象,它将使用浏览器的来管理路由的历史记录。routes是一个定义路由配置的数组,它描述了应用程序中的不同路由及其对应的组件。每个路由对象由path和component属性组成。path表示页面路径,是URL中对应的路径地址。component。
2023-11-29 10:37:45
404
1
原创 git基础命令
git push --set-upstream origin [分支名] 推送分支到远程分支。git push --set-upstream origin [你创建的分支名]git clone -b dev --single-branch 仓库地址。git checkout master 切换分支到主分支。git checkout[分支名] 切换到目标分支。git branch [分支名] 建立自己的分支。git checkout [分支名]切换到分支。git merge [分支名] 合并分支到本地。
2023-11-29 10:04:06
352
1
原创 Spring + Spring MVC + MyBatis登录注册
使用的是纯java代码和注解来代替xml的方式,所以不会出现xml文件。使用了JWT来生成token和MD5进行加密,同时封装了自己的返回值,现给出除拦截器以外的所有代码供参考。最后使用postman来进行测试。
2023-11-28 21:36:58
759
原创 原型和原型链
记住永远不要在构造函数里去声明一个方法,这样的话如果创建一千个对象,那么就会有一千个对象有这个方法的副本。属性的时候,就会往上找它的原型,从而使用,如果它的原型上没有就再往上找,,直到指向。中创建的所有数组的原型,所以说当你使用map方法的时候,实际上是。的指向也不会受原型影响,依旧是哪个对象调用它,它就指向哪个对象。而原型继承中,对象其实是通过行为(方法)链接到原型,的所有实例化对象的原型,第三行代码也说明了刚刚的结论。,要么就是对另一个对象的引用。出的对象定义原型,而这个原型就储存在构造函数的。
2023-11-27 21:30:53
1039
1
原创 SpringMVC知识总结
AOP为Aspect Oriented Programming的缩写,意思为面向切面编程,是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP实际上是OOP(面向对象编程)的补充,利用AOP的思想可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分的耦合度降低,提高程序的可重用性,同时提高了开发的效率。控制反转/反转控制。它是一种思想不是一个技术实现。描述的是:Java 开发领域对象的创建以及管理的问题。例如:现有类 A 依赖于类 B。
2023-11-26 20:21:33
830
1
原创 React基础知识点
一个组件必须是大写字母开头,不然不会生效。第一步:导出组件是语法,意思是默认导出,一个组件里面只能有一个默认导出。这样允许你能够在另外一个组件引用它。第二步:定义函数第三步:添加标签这个组件允许返回标签,看似是,但实际上是,这种语法被称为返回语句可以写在一行上也可以像上面的例子一样用注意:组件不能嵌套定义而且应该在顶层声明组件总结:export - JavaScript | MDN (mozilla.org)默认导入和具名导出是原本的语法,一个页面可以有多个具名导出。例:但是只能有一个默认导出
2023-11-20 21:16:03
189
1
原创 SpringAOP与事务
事务(Transaction)是访问并可能更新数据库中各项数据项的一个程序执行单元(unit)。原子性、一致性、隔离性和持久性。这四个特征通常称为ACID。
2023-11-19 18:26:47
77
原创 vue知识点梳理-2
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外,Vue 还允许你注册自定义的指令。下面是一个自定义指令的例子,当一个 input 元素被 Vue 插入到 DOM 中后,它会被自动聚焦:vue// 在模板中启用 v-focus</script><template>在中,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中,vFocus即可以在模板中以v-focus的形式使用。将一个自定义指令全局注册到应用层级也是一种常见的做法:js。
2023-08-10 15:41:38
131
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人