20240318 前端开发日报

十分钟学会WebSocket；一行代码极速部署：开源流数据库推出面向个人开发者的流计算平台；纯前端实现 PNG 图片压缩 | UPNG.js；gu：轻松切换个人和工作的 Git 用户配置；Flutter&Flame游戏实践#05 | 打砖块 – 基础功能；基于Spring Boot+Vue的校园二手交易平台；react中关于hook介绍及其使用，移动前端开发前景；React的生命周期函数详解，CSS浮动的使用与清除

1. 十分钟学会WebSocket

   WebSocket简介 WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。 W

2. 一行代码极速部署：开源流数据库推出面向个人开发者的流计算平台

   在 2024 年这个时间点上，让流计算普及化的时机是否已经成熟？开源流式数据库 RisingWave 推出了面向开发者的本地版，让广大开发者和中小企业轻松享受到流计算带来的价值。

3. 纯前端实现 PNG 图片压缩 | UPNG.js

   最近在迭代应用的时候用到了 UPNG.js 压缩 PNG 图片，这里记录分享一下使用经验，并附上完整 Demo。

4. gu：轻松切换个人和工作的 Git 用户配置

   开发者在处理多个项目时常面临切换Git用户配置的需求。gu命令行工具，专为简化这一流程而设计，允许用户在个人和工作项目间轻松切换Git配置

5. Flutter&Flame游戏实践#05 | 打砖块 – 基础功能

   Flutter&Flame 游戏开发系列前言: 该系列是 [张风捷特烈] 的 Flame 游戏开发教程。Flutter 作为 全平台 的 原生级 渲染框架，兼具 全端 跨平台和高性能的特点。目前官方对

6. 基于Spring Boot+Vue的校园二手交易平台

   文章浏览阅读916次，点赞20次，收藏20次。基于Spring Boot+Vue的校园二手交易平台

7. react中关于hook介绍及其使用，移动前端开发前景

   文章浏览阅读299次，点赞8次，收藏9次。三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

8. React的生命周期函数详解，CSS浮动的使用与清除

   文章浏览阅读304次，点赞8次，收藏10次。资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。频**如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）[外链图片转存中…(img-vM693lwt-1710691376501)][外链图片转存中…(img-mIZQ2W5g-1710691376502)][外链图片转存中…(img-EjOysJl8-1710691376502)]资料过多，篇幅有限。

9. Vue3+TypeScript项目（品牌管理模块）

   文章浏览阅读157次，点赞2次，收藏4次。2.el-table-column的type属性：对应列的类型。因为prop属性虽然能够展示数据，但是他默认是div，如果我们的图片使用prop展示的话，会展示图片的路径。3.el-table-column的prop属性：字段名称 对应列内容的字段名， 也可以使用 property属性。比如我们这里绑定的trademarkArr是个三个对象的数组，就会多出来3行。注意：因为我们之前已经绑定了数据，所以在这里直接使用数据的属性tmName。在数据展示模块，我们使用了element-plus的。

10. Vue3 中 toRefs 和 reactive 搭配使用 为什么要搭配使用

    文章浏览阅读130次，点赞3次，收藏5次。在这个例子中，我们首先创建了一个响应式对象state，然后使用toRefs将其转换为一个新的对象，然后我们从这个新对象中解构出count。这是因为解构操作实际上是在创建新的变量，这些变量只是响应式对象属性的初始值的副本，而不是响应式对象属性本身。toRefs可以将响应式对象转换为普通对象，该对象的每个属性都是一个ref，这样你就可以安全地解构这个对象，而不会失去响应性。toRefs的实现原理是遍历传入的响应式对象的每个属性，并为每个属性创建一个新的ref。，以及确保ref的值始终是响应式的。

11. 【核心代码】JS+ajax无刷新验证短信验证码和缓存中的是否一致提交表单

    文章浏览阅读198次，点赞5次，收藏7次。要验证用户输入的手机短信验证码和网页缓存的验证码是否一致，你可以在提交表单时将用户输入的验证码一并发送到服务器端，并在服务器端进行验证。你可以将以上代码嵌入到你的 JavaScript 中， 服务器端可以通过比较这个验证码和网页缓存的验证码来进行验证。函数将获取用户输入的验证码，并将其添加到表单数据中一起发送到服务器端。的输入框用于用户输入验证码。当用户点击提交按钮时，在这个示例中，假设你有一个 id 为。

12. React 函数式组件性能优化指南(1)

    文章浏览阅读392次，点赞17次，收藏17次。javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

13. React 中 CSS in JS 的最佳实践，前端web前端开发

    文章浏览阅读416次，点赞12次，收藏14次。实在是太繁琐了！如果这是一段（注意，是业务代码），那团队中的其他人去读这段代码的时候内心一定是比较崩溃的。当然，如果是维护的话，遵守BEM规范「块（block）、元素（element）、修饰符（modifier）」还是非常重要的。

14. Vue2（四）：Vue监测数据的原理

    文章浏览阅读402次，点赞10次，收藏15次。下面这种方式就不能奏效，但是在控制台查看person[1]姓名年龄啥的都是更改之后的。如果先点击按钮在点击vue后台可以看到信息更改页面却不更改，先点击vue后台就vue也没改页面也没改，这是为啥呢？

15. react中集成其他框架与JSX Depth(1)

    文章浏览阅读292次，点赞12次，收藏7次。3.使用点符号去表示JSX的类型，其意思就是你现在全局中去引用React，然后再声明一个变量，里面使用对象的方式再添加一个变量，最后再用一个无状态组件去表示要呈现的内容。这样的你在引用时，就使用点符号去表示JSX的类型。4.用户自定义组件的名称的首字母必须是大写，通常用的是大驼峰式的命名法则。如果使用的是小写，则表示的是内置的组件，然而当你运行程序的时候，内置组件中并没有这个组件，那么程序就会报错。下面通过两个实例来进行说明在上面的两个例子中，就很好的去说明了刚才所叙述的两点。

16. es6防抖和节流

    文章浏览阅读88次。【代码】es6防抖和节流。