- 博客(83)
- 收藏
- 关注
RSS订阅原创 前端实现下载word（多个word下载）-- docxtemplater
docxtemplater 是一个邮件合并工具，以编程方式使用，处理条件、循环，并可扩展以插入图像html或表格。docxtemplater 使用 Javascript 对象（或 JSON）作为数据输入，因此也可以轻松地从其他语言中使用（请参阅docker 版本它处理 docx 和 pptx 文件，并且通过附加模块，它可以处理 xlsx 模板它的工作方式与模板引擎相同，您给它一个模板+一些数据，它就会输出一个生成的文档。
2024-08-04 14:35:12
1682
3
原创 Electron-forge打包Vue等项目为deb,exe等详解（完整代码）
国产系统麒麟操作系统软件，Vue项目适配，打包成deb,可供麒麟操作系统安装的软件麒麟V10node v18本流程打包用了Electron Forge脚手架是一款用于打包和分发Electron应用程序的一体化工具。它结合了许多单一用途的软件包，创建了一个完整的开箱即用的构建管道，包括代码签名、安装程序和工件发布。对于高级工作流程，可以通过其和来处理自定义构建和存储目标。
2024-07-24 17:09:29
1062
原创 开启Three之旅（二）射线、拾取模型、解决鼠标点击、Hover以及CSS3Renderer点击穿透问题
射线交叉计算，项目中一般是比较复杂的，我们就得去处理Group模型（就是一组模型，可以看看Group的概念）导入的时候（还是参考场景一的，我导入的时候就是一组模型，如果你的不是，可以手动分组，再添加到场景中），给。我们文章上面有这个判断，一般我们模型都是比较复杂的，我们还要清楚Group的概念。这一步最好是在，确保模型加载完之后（这是我写的一个办法，当然也可以有其它办法）其实有一个简单的办法，先取消模型的点击事件，再加个0ms的异步任务，开启监听。，是按照顺序返回的，直接判断第一个就行，再加一些操作。
2024-05-23 10:42:06
1399
7
原创 React高阶组件详解
HOC有一项独特的特性，就是可以给被HOC包裹的业务组件，提供一些拓展功能，比如说额外的生命周期，额外的事件，但是这种HOC，可能需要和业务组件紧密结合。劫持渲染是hoc一个特性，在wrapComponent包装组件中，可以对原来的组件，进行条件渲染，节流渲染，懒加载等功能。我们来看一下上面这个例子，return 返回结果是父组件（代理组件）对子组件（业务组件）的一系列操作。HOC采用继承的方式, 代理组件继承了业务组件的本身，我们在使用的时候直接实例化代理组件HOC即可。我们看这个例子，代理组件中。
2024-03-17 17:39:38
1277
原创 一文搞懂浏览器缓存机制
浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的浏览器第一次向服务器发送HTTP请求, 浏览器拿到请求结果后，会根据响应报文的缓存标识，决定是否进行缓存。我们可以看出浏览器每次发送请求，都会先在浏览器中查找该请求的结果以及缓存标识浏览器每次拿到结果都会将该结果和缓存标识存入浏览器缓存之中我们根据是否向服务端再次发起HTTP请求和缓存过程分为两个部分，分别是强制缓存和协商缓存。
2024-03-03 22:25:30
1114
2
原创 深入浅出iframe（+ iframe嵌套第三方页面跨域带cookie问题）
iframe 标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。由于 iframe 可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了。
2023-08-30 14:44:38
8716
1
原创 React性能优化之Memo、useMemo
如果旧的和新的 props 相等，即组件使用新的 props 渲染的输出和表现与旧的 props 完全相同，则它应该返回 true。但是，这可能会影响应用程序的性能，因为即使更改只是为了影响父组件，附加到父组件的所有其他子组件都将重新呈现。React 的渲染机制，组件内部的 state 或者 props 一旦发生修改，整个组件树都会被重新渲染一次，即时子组件的参数没有被修改，甚至无状态组件。在组件的顶层调用 useMemo 来缓存每次重新渲染都需要计算的结果，它在每次重新渲染的时候能够缓存计算结果。
2023-08-01 18:01:27
1127
2
原创 Mysql快速上手（基础知识、数据模型、数据类型、SQL语句、函数、约束、多表查询、事务）
执行时机不同：where是分组之前进行过滤，不满足where条件，不参与分组；windows可以直接使用cmd进行连接本地的mysql,（别忘了配置mysql的全局环境变量）这里的mysq对应的是windows下的服务名称，可能会有所出入。概念：建立在关系模型基础上，由多张项目连接的二维表组成的数据库。数据控制语言，用来创建数据库用户，控制数据库的访问权限。数据定义语言，用来定义数据库对象（数据库，表，字段）数据库操作语言，用来对数据库表中的数据进行增删改。数据查询语言，用来查询数据库中表的记录。
2023-03-25 16:35:41
477
原创 JavaScript- Map、Set、WeakMap、WeakSet、简单模拟Map
WeakSet结构与Set类似，也是不重复的值集合。Set类似于数组，但是里面成员的值都是唯一的。Map是一种键值对的结构。
2023-03-04 15:04:10
1300
原创 webpack-基本使用、核心概念、处理样式资源、图片优化
开发模式：仅能编译JS中的 ES Module语法生产模式：能编译JS中的ES Module语法，还能压缩JS代码。
2023-02-13 21:48:27
870
1
原创 koa2-JWT登录验证、上传图片、上传视频、允许跨域
JWT（JSON Web Token），本质就是一个字符串书写规范，如下图，作用是用来在用户和服务器之间传递安全可靠的信息Koa 中间件，用于验证 JSON Web 令牌。生成签名。
2023-02-09 20:06:12
3515
3
原创 Koa2-创建、中间件、连接数据库、处理请求、日志
这是由于mysql版本过高，8版本的用户密码加密规则与以往的不同，可以参考下面的进行更改，加密规则。👻我们直接给koa-router -s 做迁移（单独的文件夹存放）,并对该模块进行切片。👻在package.json 配置,当然是在npm init的基础之上。👻在package.json中配置 scripts/start 改为。👻在这里mysql的版本过新的话会出现。👻新建 Router/user.js。👻原本的入口文件 index.js。👻下面的示例代码可以说明这种情况。👻新建连接数据库的代码。
2023-02-08 09:54:53
1606
1
原创 Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）
vite 天生就支持对css文件的直接处理关于预处理器☀️目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。☀️首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。☀️何为CSS预处理器？应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。☀️它们的出现可以说是恰逢其时，解决了css的一些缺憾：1、语法不够强大，不能够嵌套书写，不利于模块化开发。
2022-11-15 20:36:13
11045
15
原创 JS-谈谈你所理解的闭包
闭包是指指那些引用了另一个函数作用域中变量的函数下面看一个例子（JS高级程设计上的一个例子）let value1 = object1 [ propertyName ] // 在这里引用了外部函数的变量 propertyName let value2 = object2 [ propertyName ] if(value1 < value2) {🍓上面做标注的地方，引用了外部函数的变量，在这个内部函数被返回后，这个引用变量依旧存在。
2022-10-25 21:27:26
616
2
原创 彻底搞懂blob对象，实现文件下载，文件分片技术
要创建对象URL可以使用window.URL.createObjectURL()方法传入File或Blob对象。这个函数返回的值是一个指向内存中地址的字符串。因为这个值是URL,可以在DOM中直接使用。对象URL,是指存储在File或Blob中数据的URL。对象的URL的优点是不用把文件内容读取到JavaScript也可以使用文件。一种标准，用来表示文档/文件/字节流的格式和性质。slice => 可以用来进一步分割数据。size => 二进制文件的大小。text => 读取blob的值。
2022-10-18 21:35:02
2782
1
原创 for in 、for of详解
只要一个数据实现Iterator接口，这个数据就会有一个叫做[Symbol.iterator]的属性。上面有个enumerable属性，就是它来控制属性是否可枚举。3、遍历字符串 => 字符所处的位置下标。属性描述符 => enumerable。同时也会枚举对象原型上的可枚举的属性名。2、可以用来遍历数组 => 数组下标。1、可以用来遍历对象 => 属性名。2、遍历字符串 => 字符每一项。1、遍历数组 => 数组每一项。3、遍历map => 每一项。4、遍历set => 每一项。
2022-09-25 20:54:56
1636
7
原创 JavaScript数据结构与算法-排序全详解
因此，算法将会使用10个桶用来分布元素并且基于个位数字进行排序、然后十位、然后百位以此类推。分别设i和j从左右开始寻找，从左边找到第一个比基数大的数，从右边找到第一个比基数小的数，然后交换这两个数。选择排序大致的思路是找到数据结构中的最小值并将其放置到第一位，接着找到第二小的值并将其放在第二位。1、选定一个基准数，要使得基数的左边的数字全部小于它，右边的数字全部大于它。基数排序也是一个分布式算法，根据数组的有效位或基数将整数分不到桶中。2、对每个桶进行插入排序算法和将所有桶并为排序后的结果数组。
2022-08-23 21:45:19
953
7
原创 React-native android App项目搭建
在这里我采用的是真机模拟（用数据线把手机与电脑相连，手机打开usb调试，同意调试，一般需要用到手机开发者模式）后面你再写代码，这个会自动打包，手机上也会自动更新。之后再用手机连接时，只要你的软件还没卸载，就不用再次安装。注意：如果采用android真机模拟，可以晃一晃手机，看以看到菜单。弊端：不能查看标签结构，不能直接（可以解决）查看网络请求。还没结束，手机会受到一安装包，手机安装后，加载完毕之后。点击Debug就可以，也有其他快捷键可以上网搜一下。选择对应的版本，进行解压，点击。直接在官网上下就行了。..
2022-08-11 16:13:28
1748
1
原创 React项目搭建
然后就可以启动了，这个时候还会存在一个小问题，就是编辑器（vscode和webstorm 都可以这样配置）可以使用@/,但是没有提示。在项目根目录创建craco的配置文件：craco.config.js （这个名字是固定的）。错误是由于node版本不兼容导致的，解决方案就是忽略引擎版本的检查。那我们试着配置@路径，在craco.config.js 文件中配置。还没结束，还需要配置pack.json里面的启动命令。我们可以在根目录下新建一个jsconfig.js文件。一旦释放，无法回退，谨慎使用。...
2022-08-09 15:25:39
376
2
原创 Mock.js详解(结合官网)
Mock.mock()拦截与响应rurl可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。可选。表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。可选。表示用于生成响应数据的函数。Mock.mock( template )示例：根据数据模板生成模拟数据Mock.mock( rurl, template )记录数据模板。当拦截
2022-07-09 09:51:22
2031
原创 TypeScript - 泛型、类型推断详解（结合官网、会持续补充）
泛型函数类型和非泛型函数类型并没有什么不同，只是前面加上了类型参数，类似于函数声明。另外我们可以使用不同的泛型函数参数名，还可以使用带有签名的对象的字面量来声明函数用接口来声明函数用接口来声明函数，很像上面所说的带有签名的对象字面量声明的泛型函数我们可以把泛型参数类型作为接口的参数传进来泛型类泛型类和泛型接口类似泛型约束可以用接口来约束泛型类型推断没有指明变量的地方，类型推断会提供帮助类型。已经推断x为number类型，如果进行其他类型赋值操作,就会报错最佳通用类型推断x的类型，
2022-07-06 11:13:47
520
原创 Vue3-setup用法详解（会持续完善）
1、简单定义一个常量0，修改其值2、定义一个数组3、定义一个对象与上面不同的是这边是直接引用，不用通过valueref和reactive的区别ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，大家暂时可以使用自己熟练的API进行转换**推荐写法 **只有我们明确知道要转换的对象内部的字段名称我们才使用reacti
2022-06-22 11:45:57
3720
原创 JavaScript-函数方法apply()、call()、bind()
文章目录apply()和call()介绍二者的区别二者强大之处bind()介绍apply()和call()介绍函数的两个方法：apply()和call()。这两个方法都会指定的this值来调用函数。即会设置调用函数时函数体内this对象的值。apply（）方法接受两个两个参数：函数内this的值和一个参数数组。第二个可以是Array的实例，但也可以时arguments对象。function sum (num1,num2){ return num1+num2}function sum2(nu
2022-05-07 09:24:23
316
原创 Vue-scoped解析、使用深度选择器
文章目录前言案例解析scoped原理深度选择器深度属性选择器原始csslessscss前言我们都知道Vue中,加上scoped的作用只是对于当前的组件有用（样式）<style scoped></style>案例解析scoped原理Home.vue<template> <div class="home"> <h1>hello</h1> <HelloWorld msg="Welcome to You
2022-04-10 19:56:49
1149
原创 Vue-深入浅出插槽slot
文章目录作用域默认内容具名插槽用法具名缩写官网示例作用域插槽独占默认插槽的缩写语法解构插槽 Prop动态插槽名作用域父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。默认内容我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 标签内：<button type="submit"> <slot>Submit</slot></button>具
2022-03-29 21:42:16
922
原创 JavaScript-生成二维码-qrcode
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas绘制而成,不依赖任何库。
2022-03-26 18:18:31
2825
原创 Vue+Node.js项目部署到linux服务器完整版
创建资源在页面左侧，单击 云产品资源 下拉列表，查看本次实验所需资源。单击屏幕右侧 创建资源 ，免费创建当前实验所需云产品资源。说明：资源创建过程需要1~3分钟。完成实验资源的创建后，您可以在 云产品资源 列表查看已创建的资源信息，例如：IP地址、子用户名称和子用户密码等。连接ECS服务器资源创建完毕后，双击 LX终端图标 即可打开shell终端窗口。在终端中输入连接命令ssh [username]@[ipaddress]后按键盘enter键。您需要将username和ipaddres
2022-03-15 20:10:03
10985
1
原创 JavaScript数据结构和算法-BFS、DFS、回溯
文章目录广度优先遍历深度优先遍历(DFS)全排列广度优先遍历深度优先遍历(DFS)全排列
2022-03-11 20:25:35
1074
原创 Vue-虚拟DOM(VNode、diff算法)
文章目录虚拟DOMvnodediff算法虚拟DOM虚拟DOM的解决方式是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前会使用新的虚拟节点树和上一次生成的虚拟节点树进行对比，只渲染不同的部分。vnodediff算法...
2022-03-11 15:17:32
345
原创 rem 弹性布局
文章目录rem概念rem实现字体大小自适应自适应布局响应式布局rem概念rem实现字体大小自适应<script> let self_adaption=()=>{ let w = document.documentElement.clientWidth; let n = (20*(w/320)>40?40+"px":20*(w/320)+"px") document.documentElement.style.fontSiz
2022-03-10 10:09:26
243
原创 Multer详解（Node.js中间件）
文章目录介绍使用（摘自官方解释）multer(options)storage(储存引擎).single(fieldname).none().fields(fields)limits（限制）错误处理机制介绍Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。它是写在 busboy 之上非常高效。注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据使用（摘自官方解释）guthub官方
2022-03-06 20:34:23
18413
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人