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…
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 来通信。 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送…
今天把主力开发工具 IDEA 升级到了2022.3了，出现一个问题，暗色主题(Darcula)下，代码提示框(或者是鼠标移到代码上的文档弹出框)，始终是白色背景，很不协调，如图： 之前在升级新版本也有遇到过，但是升级后，IDEA修改了控制这个背景的选项，所以需要到新的地方去修改设置。 打开IDEA的设置 Setting->Editor->Color Schema->General，右侧找到Popups and Hints->Completion，把Background修改一个黑的颜色（我用的…
在发生重大哀悼事件时候，需要紧急将网站变灰以示哀悼，在此给大家总结了几种方法，通过简单修改一下站点样式即可实现。 另外主要方便快捷的方法是使用CSS样式的grayscale()方法。 grayscale() : 对图片进行灰度转换，grayscale是 <filter-function> 的子属性，当100%参数时候的效果如下： 最简单地把页面的<html>开始标签中间之间加： style="-webkit-filter: grayscale(100%);" 或者修改站点CSS样式 html…
