vchats的图例，有时候根据设计的需要，不一定用原来默认的位置，例如可能摆在图表的左边或者右边，也可能需要修改图例的颜色、文字等等，在vchart中是通过extend来设定的，示例如下： <VePie style="" :data="chartData" :extend="chartExtend"></VePie> chartExtend的内容如下(主要是legend的配置)： chartExtend: { legend: { top: 45, // 距离上边界的地址 show: true…

之前的文章有介绍利用Puppeteer部署Docker，生成截图，详见：https://blog.terrynow.com/2022/10/29/use-node-puppeteer-docker-mingalevme-screenshoter-as-service-to-fullscreen-screenshot-and-support-chinese/，不过并不能生成PDF，本次介绍另一个Docker镜像，是生成PDF的。 镜像地址是: https://hub.docker.com/r/hmtx/puppete…

在使用vcharts做饼图或者环形图的时候，因为需要调整图例的位置，导致饼图或者环形图本身的位置需要调整。 vchart中使用extend属性来设置： <VePie style="" :data="chartData" :extend="chartExtend"></VePie> chartExtend内容如下： chartExtend: { series: { center: ['20%', '25%'], symbolSize: 10, label: { show: false } } …

Puppeteer 是 Headless Chrome 的 Node.js 封装。通过它可方便地对页面进行截图，或者保存成 PDF。 镜像的设置 因为其使用了 Chromium，其源在 Google 域上，最好设置一下 npm 从国内镜像安装，可解决无法安装的问题。 推荐在项目中放置 .npmrc 或 .yarnrc 文件来进行镜像的设置，这样设置只针对项目生效，不影响其他项目，同时其他人不用重复在本地设置。 这是一个整理好的 .npmrc 文件，如果使用的是 yarn，对应的 .yarnrc 文件。也可通过如下命…

一、前言 策略模式可能是在工作中使用最多的，也是在面试中最常提到的，代码重构和优化的必备！小编之前也是一直说，其实没有真正的实战；最近有了机会实战了一下，来分享一下使用心得和在企业级的使用！ 二、策略模式 1. 什么是策略模式 策略模式，英文全称是 Strategy Design Pattern。在 GoF 的《设计模式》一书中，它是这样定义的： 定义一族算法类，将每个算法分别封装起来，让它们可以互相替换。策略模式可以使算法的变化独立于使用它们的客户端（这里的客户端代指使用算法的代码）。 2. 策略模式结构组成 S…

1. 前景 在使用Springboot时，通常很多信息都是在application.yml中直接明文配置的，比如数据库链接信息，redis链接信息等等。有些公司的场景可能需要对配置文件进行加密，防止部署操作人员接触数据句的重要信息，所以需要对敏感数据进行加密。 Jasypt这个库为我们解决了这个问题，实现了springboot配置的自定义加密加密。 2. 开源项目介绍 https://github.com/ulisesbocchio/jasypt-spring-boot 2.1 引入依赖 <propertie…

vue使用使用vchart，如果要统计两个维度，可以让Y轴左右各显示两个维度，例如： <VeHistogram :data="chartData" :settings="chartSettings" :extend="chartExtendBar"></VeHistogram> this.chartData = { columns: ['班级类型', '已开班级数', '已培训人次'], rows: [{'班级类型':'A班', '已开班级数': 5, '已培训人次': 2000}, {'班…

在开发手机网页的时候（手机微信公众号的网页也类似），遇到一个需求，在使用手机真机查看网页效果的时候，需要看debug情况（例如console控制台、network网络发送情况等等），这个时候就没有在电脑上来的方便，不能很方便的打开控制台等。 这个时候，可以试试这个 https://github.com/Tencent/vConsole/blob/dev/README_CN.md 调试神器，一个轻量、可拓展、针对手机网页的前端开发者调试面板。 使用方法很简单，只要引入js，初始化一下即可（Vue下也兼容）： <…

Lombok使⽤ 同时使⽤@Data和@Builder ，构建无参构造器报错！编译不通过。如下图： Lombok使⽤@Data可以⽣成⽆参构造和类⾥⾯所有属性的getter/setter⽅法。可以简化我们代码的开发。（需要安装Lombok插件和引⼊Lombok依赖）。 例如下⾯的⼀个实体类,引⼊Lombok后，可以⾃动⽣成GET/SET⽅法和⽆参构造函数。 编译后的class为:可以看到不仅帮我们生成了get和set ，同时也有默认的无参构造器   那么怎么自动生成有参构造器呢？使用@Builder注解，…

select查询语句是不会加锁的，但是select .......for update除了有查询的作用外，还会加锁呢，而且它是悲观锁。 那么它加的是行锁还是表锁，这就要看是不是用了索引/主键。 没用索引/主键的话就是表锁，否则就是是行锁。 验证： 建表sql //id为主键 //name 为唯一索引 CREATE TABLE `user` ( `id` INT ( 11 ) NOT NULL AUTO_INCREMENT, `name` VARCHAR ( 255 ) DEFAULT NULL, `age` INT…