草庐IT

前端就业

全部标签

前端大文件分片下载解决方案,没用你来砍我

超大文件下载,支持断点续传前言一、背景二、代码实现1.后端2.前端创建工具类download.jslocalforage相关方法3.效果展示localforage数据展示下载进度展示三、总结前言好记性不如烂笔头,站在岸上学不会游泳。这次分享一是为了记录下忙碌几天的成果,方便以后查阅;二是避免别人走弯路,给别人方便就是给自己方便。一、背景客户下载超大文件(1G以上)时,下载异常断开,分析了下有以下原因:nginx配置允许下载大小超限网络带宽限制,导致龟速下载;下载长时间连接可能会导致超时针对上述问题,找到一个合理的解决方案分片下载,既可不超限亦不需要保持长连接,如果出现网络波动断开连接,亦可断点

前端算法之动态规划

动态规划动态规划解决什么问题最短路径问题:背包问题:最长公共子序列问题:最大子数组和问题:调度问题:编辑距离问题:矩阵链乘法问题:动态规划例子1下面是JavaScript实现代码:动态规划例子2–爬楼梯动态规划例子3–使用最小花费爬楼梯动态规划动态规划(DynamicProgramming)是一种算法思想,通常用于解决一些优化问题和最优解问题。它的基本思路是将一个大问题拆分成若干个小问题,先解决小问题,再合并得到原问题的解。动态规划算法通常包括以下几个步骤:定义状态:将原问题拆分成若干个子问题,并将子问题中需要求解的参数定义为状态。状态转移方程:通过状态之间的转移得到更大规模的子问题的解,从而

【前端】-vue-对打包的静态文件进行压缩

通过npmrunbuild打包时候,会发现静态文件很大,放在nginx服务中访问页面会很慢,所以可在打包过程中对静态文件再压缩。对js、css、html等文件进行压缩:安装插件“compression-webpack-plugin”。(我本地版本:cnpminstallcompression-webpack-plugin@5.0.1)cnpminstallcompression-webpack-plugin配置vue.config.js文件:constCompressionWebpackPlugin=require('compression-webpack-plugin');constisPr

java-文件上传-excel存入数据库全代码及流程(附前端代码)

今天给大家带来的是文件上传中比较常用的,上传excel文件,将表格中的数据存入数据库中的一个转化的工具类;大致的流程是:前端点击上传按钮-->选择需要上传的excel表格-->确认上传-->  文件传到后台-->后台处理file文件-->将文件转化成List-->将List集合存入数据库首先通过前端点击按钮:导入点击导入按钮,触发input框点击事件:$('#input').click(function(){$('#import_modal').modal('show');}) 点击按钮后,弹出框: 弹窗代码:×Close上传数据上传文件确定取消选择要上传的文件,然后点击确定:点击

【前端】vscode javascript 代码片段失效问题解决

1.文件--首选项--用户代码片段-vue.json:添加 //{// //Placeyourglobalsnippetshere.Eachsnippetisdefinedunderasnippetnameandhasascope,prefix,bodyand// //description.Addcommaseparatedidsofthelanguageswherethesnippetisapplicableinthescopefield.Ifscope// //isleftemptyoromitted,thesnippetgetsappliedtoalllanguages.Thepref

【JavaScript】后端返回的二进制流音频数据或本地音频资源,前端如何播放?

一、接口设置//语音播放exportconstgetVoicePlay=(content:string)=>{returnrequestVoice({url:'/tts/?text_prompt='+content,method:'get',responseType:'blob',//返回类型blob});};二、数据处理播放getVoicePlay(item.content).then((res:any)=>{console.log(res);constblob=newBlob([res],{type:'audio/wav'});constlocalUrl=(window.URL||webk

拓展边界:前端世界的跨域挑战

目录什么是跨域概念同源策略及限制内容常见跨域场景如何解决跨域CORSNginx代理跨域Node中间件代理跨域WebSocketpostMessageJSONP其他什么是跨域概念在此之前,我们了解一下一个域名地址的组成:跨域指的是在网络安全中,由于浏览器的同源策略(Same-OriginPolicy)限制,当一个网页的协议、域名或端口与另一个网页的协议、域名或端口不同时,就存在跨域问题。如果缺少同源策略的限制,可能会导致安全隐患,如跨站脚本攻击(XSS)或跨站请求伪造(CSRF)等。同源策略及限制内容同源策略是浏览器的一项安全机制,它限制了来自不同源的脚本对当前文档的访问。同源策略要求资源必须来

史上最全的前端axios和后端跨域配置处理-许锅锅啊

文章目录史上最全的前端axios和后端跨域配置处理安装axios【https://www.axios-http.cn/】封装一个基本的请求js创建remote.ts或者其他文件名使用Vite解决跨域问题解决问题在工程文件夹的根目录新建一个vite.config.js文件,写入代码:然后在需要发送请求的文件中写,就可以跨域请求数据了:后端SpringBoot相关的跨域处理一、为什么会出现跨域问题同源策略二、什么是跨域举例说明:三、非同源限制四、java后端实现CORS跨域请求的方式对于CORS的跨域请求,主要有以下几种方式可供选择:注意1.返回新的CorsFilter(全局跨域)2.重写WebM

解决nginx 部署前端post请求405 not allowed

原因:nginx静态资源访问不支持post请求。解决方案:upstreamstatic_backend{serverlocalhost:9095;}location/{root/usr/local/dist;try_files$uri$uri//index.html;indexindex.htmlindex.htm;error_page405=200@405;#405页面处理}#加入下面代码location@405{proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarde

前端如何传递Array、Map类型数据到后端

文章目录前言一、背景描述二、解决方法1.前端2.后端总结前言针对前后端分离的项目,避免不了前端需要传递Array、Map类型的数据到后端,那么要怎么实现这种情况的参数传递呢?请看下文分说。一、背景描述前端有Map类型数据如下:二、解决方法1.前端将Map类型数据转化成String,再进行传递2.后端将前端传过来的String数据,解析为JSON对象,再强制转为java的Map总结以上。本文仅仅简单介绍了前端如何传递Map类型数据到后端的方法,对于Array类型的数据,也是同样的方法进行传递。小白开发记录文,如有错误,还请评论区指正,感谢!