- 博客(74)
- 收藏
- 关注
RSS订阅原创 新增页面保存后，跳转为详情页，同时关闭新增页。（即路由detail/1?type=1,变为detail/2/2?type=2&id=2）
如路由 detail/1?type=1,变为 detail/2/1?新增页面保存后，跳转为详情页，同时关闭新增页。
2024-08-28 17:54:17
272
原创 el-input-number，增加清空icon按钮，输入值居左（左对齐）、去除控制按钮
el-input-number，增加清空icon按钮，输入值和输入框一样居左（左对齐）、去除控制按钮
2024-08-28 14:22:55
892
原创 前端性能测试工具 LightHouse （灯塔）使用
— 一种工具Lighthouse 是一个开源的自动化工具，用来测试页面性能。—— 提升用户体验Web性能可以直接影响业务指标，例如转化率和用户满意度分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验—— 用法多样，根据需求进行选择目前官方提供了4种使用方式：Chrome 开发者工具（DevTools）Node CLIChrome 扩展。
2024-03-14 11:25:16
7709
1
原创 【Javascript】 Promise 对象（二）
方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。后，它的回调函数会接收到一个数组作为参数，该数组的每个成员对应前面数组的每个 Promise 对象。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
2024-03-14 09:44:24
1451
原创 Flex布局实现一部分元素左对齐，一部分右对齐
原理：margin-right 不设置的话默认是0，父容器width 定宽之后，margin-right取值为。原理是：利用flex:1，动态填充宽度。，则自动占据了剩余的全部宽度。
2024-03-13 14:58:30
1346
原创 【Javascript】 Promise 对象（一）
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只
2024-03-13 14:49:53
982
原创 【Javascript】 Map 方法
它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。方法，表面是针对同一个键，但实际上这是两个不同的数组实例，内存地址是不一样的，因此。同理，同样的值的两个实例，在 Map 结构中被视为两个键。
2024-03-12 10:32:14
3361
原创 【JS】Promise.all实现所有接口加载完成loading关闭
将每个请求封装成promise对象，当请求到数据后都resolve出去，再调用Promsie.all方法将每个promise对象作为参数传入进去。这样每个api的promise对象状态都resolve“解决后”，就能在 Promise.all([p1,p2…p]).then中拿到所有api请求完成的状态，从而实现效果。
2024-03-12 10:30:45
762
原创 【JavaScript】Set方法
如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。它类似于数组，但是成员的值都是唯一的，没有重复的值。方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的。这表明，在 Set 内部，两个。
2023-12-19 09:59:06
1427
原创 el-date-picker 限制选择范围最大为一年，设置快捷选项，设置默认时间
主要代码为：:picker-options="pickerOptions" 以及 @blur="pickerBlur"
2023-12-12 14:29:16
5892
原创 使用Mockjs模拟（假数据）接口(axios)
Mock.js官网mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。
2023-12-11 17:56:05
2176
原创 简单封装axios(可配合mockjs使用)对请求方法进行二次封装
安装axios:npm install axios --save 。二、简单封装axios(可配合mockjs使用) 在src/utils文件夹下新建axios.js文件。三、对请求方法进行二次封装：1、在src中新建api文件。2、在api文件夹中新建文件，最好每个页面的接口写一个文件。四、在vue文件中使用接口
2023-12-11 17:54:04
634
原创 el-table 表格多选(后端接口搜索分页)实现已选中的记忆功能。实现表格数据和已选数据（前端分页）动态同步更新。
其实也很简单，就是从右侧表格全部数据中，将要删除的数据去掉，若这条数据在左侧表格当前页存在，则触发el-table的toggleRowSelection(row,false)方法，取消勾选。设置选中方法，先清空左侧表格原有选中数据，然后根据右侧表格所有选中数据的id(自己设定的key)来判断右侧表格当前页是否存在选中数据，存在则调用el-table的toggleRowSelection方法，将数据勾选上。左侧表格为点击查询调用接口查询出来的数据，右侧表格为左侧表格所有选择的数据，由前端实现分页。
2023-12-08 19:05:03
2372
原创 Javascript 前端分页——根据页面大小（pageSize）和总行数（total）计算总页面数（totalPage）
一：总行数取余页面大小，等于0，则页数为整页数，否则有余数，则页数为正页数加一。二：总页数=（总数-1）/每页数量+1。三：总页数=（总数 + 每页数量 - 1）/ 每页数量。四：使用Math.ceil()函数，进1法取整。Math.ceil(total / pageSize)
2023-12-08 17:35:50
4149
原创 vue 修改 this.$confirm 的文字样式、自定义样式
四、使用 customClass 设置MessageBox 的自定义类名，从而自定义样式。二、createElement 新建元素和对象，然后对新建的元素进行标签化设置。但偶尔也需要修改文字等样式，这时该怎么做呢？就会被当作 HTML 片段处理。属性设置为 true，
2023-12-01 10:46:55
10385
1
原创 函数声明与函数表达式习题
我们整体分析代码的执行过程通过函数表达式定义变量foo并赋值为一个匿名函数，该函数在被调用时打印"foo1"。接着，通过函数表达式重新定义变量foo，赋值为另一个匿名函数，该函数在被调用时打印"foo2"。使用函数声明定义了两个名为foo的函数。函数声明会在作用域中进行提升。后面的会覆盖前面的，由于声明从一开始就提升了，而又执行了两个赋值操作，所以此时foo是第二个赋值的函数。然后调用foo()，输出"foo2"。再调用foo()，也输出"foo2"。
2023-12-01 10:46:02
1235
原创 函数声明与函数表达式
接下来的语句是函数quack的声明，因为已经处理过了，所以浏览器跳过声明，接着执行后面的条件语句。找到函数声明时，浏览器创建相应的函数，并将得到的函数引用赋给与函数同名的变量。如果语句以function关键字开头，那么它就是一个函数声明，否则就是一个函数表达式。在语句（如赋值语句）中，以这样的方式使用关键function时，创建的是函数表达式。从更高的角度来看，函数声明对于创建独立的函数很有用，但是函数表达式作为回调很好。处理所有的函数声明后，浏览器回到代码开头，开始按从头到尾的顺序执行代码。
2023-11-28 17:27:14
1351
原创 前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案二：轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样
当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了。
2023-11-27 10:09:45
3497
3
原创 前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案一：编译项目时动态生成一个记录版本号的文件
当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。编译项目时动态生成一个记录版本号的文件。轮询（20s、自己设定时间）这个文件，判断版本号，有新版本则通知用户刷新页面。
2023-11-27 10:09:07
7606
15
原创 记录 npm i 换成 pnpm i 后，导致element表格align等属性不生效，el-table样式错乱，少了class “el-table__cell“的问题
npm i 换成 pnpm i 后（package-lock.json 变成 pnpm-lock.yaml），导致element表格align等属性不生效，el-table样式错乱，如图： 把element升级到最新版本：原先的版本为"element-ui": "^2.15.1",升级到最新版本："element-ui": "^2.15.14"，成功解决问题。
2023-11-23 11:16:22
303
原创 package.json 中的版本号，符号 ~ 与 ^ 的区别及其他符号的含义
那么它将允许安装匹配以下范围的版本(会匹配 所有 1.X.X)：1.2.3、1.2.4、1.3.0、1.4.3 ……(波浪号)表示可以接受该版本的主要版本号和次要版本号不变，但接受修订版本号的更新。^ 符号表示可以接受该版本的主要版本号不变，但接受更新的次要版本号和修订版本号。：这个符号可以同时指定多个版本范围，要求安装的版本必须同时满足这些范围。：范围号可以定义一个版本范围，包括指定的两个版本及其之间的所有版本。x ：表示一些设计的变动及模块的重构之类的，会升级x版本号；用于指定具体的版本要求或范围。
2023-11-23 10:58:24
4006
原创 JS判断是否存在某个元素（includes、indexOf、find、findeIndex、some）（every 数组内所有值是否相同）
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。some() 方法会为 array 中的每个元素调用 callbackfn 函数，直到 callbackfn 返回 true，或直到到达数组的结尾。array.findIndex() 和 array.find()，这两个方法都可以发现NaN，弥补了array.indexOf()的不足。返回第一个符合条件的数组元素的位置，如果所有元素都不符合条件，则返回-1。
2023-11-18 14:29:30
2432
原创 vscode 推送本地新项目到gitee
2、创建完成后复制 https，稍后要将本地项目与此关联。4、输入仓库地址，选择从URL添加远程存储仓库。1、填好相关信息后点击创建。3、选择添加远程存储库。5、输入仓库名称，确保仓库名一致。一、gitee新建仓库。
2023-11-18 14:29:07
627
原创 解决因跨域导致使用a标签下载文件download属性失效无法自定义命名的问题
在使用a标签下载文件时，download属性可以更改下载的文件名。但是当a标签的下载链接时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改。在这种情况下如果你是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器也会自动下载，但是如果你使用浏览器可以解析的文件，比如.txt,.png....浏览器就会采取预览模式，无法直接下载。html5 新特性a标签download属性只支持谷歌和火狐。
2023-11-17 15:50:46
5056
3
原创 （七）什么是Vite——vite优劣势、命令
尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。要确保开发服务器和生产环境构建之间的最优输出和行为一致并不容易。所以 Vite 附带了一套的，开箱即用。
2023-11-17 15:39:36
735
原创 （六）什么是Vite——热更新时vite、webpack做了什么
打包工具实现热更新的思路都大同小异：主要是通过WebSocket，创建浏览器和服务器的通信，监听文件的改变，当文件被修改时，服务端发送消息通知客户端修改相应的代码，客户端对应不同的文件进行不同的操作的更新。webpack的热更新就是，当我们对代码做修改并保存后，webpack会对修改的代码块进行重新打包，并将新的模块发送至浏览器端，浏览器用新的模块代替旧的模块，从而实现了在不刷新浏览器的前提下更新页面。相比起直接刷新页面的方案，HMR的优点是可以保存应用的状态。
2023-11-17 15:38:08
1210
原创 （五）什么是Vite——冷启动时vite做了什么（依赖、预构建）
有时候默认的依赖启发式算法（discovery heuristics）可能并不总是理想的。如果您想要明确地包含或排除依赖项，可以使用optimizeDeps 配置项来进行设置。启发式算法，是一种常用于求解复杂优化问题的计算方法，其主要思想是模拟人类或自然界中蕴含的智慧和经验来寻找问题最优解。定义：一个基于直观或经验构造的算法，在可接受的花费（指计算时间和空间）下给出待解决组合优化问题每一个实例的一个可行解，该可行解与最优解的偏离程度一般不能被预计。
2023-11-16 09:47:36
1045
原创 （四）什么是Vite——冷启动时vite做了什么（源码、middlewares）
这种裸模块的加载，浏览器是不支持的，所以 vite 会对其做一层裸模块重写的处理，例如将引入 vuex 的url改写为 /node_modules/.vite/deps/vuex.js?由于 import vue 这种模块引入方式，使用的是 Nodejs 特有的模块查找算法（到 node_modules 中取查找），浏览器无法使用，因此 Vite 会将 vue 替换成一个另一个路径，当浏览器解析到这行 import 语句时，会发送一个 /node_modules/.vite/deps/vuex.js?
2023-11-16 09:44:18
433
原创 （三）什么是Vite——Vite 主体流程(运行npm run dev后发生了什么？)
vite命令是在哪里注册的呢，在 node_modules/vite/package.json 中查看bin字段。vite启动的时候，会执行 bin 目录下的 vite.js 文件，在这个文件里面我们会看到获取了当前的电脑的 绝对路径 ，如果不包含 node_module 路径，就需要引入 source-map-support 这个包来处理，如果是相对路径则会进行路径补全，当然在 dev 环境下都会有 node_module 路径，在 prod 环境下， vite 会使用 rollup 来进行打包。
2023-11-15 15:16:48
2271
原创 （二）什么是Vite——Vite 和 Webpack 区别（冷启动）
Webpack在启动时，会先构建项目模块的依赖图，如果在项目中的某个地方改动了代码，Webpack则会对相关的依赖重新打包，随着项目的增大，其打包速度也会下降。Vite利用现代浏览器支持 ES Modules 的模块化的特性，省略了打包，对需要编译的组件，例如单文件组件，Vite采用了另一种模式，即时编译，请求某个文件的时候才会编译某个文件，及时编译的好处：按需编译，速度会很快。而 Vite 直接整合了 Rollup，为用户提供了完善、开箱即用的解决方案，并且由于这些集成，也方便扩展更多的高级功能。
2023-11-15 10:30:56
809
原创 （一）什么是Vite——vite介绍与使用
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在中了解 Vite 的各种可能性。通过，Vite 支持与其他框架或工具的集成。如有需要，您可以通过自定义适应你的项目。Vite 还提供了强大的扩展性，可通过其和进行扩展，并提供完整的类型支持。
2023-11-14 17:13:25
480
原创 为什么前端数值精度会丢失?(BigInt解决办法)
数值计算、保留指定小数位、接口返回数值过大等等，这些操作都有可能导致原本正常的数值在JavaScript中确表现得异常（即精度丢失）。使用整数进行计算（先放大再缩小）。在处理需要高精度计算的场景中，可以使用一些专门的库或工具。例如，JavaScript中的Decimal.js、Big.js或BigNumber.js等库提供了高精度的数学计算功能，可以避免精度丢失的问题。超过最值时，接口以字符串的形式返回对应的值。
2023-10-30 17:50:12
5429
Vite分享、原理介绍ppt
2023-11-15
git 功能分支合并到预发布分支的时候合并错了分支，可以使用哪些命令解决？
2023-01-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人