朱治龙发布的文章 - 朱治龙个人博客

2023-10-30

docker compose 部署Umami 很长一段时间是用的cnzz做的网站访问统计，功能强大，分析结果对于小白用户也超级友好，自从被阿里收购后，整合成Umeng的一部分勉强还能用，但是自从开启收费（收割用户）模式后，高昂的价格，无疑把我们这种小白个人用户完全隔离在外了。然后用了一段时间的百度统计，感觉也是不尽如人意，然后就只好另辟蹊径，调研了市面主流的流量统计工具（也就调研了Matomo 和Umami）后，选择了Umami 作为个人流量统计工具，主要是Matomo不少明细数据是存储的Binary数据，不便于通过SQL直观的查看，相对于Matomo而言，Umami 算是轻量级别的，UI 界面也更现代化。Umami 支持 PostgreSQL 和 MySQL 两种数据库，分别对应不同的Docker 镜像。ProstgreSQL:docker pull ghcr.io/umami-software/umami:postgresql-latestMySQL:docker pull ghcr.io/umami-software/umami:mysql-latest由于我的服务器上面已安装 MySQL 客户端，就直接采用 MySQL 的镜像。ghcr.io 是 GitHub 的 Docker 镜像仓库，国内环境可能在pull 时会碰到些网络方面的问题，我是通过一台境外的服务器pull 后，然后 push 到本人的 Docker 私服进行下载的，也可以采用导出备份后在导入的方式。如果你在pull过程中也存在这方面网络的问题的话，也推荐使用这个方式。docker-compose.ymlversion: "3.8" services: umami: image: ghcr.io/umami-software/umami:mysql-latest # image: hub.work.zhuzhilong.com/apps/umami:mysql container_name: umami restart: unless-stopped volumes: - ../hosts:/etc/hosts environment: - DATABASE_URL=mysql://DB_USERNAME:DB_PASSWORD@DB_HOST:DB_PORT/umami - DATABASE_TYPE=mysql - APP_SECRET=umami2023 - TZ=Asia/Shanghai networks: - net-zzl ports: - 8202:3000 networks: net-zzl: name: bridge_zzl external: true 使用 docker compose up -d 启动后，可使用默认的管理员账号登录：用户名：admin密码：umami登录后即可修改密码及添加站点了。以下是整合后的部分界面截图：顺便说下，umami的表结构比较简单，访问用户的IP信息都没有存表，如果有复杂运营场景的话，还是推荐使用 Matomo 之类的功能更强大的工具。当前版本(2.8.0)只有11张表：{mtitle title="2023-12-18更新"/}应用升级近日登录umami时提示最新发布了2.9.0 版本，而根据更新日志中的内容有提到可以查看访客的城市信息了，便及时更新了下，使用docker compose 的方式更新超级简单，主要执行如下命令：docker compose pull docker compose up --force-recreate提示数据库更新成功：然后重启应用即可

2023年10月30日
119 阅读
0 评论
0 点赞

2023-10-30

docker compose 部署中微子代理（NeutrinoProxy）近期在开源中国有看到 Neutrino-proxy 的一些介绍，了解到 NeutrinoProxy 是一款基于 Netty 的内网穿透工具，官方的介绍信息如下：基本介绍中微子代理 (neutrino-proxy) 是一款基于 netty 的内网穿透神器。该项目采用最为宽松的 MIT 协议，因此您可以对它进行复制、修改、传播并用于任何个人或商业行为。Gitee 地址：https://gitee.com/dromara/neutrino-proxy官网地址：http://neutrino-proxy.dromara.org服务端管理后台截图：主要特点：1、流量监控：首页图表、报表管理多维度流量监控。全方位掌握实时、历史代理数据。2、用户 / License：支持多用户、多客户端使用。后台禁用实时生效。3、端口池：对外端口统一管理，支持用户、License 独占端口。4、端口映射：新增、编辑、删除、禁用实时生效。5、Docker：服务端支持 Docker 一键部署。6、SSL 证书：支持 SSL，保护您的信息安全。7、域名映射：支持绑定子域名，方便本地调试三方回调8、采用最为宽松的 MIT 协议，免去你的后顾之忧之前一直有在用 FRP 作为内网穿透工具，用了很多年也确实非常好用，不过 FRP 在可视化管理方面比较欠缺，虽然提供了dashboard，但是只提供了代理端口查看及浏览统计方面的功能，不能提供多用户方面的管控。而 Neutrino 正好弥补了这方面的不足。以下是使用 docker compose 部署相关的代码，仅作为记录。服务端：docker-compose.ymlversion: '3.8' services: app: image: registry.cn-hangzhou.aliyuncs.com/asgc/neutrino-proxy:latest container_name: neutrino-proxy restart: always networks: - net-zzl ports: - 9000-9200:9000-9200/tcp - 9201:8888 volumes: - ./config:/root/neutrino-proxy/config networks: net-zzl: name: bridge_zzl external: true ./config/app.ymlneutrino: data: db: type: mysql # 自己的数据库实例，创建一个空的名为'neutrino-proxy'的数据库即可，首次启动服务端会自动初始化 url: jdbc:mysql://DB_HOST:3306/neutrino-proxy?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&useAffectedRows=true&useSSL=false driver-class: com.mysql.jdbc.Driver # 数据库帐号 username: DB_USERNAME # 数据库密码 password: DB_PASSWORD客户端官网文档不推荐使用docker的方式部署，但是考虑到要部署Java 环境之类的，对宿主机而言是挺麻烦的，还是试着通过docker 的方式部署的客户端，经过验证也是 OK 的。docker-composeversion: '3.8' services: app: image: aoshiguchen/neutrino-proxy-client:latest container_name: neutrino-proxy-client restart: always network_mode: host volumes: - ./config:/root/neutrino-proxy/config./config/app.ymlneutrino: proxy: logger: # 日志级别 level: ${LOG_LEVEL:info} tunnel: # 线程池相关配置，用于技术调优，可忽略 thread-count: 50 # 隧道SSL证书配置 key-store-password: ${STORE_PASS:123456} jks-path: ${JKS_PATH:classpath:/test.jks} # 服务端IP,这里替换成主机IP或域名 server-ip: ${SERVER_IP:proxy.xxx.com} # 服务端端口(对应服务端app.yml中的tunnel.port、tunnel.ssl-port) server-port: ${SERVER_PORT:9002} # 是否启用SSL(注意：该配置必须和server-port对应上) ssl-enable: ${SSL_ENABLE:true} # 客户端连接唯一凭证,这里替换成key license-key: ${LICENSE_KEY:ec7e9906cXXXXXX6430895c37fec75cd4e11} # 客户端唯一身份标识（可忽略，若不设置首次启动会自动生成） client-id: ${CLIENT_ID:workServer} # 是否开启隧道传输报文日志(日志级别为debug时开启才有效) transfer-log-enable: ${CLIENT_LOG:false} # 重连设置 reconnection: # 重连间隔（秒） interval-seconds: 10 # 是否开启无限重连(未开启时，客户端license不合法会自动停止应用，开启了则不会，请谨慎开启) unlimited: false client: udp: # 线程池相关配置，用于技术调优，可忽略 boss-thread-count: 5 work-thread-count: 20 # udp傀儡端口范围 puppet-port-range: 10000-10500 # 是否开启隧道传输报文日志(日志级别为debug时开启才有效) transfer-log-enable: ${CLIENT_LOG:false}实现后的效果截图：

2023年10月30日
140 阅读
0 评论
0 点赞

2023-10-19

Mybatis-Plus 分页功能实现流程 Mybatis 自带分页功能，但是该分页功能是基于内存的分页，也就是会讲所有符合条件的数据查询出来，然后在从内存中获取当前页的信息，这种方式在数据量大的情况下会存在严重的性能问题。我们通过 Mybatis-Plus 自带的分页插件可以很好的解决这个问题，实现步骤记录如下：1、添加配置类，示例内容如下：package com.paratera.protect.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; /** * Mybatis Plus 配置类，主要用于继承分页插件 * @author 朱治龙 * @date 2023-10-19 23:14:00 */ @Configuration public class MyBatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); // 分页插件 interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } } 2、使用分页方法查询2.1、selectPage2.1.1 示例代码 @Test void testSelectPage() { QueryWrapper<Staff> qw = Wrappers.query(); qw.ge("age", 30); Page<Staff> page = new Page<Staff>(1, 2); // 不查记录数 // page.setSearchCount(false); Page<Staff> pageData = staffMapper.selectPage(page, qw); System.out.println("总页数：" + pageData.getPages()); System.out.println("总记录数：" + pageData.getTotal()); pageData.getRecords().forEach(System.out::println); }2.1.2 查询结果DEBUG==> Preparing: SELECT COUNT(*) AS total FROM staff WHERE (age >= ?) DEBUG==> Parameters: 30(Integer) TRACE<== Columns: total TRACE<== Row: 4 DEBUG<== Total: 1 DEBUG==> Preparing: SELECT id,name,age,email,mobile,manager_id,create_time FROM staff WHERE (age >= ?) LIMIT ? DEBUG==> Parameters: 30(Integer), 2(Long) TRACE<== Columns: id, name, age, email, mobile, manager_id, create_time TRACE<== Row: 1087982257332887553, 大boss, 40, 001@paratera.com, 13888886666, null, 2019-01-11 14:20:20 TRACE<== Row: 1094590409767661570, 张雨琪, 31, zjq@blsc.com, 18684700070, 1088248166370832385, 2019-01-14 09:15:15 DEBUG<== Total: 2 总页数：2 总记录数：4 Staff(id=1087982257332887553, name=大boss, age=40, email=001@paratera.com, mobile=13888886666, managerId=null, createTime=2019-01-11T14:20:20) Staff(id=1094590409767661570, name=张雨琪, age=31, email=zjq@blsc.com, mobile=18684700070, managerId=1088248166370832385, createTime=2019-01-14T09:15:15) 2.2、selectMapsPage2.2.1 示例代码 @Test void testSelectMapsPage() { QueryWrapper<Staff> qw = Wrappers.query(); qw.ge("age", 30); Page<Map<String, Object>> page2 = new Page<>(1, 2); Page<Map<String, Object>> pageData2 = staffMapper.selectMapsPage(page2, qw); System.out.println("总页数：" + pageData2.getPages()); System.out.println("总记录数：" + pageData2.getTotal()); pageData2.getRecords().forEach(System.out::println); }2.2.2 查询结果DEBUG==> Preparing: SELECT COUNT(*) AS total FROM staff WHERE (age >= ?) DEBUG==> Parameters: 30(Integer) TRACE<== Columns: total TRACE<== Row: 4 DEBUG<== Total: 1 DEBUG==> Preparing: SELECT id,name,age,email,mobile,manager_id,create_time FROM staff WHERE (age >= ?) LIMIT ? DEBUG==> Parameters: 30(Integer), 2(Long) TRACE<== Columns: id, name, age, email, mobile, manager_id, create_time TRACE<== Row: 1087982257332887553, 大boss, 40, 001@paratera.com, 13888886666, null, 2019-01-11 14:20:20 TRACE<== Row: 1094590409767661570, 张雨琪, 31, zjq@blsc.com, 18684700070, 1088248166370832385, 2019-01-14 09:15:15 DEBUG<== Total: 2 总页数：2 总记录数：4 {create_time=2019-01-11T14:20:20, name=大boss, mobile=13888886666, id=1087982257332887553, age=40, email=001@paratera.com} {create_time=2019-01-14T09:15:15, manager_id=1088248166370832385, name=张雨琪, mobile=18684700070, id=1094590409767661570, age=31, email=zjq@blsc.com} 3、附加说明使用分页插件查询时默认是会执行两条 SQL,一条获取当前页的数据，一条获取总记录数。在某些场景下(如瀑布流模式)，只需要获取当前页的内容即可，不需要总记录数相关分页数值，此时可在创建 Page 时，第三个参数给值为 false：Page(long current, long size, boolean searchCount)。也可使用 page.setSearchCount(false);

2023年10月19日
109 阅读
0 评论
0 点赞

2023-10-18

Mybatis-Plus 自定义SQL 有的时候使用条件构造器自定义SQL满足不了我们的需求，我们既想使用 Wrapper,又想使用SQL,MP 对这种方式也提供了支持，MP 版本号应≥3.0.7。下面是该方案的实现记录：实现方案一：Mapper接口中使用@Select注解1、Mapper 示例代码如下：import com.baomidou.mybatisplus.core.conditions.Wrapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.baomidou.mybatisplus.core.toolkit.Constants; import com.paratera.protect.entity.Staff; import org.apache.ibatis.annotations.Param; import org.apache.ibatis.annotations.Select; import java.util.List; /** * @author 朱治龙 * @date 2023-10-17 11:46:00 */ public interface StaffMapper extends BaseMapper<Staff> { @Select("select * from staff ${ew.customSqlSegment}") List<Staff> selectAll(@Param(Constants.WRAPPER)Wrapper<Staff> wrapper); }2、调用示例代码： @Test void testSelfSQL() { LambdaQueryWrapper<Staff> lqw = Wrappers.lambdaQuery(Staff.class); lqw.eq(Staff::getName, "朱治龙").and(wq2 -> wq2.lt(Staff::getAge, 40).or().isNotNull(Staff::getEmail)); List<Staff> staffList = staffMapper.selectAll(lqw); staffList.forEach(System.out::println); }3、输出结果DEBUG==> Preparing: select * from staff WHERE (name = ? AND (age < ? OR email IS NOT NULL)) DEBUG==> Parameters: 朱治龙(String), 40(Integer) TRACE<== Columns: id, name, age, email, mobile, manager_id, create_time TRACE<== Row: 1714166763984199681, 朱治龙, 36, zhuzl@blsc.cn, 15084978453, 1088248166370832385, 2023-10-17 14:29:38 DEBUG<== Total: 1 Staff(id=1714166763984199681, name=朱治龙, age=36, email=zhuzl@blsc.cn, mobile=15084978453, managerId=1088248166370832385, createTime=2023-10-17T14:29:38)实现方案二：使用xml1、配置xml文件的存放路径。再application.yml中添加 xml 文件的引用路径配置mybatis-plus: mapper-locations: - classpath:/mapper/*Mapper.xml2、在resources目录下添加 mapper 目录，并新建 mapper 文件，如文件名为 StaffMapper.xml，示例内容为：<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.paratera.protect.dao.StaffMapper"> <select id="selectByXml" resultType="com.paratera.protect.entity.Staff"> select * from staff ${ew.customSqlSegment} </select> </mapper>3、Mapper 接口中添加方法，示例代码如下：package com.paratera.protect.dao; import com.baomidou.mybatisplus.core.conditions.Wrapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.baomidou.mybatisplus.core.toolkit.Constants; import com.paratera.protect.entity.Staff; import org.apache.ibatis.annotations.Param; import java.util.List; /** * @author 朱治龙 * @date 2023-10-17 11:46:00 */ public interface StaffMapper extends BaseMapper<Staff> { List<Staff> selectByXml(@Param(Constants.WRAPPER)Wrapper<Staff> wrapper); }4、调用示例代码： @Test void testSelfSQL2() { LambdaQueryWrapper<Staff> lqw = Wrappers.lambdaQuery(Staff.class); lqw.eq(Staff::getName, "朱治龙").and(wq2 -> wq2.lt(Staff::getAge, 50).or().isNotNull(Staff::getEmail)); List<Staff> staffList = staffMapper.selectByXml(lqw); staffList.forEach(System.out::println); }5、输出结果DEBUG==> Preparing: select * from staff WHERE (name = ? AND (age < ? OR email IS NOT NULL)) DEBUG==> Parameters: 朱治龙(String), 50(Integer) TRACE<== Columns: id, name, age, email, mobile, manager_id, create_time TRACE<== Row: 1714166763984199681, 朱治龙, 36, zhuzl@blsc.cn, 15084978453, 1088248166370832385, 2023-10-17 14:29:38 DEBUG<== Total: 1 Staff(id=1714166763984199681, name=朱治龙, age=36, email=zhuzl@blsc.cn, mobile=15084978453, managerId=1088248166370832385, createTime=2023-10-17T14:29:38)

2023年10月18日
56 阅读
0 评论
0 点赞

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-08-27

修改gitlab账号密码由于本人的gitlab为个人所用，隔久了未用，之前设置的密码不能登录了，便试着在数据库层面重置密码，本文主要对重置gitlab管理员密码的过程进行记录

2023年08月27日
23 阅读
0 评论
0 点赞

2023-08-17

自定义 docker 网络 docker 容器如果没有指定网络，在启动时会默认生成一个桥接的网络，如下图所示：启动的 docker 容器多了，再启动其他容器的时候，就会出现Error response from daemon: Pool overlaps with other one on this address space 的提示。为解决这个问题，可以采用手工创建桥接网络，然后在 docker-compose.yml 中指定网络的方式解决。{card-describe title="本地 docker 环境信息"}jiuzilong@jiuzilong:/data/dockerRoot/apps/chat2db$ docker -v Docker version 24.0.4, build 3713ee1 jiuzilong@jiuzilong:/data/dockerRoot/apps/chat2db$ docker compose version Docker Compose version v2.19.1 jiuzilong@jiuzilong:/data/dockerRoot/apps/chat2db$ {/card-describe}一、创建桥接网络：docker network create --subnet=192.168.0.0/16 --gateway=192.168.0.1 --opt "com.docker.network.bridge.name"="bridge_zzl" bridge_zzl也可以补充些其他网络配置信息：docker network create --subnet=172.66.0.0/16 --gateway=172.66.0.1 --opt "com.docker.network.bridge.default_bridge"="false" --opt "com.docker.network.bridge.name"="bridge_zzl" --opt "com.docker.network.bridge.enable_icc"="true" --opt "com.docker.network.bridge.enable_ip_masquerade"="true" --opt "com.docker.network.bridge.host_binding_ipv4"="0.0.0.0" --opt "com.docker.network.driver.mtu"="1500" bridge_zzl如果创建失败，极有可能是网络数量超标了，可以停掉一些容器再创建。失败截图如下：如果创建成功，会响应创建成功的 NETWORK ID,如下图所示：二、docker-compose.yml 配置网络配置示例：version: '3' services: app: # image: 'jc21/nginx-proxy-manager:2.9.22' # image: 'chishin/nginx-proxy-manager-zh:latest' image: 'zhuzl/nginx-proxy-manager:ssl' restart: unless-stopped container_name: nginxProxyManager ports: - '80:80' - '81:81' - '443:443' networks: - net-zzl volumes: - ./data:/data - ./letsencrypt:/etc/letsencrypt networks: net-zzl: name: bridge_zzl external: true 核心是networks: net-zzl: name: bridge_zzl external: true然后在 docker 应用中通过 networks 指定 networks: - net-zzl{alert type="warning"}特别注意：在拷贝上面代码到 docker-compose.yml 文件时，需要特别留意缩进问题{/alert}

2023年08月17日
111 阅读
0 评论
0 点赞

2023-08-11

ubuntu环境安装Harbor记录 Harbor 是一款优秀的开源企业容器镜像仓库。包括了基于web界面的权限管理(RBAC)、LDAP、审计、安全漏洞扫描、镜像验真、管理界面、自我注册、HA 等企业必需的功能，同时针对中国用户的特点，设计镜像复制和中文支持等功能。官网链接：https://goharbor.io/为方便应用开发部署，想要自己搭建Docker 镜像仓库，以下是部署过程。{card-describe title="Ubuntu版本情况"}zhuzl@zhuzl-M9-PRO:/data/software/harbor$ uname -a Linux zhuzl-M9-PRO 6.2.0-26-generic #26~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Jul 13 16:27:29 UTC 2 x86_64 x86_64 x86_64 GNU/Linux{/card-describe}一、下载安装包根据Harbor官网的引导，可通过github的发布页面下载离线安装包：https://github.com/goharbor/harbor/releases由于国内网络下载速度堪忧，本次下载使用 ghproxy.com 进行代理加速下载，也就是在下载地址前添加 https://ghproxy.com/。下载记录如下：zhuzl@zhuzl-M9-PRO:/data/software$ wget https://ghproxy.com/https://github.com/goharbor/harbor/releases/download/v2.8.4/harbor-offline-installer-v2.8.4.tgz --2023-08-18 08:48:42-- https://ghproxy.com/https://github.com/goharbor/harbor/releases/download/v2.8.4/harbor-offline-installer-v2.8.4.tgz 正在解析主机 ghproxy.com (ghproxy.com)... 192.9.132.155 正在连接 ghproxy.com (ghproxy.com)|192.9.132.155|:443... 已连接。已发出 HTTP 请求，正在等待回应... 200 OK 长度： 608175520 (580M) [application/octet-stream] 正在保存至: ‘harbor-offline-installer-v2.8.4.tgz’ harbor-offline-installer-v2.8.4.tgz 100%[==============================================================================================>] 580.00M 4.40MB/s 用时 2m 9s 2023-08-18 08:50:52 (4.49 MB/s) - 已保存 ‘harbor-offline-installer-v2.8.4.tgz’ [608175520/608175520]) zhuzl@zhuzl-M9-PRO:/data/software$ 二、解压安装包文件下载下来是一个以 .tgz 格式结尾的压缩文件，我们可以直接使用 tar 解压，解压命令为(需替换X.Y.Z为下载对应的版本)：tar -zxvf harbor-offline-installer-vX.Y.Z.tgz解压记录如下：zhuzl@zhuzl-M9-PRO:/data/software$ tar -zxvf harbor-offline-installer-v2.8.4.tgz harbor/harbor.v2.8.4.tar.gz harbor/prepare harbor/LICENSE harbor/install.sh harbor/common.sh harbor/harbor.yml.tmpl zhuzl@zhuzl-M9-PRO:/data/software$ 三、配置及安装搜了下网上的课程，大多都是从配置证书开始的，我部署应用时一般都是应用开启http服务，使用nginx代理的时候再使用SSL证书对外提供https的访问。3.1 配置拷贝解压出来的 harbor.yml.tmpl 文件为 harbor.yml。修改这个配置文件。主要有如下信息需要修改的地方：hostname: 修改为域名https: 根据需要配置，我本处是直接注释掉了harbor_admin_password：管理员密码data_volume: harbor数据目录，这是宿主机的文件目录修改后执行初始化：./prepare初始化日志记录日下：zhuzl@zhuzl-M9-PRO:/data/dockerRoot/apps/harbor$ ./prepareprepare base dir is set to /data/dockerRoot/apps/harborWARNING:root:WARNING: HTTP protocol is insecure. Harbor will deprecate http protocol in the future. Please make sure to upgrade to httpsGenerated configuration file: /config/portal/nginx.confGenerated configuration file: /config/log/logrotate.confGenerated configuration file: /config/log/rsyslog_docker.confGenerated configuration file: /config/nginx/nginx.confGenerated configuration file: /config/core/envGenerated configuration file: /config/core/app.confGenerated configuration file: /config/registry/config.ymlGenerated configuration file: /config/registryctl/envGenerated configuration file: /config/registryctl/config.ymlGenerated configuration file: /config/db/envGenerated configuration file: /config/jobservice/envGenerated configuration file: /config/jobservice/config.ymlGenerated and saved secret to file: /data/secret/keys/secretkeySuccessfully called func: create_root_certGenerated configuration file: /compose_location/docker-compose.ymlClean up the input dirzhuzl@zhuzl-M9-PRO:/data/dockerRoot/apps/harbor$初始化完成后，会在当前目录生成 `docker-compose.yml`文件，此时，我们可以使用 `docker compose` 启动docker 服务啦，日志记录如下：zhuzl@zhuzl-M9-PRO:/data/dockerRoot/apps/harbor$ sudo docker compose up -d[+] Running 9/9 ✔ Container harbor-log Started 0.3s ✔ Container redis Started 0.7s ✔ Container registry Started 1.1s ✔ Container registryctl Started 0.9s ✔ Container harbor-portal Started 0.8s ✔ Container harbor-db Started 1.1s ✔ Container harbor-core Started 1.5s ✔ Container nginx Started 2.0s ✔ Container harbor-jobservice Started 2.1szhuzl@zhuzl-M9-PRO:/data/dockerRoot/apps/harbor$ 对了，执行`docker compose`的时候一定要用`sudo`,否则会出现文件权限相关的报错。启动完成后，可以通过 `nginx` 配置代理的方式对外提供服务，配置好后，访问出现如下图所示的登录界面： ![harbor 登录界面](https://blog.zhuzhilong.cn/usr/uploads/2023/08/2381568293.png) 在登录界面可以使用管理员账号 admin,进行登录，密码为在`harbor.yml` 文件中`harbor_admin_password` 配置的默认密码。登录成功后，主界面如下图所示： ![Harbor主界面](https://blog.zhuzhilong.cn/usr/uploads/2023/08/3334557343.png)

2023年08月11日
83 阅读
0 评论
0 点赞

2023-07-19

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

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

2023-07-13

通过Docker Compose安装Jira 由于数据库在服务器上已提前安装好，本处省略MySQL的安装流程。环境说明Jira 相关的文件统一放到 /data/dockerRoot/jira 目录。docker-compose.yml 文件内容如下：version: '3.9' services: jira: container_name: jira image: atlassian/jira-software:latest restart: "no" ports: - 18080:8080 environment: CATALINA_OPTS: -javaagent:/opt/atlassian/jira/atlassian-agent.jar volumes: - ./jira_data:/var/atlassian/application-data/jira - ./libs/atlassian-agent.jar:/opt/atlassian/jira/atlassian-agent.jar - ./libs/mysql-connector-java-8.0.30.jar:/opt/atlassian/jira/lib/mysql-connector-java.jar - ../hosts:/etc/hosts - /etc/timezone:/etc/timezone:ro - /etc/localtime:/etc/localtime:rolibs 目录的文件打包如下：libs.zip启动服务sudo docker compose up -d设置JiraJira 容器启动完毕后，可通过 http://localhost:18080 访问，会自动调整到如下图所示的初始化向导页面：1、设置为中文单击右上角的「Language」2、我将设置它自己在第二步选择「我将设置它自己」3、数据库连接配置连接数据库选择「其他数据库」，数据库类型根据本地环境进行选择，选择对应的数据库，要提前引入对应数据库的驱动 jar 包。4、设置应用程序属性5、设置许可证如果本地有Java 环境，可以在本地生成许可证，没有的话进入Jira 容器生成也可以执行如下命令，替换对应的服务器ID:java -jar atlassian-agent.jar -d -m test@test.com -n BAT -p jira -o lewis2951 -s B87T-QH0H-UBTM-IU5Q以上命令相关说明如下：java -jar atlassian-agent.jar \ -m zh_season@163.com # Licence Emali \ -n atlassian # Licence Name \ -o atlassian # Licence organization \ -p crowd # Licence product, support: crowd, conf, jira, bitbucket \ -s <copy from website> # License server id以上通过本地环境生成，复制许可证内容到输入框。6、设置管理员根据自己需求设置，Email 可以是一个不存在的，但是建议使用真实Email。7、设置电子邮件通知8、完成部署到此，Jira 就部署完成了。进入欢迎页面，可以创建一个示例项目，9、查看许可证在管理 → 应用程序下可查看许可证信息

2023年07月13日
51 阅读
0 评论
0 点赞

2023-07-01

常用docker 命令该文档内容主要用于日常记录，会逐步添加重启 docker 服务sudo systemctl daemon-reload sudo systemctl restart docker停止所有运行中的容器docker ps -q | xargs docker stop将当前用户添加到docker用户组，那样就不用每次执行docker命令都加sudosudo usermod -aG docker $USER复制容器中的目录到本地：sudo docker cp <CONTAINER_ID>:/usr/local/tomcat/webapps/ROOT ./temp进入容器sudo docker exec -it mongodb /bin/bash创建网络docker network create --driver=bridge --subnet=192.168.0.0/16 bridge_zzl构建镜像docker build -f ./Dockerfile.devIstio -t console-mobile-ui:0.0.1 .将容器保存为新镜像sudo docker commit nginxProxyManager zhuzl/nginx-proxy-manager:2.11.1-ssl将其他仓库的 docker 镜像推送到本地私服一般用于本地下载外网镜像超级慢的情况，可找台外网的机器 pull,然后 push 到 Docker 私服docker pull ghcr.io/huolalatech/page-spy-web:release docker tag ghcr.io/huolalatech/page-spy-web:release xxx.yyy.zhuzhilong.com/apps/page-spy-web:release docker push xxx.yyy.zhuzhilong.com/apps/page-spy-web:release删除所有未运行的容器；运行的删除不了docker rm $(docker ps -a -q)根据容器的状态删除状态为Exited的容器docker rm $(docker ps -qf status=exited)查看docker日志占用情况及日志清理# /etc/docker/daemon.json 中的 "data-root": "/data/dockerRoot/dataRoot" sudo ls -lh $(sudo find /data/dockerRoot/dataRoot/containers/ -name *-json.log) cat /dev/null > /data/dockerRoot/dataRoot/containers/e876d8da919db8905dece519a81ecc182bc918c20397e5212f2b49e06ec03a01/e876d8da919db8905dece519a81ecc182bc918c20397e5212f2b49e06ec03a01-json.log删除所有tag中带 “none” 关键字的镜像#!/bin/bash # docker rmi $(docker images | grep "none" | awk '{print $3}') TAG=`docker images | grep none| awk '{print $3}'` for tag in $TAG do docker rmi -f $tag done exit 使用 prune 命令删除不再使用的 docker 对象。删除所有未被 tag 标记和未被容器使用的镜像docker image prune

2023年07月01日
65 阅读
0 评论
0 点赞

2023-06-29

处理360路由器不能通过代理在外网访问的问题缘起2020年的时候，感觉家里的路由实在是太慢了，正好360新出的360WiFi6全屋路由天穹 V6 路由感觉还蛮不错，就入手了。使用至今整体还算稳定，功能也能满足大部分使用场景，而且系统自带「自定义hosts」功能，在内网想要使用域名访问部署的服务也就方便多了，虽说不支持泛域名解析，一个一个配有些繁琐，但好歹也省去另外部署DNS的繁琐操作了。只是官方自带的 app 在功能上有不少阉割，像「功能扩展」下的大部分功能就只能通过PC 网页端访问。今年618屯了台配置还不错的迷你主机，准备放在家里长期开机做内网开发服务器用。当然作为一个程序员长期开机的机器，内网穿透肯定是要部署的。上下求索所有准备工作就绪后，想着方便随时配置路由，便把路由通过内网穿透在外网可以随时远程访问。配置好FRP和nginx代理后，登录页面可以正常访问，但是登录后，跳转到主界面，闪一下便又回到登录界面了。问题既然出了，先看看有没有碰到同样问题的小伙伴。便通过360路由官方的社区链接，看看有没有用户反馈相同的问题，于是找到下面这几个反馈同类问题的帖子：360路由P2还是不能通过外网 wan口登录管理？外网怎么访问路由器后台如何在外网下访问路由器的登录界面P1好像不能在外网登录管理页面嘛！！看了一圈，始终没有一个能解决问题的答复，而且看一些标注为「产品答疑师」的回复都不能解决实际反馈的问题，看来是时候施展混迹IT圈多年所学的三脚猫功夫啦。毕竟原理上都是HTTP访问，浏览器发起的HTTP请求只要跟内网请求头信息一致，理论上都是可行的。开始折腾于是通过nginx 代理的地址，真发现如下问题：登录后，发起了「GET /router/get_router_device_capability.cgi」ajax 请求，但是,该接口响应的是302,又重定向到/login.htm登录页面。初步以为是后端对 Host 或 Referer这些头信息做了校验，遂配置nginx相关头信息： proxy_set_header Host http://192.168.0.1; proxy_set_header Referer http://192.168.0.1/login_pc.htm;重启 nginx 再次访问，发现问题依旧。进一步发现请求头中有一个token_id的头信息，值为 undefined，根据 token_id 字符串搜了下网页代码，发现从url获取参数存在问题：该导致了请求的时候根本没获取到用户认证所需的 token_id，导致请求失败。进一步深挖，发现头信息中的 Cookie 是存在 token_id 的：这样的话，是不是可以考虑nginx代理的时候，从Cookie中获取token_id然后设置一个名为token_id的头请求后端呢？说干就干，一翻摸索后，在nginx配置信息中加入如下信息：set $TOKEN_ID ""; if ($http_cookie ~* "token_id=(.+?)(?=;|$)") { set $TOKEN_ID "$1"; } proxy_set_header token_id "$TOKEN_ID";完整nginx虚拟主机配置信息如下：server { listen 80; server_name router.home.zhuzhilong.cn; location / { proxy_set_header Referer http://192.168.0.1/login_pc.htm; proxy_pass http://192.168.0.1; set $TOKEN_ID ""; if ($http_cookie ~* "token_id=(.+?)(?=;|$)") { set $TOKEN_ID "$1"; } proxy_set_header token_id "$TOKEN_ID"; } }重启路由器，验证成功！！圆满收场最终实现后的效果录屏如下：{dplayer src="/usr/uploads/2023/06/4228503511.mp4"/}

2023年06月29日
353 阅读
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日
53 阅读
0 评论
0 点赞

2023-06-10

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

2023-06-06

Ubuntu 添加FRP客户端自启动背景介绍今年618 的时候购置了一台迷你主机，主要用于家庭内部服务器使用，主要基于Docker 部署其他应用，而 Ubuntu 作为 docker 原生支持最好的操作系统，而且还有漂亮的桌面，当然也就成了本迷你主机的操作系统首选。装完系统后，部署的很多应用只能内部使用，为了方便，当然不能只局限于家庭内部环境使用。结合之前不熟的FRP服务端，完全可以对外提供WEB服务，于是便有了本期的教程。下载 FRPFRP 是服务端和客户端打包在一个压缩包文件里的，可以直接从github下载就好。FRP 发布地址：https://github.com/fatedier/frp/releases本处直接下载最新的0.49.0 版本，根据操作系统，本处选择frp_0.49.0_linux_amd64.tar.gz 进行下载：wget https://github.com/fatedier/frp/releases/download/v0.49.0/frp_0.49.0_linux_amd64.tar.gz下载后解压文件tar -zxvf frp_0.49.0_linux_amd64.tar.gz将解压的文件移动到当前用户有权限的目录，本案例中移动到 /data/apps/frp目录编辑 frpc.ini 文件本处结合实际情况，修改内容如下，部分涉密数据做了调整：[common] server_addr = SERVER_IP server_port = 7000 # for authentication token = TOKEN log_file = /data/apps/frp/frpc.log log_level = info log_max_days = 30 [home_ssh] type = tcp local_ip = 127.0.0.1 local_port = 22 remote_port = 4000 [home_web_pan] type = http local_ip = 127.0.0.1 local_port = 80 http_user = zhuzl http_pwd = PASSWORD subdomain = pan [home_web_kod] type = http local_ip = 127.0.0.1 local_port = 80 http_user = zhuzl http_pwd = PASSWORD subdomain = kod 配置完成后，可直接运行frpc 验证是否OK../frpc若有问题，可检查frpc.ini相关配置信息是否正确配置frpc自启动配置自启动过程中，为避免权限相关问题，本处直接切换为 root 账号添加 frpc.servicevi /etc/systemd/system/frpc.service输入如下服务配置内容[Unit] Description=Frp Client Service After=network.target [Service] Type=simple User=jiuzilong Restart=on-failure RestartSec=5s ExecStart=/data/apps/frp/frpc -c /data/apps/frp/frpc.ini [Install] WantedBy=multi-user.target 启用服务# 启用服务 systemctl enable frpc.service # 禁用服务 systemctl disable frpc.service重启服务systemctl daemon-reload systemctl start frpc验证服务启动状态systemctl status frpc参考链接FRP官方文档： https://gofrp.org/docs/overview/FRP服务端安装并设置开机自启动： https://blog.zhuzhilong.cn/software/install-frps-as-service.html推荐另一种docker compose 的启动方式：version: '3.3' services: frpc: restart: always network_mode: host volumes: - './frpc.ini:/etc/frp/frpc.ini' container_name: frpc image: snowdreamtech/frpc

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

2023-06-05

部署Cloudreve 参考链接：https://docs.cloudreve.org/getting-started/install#docker-composedocker-compose.ymlversion: "3.8" services: cloudreve: container_name: cloudreve image: cloudreve/cloudreve:latest restart: unless-stopped ports: - "8004:5212" volumes: - temp_data:/data - ./cloudreve/uploads:/cloudreve/uploads - ./cloudreve/conf.ini:/cloudreve/conf.ini - ./cloudreve/cloudreve.db:/cloudreve/cloudreve.db - ./avatar:/cloudreve/avatar depends_on: - aria2 aria2: container_name: aria2 image: ddsderek/aria2-pro restart: unless-stopped environment: - RPC_SECRET=your_aria_rpc_token - RPC_PORT=6800 - DOWNLOAD_DIR=/data - PUID=1000 - PGID=1000 - UMASK_SET=022 - TZ=Asia/Shanghai volumes: - ./aria2/config:/config - temp_data:/data volumes: temp_data: driver: local driver_opts: type: none device: ./data o: bind 在当前目录创建相关目录及文件mkdir -vp cloudreve/{uploads,avatar} \ && touch cloudreve/conf.ini \ && touch cloudreve/cloudreve.db \ && mkdir -p aria2/config \ && mkdir -p data/aria2 \ && chmod -R 777 data/aria2启动容器docker compose up -d启动后从日志中查看登录账号信息：

2023年06月05日
17 阅读
0 评论
0 点赞

2023-06-05

部署spug 参考： https://www.spug.cc/docs/install-docker创建 docker-compose.ymlversion: '3.9' services: spug: image: openspug/spug-service container_name: spug privileged: true restart: always volumes: - ./service:/data/spug - ./repos:/data/repos ports: - 8002:80 environment: - MYSQL_DATABASE=spug - MYSQL_USER=spug - MYSQL_PASSWORD=Passw0rd - MYSQL_HOST=192.168.1.200 - MYSQL_PORT=3306启动容器docker compose up -d初始化以下操作会创建一个用户名为 zhuzl 密码为 Passw0rd 的管理员账户，可自行替换管理员账户/密码。docker exec spug init_spug zhuzl Passw0rd

2023年06月05日
22 阅读
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-28

windows 安装nvm 及基本使用近些年 Node.js 的版本升级比较快，而我们很多项目维护周期也会维持很多年，而维护一些老项目的时候，在一些新版本 Node.js上会报一大堆的错，为了尽快修复 bug，没必要花太多的时间升级一大堆的依赖，而且贸然升级，对于线上在用的项目也存在诸多不确定性方面的隐患。对于前端开发者而言，选择一款方便的多 Node.js 版本控制工具，俨然是非常有必要的。而nvm 是一款可以用于管理多版本 Node.js 的工具，可以根据实际情况，轻松切换项目所需的node 版本，在开发过程中非常便捷，不用手工卸载原版本再下载安装新Node版本。下载github发布页：https://github.com/coreybutler/nvm-windows/releases我选择nvm-setup.exe文件进行下载，也有用于免安装的绿色版文件(nvm-noinstall.zip)，那样得下载后解压并手工设置环境变量。安装下载后是一个nvm-setup.exe，安装过程一路 Next即可：安装完成后，打开cmd命令行，输入 nvm version 能正常显示类似下图所示版本信息即可：使用查看可安装版本：nvm list availableD:\GitRoot\SE\dmc\magic-boot>nvm list available | CURRENT | LTS | OLD STABLE | OLD UNSTABLE | |--------------|--------------|--------------|--------------| | 21.6.2 | 20.11.1 | 0.12.18 | 0.11.16 | | 21.6.1 | 20.11.0 | 0.12.17 | 0.11.15 | | 21.6.0 | 20.10.0 | 0.12.16 | 0.11.14 | | 21.5.0 | 20.9.0 | 0.12.15 | 0.11.13 | | 21.4.0 | 18.19.1 | 0.12.14 | 0.11.12 | | 21.3.0 | 18.19.0 | 0.12.13 | 0.11.11 | | 21.2.0 | 18.18.2 | 0.12.12 | 0.11.10 | | 21.1.0 | 18.18.1 | 0.12.11 | 0.11.9 | | 21.0.0 | 18.18.0 | 0.12.10 | 0.11.8 | | 20.8.1 | 18.17.1 | 0.12.9 | 0.11.7 | | 20.8.0 | 18.17.0 | 0.12.8 | 0.11.6 | | 20.7.0 | 18.16.1 | 0.12.7 | 0.11.5 | | 20.6.1 | 18.16.0 | 0.12.6 | 0.11.4 | | 20.6.0 | 18.15.0 | 0.12.5 | 0.11.3 | | 20.5.1 | 18.14.2 | 0.12.4 | 0.11.2 | | 20.5.0 | 18.14.1 | 0.12.3 | 0.11.1 | | 20.4.0 | 18.14.0 | 0.12.2 | 0.11.0 | | 20.3.1 | 18.13.0 | 0.12.1 | 0.9.12 | | 20.3.0 | 18.12.1 | 0.12.0 | 0.9.11 | | 20.2.0 | 18.12.0 | 0.10.48 | 0.9.10 | This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases查看LTS的版本号nvm ls-remote --lts安装指定版本Node：nvm install 版本号D:\GitRoot\SE\dmc\magic-boot>nvm install 21 Downloading node.js version 21.6.2 (64-bit)... Extracting node and npm... Complete npm v10.2.4 installed successfully. Installation complete. If you want to use this version, type nvm use 21.6.2查看已安装版本：nvm listD:\GitRoot\SE\dmc\magic-boot>nvm list 21.6.2 * 20.10.0 (Currently using 64-bit executable) 更多使用方法可以输入 nvm --help 命令可查看：D:\GitRoot\SE\dmc\magic-boot>nvm --help Running version 1.1.12. Usage: nvm arch : Show if node is running in 32 or 64 bit mode. nvm current : Display active version. nvm debug : Check the NVM4W process for known problems (troubleshooter). nvm install <version> [arch] : The version can be a specific version, "latest" for the latest current version, or "lts" for the most recent LTS version. Optionally specify whether to install the 32 or 64 bit version (defaults to system arch). Set [arch] to "all" to install 32 AND 64 bit versions. Add --insecure to the end of this command to bypass SSL validation of the remote download server. nvm list [available] : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls. nvm on : Enable node.js version management. nvm off : Disable node.js version management. nvm proxy [url] : Set a proxy to use for downloads. Leave [url] blank to see the current proxy. Set [url] to "none" to remove the proxy. nvm node_mirror [url] : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url. nvm npm_mirror [url] : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url. nvm uninstall <version> : The version must be a specific version. nvm use [version] [arch] : Switch to use the specified version. Optionally use "latest", "lts", or "newest". "newest" is the latest installed version. Optionally specify 32/64bit architecture. nvm use <arch> will continue using the selected version, but switch to 32/64 bit mode. nvm root [path] : Set the directory where nvm should store different versions of node.js. If <path> is not set, the current root will be displayed. nvm [--]version : Displays the current running version of nvm for Windows. Aliased as v.

2023年05月28日
34 阅读
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日
22 阅读
0 评论
0 点赞