前端
关注
分享
扫一扫
文章平均质量分 50
Dragon Wu
平和世界
展开
-
Flex布局总结
目录一、基本使用二、主要的父容器属性（1）flex-direction设置子元素排列（2）justify-content设置子元素对齐方式（3）flex-wrap设置换行（4）align-items单行时设置子元素位置(5) align-content多行时设置子元素位置（6）flex-flow复合属性三、子项常用属性（1）flex设置子项的空间大小（2）align-self单独设置每个子项的位置（3）order设置item顺序一、基本使用...原创 2022-03-14 20:03:08 · 7419 阅读 · 0 评论
-
Vue 的ajax操作
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-resource/1..原创 2022-02-11 12:41:23 · 147 阅读 · 0 评论 -
纯前端打开电脑本地程序详解
目录一、配置注册表二、前端点击打开本案例基于Windows系统一、配置注册表创建文件名.reg文件：写入如下代码：test2.reg:Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\test2]"URL Protocol"=""@="" [HKEY_CLASSES_ROOT\test2\shell\open\command]@="\"D:\pythonPros\condaPractic原创 2022-01-27 11:01:53 · 1607 阅读 · 0 评论 -
纯前端实现文件上传并读取展示到页面
js代码：function uploadFile() { $("#uploadFile").click();}function upload(input) { //支持chrome IE10 if (window.FileReader) { var code_type = $("#code-type").val(); var file = input.files[0]; if (file !== undefined) {原创 2022-01-24 17:20:56 · 1552 阅读 · 0 评论 -
纯前端实现模糊查询 或和且
js代码：//onclick事件function searchText() { var keyword = $("#search_text").val(); var searchLen = $("#data_frame tr").length; // var searchAll=$("#data_frame tr td").text(); for (var i = 1; i < searchLen - 1; i++) { let searchTe原创 2022-01-24 17:16:53 · 929 阅读 · 0 评论 -
Antd Upload组件连续回车会多次触发文件夹弹窗的bug修复
思路就是禁用enter快捷键，让upload组件的enter触发失效，这样就可以规避掉这个问题。刚又到Antd官网测试一下这个bug，依然存在。原创 2025-04-30 18:51:22 · 245 阅读 · 0 评论 -
前端 React 弹窗式 滑动验证码实现
前端 React 弹窗式 滑动验证码实现原创 2025-04-15 20:14:30 · 659 阅读 · 0 评论 -
前端 Overflow hidden与auto切换时页面右移的问题解决 Antd Drawer打开关闭时位置偏移的问题的解决
一的解决方案也是二的解决方案，通过查看Antd Drawer打开时的body样式，我们可以发现，body在Antd Drawer打开时被Antd设置了样式，即“width: calc(100% - 滚动条宽度)”，这就是发生偏移的问题所在，我们只需要确保打开时body的宽度是我们预期的宽度即可解决该问题。这里我们获取到页面全局的滚动条宽度，再将页面宽度设置成一个定值，在条件切换的状态下，页面就不会发生位置变化了。在通过js切换页面全局滚动条状态时，我发现页面随着滚动条的消失与重现发生了位置变化。原创 2025-03-28 15:34:21 · 381 阅读 · 0 评论 -
Webstorm 配置Eslint ESLint: TypeError: this.libOptions.parse is not a function
Webstorm 配置Eslint ESLint: TypeError: this.libOptions.parse is not a function 解决办法：把 {**/*,*}.{js,ts,jsx,tsx,html,vue}换成 {**/*,*}.(js,ts,jsx,tsx,html,vue)原创 2025-01-11 23:31:26 · 262 阅读 · 0 评论 -
微前端Webpack集成Vite子应用避坑指南
微前端Webpack集成Vite子应用避坑指南。vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件保留vite构建es模块的优势一键配置，不影响已有的vite配置支持vite开发环境问题描述：子应用有多个root.render页面，用于处理不同的渲染逻辑，直接访问子应用的这些页面，一切正常；但在父应用中访问某些页面时，页面找不到了。经过控制台打印检查，发现子应用根本没有走自定义render页的逻辑，连自定义html里script module也未使用。原创 2024-12-31 11:28:24 · 2280 阅读 · 0 评论 -
Graph @antv/g6 数据刷新导致的位置和缩放比例问题解决
小伙伴写了个功能，每10s刷新一次页面数据，对graph进行重新渲染，但不巧的是，每次刷新数据graph都会回到初始位置。百度上对此记录也很少，查阅官方文档，发现官方文档的一些方法在当前版本中根本就不存在。于是，我在查阅Graph源码后，找到了如下解决方案。在graph销毁前获取当前graph的zoom和缩放为1的position, 之后，在下次render时先设置缩放为1的position, 最后设置zoom，问题就解决了。3、graph每次渲染时，设置graph上次的状态。原创 2024-12-17 10:30:11 · 668 阅读 · 0 评论 -
前端部署 浏览器缓存问题的解决
【代码】前端部署 浏览器缓存问题的解决。原创 2024-12-08 14:57:20 · 696 阅读 · 0 评论 -
前端 px、rpx、em、rem、vh、vw计量单位的区别
这里是视窗指的是浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。2、随着 rem 在众多的浏览器都得到支持，有需要考虑到对多设备，多分辨率的自适应，无疑这时候 rem 是最合适的（如：移动端的开发）。3、在响应式布局中，页面中的所有元素都使用额 em 单位值，em 是一个相对的大小，默认情况下 1em=16px。2、1vh等于视口高度的1%，1vw等于视口宽度的1%。原创 2024-11-19 10:55:30 · 1450 阅读 · 0 评论 -
前端 JS 浅拷贝与深拷贝
return res} else {age: 18,fn() {obj.fn()obj2.fn()打印：可以看到深拷贝成功了，函数也深拷贝成功了。1、如果是基本数据类型，js都是采用深拷贝的，数据之间不会有任何影响；2、可以通过解构重构或Object.assgin方法来实现浅拷贝；3、深拷贝可以使用实验中的深拷贝递归函数来实现，对于一些没有函数的对象可以实验JSON.parse(JSON.stringify()) 的方法来快速实现深拷贝。总结到此！原创 2024-11-18 16:26:52 · 1239 阅读 · 0 评论 -
前端框架 详解遍历数组为何需要加Key
key的作用相当于一个ID，只是无法在页面中查看，当设置key以后，在更新渲染比较元素时，就会比较相同key的元素，而不是按照顺序进行比较，在渲染一个列表时，通常给列表每个元素设置一个唯一的key来解决上述问题（这个key在当前列表中唯一即可）原创 2024-11-17 20:20:00 · 712 阅读 · 0 评论 -
前端 易混淆知识点梳理
JS闭包 严格模式 等常见场景的区分与解析原创 2024-11-17 16:42:51 · 1063 阅读 · 0 评论 -
前端 JS面向对象 继承
直接通过class来标注，并且构造函数同一为constructor(), 允许静态方法，添加extends关键字进行继承。这里我不难看出，第一种写法也存在一种问题，两个类型继承同一各方法时，修改的原型对象是同一各个导致一些修改上的问题。由此演进出不会影响修改的更优方案：通过构造函数来实现。原创 2024-11-12 11:44:56 · 387 阅读 · 0 评论 -
前端 JS面向对象 原型 prototype
prototype里的属性constructor属性就是帮原型确定它的构造函数是谁，如，构造函数Star的prototype里的constructor属性就是指向Star构造函数的。此外，__proto__实例化对象的原型中也有constructor，并且是指向prototype原型对象中的constructor的。打印：可以看到两个实例对象的该方法是同一个，证明都使用了同一个原型里的方法，没有新开内存拷贝。打印：不同实例对象的动态方法是不同的，会开出新的内存区域用于存储相同的方法。1、这是一个只读属性；原创 2024-11-12 10:38:37 · 642 阅读 · 0 评论 -
前端 call、bind、apply的实际使用
1、call、apply、bind方法都可以改变this的指向，可以配合this使用，实现继承的效果。2、call、apply都是调用后会立即指向的，但区别在于call传入的参数的逗号隔开的，而apply传入的参数是数组。3、bind调用后不会立即执行函数，而是返回一个新的函数，需要调用才能执行。原创 2024-11-11 21:42:44 · 538 阅读 · 0 评论 -
前端 Canvas 绘画 总结
注：Canvas的宽高需要通过属性来设置，尽量不要使用CSS来设置。3、使用canvas提供的api进行绘图。1、需要一个canvas标签。实现效果：同样绘制出一个矩形。2、需要获取 画笔 对象。实现效果：绘制出一个矩形。原创 2024-11-07 20:11:19 · 488 阅读 · 0 评论 -
JS 异步 Promise、Async、await详解
可以看到，首先打印了Test Demo，3秒后执行了第一各Promise里的内容，执行完第一个Promise里的内容后，再过2秒执行了第二各Promise里的内容。可以看到，首先打印了Test Demo，3秒后执行了第一各Promise里的内容，执行完第一个Promise里的内容后，再过2秒执行了第二各Promise里的内容。(2) Promise.race() 中Promise序列中第一个执行完毕的是通过，则认为是成功，如果第一个执行完毕的Promise是rejected，则认为失败；原创 2024-11-03 14:56:51 · 4936 阅读 · 0 评论 -
前端 React useState 数组或对象改变后页面没有更新渲染解决
【代码】前端 React useState 数组或对象改变后页面没有更新渲染解决。原创 2024-08-28 11:13:46 · 1382 阅读 · 0 评论 -
前端 react 实现图片上传前压缩 缩率图
可以看到源图片已经被压缩了，这样处理后再提交至服务器就能节省带宽，提高前端加载效率了，注意质量数值设置的过小图片过大可能导致图片失帧。原创 2024-08-04 13:25:09 · 496 阅读 · 0 评论 -
Nextjs 前端实现RSA公钥加密 JSEncrypt加载问题解决
这样实现的RSA公钥加密内容，只有服务器的私钥才能解开，保证了数据的安全！下一篇，讲如何通过SpringBoot私钥解密该敏感数据。 Server Error ReferenceError: window is not defined原创 2024-05-20 15:57:22 · 521 阅读 · 0 评论 -
nginx配置vue前端
nginx配置vue前端转载 2022-09-04 22:07:34 · 790 阅读 · 0 评论 -
nvm 控制nodejs和npm的版本
nvm 控制nodejs和npm的版本转载 2022-08-23 15:09:25 · 135 阅读 · 0 评论 -
js 解析csv字符串的函数
最nice的回答：'use strict';function csvToArray(text) { let p = '', row = [''], ret = [row], i = 0, r = 0, s = !0, l; for (l of text) { if ('"' === l) { if (s && l === p) row[i] += l; s = !s; } else if原创 2022-04-03 19:13:24 · 703 阅读 · 0 评论 -
Uniapp 项目模板链接
uni-app项目模板uni-app博客：uni-app 页面 路由navigate - 你还喜欢现在吗？ - 博客园mix-mall 电商项目模版：https://ext.dcloud.net.cn/plugin?id=200插件市场，模板市场：https://ext.dcloud.net.cn/plugin?id=239https://ext.dcloud.net.cn/5年web前端的uni-app快速开发项目架构https://ext.dcloud.net.cn/原创 2022-02-11 11:51:24 · 1078 阅读 · 0 评论 -
数据可视化echarts前端 学习总结
echart官网Apache ECharts一、简单的使用操作先找到官网的示例找到想要的模板，复制代码后，进行数据和样式的修改即可简单使用。..原创 2022-02-06 18:36:59 · 439 阅读 · 0 评论 -
js的一些数据存储方式
优快云编程社区转载 2022-01-31 10:32:00 · 604 阅读 · 0 评论 -
JQuery ajax使用总结
目录一、介绍二、jquery.ajax()三、jquery的GET请求三、jquery POST请求一、介绍前置知识：ajax原理，json字符串进行信息传递。Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的部分页面。json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或者浏览器交互数据，包括json对象，json数组对象。二、原创 2022-01-25 16:41:46 · 1717 阅读 · 0 评论 -
Vue笔记
1、v-text会直接覆盖掉元素内的内容，{{}}不会覆盖，并且都可进行字符串拼接。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <script src="Vue_2.6.14.js"></script></head><body>...原创 2021-10-31 11:26:47 · 160 阅读 · 0 评论