草庐IT

纯前端

全部标签

开箱即用的前端图片压缩方案

前端实现图片压缩的背景我们都知道在“寸土寸金”的互联网时代,速度是第一竞争力,虽然我们的5G发展已经摇摇领先,但是也经不住用户在一个网页里传很多“巨无霸”图片,最终导致的结果就是页面“龟速”打开......图片那么作为技术人,当然也有一堆的解决方案,比如:压缩图片再上传将图片上传到图床,利用图床压缩能力和CDN节点就近分发图片流式加载图片懒加载/预加载当然聪明的小伙伴也会将上面的方案组合,设计更优秀的图片“提速”方案.今天不会和大家把所有方案都介绍一遍,因为网上也有很多实践,接下来会从前端技术提升的角度,分享一下如何用原生 javascript,实现从图片上传到图片自定义压缩的完整方案.大家可

20个酷炫的开源免费JavaScript动画库,前端开发、游戏开发推荐收藏

如果要实现一些酷炫的网页动态效果,又不想重复造轮子,那么以下一些开源JavaScript动画库值得尝试。1.three.js(95.4KStar)https://github.com/mrdoob/three.js/three.js库是一个令人惊叹的2D/3D JavaScript动画库,可用于游戏、儿童教育网站、各种花哨的演示文稿等各种复杂网页动画的开发。目前的版本的渲染器包括:WebGL、处于实验阶段的WebGPU、SVG和CSS3D。快来欣赏一下three.js那些酷炫的效果吧:https://threejs.org/examples/#webgl_animation_keyframes

java实现本地文件转文件流发送到前端

java实现本地文件转文件流发送到前端Controllerpublicvoidexport(HttpServletResponseresponse){//创建file对象response.setContentType("application/octet-stream");//文件名为sresponse.setHeader("Content-Disposition","attachment;fileName="+s);FileUtils.writeBytes(fileName,response.getOutputStream());}FileUtilspublicstaticvoidwrite

前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

JavaScript1.JavaScript中的闭包是什么?答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。2.JavaScript中的回调函数是什么?答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处理异步操作,例如读取文件、从数据库获取数据等。3.JavaScript中的原型是什么?答案:在JavaScript中,每个对象都有一个原型对象,它定义了该对象的属性和方法。原型对象本身也有一个原型对象,这样一层层直到一个对象的原

ASP.Net Core Web API结合Entity Framework Core框架(API的创建使用,接口前端权限设置,前端获取API的Get,post方法)(程序包引用以及导入数据库)

目录1.WebApi程序包引用2.WebApi的创建与Http类型的介绍2.1 ASP.NetCoreWebAPI项目的创建2 .2 API接口的创建2.3 HttpGet和HttpPost类型的区别3.接口权限设置4.HttpGet方法和HttpPOst方法5.前端中用HttpGet/Poset获取接口数据6.EF框架——配置数据库链接字符串(即将数据库中的表导入项目中)7.WebApi和EF结合的增删改查需注意的部分代码 8.当web返回给窗体如下特殊字符串时,在web端的program的main函数中加入以下代码:1.WebApi程序包引用EntityFramework(EF)Core是

前端下载文件的几种方式使用Blob下载文件

前端下载文件的几种方式使用Blob下载文件在前端下载文件是个很通用的需求,一般后端会提供下载的方式有两种:1.直接返回文件的网络地址(一般用在静态文件上,比如图片以及各种音视频资源等)2.返回文件流(一般用在动态文件上,比如根据前端选择,导出不同的统计结果excel等) 第一种方式比较简单,但是使用场景有限。第二种方式通用性更好我们先一下第一种的使用场景:-a链接下载文件我们可以通过download属性,可以实现对下载的文件进行重命名。下载文件-还可以使用编程式的写法:1.location的hreffunctionDownload(){window.location.href='www.bai

基于 Web Components 的微前端框架

微前端微前端是一种架构风格,旨在将大型前端应用程序拆分为更小、更可管理的部分。它通过将前端应用程序划分为多个独立的子应用,每个子应用都有自己的代码库和独立的开发团队来实现。这些子应用可以独立部署、独立运行,并且可以在同一个页面上协同工作。微前端的核心思想是将前端应用程序拆分为多个独立的功能模块,每个模块都可以独立开发、测试和部署。这样可以提高开发效率,降低代码耦合度,并且可以让不同团队独立开发不同的模块,从而提高团队的协作效率。在微前端架构中,每个子应用都可以使用不同的技术栈和框架,因此可以根据具体需求选择最适合的技术栈。同时,微前端还提供了一些通信机制,使得不同子应用之间可以进行跨域通信和共

慌了,我老板说:AI 将 100% 取代前端

在这篇文章中,作者讨论了前端开发与人工智能之间的关系,以及AI是否会在未来取代前端开发工作。其中,文章还提到了一些AI在前端开发中的应用,如自动化重复性任务、生成模板代码和优化性能。这些应用可以提高前端开发的效率,但作者强调人类的创造力和设计能力仍然是不可替代的。下面是正文~~~~我是一名前端。所以,当老板告诉我们前端开发将被AI完全取代时,确实有些害怕。早在 Chatgpt 革命之前,他就已经预言了这一点。现在,当我使用ChatGPT或GitHub的 **Co-pilot**时,有时真的会感到害怕,因为这些工具实在太强大了。如果它们现在已经可以完成这么多任务,那么它们有可能取代开发者,至少是

前端build打包生成的dist使用 nginx 运行接口报错405和401问题。

build打包的dist介绍。    dist目录是一个包含了打包后的项目代码和相关依赖项的目录,用于在部署时将项目移植到其他环境中。它提供了一个整理而简化的文件结构,使得部署过程更加方便和可靠。    直接打开报错会空白可以使用nginx来启动。Nginx官方网站:nginxnews下载很快很方便,可以不用配置环境,直接在终端管理员身份进入nginx文件夹下面即可startnginx启动项目,但需要简单配置一下启动文件nginx.conf。情况一、接口405问题:     情况介绍,启动的项目中,接口完全没有问题,而且请求头也完整的添加上了,传参要求也是按照服务端要求来的,但就build打包

【Web前端】彼岸の花——网上花店(网页制作)

本篇博客我们来做一个好看又简单的前端案例——彼岸的花网页界面。这里是代码和网页素材,需要的自取:(提取码:7777)https://pan.baidu.com/s/1PH0TCuLpapPlJnczDcGkig?pwd=7777&_at_=1669882863950目录一、案例图二、源代码2.1html部分2.2css部分一、案例图二、源代码2.1html部分彼岸の花  偏安一隅静静生活商品分类>我喜欢一些花儿,静静地开放,从不声张。小小的花朵,有着异样的芬芳...Iloveflowers,quietlyopen,neverquiet.Littleflowers,witht