- 博客(92)
- 收藏
- 关注
原创 vue3接入微信扫码授权登录流程
当用户打开上面的二维码并扫码授权确认时,第三方应用跳转中间路由拿到微信返回的code参数,这时通过router.beforeEach函数中进行拦截判断,获取url中的code,根据code调用接口进行。注意: 这里涉及到redirect_uri参数,用户扫码完成后微信拉取重定向地址都是根据redirect_uri参数拉取的,所以前端要配置好redirect_uri的最终指向。本篇主要介绍两点,相关文档请查阅微信开平台。
2024-02-04 16:16:44
1266
原创 2024 年你应该使用 Bun、Node.js 还是 Deno?
此外,Deno 还通过整合内置的工具,如网络请求的 fetch,采用了当前的 Web 标准,与浏览器处理 JavaScript 的方式保持一致,提供更具凝聚力的编码体验。:Node.js 拥有一个充满活力的生态系统,其中包含丰富的库和框架,为开发人员提供了一个全面的工具包,可用于高效编码,涵盖了 Web 开发和实时应用程序的方方面面。:Node.js 通过非阻塞 I/O 和可伸缩性提供了更高的性能,支持基于事件驱动的架构,使其非常适合实时、数据密集型的应用,并能应对不断增长的用户群体。
2024-01-31 16:28:34
1618
原创 动手实践WebVR 全景
近年来VR概念越来越火,相信大家在网上都有过VR的浏览体验,比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等,VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理,同时也会用threejs实现两个小的demo,希望对大家以后在业务上遇到类似的场景能有所帮助。虚拟现实(英语:virtual reality,缩写VR),是利用电脑模拟产生一个三维空间的虚拟世界,提供用户关于视觉等感官的模拟,让用户感觉仿佛身历其境,可以即时、没有限制地观察三维空间内的事物。
2024-01-31 14:48:22
1831
原创 Node 调试利器,前端、Node 开发必备 - VSCode JS Debug Terminal
可以看出VSCode的基本支持了所有我们常用的调试场景,无论是nodetypescriptwebpack还是jest,全部拿捏。并且使用绝对无脑,可以放心食用。当然在使用过程中也遇到一些小问题,比如在跑jest时由于会启动多个子进程此时点击断点工具条中的断开可能会导致后续失效,也有时会卡住。不过瑕不掩瑜,用了就知道真香。
2024-01-30 14:22:09
595
原创 实用技能!如何使用Canvas封装图片压缩功能
要想更好的理解图片压缩,还是要把_FileReader_和_canvas_的一些api弄清楚,这样才会更加容易理解代码的逻辑,希望这篇文章能够帮助到各位大佬。
2024-01-29 10:48:51
561
原创 如何使用preact开始一个前端项目?
本篇文章对于preact不做过深介绍,仅仅介绍其基础的使用方法。使用Preact,我们可以通过组装组件和元素的树来创建用户界面。组件是返回其树应该输出的内容的描述的函数或类。这些描述通常是用JSX(如下所示)或HTML编写的,它利用了标准的JavaScript标记模板。这两种语法都可以表示具有“props”(类似于HTML属性)和子元素的树。preact支持通过多种方式引入使用。
2024-01-26 18:05:52
853
原创 20 个 CSS 函数,释放你的创造力
转换函数(rotate()、scale()、translate())在动画和过渡中起着至关重要的作用。Linear-gradient() 和 Radial-gradient() 函数非常适合为我们的 Web 元素创建时尚的渐变背景。诸如blur()、brightness()和contrast()之类的函数,我们能够应用各种图像效果,使图像在视觉上更具吸引力。过度使用函数,尤其是在动画中,可能会导致性能瓶颈。attr() 函数允许您访问 HTML 属性并在样式中使用它们的值,使您的设计成为数据驱动的。
2024-01-25 17:55:58
1175
原创 22个实用的CSS技巧
使用CSS的强大功能可以帮助你实现这一目标。平滑滚动效果:通过使用CSS的scroll-behavior属性,你可以为网页添加平滑滚动效果,使页面在滚动时更加流畅和舒适。阴影效果:通过使用CSS的box-shadow属性,你可以添加阴影效果,为元素增添立体感和深度。文字阴影效果:通过使用CSS的text-shadow属性,你可以为文字添加阴影效果,增加文字的可读性和视觉效果。边框动画效果:通过使用CSS的transition属性和:hover伪类,可以为元素添加边框动画效果,使其在鼠标悬停时产生过渡效果。
2024-01-25 17:52:41
810
原创 2024 年 7 个 Web 前端开发趋势
随着时间的推移,Next.js 的受欢迎程度将会越来越高。根据 Retool 的 《2023 年 AI 现状》 报告,自 2022 年以来,57% 的开发人员减少了对 Stack Overflow 的使用,甚至有 10% 的开发人员因为有了 ChatGPT 和 GitHub Copilot 而不再使用 Stack Overflow。越来越多的开发人员和企业正在加倍努力提高其网站的无障碍性,在 WebAIM 2024 年的报告中,我们可以期待对无障碍性的控诉会减少,而支持无障碍性的网站会增加。
2024-01-23 14:52:50
2624
原创 深入掌握 OSS,最完美的 OSS 上传方案!
上传文件一般不会直接存在服务器目录下,这样不好扩展,一般我们会用阿里云的 OSS,它会自己做弹性扩展,所以存储空间是无限的。OSS 对象存储是在一个 bucket 桶下,存放多个文件。它是用 key-value 存储的,没有目录的概念,阿里云 OSS 的目录只是用元信息来模拟实现的。我们在测试了在控制台的文件上传,也测试过了 node 里用 ali-oss 包来上传、在网页里直传 OSS 这三种上传方式。不管在哪里上传,都需要 acessKeyId 和 acessKeySecret。
2024-01-22 17:45:51
1567
原创 在vscode中悄无声息地摸鱼
实战没有贴出完整代码,用少量的代码带大家快速了解如何实现一个插件的基本功能,如果需要深入了解可以参考:document:表示当前代码文档。position: 表示鼠标所在的位置,配合 document 可以获取到选择的文本。token:表示取消操作的 token。完整代码:https://github.com/codexu/FishX官方文档:https://code.visualstudio.com/docs。
2024-01-22 16:41:35
1720
原创 vue3 - 使用reactive定义响应式数据进行赋值时,视图没有改变,值已经改变的解决方案
vue3 - 使用reactive定义响应式数据进行赋值时,视图没有改变,值已经改变的解决方案
2023-09-15 15:20:27
1486
原创 cesium加载百度底图的方法源码
这个是源码使用百度底图的方法,还有另外一种加载插件可以加载百度底图和其他底图。cesiumMap插件(可加载腾旭、天地图、高德、谷歌地图)开发初始化项目中使用。
2023-06-14 15:04:30
1050
原创 axios请求后端接口基础路径设置成动态,打包之后可以修改
Vue项目大多少项目地址前端路径是写死在项目里面,或者是使用生产模式和开发模式2种对应地址进行使用开发。(基础路径封装)封装到main.js里,页面创建之前就请求config.json地址获取基础路径开发。基础路径,可以随时更改,更改之后,刷新一下页面,就可以实现更新基础路径接口!2.在vue项目里引入axios。3.项目里封装axios。1.项目引入axios。
2023-06-14 14:28:54
792
原创 手撸低代码平台搭建(四)组件拖动自由布局的实现
大家好,在前两篇文章中,我们走进了前端低代码的世界,并揭秘了低代码的核心——页面设计器的实现。在揭秘页面设计器时,我们重点分享了顺序排列布局的组件拖动方式,那篇文章的评论中,有小伙伴问到自由布局的实现,那么我们在这篇文章中来分享一下自由布局拖动的实现原理,实现一个设计器组件自由拖动的最简demo。
2023-02-03 16:43:45
1036
原创 vue2低代码平台搭建(三)组件间交互的实现
大家好,我是L丶Y,我们在上一篇文章中主要介绍了低代码平台的页面设计器相关的一些功能原理,打通了页面设计器顶部操作栏、左侧组件列表,中间画布、右侧属性配置四个部分的关系。能够实现组件列表的展示、组件到画布的拖动,属性配置修改对组件渲染效果影响,并说明了页面设计器中设计好的页面是如何进行渲染的。虽然我们看起来实现了通过组件拖拉拽完成页面的开发,但是目前的页面还是无法进行使用的,这是因为页面中的组件都是相互独立而又没有关联的。实际页面中的绝大多数组件都需要进行相互通讯。
2023-02-03 16:43:04
1358
原创 vue2低代码平台搭建(二)揭秘页面设计器
大家好,我是L丶Y。我们在上一篇文章中走进了低代码的世界,这一章节我们要开始干货内容了,来探索一下低代码开发的核心 ——页面设计器。我们知道,低代码开发平台都是通过拖拉拽可视化的页面设计器进行页面开发的,在这一章节,我们来探索一下页面设计器的实现方式。下图中,我们截取了几款优秀的低代码产品的页面设计器界面。最上方是操作栏,我们可进行页面的保存、预览、查看json信息、查看代码等操作;左侧是组件列表,当然也可以添加一些切换,让我们的左侧区域支持查看页面树信息、配置数据源等其他操作;中间是画布。
2023-02-03 16:41:09
2617
原创 Vue2低代码平台搭建(一)
大家好,我是L丶Y,这一次,我们来聊一聊前端低代码平台的构建。近些年来,随着Saas行业的高速发展,低代码的概念也逐渐流行了起来,而低代码产品也越来越多的出现在我们的身边,像国外的Mendix,国内的宜搭、苍穹、简道云等等。而我司自研的低代码应用构建平台也已服务了十余B端生产项目,基于这种新型的开发方式,图形化的拖拉拽配置界面,并兼容了自定义的组件、代码扩展,确实在B端后台管理类网站建设中很大程度上的提升了效率。L丶Y也想通过这篇文章与大家对于前端低代码平台的构建进行交流,分享。
2023-02-03 16:39:03
3665
原创 你可能不知道的JavaScript APIs
然而,仅仅将你的网页文本翻译成你所需要的任何语言,并不足以使你的内容对讲该语言的人可用,因为像日期、数字、单位等东西在不同国家是不同的,可能会给你的用户带来混乱。该方法将会返回一个 Promise。在其最常见的格式中,它以这样的顺序囊括了这些内容:语言代码,脚本代码,和国家代码,全部由连字符分隔开。由此可以知道当前文档 (即为页面) 是在背后,或是不可见的隐藏的标签页,或者 (正在) 预渲染。它是全局可用的,而且是只读的。尽量避免使用它,因为它现在已经被废弃了,但是当被访问时,如果页面是隐藏的,它将返回。
2022-10-26 15:49:48
885
原创 前端人 70% 以上 不了解的迭代器/可迭代对象/生成器
概念(维基百科):迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象[1][2][3],设计人员使用此接口无需关心容器对象的内存分配的实现细节。JS中的迭代器其本质就是一个对象,符合迭代器协议(iterator protocol)迭代器协议done(完成),它的值为布尔类型,也就是true/false。- 如果这个迭代器没有迭代完成即返回- 当这个迭代器完成了即返回valuevalue:any类型其对象返回一个next函数。
2022-10-26 15:48:25
623
原创 糟了,线上服务出现OOM了
前一段时间,公司同事的一个线上服务OOM的问题,我觉得挺有意思的,在这里跟大家一起分享一下。我当时其实也参与了一部分问题的定位。
2022-10-26 15:44:33
286
原创 常见的前端开发面试题(附答案)
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,是会话级别的存储。如果是页面型产品,多数确实不太需要它,因为页面中的 JavaScript代码,处理交互的绝对远远超过处理模型的,但是如果是应用软件类产品,这就太需要了。d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。32.一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验[性能优化]。
2022-10-20 14:27:12
1979
原创 将博客搬至CSDN
今日起将会搬家到csdn,最新数据心思将发布到csdn 最新本人地址(12条消息) Dream_travelerly的博客_CSDN博客-cesium领域博主
2022-10-20 11:33:00
81
原创 Shader cesium中材质
对于phong,在OpenGL SuperBible里面有详细的说明,大概就是通过material的属性,根据光的位置和光的颜色,最终计算出在该点当前环境和自身材质的影响下对应的颜色。上面是Shader中涉及到材质的一个最简过程:材质最终影响的是片段着色器中的颜色gl_FragColor,而所有czm_开头的都是Cesium内建的方法和对象,Cesium已经帮我们提供好了光学模型和计算方法,并不需要我们操心,而我们要做的,就是指定对应物体的材质属性,通过修改material中的属性值,来影响最终的效果。
2022-10-20 11:26:22
677
原创 30+ 个工作中常用到的前端小知识(干货
在这些表象的背后呢,实际上是行业对开发人员的要求发生了天翻地覆的变化,以往前端写demo,套模板,调页面这种刀耕火种的方式已经完全不符合当下对开发效率的要求,前端工程化就是在这样一个背景下被提上台面,成为前端工程师必备的手段之一。近些年被广泛的关注和探讨,究其原因主要是因为现代化前端应用功能要求不断提高,业务逻辑日益复杂,作为当下互联网时代唯一不可或缺的技术,前端可以说是占据了整个开发行业的半壁江山。从传统的网站,到现在的。一般来说前端工程包含,项目初始化,项目开发,提交,构建,部署,测试,监控等流程。
2022-10-20 11:04:02
313
原创 数据库前期没搞好,程序员后期绝对跑!!
大家好,。SQL调优这块呢,大厂面试必问的。最近金九银十嘛,所以整理了SQL的调优思路,并且附几个经典案例分析。正在上传…重新上传取消。
2022-10-20 11:01:27
70
three+vite开发demo
2024-01-19
cesium 模型压平分析,cesium坡度坡向分析代码求demo
2022-10-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人