CaraYQ-优快云博客

原创【前端工程化】

commonjs是nodejs默认模块化规范，每个文件就是一个模块，有自己的作用域，可以维护自己的私有变量，node中cjs模块加载采用同步加载方式，必须等这个模块加载完了再去执行后面的代码，通过require加载模块，通过exports或者module.exports输出模块。所有代码都运行在模块作用域，没有js脚本概念，写一个js文件就是一个模块，所以不会污染全局作用域。模块可以多次加载，第一次加载时会运行模块，模块输出结果会被缓存，再次加载时，会从缓存结果中直接读取模块输出结果。

2025-03-22 21:10:51 1020

原创【文件上传、秒传、分片上传、断点续传、重传】

input标签的onchange方法接收到的参数就是用户上传的所有文件文件上传（秒传、分片上传、断点续传、重传）秒传：调用后端的接口，将md5值传过去，后端判断如果这个md5值对应的文件是否已经合并，如果已经合并，则返回文件上传成功分片上传：每片大小chunk_size为1m，假如文件1.5m，那么会被分成2片，使用file.slice截取[0,1)，再截取[1,1.5）断点续传：文件上传前会调用后端的接口，将md5值传过去，后端判断如果这个md5值对应的文件是否已经合并，如果没有合并，会返回这个m

2025-02-05 21:31:08 878

原创【vue项目权限控制方案】

思路：用户登录后可以获取到用户登陆的菜单，在跳转到下一个页面前，将获取到的用户的菜单格式化一下，以满足前端的规则，然后通过addRoute方法把新的路由加进去，然后记录路由规则的state，方便后续使用。route/index里面的路由规则是基本的路由规则，是不用登录也能访问的页面。思路：在actions中发请求获取路由规则，然后解析并格式化路由规则，在mutation中修改路由。按钮权限思路：登陆时拉取用户权限code，每个code都有对应的操作权限，如果按钮有某个操作权限，则展示，否则隐藏。

2025-01-31 23:34:38 1433

原创【sass+css变量实现换肤】

这样，我们就利用scss完成了换肤：首先借助scss的方法，修改变量的定义的形式，通过方法生成样式的属性，根据html上的属性名来决定用哪一套变量，从而生成不同的颜色。接下来配合css变量。定义sass或者css变量，所有的颜色都用变量定义，当用户自定义颜色时，通过覆盖或者修改变量完成换肤。在src/App.vue中添加按钮，点击后进行皮肤切换。假如你最近在开发一套组件库，如何让用户可以换肤呢？

2025-01-20 23:22:18 1291

原创【从0-1实现一个前端脚手架】

脚手架本质就是一个工具，作用是能够让使用者专注于写代码，它可以让我们只用一个命令就生成一个已经配置好的项目，而不用我们再花时间去配置和安装相关依赖，可以在很大程度上提升我们的开发效率。比如我们常用的create-vue和create-react-app就是脚手架，很多大厂也都有自己的脚手架。

2025-01-12 18:52:21 941

原创【并发多个请求并失败重发】

可以一次发任意多个请求，如果有失败，则重发失败的请求，知道所有的都成功，或者超出最大重试次数，才返回最终结果。//需求背景：并发多个异步操作，如果有失败的，则重试失败，直到所有请求成功，或者超出最大次数，就返回。//因为到时候失败了得再次调用allSetled重发，所以封装成一个方法，方便再次重发。// 遍历方法，对每个方法进行包装：生成id、添加重发次数。//f1,f2,f3为三个模拟的异步操作，模拟的请求。//如果出错了，则在加入待请求队列再次发送。//用id和方法，映射进map。

2025-01-11 22:43:08 820

原创利用webworker解决性能瓶颈案例

众所周知，js不擅长计算，计算是同步的，大规模的计算会让js主线程阻塞，导致界面完成卡死。异步可以解决js的单线程问题，但是异步不是解决js单线程的终极方案，异步只是把任务发布出去等着，后面还是会拉到主线程执行，异步不可能在异步队列里自己执行，所以一个耗时很高的操作，无论你做不做异步，他都会卡死你的页面，比如一个2、3s的计算丢到异步队列中去，并不会在异步队列中自己算完了，始终要等着回到主线程再进行计算。引入，注意a.js的地址也必须是网络地址，但他可以跨域，那就可以引入第三方库，可以挂别人的cdn。

2025-01-05 20:35:49 987

原创【nginx】

一、nginx是一款轻量级的web服务器/反向代理服务器及电子邮件imap/pop3/smtp服务器，在bsd-like协议下发行。其特点是占有内存少，并发能力强。高性能的静态web服务器：只能处理静态资源静态资源：图片、样式、flash等不会随着用户的请求改变而改变的资源动态资源：账户余额、商品剩余货源等，这些依赖于后端应用服务器在数据库查询、处理后返回的结果。

2024-09-06 23:38:58 668

原创【学习方法】-【css+html】-【浏览器渲染】-【跨域】-【事件循环】-【v8引擎】-【内存原理】-【原型、原型链】-【this、Proxy、Reflect、WeakMap】-【js异步编程方案】

总之，如果这个东西的执行是完全独立的，他不需要依赖dom，也不需要依赖于我们前面的js代码，这种东西我们可以手动加上async，并且将这个东西放在dom最后比较好，也就是说将async所在script标签放在body标签里的最后面。100px的div在不同设备展示的大小是一样的，只是分辨率高的展示的更细腻一点，否则我们需要根据不同的分辨率写不同的代码，根本没法开发，针对这这一问题，浏览器帮我们抽象出来了一个单位——逻辑像素。假如现在有两个设备，他们大小一样，分辨率分别为320。

2024-09-01 20:08:48 1061

原创【javascript】-【qiankun搭建微前端项目】

微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。一般呢，微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，动辄三五年或者更多，最后演变成一个巨石应用的概率往往高于其他类型的web应用。这就带来了技术栈落后编译部署慢两个问题。

2024-06-23 18:43:08 1231

原创【leetcode】-【javascript】

请你编写一段代码实现一个数组方法，使任何数组都可以调用方法，这个方法将返回数组最后一个元素。如果数组中没有元素，则返回 -1。你可以假设数组是JSON.parse的输出结果。示例 1 ：输入：nums = [null, {}, 3]输出：3解释：调用 nums.last() 后返回最后一个元素： 3。示例 2 ：输入：nums = []输出：-1解释：因为此数组没有元素，所以应该返回 -1。方法一：将 Nullish 合并运算符与方法结合使用Nullish：空合并运算符(??

2024-06-02 17:35:27 599

原创【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】

/ 进度条可以用axios的onUploadProgress方法，且发送切片时可以并行发送请求，后续可以自行优化。// 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象。// multiple的多文件上传其实很不友好，需要用户在选择文件时按住ctrl多选，否则就会变成单选。// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图。//切片上传，在上传的时候进行切片，文件改变时只赋值。// 使用blob的slice方法可以切割文件。

2024-05-05 17:04:41 9758 3

原创【前端】-【防止接口重复请求】

思路：延续方案二的思路，仍然是拦截相同请求，但这次我们不直接把请求挂掉，而是对于相同的请求我们先给它挂起，等到最先发出去的请求拿到结果回来之后，把成功或失败的结果共享给后面到来的相同请求。思路：对于同一个接口，如果传参都是一样的，一般来说都没有必要连续请求多次吧。问题：文件上传时，上传了两个不同的文件的，但只调用了一次上传接口。按理说是两个不同的请求，可为什么会被我们前面写的逻辑给拦截掉一个呢？问题：在目前项目的接口处理逻辑中还有一些局部Loading，就有可能会出现Loading套Loading的情况。

2024-05-01 15:32:22 1488

原创【vite】-【vite介绍】-【vite的基础应用】-【vite的高级应用】-【

开发时效率极高开箱即用，功能完备摄取丰富，兼容rollup超高速热重载预设应用和类库打包模块前端类库无关二、vite是构建工具的高阶封装，内部使用的是其他的工具，最核心的是rollup使用简单：配置项少，把能封装的配置都封装好了，不会让你非常深度的接触一些配置；内部集成devServe，不需要像使用web pack那样再加入devServe再配置再使用；快：得益于他的底层架构设计便于扩展：兼容rollup插件rollup比webpack发布早，使用率高，社区成熟，插件多。

2024-04-06 12:23:14 1252

原创【组件封装】-【vue组件设计经验技巧】

组件封装其实就是扩展性和便捷性的权衡，组件写死的部分多了，便捷性提升了，但是扩展性下降了，组件内很多内容依靠父组件传入，那么扩展性增强了，但是便捷性下降了。

2024-04-05 22:35:26 1542

原创【前端】-【性能优化常识】

是最好的方案。

2024-03-26 13:30:59 2177 2

原创【css揭秘】

还可以使用border-radius所对应的各个展开式属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius来指定各个角的大小。：针对容器某个角对背景图片做偏移定位，比如让背景图片跟右边缘保持20px的偏移量，同时跟底边保持10px的偏移量，如下图所示：（背景图片即虚线框框出来的范围）（描边）属性来产生外层的边框，如果想得到上图【双重边框的效果】，

2024-01-28 00:04:47 1284

原创【vue3】-【pinia】-【组件间通信】-【插槽】-【组件间通信】-【插槽】-【API】

一、第一步：二、第二步：操作存储、读取数据一、是一个保存：状态、业务逻辑的实体，每个组件都可以读取、写入它，它有三个概念：、、，相当于组件中的：、和。具体编码：具体编码：二、组件中使用中的数据修改数据（三种方式）代码：在组件中的三种修改方法：storeToRefs看上面的代码发现，在模板中使用里面的时，都需要写我们能不能通过解构赋值将要用的数据从countStore中取出来，在模板中使用的时候直接写、、：，会发现在模板中使用的、、并不是响应式的，因为是新创建的变量，并不是

2024-01-16 21:58:43 646

原创【vue3】-【setup】-【ref()】-【reactive()】-【computed】-【watch】-【props】-【生命周期】-【自定义hook】-【路由】

在终端输入以下命令，根据自己的需求做出相应的选择：生成的项目文件作用：setup概述在前被执行setup的语法糖setup()每次都要返回一个对象才能让使用，于是vue3提供了语法糖来改善这一现象：那这样又会出现另一个问题：有两个标签，我们可以使用如下插件并在vite.config.ts中引入插件将代码优化为：ref()创建响应式数据一、vue3使用和让数据变成响应式数据，其中，既可以定义基本类型的响应式数据，还可以定义对象类型的响应式数据，而只能定义对象类型的响应式数据二、语法：

2024-01-02 17:31:44 611

原创【小程序】-【

swiper是滑块视图容器。其中只可放置组件。

2023-12-13 17:45:59 437

原创【git教程】

一、SVN是集中式的版本控制系统，。干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的活推送给中央服务器。缺点：必须联网才能工作二、Git是分布式版本控制系统，没有“中央服务器”，每个人的电脑上都是一个完整的版本库。假如你在自己电脑上改了文件A，你的同事也在他的电脑上改了文件A，这时你们俩之间只需把各自的修改推送给对方，就可以互相看到对方的修改了。

2023-12-07 11:59:17 1087

原创【前端】-【electron】

electron技术架构：chromium、node.js、native.apis需求：点击窗口右上角的三个图标，分别执行相应操作index.html代码如下，红框中为三个图标的代码// 创建窗口nodeIntegration:true,// 允许渲染进程使用node集成环境contextIsolation: false,// 如果nodeIntegration:true失效，那么需要添加这行代码enableRemoteModule:true//允许使用远程模式},

2023-12-01 18:16:20 1740

原创【小程序】

app.js、app.json（入口文件，必须有，没有项目运行不起来）、app.wxss不能改名，是应用程序级别的文件，在这里面写的代码全局生效，page里面的那4个文件是页面级别的，在里面写的代码只在当前页面生效，page里面写的代码是针对页面的，所以会覆盖全局的配置。小程序的页面放在pages文件夹下，在app.json文件中指定哪些page是页面。project.config.json：当前项目的配置。wxml：页面骨架内容，比如按钮。js：页面逻辑，如跳转。waxes：页面样式。

2023-11-29 22:48:01 543

原创【Selenium】

比如，我们要模拟用户点击界面按钮，自动化程序里面就应该调用客户端库相应的函数，就会发送点击元素的请求给下方的浏览器驱动。浏览器驱动也是一个独立的程序，是由浏览器厂商提供的，不同的浏览器需要不同的浏览器驱动。浏览器驱动接收到我们的自动化程序发送的界面操作请求后，会转发请求给浏览器，让浏览器去执行对应的自动化操作。浏览器执行完操作后，会将自动化的结果返回给浏览器驱动，浏览器驱动再通过HTTP响应的消息返回给我们的自动化程序的客户端库。我们的程序就可以知道这次自动化操作的结果如何了。

2023-10-23 21:28:52 290

原创【接口自动化测试】

【导入从】中选择要导入的Excel文件，在【表】中会展示选中的Excel文件的所有sheet页，选择你要导入的sheet页，选好后点击【下一步】【字段名行】即指定字段名所在行，【第一个数据行】即指定数据起始行，确认无误后点击【下一步】在此处选择你要导入的文件类型，此处选择【Excel文件】后点击【下一步】【目标表】指的是数据库中的表名，可以改名字，确认无误点击【下一步】在此页可以修改字段名、选择字段、确定主键，确认无误后点击【下一步】在mysql中，右击【表】，点击【导入向导……

2023-10-11 22:26:34 110

原创【python】-【操作excel】

所有数据访问出来不是json格式就是字典格式，我们如何将其解析为一个个字段？

2023-09-25 23:16:27 595

原创【Java】-【使用jxl操作excel】

这是一个.jar类型的类库，这套API是纯Java的，并不依赖Windows系统，它集成封装了操作处理excel表格的一些类和方法。1.xls有多个sheet页，每个sheet页如下图所示，第一行为表名，第二列为字段值，现要判断该字段在该表中有值，有值则记为1，没值或字段不存在均记为0.在IDEA中点击file->project structure->libraries->添加下载好的jxl.jar。另存文件，选择Excel 97-2004工作簿或者97-2003工作簿即可。

2023-09-13 20:09:43 899

原创【python基础】

如果要做 floor division 得到一个整数结果你可以使用 // 运算符5交互模式下，上次输出的表达式会赋给变量 _。12.5625113.0625113.06最好把该变量当作只读类型。不要为它显式赋值，否则会创建一个同名独立局部变量，该变量会用它的魔法行为屏蔽内置变量。除了 int 和 float，Python 还支持其他数字类型，例如 Decimal 或 Fraction。Python 还内置支持复数，后缀 j 或 J 用于表示虚数（例如 3+5j ）。

2023-08-13 23:00:25 495

原创【Java】-【tomcat部署项目】

reloadable：表示可以在运行时在 classes 与 lib 文件夹下自动加载类包。在发布阶段应该设置为false，提高应用程序的访问速度。配置中可以去掉 path 属性，因为访问项目时的根路径只取决于 XML 文件的名称，访问该应用程序地址如下：http://localhost:8080/项目名。path：表示访问的路径，可以自定义，例如：http://localhost:8080/budaye。docBase：表示应用程序的路径，可以使用绝对路径或者相对路径，相对路径相对于webapps。

2023-08-07 19:13:13 611

原创【JAVA】-【IO流】

复制文本文件也可以使用字节流，但是不要在内存中读出来，比如不要system.out()出来。

2023-08-06 21:46:44 244

原创【SQL】-【计算两个varchar类型的timestamp的毫秒差】

TRANSTAMP3、TRANSTAMP2在Oracle数据库中的类型为varchar，但实际保存的值是时间戳timestamp类型，现在要计算二者的毫秒差。

2023-08-02 17:55:46 744

原创【mysql】-【锁】

事务的隔离性由这章讲述的锁来实现。

2023-07-09 16:59:27 504

原创【Java】-【IDEA 编译项目时报错：GC overhead limit exceeded】

错误是发生在编译阶段，而不是运行阶段。通过查询相关资料发现，怀疑可能是值太小了，设置成。

2023-07-03 20:09:29 1218

原创【前端安全】-【防范xss攻击】

这样攻击者可以绕过后端的关键词规则，又成功的完成了注入。是恶意代码，因而将其执行。这里不仅仅div的内容被注入了，而且input的value属性也被注入，alert会弹出两次。公司需要一个搜索页面，根据 URL 参数决定关键词的内容。，虽然代码不会立即执行，但一旦用户点击a标签时，浏览器会就会弹出“XSS”。的值转换成小写，再比对，下文省略了转换成小写的代码。时，服务端会解析出请求参数keyword，得到。，会导致页面弹出两次弹窗，因为当浏览器请求。XSS 攻击是页面被注入了恶意的代码。

2023-06-17 21:14:14 2945

原创【深度学习入门：基于Python的理论与实现】

图3-2将x1、x2、1三个信号作为神经元的输入，将其和各自的权重相乘后，传送至下一个神经元。如果这个总和超过0，则输出1，否则输出0，我们用一个函数来表示这种分情况的动作，引入新函数h(x)，将式（3.1）改写成下面的式（3.2）和式（3.3）。如图3-4所示，表示神经元的○中明确显示了激活函数的计算过程，即信号的加权总和为神经元a，然后神经元a被激活函数h()转换成神经元y。刚才登场的h（x）函数会将输入信号的总和转换为输出信号，这种函数一般称为激活函数，用于决定如何来激活输入信号的总和。

2023-06-08 17:12:50 1416

原创【无标题】

如式（1.11）所示，z关于x的导数由y=f（x）的导数和z=g（y）的导数之积求得，这就是链式法则。也就是说，只要能够计算各个函数的局部的导数，就能基于它们的积计算最终的整体的导数。用相应的神经网络来说明链式法则之所以可以实现反向传播就在于：无论我们处理的神经网络有多复杂（无论有多少层），都可以根据它们各自的梯度（的乘积）来计算输出层的梯度。这里我们想得到的是损失关于各个参数的梯度。根据刚才复习的链式法则，反向传播中流动的导数的值是根据从上游（输出侧）传来的导数和各个运算节点的局部导数之积求得的。

2023-06-04 22:32:41 625

空空如也

空空如也