A Lucky Boy’s Blog 👋🏼

前言：在前端开发过程中，登录注册页面几乎都是必不可少的页面，有些产品经理就会要求我们对密码进行强度的校验，普通的长度校验很简单，使用正则就可以实现，但是如果需要使用绿、黄、红色来提示用户，又怎么来做呢？废话不多说，直接上代码 校验规则 CheckPassword.js/CheckPassword.ts /** * 数字 */ const REG_NUMBER: string = '.*\\d+.*' /** * 大写字母 */ const REG_UPPERCASE: string = '.*[A-Z]+.*' /** * 小写字母 */ const REG_LOWERCASE: string = '.*[a-z]+.*' /** * 特殊符号(~!@#$%^&*()_+|<>,.?/:;'[]{}\) */ const REG_SYMBOL: string = '.*[~!@#$%^&*()_+|<>,.?/:;\'\\[\\]{}"]+.*' /** * 键盘字符表(小写) * 非shift键盘字符表 */ const CHAR_TAB....

浏览器存储限制 不同浏览器的 LocalStorage 存储限制有所不同，一般在 5MB 左右。以下是一些常见浏览器的存储限制： Chrome: 5MB Firefox: 5MB Safari: 5MB Edge: 5MB 检测存储大小 可以使用一个函数来检测当前 LocalStorage 中已经存储的数据量： function getLocalStorageSize() { let total = 0; for (let key in localStorage) { if (localStorage.hasOwnProperty(key)) { total += (localStorage[key].length + key.length) * 2; } } return (total / 1024).toFixed(2) + ' KB'; } console.log('当前 LocalStorage 使用量: ' + getLocalStorageSize()); 这个函数会计算 LocalStorage 中所有键值对的总大小，以 KB 为单位。 通过上述方法，可以捕获....

js判断字符串中是否存在连续的三个字符和三个相同的字符（字母或数字） // 判断给定字符串中是否存在连续的三个字符（字母或数字） const hasConsecutiveOrder = str => { // 循环遍历字符串中的字符 for (var i = 1; i < str.length - 1; i++) { let currentCharCode = str.charCodeAt(i); // 当前字符的 ASCII 码值 let previousCharCode = str.charCodeAt(i - 1); // 前一个字符的 ASCII 码值 let nextCharCode = str.charCodeAt(i + 1); // 后一个字符的 ASCII 码值// 如果当前字符与前一个字符相差 1，同时与后一个字符相差 -1，表示存在连续的三个字符 if (currentCharCode === previousCharCode + 1 && currentCharCode === nextCharCode - 1) { return f....

数组对象去重(new Map方法) new Map方法 data() { return { // 导出列表 exportList:[ {fileName:"XXXX", fileStatus:"已完成", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, {fileName:"XXXX", fileStatus:"已完成", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, {fileName:"1111", fileStatus:"执行中", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, {fileName:"1122", fileStatus:"执行中", fileTime:"2022-12-19 10:48:26", fileSize:"1256513345"}, ], newExportList:[], // 新列表 用于存放去重后的数据 } }, methods: { getList() ....

前些天帮朋友一块解决了一个小程序中所有POST请求中携带加密签名并且要拼接时间戳的问题，以此文章来记录，首先需要安装必要的库，因为是小程序，选择使用了FlyIO，加密方法使用的是CryptoJs，代码如下 import FlyIO from "flyio/dist/npm/wx"; import CryptoJs from "crypto-js"; // 创建新的 FlyIO 实例 const http = new FlyIO(); // 设置超时(服务器性能偏差) http.config.timeout = 30000; // 设置请求基地址 http.config.baseURL = "https://xxxxxxx.com"; // 基地址因为涉及公司接口域名，用xxx来代替 // post请求公共参数 const tData = { // deviceId: "xxxxx", //设备ID // deviceType: "android", //设备类型 // deviceName: "huawei", //设备名称 // os: "12", //操作系统 // appver....

    前言:在前端开发过程中，提到文件上传，一般上传的都是图片、Excel、压缩包、PDF等后缀的文件或图片，那么如果用户在不知情的情况下如果上传一个加密的Excel、PDF等文件，而且前、后端同学也没有处理这种情况，此时如果上传也可以上传，但后端这边解析文件就会解析不出来，为了杜绝这种情况发生，前端或者后端会对加密文件进行处理，那么，加密文件要怎么处理呢？请看下文~ 开始开发 首先需要上传文件，我们想到的肯定是用组件库，现在一般都是用的element的组件库，但是因为是公司团队之前为了方便开发，将element的组件库进行二次封装，组成了常用的业务组件，我这里就用公司封装好的组件库了，这个组件库是将element进行二次封装的，所以和element没有什么区别，唯一的区别感觉就是组件名不一样， 创建upload-modal.vue文件，在template标签中写上用到的上传组件，下边代码在组件库中都有解释，根据需求来写就行，我这块要自定义的传Excel文件和zip文件 <div> <ep-upload drag ma....

此文章记录收集开发中用过及常用的插件，以便后期方便查找使用 时间格式化插件 moment-在javascript中解析、验证、操作和显示日期。 date-fns-现代JavaScript日期实用程序库 Day.js-Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。 可视化图表插件 Apache Echarts-一个基于 JavaScript 的开源可视化图表库 echarts-wordcloud-基于Echarts的词云图扩展 需要搭配Echarts使用 echarts-gl-基于Echarts的3D图表扩展需要搭配Echarts使用 uCharts-高性能跨平台图表库 wx-chart-是一个跨平台的图形库，可在普通站点以及微信小程序中使用。 relation-graph-支持Vue和React的关联关系图谱组件 X6 图编辑引擎-X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。 粒子动态背景插件 tspa....

数组中的属性/方法 数组中的属性 ​ 属性作用 constructor返回创建此对象的数组函数的引用 length设置或者返回数组中元素的长度 portotype向对象添加属性和方法 数组中的方法 方法描述备注 push(element1,element2,element3……)在数组末尾添加一个或多个元素，并返回新的长度 pop()删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift(element1,element2,element3……)在数组头部添加一个或多个元素，并返回新的长度 splice(下标,数量,修改的元素)删除从下标处开的零个或多个元素， 并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 原数组中删除了元素，则返回的是含有被删除的元素的数组。如果第二个参数为0，则只是添加 slice(start,end)返回从start到end（不包含）的元素组成的新数组 join('')把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。如果省略该参数，则使用逗号作为分隔符。 re....

第一种：使用margin的方法 第一种方法是使用margin来使子盒子居中，但是这种方法会有一定的缺陷：需要给父盒子一个 overflow: hidden属性来清除塌陷，而且还需要精确计算上下的边距 如果父盒子改变大小，则还需重新计算大小 <style> /* 第一种 使用margin来使父盒子里边的内容居中 缺点：需要给父盒子一个 overflow: hidden属性来清除塌陷，且还需要精确计算上下的边距 如果盒子改变大小，则还需重新计算大小 */ .father { width: 500px; height: 500px; background-color: pink; overflow: hidden; } .son { width: 200px; height: 200px; margin: 150px auto; background-color: purple; } </style> <body> <div class="father"> <div class="son"></div> </d....

flex布局 flex布局极大的提高了我们布局的效率，更简单、灵活。 display: flex; 一定要给父盒子加。 flex主轴 flex主轴是水平方向来布局的一个参考线 常用的属性为 /* 默认对齐方式 左侧对齐 */ justify-content: flex-start; /* 右侧对齐 */ justify-content: flex-end; /* 中间对齐 经常用于让一个盒子水平居中*/ justify-content: center; /* 中间的间隙是两侧的两倍 相当于每一个盒子有一个左右边距 记住2倍*/ justify-content: space-around; /* 将盒子均匀分布在父盒子 显示效果：两侧没缝隙 */ justify-content: space-between; /* 子盒子间隙均匀排列在父盒子上 空隙一样大 */ justify-content: space-evenly; 主轴对齐方式 属性值作用 flex-start默认值, 起点开始依次排列 flex-end终点开始依次排列 center沿主轴居中排列 spac....