- 博客(90)
- 收藏
- 关注
RSS订阅
原创 uni-app 拍照上传
随手拍 <view class="cardContent"> <!-- 拍照功能 --> <view> <image :src="imageList.length==0 ? imgeUrl:imageList " @click="onGetImgClick()"> </view> </view>、 onGetImgClick: function
2022-04-12 16:42:58
3512
1
原创 Vue项目引入富文本编辑器：TinyMCE
一、 什么是TinyMCETinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）接口丰富，可扩展性强，有能力可以无限拓展功能界面好看，符合现代审美提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）对标准支持优秀
2022-03-21 10:30:53
4119
4
原创 假如有几十个请求，如何去控制并发？
先进先出就是队列，push一个的同时就会有一个被shift。定义请求池主函数函数reqs // 请求数量) => {}接受一个参数reqs，它是一个数组，包含需要发送的请求。函数的主要目的是对这些请求进行队列管理，确保并发请求的数量不会超过设定的上限。定义dequeue函数current++;const requestPromiseFactory = queue.shift() // 出列.then(() => { // 成功的请求逻辑}).catch(error => { // 失败})
2025-03-30 23:20:47
144
原创 前端vue使用onlyoffice控件实现word在线编辑、预览
简介ONLYOFFICE 文档 是一个开源办公套件，包括文本文档、电子表格、演示文稿和可填写表单的编辑器。它提供以下功能：创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单；与其他队友实时协作处理文件。基于这个控件，可以实现前端word、excel、pdf等文件在线编辑、预览，可以说非常强大，目前项目中只使用到word编辑预览，但拓展其他文件也非常简单，完善类型传参，更改onlyoffice配置参数中的文件类型即可。
2025-03-23 22:44:05
586
原创 前端播放RTSP视频流
flv.js 并不直接支持 RTSP 协议，所以仍然需要一个中间层来将 RTSP 转换成 FLV 或其他 flv.js 支持的格式。在 Vue 中使用 flv.js 插件播放 RTSP 视频流的主要原因是浏览器原生的 <video> 标签并不直接支持 RTSP 协议，也不支持 FLV 容器格式。flv.js 能够在浏览器环境中解码和播放 FLV 流，这是因为 flv.js 内部实现了对 FLV 文件结构的理解和相应的解码逻辑。
2025-03-16 21:53:08
177
原创 Web 开发环境搭建与项目构建详解
Web 开发环境是指用于创建、测试和部署 Web 应用程序的一系列工具和软件的集合。一个完整的 Web 开发环境通常包括以下几个关键部分：操作系统Windows：具有友好的图形界面，易于新手入门，且软件资源丰富，如 Adobe Dreamweaver 等专业开发工具都有 Windows 版本。对于基于微软技术栈的 Web 应用开发，与 SQL Server 等数据库管理系统集成方便。但在服务器环境配置方面相对复杂，且占用系统资源较多1.
2025-03-09 22:39:04
756
原创 单点登录(SSO)
单点登录（SSO，Single Sign On），是在企业内部多个应用系统（如考勤系统、财务系统、人事系统等）场景下，用户只需要登录一次，就可以访问多个应用系统。同理用户只需注销一次，就可以从多个应用系统退出登录。简单来说就是，一次登录，全部登录！一次注销，全部注销！！单点登录的实现方案，一般就包含：Cookie、Session、Token单点登录的本质就是在多个应用系统中共享登录状态。如果用户的登录状态是记录在 Session 中的，要实现共享登录状态，就要先共享 Session，比如可以将 Sessio
2025-03-02 22:11:22
618
原创 前端实现扫一扫，扫描二维码（VUE，H5）；jsQR，zxing两种方式
这里使用了jsQR和zxing两种方式，分别在普通的H5和vue中使用，文章附上完整demo和一些注意事项。
2025-02-09 22:26:40
505
原创 前端三种微信支付方式
在微信商户平台申请商户号，并开通Native/JSAPI/H5 支付功能。同时，将公众号与商户号进行关联，确保双方能够正常通信。公众号设置：在公众号后台进行相关配置，包括JS接口安全域名、网页授权域名等，这些域名应与前端应用的域名一致。或小程序账号，并完成相关的认证和设置。
2025-01-05 23:44:08
892
原创 如何用echarts搭建天气图表
显示7天内的天气预报，如果是当天的温度，要显示不同的图标。1.新建div绑定id，设置dom的宽高。2.设置好七天的数据，目前只是测试数据。如何用echarts搭建天气图表。3.在vue中定义数据。4.创建init方法。
2024-12-23 09:44:57
1039
原创 Web网络安全
此时用户访问一个恶意网站，这个网站可自动向银行网站发送请求，比如隐藏域post，image点击，浏览器在向银行网站发送请求时会带上它还没有过期的cookie信息，这样银行站点就区分不出这个请求时从哪里发过来的，就会认为这个请求时合法的，就可以做转账等操作。它的含义是，插入一段JS，用户浏览页面时，它会自动执行实行攻击。注意，现在主要是使用Origin，优先级高，Referer，且他们的区别是，Origin不含Path部分，且不会像Referer一样存在兼容性问题，Referer还可能被用户禁用和篡改。
2024-12-22 19:53:42
424
原创 vue项目打包部署后 浏览器自动清除缓存问题
原因：通过查看当前sources里的文件，可以发现：控制台报错提示中所请求的js文件哈希值跟sources缓存的文件哈希值并不一样，说明 当前页面请求了缓存，然而由于资源文件被更新 导致找不到 出现404的情况。vue打包部署后 浏览器缓存问题，导致控制台报错ChunkLoadError: Loading chunk failed的解决方案。配置js、css打包配置，在css、js打包文件添加版本号时间戳，区别版本。1、在index.html入口文件处设置meta标签，清除页面缓存。
2024-12-15 23:56:57
334
原创 跨域问题？同源策略大全
跨域：通常出现在Web开发中，特别是在涉及到Ajax请求或Fetch API调用时，当一个网页尝试从不同的源加载资源时，就会遇到跨域问题。这里所说的“不同的源”，是指请求资源的源（由协议、域名和端口号组成）与提供资源的源不一致。同源策略：是为了保护用户的隐私和数据安全，如果没有同源策略，恶意网站可以通过脚本非法获取其他网站上的敏感数据，所以浏览器会通过实施同源策略来限制不同源之间的直接通信。同时，也有些特别的情况是不受同源策略限制的，比如：img标签下的link标签下的script标签下的。
2024-11-26 16:13:26
649
原创 前端实现文件下载常用几种方式
前端对应的实质是a标签和Blob文件下载，这两者的区别：a标签：txt、png、jpg、gif等文件，是不提供直接下载，有兼容性问题，特别是IE。blob：利用 Blob对象可以将文件流转化成 Blob二进制对象。该对象兼容性良好，适用于需要动态生成或处理非同源文件的情况。通过URL.createObjectURL()方法将Blob对象转换为一个临时的URL下载。blob对象Blob对象表示一个不可变、原始数据的类文件对象。
2024-11-10 23:09:21
1446
原创 uniapp实现与webview之间的相互通讯
在正式使用前要先在嵌套的h5中中引入uni.webview.1.5.6.js以1.5.6举例，文件可能已更新，最新请移步uni.webview.js 最新版地址下载。uniapp开发的app嵌套h5时必须是.nvue文件否则没有这个sWebViewRef.value.evalJs函数。情况一：app嵌套h5（app、h5均用uniapp开发）下载完成后，我们只需要在h5项目main.js中进行引入。uni.webview.js只需要在嵌套的h5中引入。h5向app发送消息。
2024-10-27 22:17:21
561
原创 简单的网页压力测试
请注意，这个脚本是同步执行的，即一次只发起一个请求，等待这个请求完成后再等待直到下一次请求的时间点。如果你需要进行更高强度的压力测试，可能需要一个异步解决方案或者使用专业的压力测试工具，比如Apache JMeter或Locust。此外，频繁地对不属于你的网站进行压力测试可能会违反服务条款，或被视为恶意行为，可能会导致你的IP被封禁，请确保在你有权限的环境中进行压力测试。以下是一个基本的实现，它会每分钟发送指定次数的请求到目标网址。要进行简单的网页压力测试，可以使用Python的。库来发起请求，并结合。
2024-10-20 22:36:45
292
原创 Nginx部署前端Vue项目的深度解析
Nginx的配置文件通常位于/etc/nginx/sites-available/目录下，你可以在该目录下创建一个新的配置文件，或者编辑默认的default文件。通过在Nginx配置文件中添加相应的location块，并将请求转发到后端服务的真实地址，你可以绕过浏览器的同源策略限制。如果你将配置放在/etc/nginx/sites-available/目录下，你可能需要将其链接到/etc/nginx/sites-enabled/目录来启用它。表示你的网站域名，你需要将其替换为你的实际域名。
2024-10-13 21:22:11
353
原创 uniapp的H5应用的跨域请求，解决办法
如果你的意图是将所有以/api开头的请求转发到https://xxxtest.xxx.com/xxxx/services路径下，那么应该直接在target中指定完整的URL。manifest.js文件下进行代理的话，还是比较有用的，但是在这个文件的代理的话，要考虑到的是，自身要代理的url，有多种情况的。在vue.config.js文件下进行代理，但是这个的话目前的一个作用不是很大，有时候都没调用到这个文件的代理。
2024-09-17 23:50:09
381
原创 vuex和pinia的区别
Vuex和Pinia都是Vue.js的状态管理工具，但它们在设计和使用上存在差异。Vuex是一个更完整的状态管理库，提供了丰富的功能和良好的社区支持，适合大型和复杂的项目。而Pinia则是一个轻量级的状态管理库，专注于提供一个简单的API来管理应用程序的状态，适合初学者和快速开发项目。在选择时，可以根据项目的具体需求和使用的Vue版本来决定使用哪一个。
2024-09-01 22:57:55
507
原创 后端返回文件流，前端怎么导出、下载
创建一个标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。2.创建一个隐藏的标签，设置href属性为后端返回的文件流的URL，同时设置download属性为文件的名称。然后使用JavaScript模拟点击该标签，触发文件下载。需要注意的是，后端返回的文件流需要正确设置Content-Disposition响应头，以指定文件的名称和下载方式。在前端使用window.open()方法打开一个新的窗口或标签页，并将后端返回的文件流作为URL传递给该方法。
2024-08-25 23:35:37
1086
原创 原理篇：js为什么会阻碍浏览器的渲染
主线程承担着诸多的工作，渲染页面、执行JS都在其中运行。比如计时器时间到了，用户触发了监听事件，浏览器触发了重新渲染，这些任务不会被立马执行，而是等到主线程把当前任务完成才会去执行，这就导致了js阻碍浏览器的渲染，下面看一个例子。这是因为主线程将js作为全局任务来执行，当改变按钮的innerText属性时，产生了额外的渲染任务，此任务不会被立刻执行，而是被添加到消息队列中，等待主线程将它取出执行。在这个例子中，为按钮绑定了单击事件，触发的时候改变按钮的文字，并且打印改变后的文字内容，再阻塞主线程3秒钟。
2024-08-18 22:26:39
298
原创 Teleport基本用法
1.简单理解不管是 Vue2 还是 Vue3 中都有内置组件的存在，如 component 内置组件、transition 内置组件等等。内置组件就是官方给我们封装的全局组件，我们直接拿来用就可以了。在 Vue3 中新增了 Teleport 内置组件，先来看下官方文档是怎么解释的。通俗解释：teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。
2024-07-28 23:30:02
307
原创 前端实现Excel文件导出功能的完整指南
在许多业务场景中，用户需要将网页上的数据导出到Excel文件中进行进一步处理或分享。通过前端实现Excel文件的导出功能，可以提高用户体验并简化数据交互流程。
2024-07-14 20:41:35
242
原创 uniapp如何隐藏默认的页面头部导航栏，uniapp开发小程序如何隐藏默认的页面头部导航栏
如何在UniApp中通过设置pages.json的navigationStyle属性为custom来隐藏默认的头部导航栏，同时提及了这种方法在原生小程序中的应用。
2024-07-07 23:04:47
2185
原创 Canvas绘制图片和区域
这里先计算画布和图片的宽高比,根据比例关系决定以宽为主还是以高为主进行等比缩放。然后设置三个canvas的宽高,并在。函数用于渲染已有的绘制数据。三. 绘制的主要逻辑。
2024-06-23 22:19:42
375
原创 探索前端监控的新纪元：Web-Tracing 插件
此外，Web-Tracing 还利用Vue响应式原理，增强了配置对象的动态性，并采用monorepo架构管理多版本代码，保证了代码质量和维护性。错误监听：实时监测并记录JavaScript运行时的错误，提供详细的错误信息和回放功能。企业级应用：帮助企业构建自有的前端监控平台，提升用户体验，及时发现和解决线上问题。高效定制：提供钩子函数和本地化选项，允许灵活控制数据发送，节省带宽。事件监听：通过对用户交互和系统事件的捕获，实现精准的用户行为跟踪。电商网站：追踪用户购物行为，优化购物流程，提升转化率。
2024-06-17 08:43:48
314
原创 前端实现流文件下载
在现代Web开发中，经常会遇到需要从服务器下载文件的情况。有时候这些文件是事先存储好的，可以通过简单的URL链接直接下载；但有时候，我们需要从数据流中动态生成文件并将其提供给用户。本篇博客将介绍如何在前端实现流文件下载的完整指南。
2024-06-10 21:49:25
1854
原创 前端 JS 经典：读取文件原始内容
构建工具用的 webpack。然后对不同后缀的解析使用的不同 load，我们自己定义的后缀文件 .myfile，webpack 不知道需要用什么 load 去解析它，所以我们需要在 vue.config.js 里面配置。里面的原始内容，比如，你有一个文件，后缀名为 .myfile，你需要拿到这个文件里的内容，该怎么处理呢。前言：有些时候在工程化开发中，我们需要。
2024-06-02 22:55:44
424
原创 正确解决org.springframework.web.client.ResourceAccessException资源访问异常的有效解决方法
3.查看异常详情：ResourceAccessException 通常包含了一个 “cause” 异常，这个 “cause” 异常可能包含了更详细的错误信息。在提问时，提供尽可能详细的信息，包括你的代码、配置、异常堆栈跟踪以及你已经尝试过的解决方法。处理 ResourceAccessException 的方法通常包括： 1.检查网络连接：确保你的应用能够访问目标服务器。5.调整客户端配置：根据问题的原因，你可能需要调整你的客户端配置（如连接超时、读取超时等）。无法连接到目标服务器。1.网络问题：例如，
2024-05-26 23:31:27
1457
原创 前端分片上传大文件
当所有 blob 都处理完毕后，sparkMD5 实例的 end 方法被调用，并返回最终的哈希值，这个值随后通过Promise的 resolve 方法传递给调用者。这样的技术就叫做分片上传。分片上传就是将大文件分成一个个小文件（切片），将切片进行上传，等到后端接收到所有切片，再将切片合并成大文件。在分片上传过程中，每个文件块可以在单独的Worker中处理，从而实现并行处理，大大提高了上传速度。当你拥有可以在并行中运行的操作，但由于资源限制想要限制这些操作的数量时，这个工具就很有用，有助于控制并发性。
2024-04-28 00:28:54
783
原创 前端大屏适配几种方案
直接使用vw单位，屏幕宽度默认为100vw，那么100vw = 1920px；这个也是使用cssrem插件，直接将body的宽高（1920px * 1080px），将px转成vw单位。针对1920 * 1080,3840 * 2160(4k)是没有问题的，但是在超宽屏的情况下还是存在只显示一半的问题。打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；
2024-04-14 20:36:38
2781
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人