分类 Web前端下的文章 - 朱治龙个人博客

2024-09-30

Docker搭建一款功能强大、易于使用的图床程序和图像处理工具软件介绍EasyImages是一款功能强大的图床程序和图像处理工具，它在多个方面展现出其独特的优势和特点，无论是作为个人用户还是开发者来说都是一个不错的选择。基本特点自托管特性：EasyImages提供自托管功能，这意味着用户可以完全控制自己的图片数据和隐私，无需依赖第三方图床服务，从而避免了数据隐私风险、服务限制和图片加载延迟等问题。批量上传与多种URL形式：支持批量上传图片，并能返回多种形式的URL，包括图片直链、Markdown格式URL、BBCCode、Html、缩略图等，满足用户在不同场景下的需求。在线图片管理：提供一个直观的在线图片管理界面，用户可以方便地查看、编辑、组织和管理上传的图片，支持创建文件夹、排序图片、批量删除或打包图片等功能。上传限制与格式转换：支持设置上传图片的最低宽度和高度，确保图片质量；同时，能够自动将上传的图片转换为不同的格式，以满足网站或应用的需求。水印功能：支持自动为上传的图片添加文字或图片水印，有助于保护图片版权和防止滥用。资源占用少：对于安装环境和服务器性能要求非常低，甚至不需要数据库支持，使得在较小的服务器上也能轻松运行且不会占用过多资源。安全性与控制：提供黑白名单上传功能，允许用户设置哪些IP地址或用户可以上传图片；同时，支持上传日志IP定位和限制每日上传次数等功能，以增强图床的安全性。数据统计与网站统计：提供数据统计功能，帮助用户跟踪图片的上传情况、资源占用情况和存储使用情况等；此外，还支持网站统计功能，以提供更全面的信息。API支持：提供了全面的API支持，使开发者能够在其项目中方便地上传和管理图片。图像处理功能除了作为图床程序外，EasyImages还具备强大的图像处理功能。它是一款轻量级且高效的JavaScript库，专为简化和加速图像处理而设计。基于HTML5的Canvas API构建，充分利用了浏览器的硬件加速能力，使得在处理大量或高分辨率的图片时也能保持流畅的性能。EasyImages提供了多种常用的图像操作功能，如缩放、裁剪、旋转、添加水印等。通过简洁的API接口，开发者可以快速地在自己的项目中集成并实现复杂的图片处理需求。此外，它还具有良好的社区支持和丰富的示例代码可供参考学习。相关连接官方网站：https://icret.github.io/EasyImages2.0/#/GitHub地址：https://github.com/icret/EasyImages2.0Docker镜像：https://hub.docker.com/r/ddsderek/easyimage应用部署根据官网推荐的方式，使用 docker compose 部署，编排文件内容如下：services: easyimage: image: ddsderek/easyimage:latest container_name: easyimage networks: - net-zzl ports: - 8113:80 environment: - TZ=Asia/Shanghai - PUID=1000 - PGID=1000 - DEBUG=false volumes: - ./config:/app/web/config - ./data:/app/web/i restart: unless-stopped networks: net-zzl: name: bridge_zzl external: true使用 docker compose up -d 启动服务后，进入如下图所示的安装环境检测页面：单击「下一步」按钮，进入「网站基础配置」页面：填写信息后，单击「开始安装」按钮，安装完成后进入下图所示的管理员登录页面：输入账号、密码后，进入如下图所示的主界面：

2024年09月30日
56 阅读
0 评论
0 点赞

2024-04-06

2024年04月06日
60 阅读
0 评论
1 点赞

2023-09-03

超全的正则表达式速查手册一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$正数、负数、和小数：^(-|+)?\d+(.\d+)?$有两位小数的正实数：^[0-9]+(.[0-9]{2})?$有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$或 ^\+?[1-9][0-9]*$非零的负整数：^-[1-9][]0-9″$ 或 ^-[1-9]\d$ 非负整数：^\d+$ 或 ^[1-9]\d*|0$非正整数：^-[1-9]\d*|0$或 ^((-\d+)|(0+))$非负浮点数：^\d+(.\d+)?$或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$正浮点数：^[1-9]\d.\d|0.\d[1-9]\d$或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$负浮点数：^-([1-9]\d.\d|0.\d[1-9]\d)$或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$浮点数：^(-?\d+)(.\d+)?$或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$二、校验字符的表达式汉字：^[\u4e00-\u9fa5]{0,}$英文和数字：^[A-Za-z0-9]+$或 ^[A-Za-z0-9]{4,40}$长度为3-20的所有字符：^.{3,20}$由26个英文字母组成的字符串：^[A-Za-z]+$由26个大写英文字母组成的字符串：^[A-Z]+$由26个小写英文字母组成的字符串：^[a-z]+$由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$可以输入含有^%&’,;=?$” 等字符：[^%&’,;=?$\x22]+禁止输入含有~的字符： [^~\x22]+其它.匹配除 n 以外的任何字符。/[\u4E00-\u9FA5]/ 汉字/[\uFF00-\uFFFF]/ 全角符号/[\u0000-\u00FF]/ 半角符号三、特殊需求表达式Email 地址：1^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$1域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?InternetURL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=])?$手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}身份证号(15位、18位数字)：^\d{15}|\d{18}$短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$日期格式：^\d{4}-\d{1,2}-\d{1,2}一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$钱的输入格式有四种钱的表示形式我们可以接受:”10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0”不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$必须说明的是,小数点后面至少应该有1位数，所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的：^[0-9]+(.[0-9]{2})?$这样我们规定小数点后面必须有两位，如果你认为太苛刻了，可以这样：^[0-9]+(.[0-9]{1,2})?$这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了，我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$1到3个数字,后面跟着任意个逗号+3个数字，逗号成为可选，而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$备注：这就是最终结果了,别忘了+可以用*替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+.[x|X][m|M][l|L]$中文字符的正则表达式：[\u4e00-\u9fa5]双字节字符：^\x00-\xff)空白行的正则表达式：\n\s*\r (可以用来删除空白行)HTML标记的正则表达式：<(\S?)[^>]>.?</\1>|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)首尾空白字符的正则表达式：^\s|\s (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)腾讯QQ号：[1-9][0-9]{4,}(腾讯QQ号从10000开始)中国邮政编码：[1-9]\d{5}(?!\d)(中国邮政编码为6位数字)IP地址：\d+.\d+.\d+.\d+(提取IP地址时有用)IP地址：((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d).){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))IP-v4地址：\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b (提取IP地址时有用)校验IP-v6地址: (([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))子网掩码：((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))校验日期:^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$(“yyyy-mm-dd“ 格式的日期校验，已考虑平闰年。)抽取注释：<!–(.*?)–>查找CSS属性:^\s[a-zA-Z\-]+\s[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}提取页面超链接:(<a\s(?!.\brel=)[^>])(href=”https?:\/\/)((?!(?:(?:www\.)?’.implode(‘|(?:www\.)?’, $follow_list).’))[^” rel=”external nofollow” ]+)”((?!.\brel=)[^>])(?:[^>])>提取网页图片:\< [img][^\\>][src] = [\”\’]{0,1}([^\”\’\ >]*)提取网页颜色代码:^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$文件扩展名效验:^([a-zA-Z]\:|\\)\$[^\\]+\$[^\/:?”<>|]+\.txt(l)?$判断IE版本：^.MSIE 5-8?(?!.Trident\/[5-9]\.0).*$

2023年09月03日
21 阅读
0 评论
0 点赞

2023-07-19

使用cspell对项目做拼写规范检查项目中的拼写问题主要涉及变量命名、方法名、样式名等字符串的规范，使用cspell能在很大程度上减少由于输入或记错导致的错误单词的出现，也能让命名更规范更易于理解。这篇文字是在我们已有项目的实践。

2023年07月19日
640 阅读
0 评论
0 点赞

2023-06-24

将vue-cli搭建的Vue前端工程更新构建工具为pnpm+vite经验分享缘起我们团队负责的超算云服务控制台前端工程(console-ui)从提交第一行代码（2021-03-18）至今已 2 年多时间，两年多的时间内随着需求的增加，前端工程也越来越庞大，陈旧的基础设施暴露出了如下问题：1、Node.js 版本仍然使用 2021 年发布的 14.x，而最新的 Node 大版本已更新到20.x，仍然使用旧版本导致一些构建工具版本不能随意更新，也同时留下一定的安全隐患。2、项目目前仍使用两年前发行的 Webpack4.46.0 版本作为项目构建工具，随着项目逐渐庞大，Webpack 在开发时编译项目时间通常达到 2 分钟以上，严重影响开发效率。3、前端生态日新月异，守着老旧的生态，不便于团队成长。借本次升级 console-ui 核心 vue版本的契机，考虑同时升级到新的构建工具。Vite 从 2021 年发布以来，在构建速度及开发体验上一直口碑不错，经过两年多的迭代，也趋于稳定，完全可以应用于产线了。且根据官方的介绍 Vite 4.3 开始的版本比之前的版本在开发及构建速度上又有了成倍的提升：发行日志见链接：https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md开始折腾1、升级 Node.js目前 console-ui 构建还是用的Node.js 14.x, 而现在 Node.js 的 LTS 版本是18.x，按照 Node.js 的版本发行规律，预计目前最新的 20.x 版本在今年的 10 月份将成为下一个 LTS 版本，且 Node.js 的向下兼容性较强，所以目前咱们可以拥抱 Node.js 20.x 相关生态。所以本次升级就直接选用 Node.js 20.x 了。开发机是使用nvm管理 Node.js 多版本的。使用如下命令安装并使用Node.js 20:nvm install 20.3.0 nvm use 20.3.02、升级构建工具在升级过程如下:创建初始工程使用官方开始页面提供的命令初始化一个初始工程：pnpm create vite console-ui --template vue3、console-ui 已有功能最简验证3.1、支持多主题console-ui的设定是可以打包不同主题的页面，构建时根据 env 变量打包不同主题的版本，然后采用不同主题文件。经验证vite也支持，vite.config.js 核心配置代码如下:css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/themes/${env.VITE_APP_DIST_MODE}.scss";` } } }由于不同的主题有些不同的资源文件(如favicon.ico、主题相关的图片等)需要引用，在这里我们在public 目录下新建2个目录用于管理不同主题资源文件的管理，然后配置不同的publicDir:publicDir: `./public/${distMode}`,3.2、验证多页面支持console-ui提供针对普通用户的 UI 界面，同时也提供管理员使用的维护界面，这两套界面在原工程是使用多页面机制实现的。经验证，vite 也能很好的支持，核心配置代码如下：plugins: [ createHtmlPlugin({ minify: true, pages: [ { entry: '/src/main.js', filename: 'index.html', template: 'index.html', injectOptions: { data: { title: '超算云服务控制台' } } }, { entry: 'src/pages/admin/index.js', filename: 'admin.html', template: 'admin.html', injectOptions: { data: { title: '超算运服务控制台-系统维护' } } } ] }) ]4、开始整合整合时会涉及一些资源文件引用的改造，一般改动会比较多，为不影响主分支开发，建议单独开个分支处理。整合过程比较繁琐，就不一一罗列了，主要涉及如下事项：替换 ENV 变量：vue-cli 工程的环境变量都是以Vue_APP 开头的变量，可以全局替换为VITE_APP开头，而且 Webpack 工程一般使用 process.env.XXX 访问ENV变量，而 Vite 是使用 import.meta.env.XXX 访问 ENV 变量，为了少改动，可以使用如下方式继续使用process.env.XXX 方式访问：define: { 'process.env': { ...env } }调整资源引用问题：Webpack 项目多数使用require('xxx')的方式在 JS 里引入资源，确实特别的方便，但是这一套在 Vite支持不是很好，即便有插件支持(如vite-plugin-commonjs)但依然没有 Webpack 的 require 机制强大。一些不需要参与打包的资源可以放在 public 目录，然后使用URL路径访问，参与打包的文件，可改为 import XXX from 'xxxx.png'的方式引入整体改造过程提交记录截图如下：优化整合后发现打包的文件比原 Webpack 打包的 dist 目录更大，前端工程层面的优化，主要以从以下几点着手处理：压缩：可采用vite-plugin-compression插件对打包后的文件进行了压缩处理静态资源上CDN：优化过程主要使用rollup-plugin-visualizer 对打包后的文件进行分析，对一些占用打包空间较大的文件使用CDN引入的方式进行优化按需引入：如lodash、moment.js等，尽量按需引入，减少非必须的语言包等，能很大程度的减小打包体积。附上本次改造核心的完整 vite.config.js 文件内容：import path from 'path' import vitePluginCommonjs from 'vite-plugin-commonjs' import { createHtmlPlugin } from 'vite-plugin-html' import { visualizer } from 'rollup-plugin-visualizer' import viteCompression from 'vite-plugin-compression' import externalGlobals from 'rollup-plugin-external-globals' // import eslintPlugin from 'vite-plugin-eslint' import { defineConfig, loadEnv } from 'vite' import legacy from '@vitejs/plugin-legacy' import vue2 from '@vitejs/plugin-vue2' export default ({ mode }) => { const env = loadEnv(mode, process.cwd()) const distMode = env.VITE_APP_DIST_MODE || 'paratera' const cdn = { scripts: mode.includes('development') ? [] : [ 'https://statics.paratera.com/console/libs/vue.2.7.14.min.js', // 'https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js', // 'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js', 'https://statics.paratera.com/console/libs/element-ui.2.15.13.min.js', 'https://statics.paratera.com/console/libs/exceljs.4.3.0.min.js' ] } // https://vitejs.dev/config/ const viteConfig = { base: '/', publicDir: `./public/${distMode}`, define: { 'process.env': { ...env } }, plugins: [ vue2(), // eslintPlugin(), createHtmlPlugin({ minify: true, pages: [ { entry: '/src/main.js', filename: 'index.html', template: 'index.html', injectOptions: { data: { title: '超算云服务控制台', cdn }, tags: [ { injectTo: 'body-prepend', tag: 'div', attrs: { id: 'tag1' } } ] } }, { entry: 'src/pages/admin/index.js', filename: 'admin.html', template: 'admin.html', injectOptions: { data: { title: '超算运服务控制台-系统维护', cdn // injectScript: `<script src="./inject.js"></script>`, } } } ] }), vitePluginCommonjs(), legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] }), viteCompression({ verbose: true, // 是否在控制台输出压缩结果 disable: false, // 是否禁用,相当于开关在这里 threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b，1b=8B, 1B=1024KB 那我们这里相当于 9kb多吧，就会压缩 algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw'] ext: '.gz' // 文件后缀 }) ], resolve: { extensions: ['.js', '.vue', '.json'], alias: [ { find: /@\/.+/, replacement: (val) => { return val.replace(/^@/, path.resolve(__dirname, './src/')) } }, { // this is required for the SCSS modules find: /^~(.*)$/, replacement: '$1' } ] }, css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/themes/${distMode}.scss";` } } }, server: { port: 8686 }, build: { // target: 'es2015', // cssTarget: 'chrome80', // brotliSize: false, // chunkSizeWarningLimit: 2000, // commonjsOptions: { // // 改为 ture 后就会转化 require 语法 // transformMixedEsModules: true // }, rollupOptions: { input: { index: path.resolve(process.cwd(), 'index.html'), admin: path.resolve(process.cwd(), 'admin.html') }, external: [ // 'vue', 'element-ui', 'exceljs' ], plugins: [ externalGlobals({ vue: 'Vue', // 'vue-router': 'VueRouter', // vuex: 'Vuex', 'element-ui': 'ELEMENT', 'exceljs': 'ExcelJS' }) ], output: { chunkFileNames: 'assets/js/chunks/[name].[hash].js', assetFileNames: (chunkInfo) => { // 用后缀名称进行区别处理 // 处理其他资源文件名 e.g. css png 等 let subDir = 'images' const extName = path.extname(chunkInfo.name) if (['.css'].includes(extName)) { subDir = 'css' } if (['.woff', '.ttf'].includes(extName)) { subDir = 'fonts' } return `assets/${subDir}/[name].[hash].[ext]` }, // 入口文件名 entryFileNames: 'assets/js/[name].[hash].js' } } } } const lifecycle = process.env.npm_lifecycle_event if (lifecycle.includes(':report')) { viteConfig.plugins.push(visualizer({ open: true, brotliSize: true, gzipSize: true, filename: './dist/report.html' })) } return defineConfig(viteConfig) } 升级前后 package.json 比对：成效对比项优化前(Webpack)优化后(Vite)安装依赖66.60s17.2开发启动110228ms2536ms打包部署123.77s1m 57s对比截图安装依赖：Webpack ↓Vite ↓开发启动：Webpack ↓Vite ↓打包截图：Webpack ↓Vite ↓

2023年06月24日
51 阅读
0 评论
0 点赞

2023-06-10

2023年06月10日
20 阅读
0 评论
0 点赞

2023-05-30

项目原型工程搭建实践分享：前端数据mock 背景介绍大部分项目有产品经理参与前期的需求及原型制作，但近两年我们组负责的项目没有专职产品经理及UI工程师参与。由于项目已上线正式交付给用户使用，很多新需求不便于直接在ui工程大刀阔斧的改动，毕竟从需求 → 原型 → 前端UI → 后端接口 → 前后端联调 → 正式上线，一般都会有一个不短的周期。直接在前端ui工程跟进需求的话，中间极有可能穿插其他的bug修复及功能调整相关的短期改动需求，导致原型相关的代码跟ui代码混在一起，难免会由于粗心造成一些可大可小的线上事故。项目分析针对以上实际情况，最终项目组决定由前端工程师来负责项目的原型工作，原型效果由需求方确认后再着手后续的前后端开发工作。本着节约工作量考虑，原型工程使用 ui工程相同的代码，那样后期在原型工程的改动也可以很方便的迁移到ui工程。为达到这个目的，需要将在原型工程请求的后端数据改用 mock 方式。mock 数据有多种可行的实现方式：大部分API管理应用(如Torna、YApi、apizza等)都在提供管理接口的核心功能上带有给接口提供mock数据机制，然后开发时代理到API管理应用的mock路径本地维护一套mock数据，然后起一个mock服务提供接口请求本地维护一套接口json数据，拦截 ajax 请求响应 mock 的数据以上实现方式都有各自的优缺点：方案1：受制于接口管理平台，大部分接口管理平台不能自定义接口path，那样就会造成mock，路径跟实际路径不一致。而且在不同的平台维护，极容易造成最终的数据不一致的情况。方案2：可使用Node.js自写一套解析json提供mock服务的程序，该方式能最大程度的还原浏览器网络请求过程，要花更多的时间定义json 数据；由于实际使用时存在路径变量的情况，复杂的路由路径跟 mock数据的匹配方式也要花不少时间。若有足够多的时间处理这个路径匹配机制，该方案是最佳，整个前端工程的代码不用调整(那样也更更方便的跟ui工程做代码比对及合并)，只需在原型工程代理一个不同的服务路径即可。方案3：有成熟的技术实现方案，能最快的响应现有需求，但需在已有 ui 工程上调整部分网络请求相关的文件。最终我在实现过程中是选择了第三种，主要是原型工程都是前端工程师维护，相关的mock数据也都在一个平台直接管理是最节省时间的。实现方案为实现该方案，在原有 ui 工程的基础上，主要做了开展了如下工作：1、模拟用户认证，添加 src/core/mock.js 文件，可根据系统实际情况模拟数据即可，核心内容如下：/** * 原型工程为跟console-ui整体结构保持一致，为跳过用户认证逻辑，本处添加一些环境初始化相关的数据 */ export function mockInit() { // 模拟token 进行 sessionStorage.setItem('token', 'p_RQAnFyIFZtGDS_iZwThGs5z8tWOM0BDSN03z1EWkA.Q0Ayf2dx4aaFfoJzLfS3YiRoqdScvk-OHJn7Kb_lRQU') // 模拟用户信息 sessionStorage.setItem('userid', 'SELF-DAN4_QiFBwU7CF-AQkPTatwW6tjKV_FjyDDUpkGYSvA') sessionStorage.setItem('para-token', 'TmdOGodfh75ueoAZsaeznT5qpeZJ_eaAyWJCwcao8Ro-2082234049') sessionStorage.setItem('userLoginLogId', '2744') } export const mockFormResponse = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(null) }, 1000) }) } 2、main.js 引入并执行初始化方法：import { mockInit } from './core/mock' mockInit() 3、添加 src/api/mock 目录，然后添加mockData子目录用于管理相关的 mock 数据，基本的目录结构如下图所示：4、添加 src/api/mock/index.js 主要用于获取所有 mockData 目录下以 .json结尾的文件，并提供 mock数据，核心代码如下：/** * 用于将 mockData 目录下的所有以.json 文件结尾的mock文件整合为一个，对外提供mock服务 */ import lodashGet from 'lodash/get' import { mockFormResponse } from '../../core/mock.js' const modulesFiles = require.context('./mockData', false, /\.json$/) const mockDataObj = {} modulesFiles.keys().map(modulePath => { const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') mockDataObj[moduleName] = modulesFiles(modulePath) }) export default { /** * * @param {String} mockPath mock数据路径，一般是「模块名.mock数据对象名」 * @param {Number} timeout 延时时长，单位为ms，默认为1秒 */ getMockData: (mockPath, timeout) => { if (!timeout) { timeout = 1000 } if (mockPath === 'common.formMock') { return mockFormResponse() } const mockData = lodashGet(mockDataObj, mockPath) return new Promise((resolve, reject) => { setTimeout(() => { if (mockData) { resolve(mockData) } else { reject(new Error('数据暂未定义')) } }, timeout) }) }, mockFormResponse }5、改造 Ajax 请求逻辑.本系统使用的 axios 作为 http 库，并且使用层面做了全局封装。而 axios 提供了 adapter 机制可以很方便的实现我们的 mock 场景，核心代码如下：import axios from 'axios' import mockService from '../api/mock/index.js' const service = axios.create({ baseURL: process.env.VUE_APP_GATEWAY_URL, // url = base url + request url adapter: async(config) => { // mock数据拦截 if (config.mockCode) { const data = await mockService.getMockData(config.mockCode) return new Promise((resolve, reject) => { resolve({ data, status: 200 }) }) } }, // withCredentials: true, send cookies when cross-domain requests timeout: 60000 // request timeout })6、改造所有 api 目录下所有获取数据的方法，在原有基础上统一添加 mockCode 参数。示例如下：api 请求方法种添加 mockCode:对应模块的.json mock 文件种添加需响应的数据：7、改造表格封装组件。为便于表格数据的异步加载，我们基于 el-table 做了些封装，额可以传入一个url 就可方便的分页获取表格数据，这一套机制是不走我们api 目录封装的方法的，故需要在请求时也需要指定 mockCode,具体示例代码如下图所示：为适配该场景，在发起请求前如果存在mockCode,则在请求参数种添加mockCode:总结通过该工作，扩展了解决问题的多角度思维模式，面对需求只要前期做好规划，梳理出可行的实现方案，最后的技术实现往往是最简单的。

2023年05月30日
19 阅读
0 评论
0 点赞

2023-05-24

记一次使用v-charts绘制图表出现重影的处理经历分享背景介绍目前维护的项目属于多年积累的老项目了，使用的 vue2 + vue-router + vuex + element-ui + webpack 的技术架构。涉及图表相关的库主要使用 echarts@4.9.0 和饿了么前端团队基于 echarts 4.x 封装的 v-charts 1.19.0。近期接运营要求，需要增加一些图表效果，基本界面效果实现如下：问题但在实现过程中，在区域缩放组件拖动调整数据显示范围时，发现x轴会出现重影的现象，如下图所示：排查过程初期怀疑跟图表配置项的 xAxis 相关配置信息有关，随将 position: 'bottom' 配置项注释掉，发现重影现象没有了，但是上下出现了重复的x 轴label如下图所示：将echarts 图表配置信息拷贝到 echarts 实例页面（https://echarts.apache.org/v4/examples/zh/editor.html?c=bar-large）进行验证，发现在该页面不存在重影现象：配置信息如下：var option = { "color": ["#004CA1", "#32D4E3", "#03A2DC", "#B581E3", "#0F7DFA", "#c4b4e4"], "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } }, "legend": { "show": true, "top": -5, "data": ["CPU", "GPU"] }, "grid": { "right": "5%", "top": "10%", "bottom": "20%", "containLabel": true }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "left": 77, "right": 77 } ], "xAxis": { "data": [ "2022-11-26", "2022-11-27", "2022-11-28", "2022-11-29", "2022-11-30", "2022-12-01", "2022-12-02", "2022-12-03", "2022-12-04", "2022-12-05", "2022-12-06", "2022-12-07", "2022-12-08", "2022-12-09", "2022-12-10", "2022-12-11", "2022-12-12", "2022-12-13", "2022-12-14", "2022-12-15", "2022-12-16", "2022-12-17", "2022-12-18", "2022-12-19", "2022-12-20", "2022-12-21", "2022-12-22", "2022-12-23", "2022-12-24", "2022-12-25", "2022-12-26", "2022-12-27", "2022-12-28", "2022-12-29", "2022-12-30", "2022-12-31", "2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05", "2023-01-06", "2023-01-07", "2023-01-08", "2023-01-09", "2023-01-10", "2023-01-11", "2023-01-12", "2023-01-13", "2023-01-14", "2023-01-15", "2023-01-16", "2023-01-17", "2023-01-18", "2023-01-19", "2023-01-20", "2023-01-21", "2023-01-22", "2023-01-23", "2023-01-24", "2023-01-25", "2023-01-26", "2023-01-27", "2023-01-28", "2023-01-29", "2023-01-30", "2023-01-31", "2023-02-01", "2023-02-02", "2023-02-03", "2023-02-04", "2023-02-05", "2023-02-06", "2023-02-07", "2023-02-08", "2023-02-09", "2023-02-10", "2023-02-11", "2023-02-12", "2023-02-13", "2023-02-14", "2023-02-15", "2023-02-16", "2023-02-17", "2023-02-18", "2023-02-19", "2023-02-20", "2023-02-21", "2023-02-22", "2023-02-23", "2023-02-24", "2023-02-25", "2023-02-26", "2023-02-27", "2023-02-28", "2023-03-01", "2023-03-02", "2023-03-03", "2023-03-04", "2023-03-05", "2023-03-06", "2023-03-07", "2023-03-08", "2023-03-09", "2023-03-10", "2023-03-11", "2023-03-12", "2023-03-13", "2023-03-14", "2023-03-15", "2023-03-16", "2023-03-17", "2023-03-18", "2023-03-19", "2023-03-20", "2023-03-21", "2023-03-22", "2023-03-23", "2023-03-24", "2023-03-25", "2023-03-26", "2023-03-27", "2023-03-28", "2023-03-29", "2023-03-30", "2023-03-31", "2023-04-01", "2023-04-02", "2023-04-03", "2023-04-04", "2023-04-05", "2023-04-06", "2023-04-07", "2023-04-08", "2023-04-09", "2023-04-10", "2023-04-11", "2023-04-12", "2023-04-13", "2023-04-14", "2023-04-15", "2023-04-16", "2023-04-17", "2023-04-18", "2023-04-19", "2023-04-20", "2023-04-21", "2023-04-22", "2023-04-23", "2023-04-24", "2023-04-25", "2023-04-26", "2023-04-27", "2023-04-28", "2023-04-29", "2023-04-30", "2023-05-01", "2023-05-02", "2023-05-03", "2023-05-04", "2023-05-05", "2023-05-06", "2023-05-07", "2023-05-08", "2023-05-09", "2023-05-10", "2023-05-11", "2023-05-12", "2023-05-13", "2023-05-14", "2023-05-15", "2023-05-16", "2023-05-17", "2023-05-18", "2023-05-19", "2023-05-20", "2023-05-21", "2023-05-22", "2023-05-23", "2023-05-24" ], "type": "category", "silent": false, "axisLine": { "show": true }, "axisLabel": { "show": true, "interval": "auto", "showMinLabel": true, "showMaxLabel": true }, "scale": true, "splitLine": { "show": false }, "splitArea": { "show": true } }, "yAxis": { "type": "value", "axisLine": { "show": true } }, "series": [ { "type": "bar", "stack": "总量", "name": "CPU", "barMaxWidth": 40, "label": { "show": false, "position": "insideRight" }, "large": true, "data": [ 41284.35, 47697.4, 8413.61, 9252.11, 31770.33, 35508.78, 46398.67, 58060.04, 18176.99, 36094.06, 9143.29, 29802.65, 3537.02, 47931.77, 45087.27, 16314.9, 56488.59, 34108.47, 32244.21, 13635.22, 58377.44, 462.67, 56279.27, 2491.55, 13690.14, 29416.47, 35530.21, 18119.02, 23853.13, 33763.83, 7201.61, 26889.05, 51124.77, 53054.58, 48729.74, 37691.94, 46411.41, 25579.66, 30987.66, 18372.65, 45733.25, 56040.3, 13739.55, 16133.89, 53678.09, 1180.71, 4276.45, 11854.02, 46574.02, 6939.56, 18079.92, 25200.51, 47832.78, 25691.29, 14248.72, 4032.22, 39072.21, 12722.16, 42049.24, 27181.52, 29552.25, 51946, 48863.94, 22122, 39071.33, 50454.55, 59850.52, 23004.45, 51904.63, 28075.69, 38243.83, 32189.07, 1613.23, 40114.69, 30133.03, 28253.31, 38028.55, 25430.73, 23515.73, 9958.14, 38543.8, 36322.66, 57980.19, 57456.79, 27707.03, 269.52, 7980.29, 17138.2, 432.99, 48010.12, 1241.83, 39925.79, 41015.29, 38714.92, 18084.32, 28493.39, 51526.46, 22794.2, 32825.65, 53792.55, 18065.35, 4739.43, 39413.07, 37827.19, 9056.71, 49265.35, 35348.52, 10957.42, 30322.44, 22973.19, 47500.12, 48545.9, 946.19, 19273.15, 22761.02, 40868.44, 775.85, 49775.87, 28345, 52012.99, 30051.59, 45289.68, 36900.8, 31460.81, 51110.19, 12397.24, 34578.01, 47720.53, 15712.89, 6756.28, 25762.61, 54078.42, 50010.54, 16609.55, 13129.16, 32402.43, 26270.31, 5681.48, 31295.89, 5824.84, 12550.59, 50847.39, 32752.45, 18003.45, 53884.61, 32547.36, 47514.46, 5961.97, 24958.12, 51028.81, 26937.62, 31497.45, 16485.2, 13467.6, 35387.98, 14217.41, 18260.78, 45292.45, 15902.32, 15645.63, 48198.75, 26858.24, 28383.47, 5838.99, 35127.11, 26490.36, 21835.39, 3394.33, 55933.54, 55142.88, 39673.89, 4071.1, 44240.5, 39103.1, 45423, 15899.4, 372.21, 4810.24, 15848.72, 10573.71 ] }, { "type": "bar", "stack": "总量", "name": "GPU", "barMaxWidth": 40, "label": { "show": false, "position": "inside" }, "large": true, "data": [ 45656.8, 48919.63, 30686.44, 39105.29, 6583.58, 16579.54, 28757.36, 48880.32, 34710.97, 52267.01, 35244.55, 29465.79, 18699.38, 26708.27, 48610.16, 41065.65, 11168.56, 52782.18, 50920.27, 8510.37, 1054.53, 15473.91, 52598.26, 20234.36, 54710.49, 37693.7, 25479.18, 15601.02, 715.52, 47497.22, 30241.03, 15098.62, 36223.61, 39782.68, 31656.7, 52831.1, 4355.73, 13741.26, 2690.1, 8953.15, 40778.42, 40186.61, 29139.39, 34951.79, 29297.1, 13981.23, 50465.4, 52068.09, 24882.09, 11735.73, 24719.71, 26538.39, 54061.69, 17362.82, 27552.54, 39175.74, 35403, 45847.45, 39241.42, 21423.24, 28252.3, 15936.17, 51460.45, 38450.2, 36549.7, 8833.54, 49552.81, 11116.06, 7629.68, 23024.14, 46621.6, 48414.22, 34057.44, 16508.14, 8695.67, 9935.44, 23205.87, 459.17, 6058.89, 11538.15, 1691.72, 5674.09, 43659.65, 42399.6, 23885.54, 16819.74, 18714.28, 51726.61, 12924.85, 9741.92, 47726.78, 52780.24, 19201.93, 17926.32, 42666.5, 8034.12, 1942.08, 47110.64, 46218.2, 44514.71, 31623.2, 42708.9, 26215.12, 28139.43, 32497.47, 45742.64, 38990.36, 4446.69, 44520.51, 20765.67, 18069.18, 6911.16, 5579.52, 29354.69, 17215.26, 26342.73, 11537.4, 16678.75, 37653.87, 3944.92, 15016.5, 31703.34, 46996.72, 4255.04, 36405.66, 15890.87, 8085.44, 8727.37, 20420, 11387.02, 50816.76, 38010.23, 44139.63, 1437.55, 19776.06, 5491.32, 1402.23, 18269.63, 31190.68, 9546.1, 52578.27, 26100.02, 8729.68, 37343.21, 2299.31, 28782.83, 31684.85, 16185.26, 15100.92, 29155.27, 38192.58, 16588.44, 18377.32, 54143.88, 51351.67, 43105.14, 46469.82, 22805.7, 3730.43, 29585.85, 21114.32, 26529.31, 15564.97, 615.24, 32499.96, 43994.11, 36856.41, 19624.48, 7703.24, 17755.76, 47110.48, 54746.48, 23024.8, 3153.74, 39398.46, 31583.36, 9440.84, 10548.38, 8578.17, 17212.49 ] } ] } 那问题肯定基本上就能定位是 v-charts在封装的时候对相关的配置信息做了些变更。于是，使用 v-charts 组件的 afterSetOption 获取最终的配置信息：控制台打印的最终 echarts 配置信息如下：简单清理一些data数据后，使用 Beyond 进行数据对比，还真发现使用 v-charts 转换后的数据存在很大问题：然后进一步跟踪相关源代码，发现在图表组件初始化的时候，不知为何将 xAxis 初始化为2个对象的数组：然后在 optionsHandler 方法中将 extend 中的数据附加到option上就改变了原有数据然后 setExtend 方法会把xAxis对象数据复制到目标数组内的每一个对象值里：解决方案问题分析过程中，认真阅读了下相关的核心源码，发现 v-charts 组件在执行echarts.setOption()前提供了 afterConfig的扩展点，可以基于该扩展点对前期生成的 option 进行修改：为解决该问题，修改后的核心代码如下：修复后的效果总结项目开发过程中出现问题往往不可怕，最重要的是需要静下心来定位问题，当知道问题的产生缘由后，往往解决问题的方法也就水到渠成了。

2023年05月24日
18 阅读
0 评论
0 点赞

2023-03-14

用*输出一个等腰三角形缘起工作间隙，得到一个刚学编程时的题目，题目如下：用输出一个等腰三角形。提示用户输入一个整数，代表输出的等边三角形由n行组成。例：输入n=5。输出: * *** ***** ******* *********朋友提供的代码如下：public static void main(String[] args) { System.out.println("请输入需要的行数(不可输入0):"); Scanner scanner = new Scanner(System.in); int rows = scanner.nextInt(); int rowIndex = rows - 1; //最后一行总个数 int total = 1 + (rows - 1) * 2; // 每行*个数 int num = 1; // 打印标记 boolean flag = false; if (rows != 0) { for (int i = 0; i < rows; i++) { for (int j = 0, k = 0; j < total; j++) { // 倒数第几行就从第几个下标开始 if (j == rowIndex - i) { flag = true; } if (flag && k < num) { System.out.print("*"); // 开始打印计数 k++; } else { System.out.print(" "); // 结束打印 flag = false; } } num = num + 2; System.out.println(); } } }整段代码看下来实现方式有些复杂，感觉有些陷在循环里了，脑袋里不跟着一行一行的跑代码的话，不怎么能想出来结果输出是怎样的。于是，我从头开始梳理了下需要输出的东西，主要是要从中找寻规律：第一步：手工输出前几个结果，从结果中找规律2： * *** 3: * *** ***** 4: * *** ***** ******* 5: * *** ***** ******* ********* 6： * *** ***** ******* ********* *********** 7： * *** ***** ******* ********* *********** *************第二步：分析得出如下规律：令行数为1开始，当前行的输出情况如下：星号数量 = 当前行数 * 2 - 1左侧空格数量 = 总行数 - 当前行数得出规律后，就能够很好的着手后面的代码工作了，以下是我提供的代码：JS版：/** * 输出三角形 * @param rows 三角形行数 */ let showTriangle = (rows) => { console.log(`输出${rows}等腰三角形：`) // 如果小于2的话不能构成等腰三角形 if (rows < 2) { console.error('必须大于1') return; } for (let row = 1; row <= rows; row++) { // 输出空格 let rowStr = '' for (let blankIndex = 0; blankIndex < rows - row; blankIndex++) { rowStr += ' ' } // 输出星号 for (let starIndex = 0; starIndex < row * 2 - 1; starIndex++) { rowStr += '*' } console.log(rowStr) } } // 测试输出： for (let i = 0; i < 15; i++) { showTriangle(i) }输出结果：Java 版由于使用了 String.repeat(), JDK 版本应 >= 11，若 JDK 低于 11 也可以用循环实现。import java.util.InputMismatchException; import java.util.Scanner; /** * @author zhuzl */ public class ShowTriangle { public static void main(String[] args) { System.out.println("请输入三角形的行数(需大于1)："); Scanner scanner = new Scanner(System.in); int rows = scanner.nextInt(); printTriangle(rows); } /** * 打印等腰三角形 * * @param rows 三角形行数 */ private static void printTriangle(int rows) { if (rows < 2) { throw new InputMismatchException("必须大于1"); } for (int row = 1; row <= rows; row++) { System.out.println(" ".repeat(rows - row) + "*".repeat(row * 2 - 1)); } } }输出结果如下：

2023年03月14日
17 阅读
0 评论
0 点赞

2022-10-14

20 个 JS 工具函数助力高效开发前言日常开发中，面对各种不同的需求，我们经常会用到以前开发过的一些工具函数，把这些工具函数收集起来，将大大提高我们的开发效率。1、校验数据类型export const typeOf = function(obj) { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase() } // Example typeOf('zhuzl') // string typeOf([]) // array typeOf(new Date()) // date typeOf(null) // null typeOf(true) // boolean typeOf(() => { }) // function 2、防抖export const debounce = (() => { let timer = null return (callback, wait = 800) => { timer&&clearTimeout(timer) timer = setTimeout(callback, wait) } })() // Example // 如 vue 中使用 methods: { loadList() { debounce(() => { console.log('加载数据') }, 500) } }3、节流export const throttle = (() => { let last = 0 return (callback, wait = 800) => { let now = +new Date() if (now - last > wait) { callback() last = now } } })() 4、手机号脱敏export const hideMobile = (mobile) => { return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2") }5、开启全屏export const launchFullscreen = (element) => { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.msRequestFullscreen) { element.msRequestFullscreen() } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen() } }6、关闭全屏export const exitFullscreen = () => { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } }7、大小写转换/** * 大小写转换 * @param str 待转换的字符串 * @param type 1-全大写 2-全小写 3-首字母大写 * @returns */ export const turnCase = (str, type) => { switch (type) { case 1: return str.toUpperCase() case 2: return str.toLowerCase() case 3: return str[0].toUpperCase() + str.substring(1).toLowerCase() default: return str } } // Example turnCase('vue', 1) // VUE turnCase('REACT', 2) // react turnCase('vue', 3) // Vue8、解析URL参数export const getSearchParams = () => { const searchPar = new URLSearchParams(window.location.search) const paramsObj = {} for (const [key, value] of searchPar.entries()) { paramsObj[key] = value } return paramsObj } // Example // 假设目前位于 https://****com/index?id=154513&age=18; getSearchParams(); // {id: "154513", age: "18"}9、判断手机是Andoird还是IOS/** * 1: ios * 2: android * 3: 其它 */ export const getOSType=() => { let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { return 1; } if (isAndroid) { return 2; } return 3; }10、数组对象根据字段去重/** * 数组对象根据某字段去重 * @param arr 要去重的数组 * @param key 根据去重的字段名 * @returns */ export const uniqueArrayObject = (arr = [], key = 'id') => { if (arr.length === 0) return let list = [] const map = {} arr.forEach((item) => { if (!map[item[key]]) { map[item[key]] = item } }) list = Object.values(map) return list } // Example const responseList = [ { id: 1, name: '树哥' }, { id: 2, name: '黄老爷' }, { id: 3, name: '张麻子' }, { id: 1, name: '黄老爷' }, { id: 2, name: '张麻子' }, { id: 3, name: '树哥' }, { id: 1, name: '树哥' }, { id: 2, name: '黄老爷' }, { id: 3, name: '张麻子' }, ] uniqueArrayObject(responseList, 'id') // [{ id: 1, name: '树哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }] 11、滚动到页面顶部export const scrollToTop = () => { const height = document.documentElement.scrollTop || document.body.scrollTop; if (height > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, height - height / 8); } }12、滚动到指定元素位置export const smoothScroll = element =>{ document.querySelector(element).scrollIntoView({ behavior: 'smooth' }) } // Example smoothScroll('#target') // 平滑滚动到 ID 为 target 的元素13、uuidexport const uuid = () => { const temp_url = URL.createObjectURL(new Blob()) const uuid = temp_url.toString() URL.revokeObjectURL(temp_url) //释放这个url return uuid.substring(uuid.lastIndexOf('/') + 1) } // Example uuid() // d9ffece8-0a9d-4ca2-bbab-0af7bc0f71df14、金额格式化/** * 金额格式化 * @param number 要格式化的数字 * @param decimals 保留几位小数 * @param dec_point 小数点符号 * @param thousands_sep 千分位符号 * @returns */ export const moneyFormat = (number, decimals, dec_point, thousands_sep) => { number = (number + '').replace(/[^0-9+-Ee.]/g, '') const n = !isFinite(+number) ? 0 : +number const prec = !isFinite(+decimals) ? 2 : Math.abs(decimals) const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep const dec = typeof dec_point === 'undefined' ? '.' : dec_point let s = '' const toFixedFix = function(n, prec) { const k = Math.pow(10, prec) return '' + Math.ceil(n * k) / k } s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.') const re = /(-?\d+)(\d{3})/ while (re.test(s[0])) { s[0] = s[0].replace(re, '$1' + sep + '$2') } if ((s[1] || '').length < prec) { s[1] = s[1] || '' s[1] += new Array(prec - s[1].length + 1).join('0') } return s.join(dec) } // Example moneyFormat(10000000) // 10,000,000.00 moneyFormat(10000000, 3, '.', '-') // 10-000-000.00015、存储操作class MyCache { constructor(isLocal = true) { this.storage = isLocal ? localStorage : sessionStorage } setItem(key, value) { if (typeof (value) === 'object') value = JSON.stringify(value) this.storage.setItem(key, value) } getItem(key) { try { return JSON.parse(this.storage.getItem(key)) } catch (err) { return this.storage.getItem(key) } } removeItem(key) { this.storage.removeItem(key) } clear() { this.storage.clear() } key(index) { return this.storage.key(index) } length() { return this.storage.length } } const localCache = new MyCache() const sessionCache = new MyCache(false) export { localCache, sessionCache } // Example localCache.getItem('user') sessionCache.setItem('name','树哥') sessionCache.getItem('token') localCache.clear() 16、下载文件/** * 下载文件 * @param api API接口路径 * @param params 请求参数 * @param fileName 文件名 * @param type HTTP请求方式，默认为get */ const downloadFile = (api, params, fileName, type = 'get') => { axios({ method: type, url: api, responseType: 'blob', params: params }).then((res) => { let str = res.headers['content-disposition'] if (!res || !str) { return } let suffix = '' // 截取文件名和文件类型 if (str.lastIndexOf('.')) { fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.'))) suffix = str.substring(str.lastIndexOf('.'), str.length) } // 如果支持微软的文件下载方式(ie10+浏览器) if (window.navigator.msSaveBlob) { try { const blobObject = new Blob([res.data]); window.navigator.msSaveBlob(blobObject, fileName + suffix); } catch (e) { console.log(e); } } else { // 其他浏览器 let url = window.URL.createObjectURL(res.data) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', fileName + suffix) document.body.appendChild(link) link.click() document.body.removeChild(link) window.URL.revokeObjectURL(link.href); } }).catch((err) => { console.log(err.message); }) } // Example downloadFile('/api/resources/download', {id}, '文件名')17、时间操作关于时间操作，没必要自己再写一大串代码了，强烈推荐使用 [Day.js](https://dayjs.gitee.io/zh-CN/) > Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。 > 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。18、深拷贝此方法存在一定局限性：一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map。如果确实想要完备的深拷贝，推荐使用 lodash 中的 cloneDeep 方法。export const clone = parent => { // 判断类型 const isType = (obj, type) => { if (typeof obj !== "object") return false const typeString = Object.prototype.toString.call(obj) let flag; switch (type) { case "Array": flag = typeString === "[object Array]" break; case "Date": flag = typeString === "[object Date]" break; case "RegExp": flag = typeString === "[object RegExp]" break; default: flag = false } return flag; }; // 处理正则 const getRegExp = re => { var flags = "" if (re.global) flags += "g" if (re.ignoreCase) flags += "i" if (re.multiline) flags += "m" return flags; }; // 维护两个储存循环引用的数组 const parents = [] const children = [] const _clone = parent => { if (parent === null) return null if (typeof parent !== "object") return parent let child, proto if (isType(parent, "Array")) { // 对数组做特殊处理 child = [] } else if (isType(parent, "RegExp")) { // 对正则对象做特殊处理 child = new RegExp(parent.source, getRegExp(parent)) if (parent.lastIndex) child.lastIndex = parent.lastIndex } else if (isType(parent, "Date")) { // 对Date对象做特殊处理 child = new Date(parent.getTime()) } else { // 处理对象原型 proto = Object.getPrototypeOf(parent) // 利用Object.create切断原型链 child = Object.create(proto) } // 处理循环引用 const index = parents.indexOf(parent) if (index != -1) { // 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象 return children[index] } parents.push(parent) children.push(child) for (let i in parent) { // 递归 child[i] = _clone(parent[i]) } return child; } return _clone(parent) }19、模糊搜索/** * 数组对象模糊搜索 * @param list 原数组对象 * @param keyWord 查询的关键词 * @param attribute 数组需要检索的对象属性，默认问name * @returns */ export const fuzzyQuery = (list, keyWord, attribute = 'name') => { const reg = new RegExp(keyWord) const arr = [] for (let i = 0; i < list.length; i++) { if (reg.test(list[i][attribute])) { arr.push(list[i]) } } return arr } // Example const list = [ { id: 1, name: '树哥' }, { id: 2, name: '黄老爷' }, { id: 3, name: '张麻子' }, { id: 4, name: '汤师爷' }, { id: 5, name: '胡万' }, { id: 6, name: '花姐' }, { id: 7, name: '小梅' } ] fuzzyQuery(list, '树', 'name') // [{id: 1, name: '树哥'}]20、遍历树节点export const foreachTree = (data, callback, childrenName = 'children') => { for (let i = 0; i < data.length; i++) { callback(data[i]) if (data[i][childrenName] && data[i][childrenName].length > 0) { foreachTree(data[i][childrenName], callback, childrenName) } } } // Example const treeData = [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' }] }], // 假设我们要从树状结构数据中查找 id 为 9 的节点 let result foreachTree(data, (item) => { if (item.id === 9) { result = item } }) console.log('result', result) // {id: 9,label: "三级 1-1-1"} 关于本文作者：呛再首https://juejin.cn/post/7132714583399071758

2022年10月14日
24 阅读
0 评论
0 点赞

2022-09-06

扫码登录项目实践背景说明随着移动端应用的普及，扫码登录在日常的登录认证过程中已经非常普及了，在提升用户便利的同时，由于减少了账号密码的输入，在一定程度上也起到了增强安全性的目的。随着控制台产品的迭代，PC端界面及功能已趋于稳定，考虑到目前移动终端更便于用户使用，经过公司内部层层审批，控制台移动端的项目顺利立项。作为充分为用户提供便利的移动端应用，扫码登录功能便自然的纳入了起基础功能。登录认证的本质扫码登录本质上也是一种登录认证方式。既然是登录认证，要做的也就两件事情！告诉系统我是谁向系统证明我是谁比如账号密码登录，账号就是告诉系统我是谁，密码就是向系统证明我是谁;比如手机验证码登录，手机号就是告诉系统我是谁，验证码就是向系统证明我是谁;那么扫码登录是怎么做到这两件事情的呢？扫码登录过程中移动端是已登录状态，这两件事对移动端而言都是明确的，登录过程中的重点是怎么把移动端的登录状态传递给PC端。在这个过程中主要就是通过扫码的二维码了，二维码本质上就是一串具有唯一性的字符串。通过这个字符串便可以将已登录方授权未登录端进行登录了。技术方案根据项目实际情况，参与扫码登录的应用为console-ui、consent、console-biz、app：console-ui :控制台前端，需登录的应用consent :用户认证端console-biz :控制台后端服务app :移动端应用，微信端H5网页实现流程在使用超算云服务控制台应用时，由 console-ui 判断用户是否登录，未登录的情况下将自动跳转到 consent 进行登录操作，本需求将修改consent登录界面，在已有的账号登录基础上增加扫码登录机制，默认采用账号登录方式，当用户切换登录方式为扫码登录时，将调用console-biz提供的接口获取 scanId，使用 QRCode.js 生成携带scanId参数的app端网页认证URL的二维码。用户使用微信扫一扫功能，可直接打开app端的指定页面，在该页面完成用户确认授权操作，consent通过轮询二维码状态接口，当获取到用户在 app端的确认操作后，携带 scanId 参数跳转到 console-ui，在console-ui 调用接口获取用户 token 信息完成登录。整体交互流程如下所示：二维码生命周期码登录的核心是对二维码生命周期的管理，为了更好地理解扫码登录过程，将上图中二维码生命周期相关的核心流程梳理如下：二维码状态数据字典字典项字典值说明未使用1获取scanId时设置初始状态为该值已扫码(未授权)2app端扫码后更新状态为已扫码已授权(登录)3在app授权界面单击“确认授权”已使用4在app端授权界面确认授权，然后在console-ui中获取到用户token后已过期5超过5分钟redis中不存在记录则返回该值取消授权(登录失败)6在app授权界面单击“取消授权”数据存储方案scanId作为整个扫码登录过程的核心，后端需存储scanId整个生命周期的状态值及需交换的用户数据，而每个 scanId 仅有5分钟的有效期，基于 Redis 的过期策略很容易就能实现这个目的，且比关系型数据库在数据存取上有更优异的表现。故本功能模块相关的数据统一存储于 Redis。后端实现方案后端基于现有的console-biz工程添加新的接口用于前端对接，相关接口见“接口设计”章节。前端实现方案在需求中参与前端开发工作的有consent、console-ui、app三端。1、consent：负责登录界面的交互及展示，基于QRCode.js实现二维码生成，轮询获取二维码状态。2、console-ui：在获取到consent授权回调后，通过scanId调用接口获取用户token实现用户在PC端登录。3、app：扫码后直接跳转到app指定的授权页面，进入授权页面后实现。扫码操作的入口有两个：微信扫一扫、app应用首页顶部的扫一扫。使用app应用首页的扫一扫功能需要解析获取二维码URL中的scanId，然后跳转到授权页面进行授权操作。4、单击某功能时使用component组件渲染对应功能的抽屉功能进行显示接口设计后端以 Restful API 方式为前端提供接口，根据项目情况涉及的接口列表如下：获取scanId接口(PC端调用)获取scanId状态接口(PC端轮询调用)app端扫码接口app端授权接口授权成功后获取登录信息接口(PC端调用)效果截图相关功能将在控制台移动端功能上线后，所有并行用户可线上体验。一、PC端截图：1、初始状态：2、刷新时有个 gif加载动图：3、已扫码：4、已失效：5、取消授权：二、移动端截图：1、正常状态：2、已被使用：3、单击取消授权：4、单击确认授权：5、授权操作时二维码已过期：

2022年09月06日
27 阅读
0 评论
0 点赞

2022-08-31

正则表达式-元字符特殊单字符空白符范围量词

2022年08月31日
27 阅读
0 评论
0 点赞

2022-06-15

前端导出Excel项目实践背景介绍近期项目有个「导出作业详情」的需求，之前接触大部分导出需求均为后端获取数据生成Excel文件或将Excel文件的下载地址或文件流提供给前端进行下载。在本需求中对下载的文件有如下需求点：命名：用户名作业详单-起止日期格式：xlsx，下载内容CPU与GPU分别显示在两个工作表里技术调研在以前的项目中有=接触过前端解析 Excel 导入数据的功能，使用的是 [xlsx](https://www.npmjs.com/package/xlsx)，功能超级强大，便先了解一下这个库是否能满足咱们的需求,经过稍加深入地调研，了解到这个库仅侧重在 Excel 解析，我们的需求是要能根据后端提供的数据动态生成 Excel 文件，可能这个库就不适应了。经过经一步调研，发现一款采用MIT开源授权， Star 数近 10k 的开源库：exceljs,看描述为：读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。这不就正是我所需要的嘛，接下来的问题就是验证工作了，根据我们的需求，主要需要验证的有如下事项：1、是否可支持生成多工作表的Excel文件2、是否支持自定义单元格样式：如背景色、边框、对齐方式、格式化3、测试Excel文件生成效率经过对相关API的深入了解及验证，发现完全能满足我们的需求。其中生成效率，一次性生成40000多条数据，不到15秒即可完成Excel生成工作，也能满足我们的实际要求：技术点梳理详细见代码及相关注释。仅用于说明相关功能点，非完整代码。// 引入 exceljs 依赖 import ExcelJS from 'exceljs' // 创建工作簿 const workbook = new ExcelJS.Workbook() // 在工作簿中添加两个工作表 const cpuSheet = workbook.addWorksheet('CPU作业详单') const gpuSheet = workbook.addWorksheet('GPU作业详单') // 添加表头 const cpuHeaderRow = cpuSheet.addRow(['作业ID', '作业名称', '超算中心', '超算账号', '队列', '运行时长', '核数', '消费核时', '消费金额', '提交时间', '开始时间', '结束时间', '提交账号', '付费账号']) // 设置表头样式 // 行高 cpuHeaderRow.height = 26.5 // 字体 cpuHeaderRow.font = { bold: true } // 设置表头单元格样式 cpuHeaderRow.eachCell((cell, rowNumber) => { // 设置边框 cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } // 填充背景 cell.fill = { type: 'pattern', pattern: 'darkTrellis', fgColor: { argb: 'F1F1F1FF' }, bgColor: { argb: 'F1F1F1FF' } } // 对齐方式 cell.alignment = { vertical: 'middle', horizontal: cpuLeftAlignCols.includes(rowNumber) ? 'left' : 'center', wrapText: true } }) // 根据内容适当调整部分列宽度 cpuSheet.getColumn(2).width = 30 // 作业名称 cpuSheet.getColumn(10).width = 20 // 提交时间 cpuSheet.getColumn(11).width = 20 // 开始时间 cpuSheet.getColumn(12).width = 20 // 结束时间 cpuSheet.getColumn(13).width = 15 // 提交账号 cpuSheet.getColumn(14).width = 15 // 付费账号 // 生成相关数据行 for (let i = 0; i < cpuJobList.length; i++) { const job = cpuJobList[i] const rowData = [job.jobId, job.jobName, job.cluster, job.user, job.partition, ...] const dataRow = cpuSheet.addRow(rowData) // 设置数据行样式 dataRow.height = 26.5 dataRow.eachCell((cell, rowNumber) => { // 设置单元格边框 cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } } // 设置对齐方式 cell.alignment = { vertical: 'middle', horizontal: cpuLeftAlignCols.includes(rowNumber) ? 'left' : 'center', wrapText: true } // 金额格式化 if (rowNumber === 10) { cell.numFmt = '"¥"#,##.##' } }) } // 保存Excel文件 const buf = await workbook.xlsx.writeBuffer() const fileName = `${userForFileName}作业详单_${dayjs(startDate).format('YYYYMMDD')}-${dayjs(endDate).format('YYYYMMDD')}.xlsx` // 基于 file-saver 实现保存文件到本地 saveAs(new Blob([buf]), fileName)最终整合到应用中的效果扩展打印相关// 设置页面方向 workSheet.pageSetup.orientation = 'portrait' // portrait || landscape // 设置页边距 workSheet.pageSetup.margins = { left: 0.3, right: 0.3, top: 0.2, bottom: 0.2, header: 0.2, footer: 0.2 } workSheet.pageSetup.horizontalCentered = true workSheet.pageSetup.verticalCentered = false // 每页均显示的行 workSheet.pageSetup.printTitlesRow = '1:3' // 指定打印哪些列 workSheet.pageSetup.printTitlesColumn = 'A:G'解析 Excelconst ExcelJS = require('exceljs') const excelfile = './test.xlsx' var workbook = new ExcelJS.Workbook() workbook.xlsx.readFile(excelfile).then(function() { // 获取第一个worksheet var worksheet = workbook.getWorksheet(1) // 编辑worksheet worksheet.eachRow(function(row, rowNumber) { var rowSize = row.cellCount var numValues = row.actualCellCount console.log('单元格数量/实际数量:' + rowSize+'/' + numValues) row.eachCell(function(cell, colNumber) { // cell.type单元格类型：6-公式 ;2-数值；3-字符串 let cellValue = cell.value if(cell.type === 6) { cellValue = cell.result } console.log('cell',rowNumber, colNumber, cellValue, cell.numFmt) }) }) })数值格式化问题前期为满足跟前端列表展现业务逻辑保持一致，金额及数值格式化均使用 Intl.NumberFormat进行格式化，但是该类格式化后的数据是字符串，不便于导出后对数据进行排序及数值比较等操作。由于官方文档的单元格格式化说明信息较简单，Excel里对数值格式化的方式较丰富，如下图：为完整的复原格式化后的内容，可以先在Excel文件中对相关单元格设置好格式后，使用上面的解析 Excel 章节的代码解析获取单元格的 numFmt数据。下面列举本工程中用到的数值格式化 numFmt 值：数值格式化：#,##0.00_ 货币格式化："￥"#,##0.00;"￥"-#,##0.00

2022年06月15日
114 阅读
0 评论
0 点赞

2022-06-15

2022年06月15日
13 阅读
0 评论
0 点赞

2022-06-06

2022年06月06日
15 阅读
0 评论
0 点赞

2022-05-13

2022年05月13日
41 阅读
0 评论
0 点赞

2022-04-20

Web安全-学习笔记 Web安全，也可以叫做Web应用安全。互联网本来是安全的，自从有了研究安全的人之后，互联网就变的不安全了。HTTP协议与会话管理当我们访问一个网址的时候，这中间发生了什么?输入网址浏览器查找域名的IP地址浏览器给Web服务器发送一个HTTP请求服务端处理请求服务端发回一个HTTP响应Web应用的组成与网页的渲染浏览器特性与安全策略Cookie的安全策略内容安全策略XSSXSS，全称跨站脚本(Cross Site Scripting), 一种注入式攻击方式。XSS成因对于用户输入没有严格控制而直接输出到页面对非预期输入的信任XSS的危害盗取各类用户账号，如机器登录账号、用户网银账号、各类管理员账号窃取数据非法转账挂马……XSS的分类存储型(持久型)反射型(非持久型)http://www.xx.com/search.html?key_ pro="><script>confirm(1501)</script>DOM型其实DOM型也属于反射型的一种，不过比较特殊，所以一般也当做一种单独类其他XSS类别mXSS(突变型XSS)UXSS(通用型XSS)Flash XSSUTF-7 XSSMHTML XSS - 仅IE低版本CSS XSS - 仅IE低版本VBScript XSS - 仅IECSRFCSRF,全称跨站伪造请求(Cross-site request forgery),也称为one click attack/session riding,还可以缩写为XSRF。CSRF与XSS的区别XSS:利用对用户输入的不严谨然后执行JS语句CSRF:通过伪造受信任用户发送请求CSRF可以通过XSS来实现CSRF的防御方法通过验证码进行防御检查请求来源增加请求参数token

2022年04月20日
27 阅读
0 评论
0 点赞

2022-04-13

2022年04月13日
53 阅读
0 评论
0 点赞

2022-04-12

解决小程序导航不能超过 10 层的问题解决小程序导航不能超过 10 层的问题，原生代码不动，在一个地方通过拦截 wx.navigateTo 解决const originNavigateTo = wx.navigateTo; Reflect.defineProperty(wx, 'navigateTo', { configurable: true, enumerable: true, writable: true, value: function () { const config = arguments[0] || {} // console.log(JSON.stringify(config)) // console.log('originNavigateTo : ', config.url) if (getCurrentPages().length > 9) { console.log('使用wx.redirectTo跳转 ---------->') wx.redirectTo(config) } else { console.log('使用wx.navigateTo跳转 ---------->') originNavigateTo.apply(this, arguments) } } })提示：需配置开启 es6 支持

2022年04月12日
28 阅读
0 评论
0 点赞

2022-04-11

2022年04月11日
73 阅读
0 评论
0 点赞