win32_load:could not load the shared library

淦，今天终于把这个问题解决了，之前一直很奇怪的bug，只要在window系统上涉及到加密这一块，总会出现这个问题，例如crypto，微信支付，支付宝支付..google也找不到任何答案，但在部署到linux上就没问题，所以后面操作都是同步到服务器上进行修改，这次又遇到这个问题就想给他解决掉。

错误信息：

Error: error:25078067:DSO support routines:win32_load:could not load the shared library

Error: error:25078067:DSO support routines:win32_load:could not load the shared library
    at Sign.sign (node:internal/crypto/sig:131:29)
    at Pay.sha256WithRsa (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:144:71)
    at Pay.getSignature (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:107:21)
    at Pay.init (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:198:30)
    at Pay.<anonymous> (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:332:46)
    at step (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:44:23)
    at Object.next (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:25:53)
    at xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (xxxxxxxx\node_modules\wechatpay-node-v3\dist\index.js:15:12) {
  opensslErrorStack: [
    'error:0E076071:configuration file routines:module_run:unknown module name',
    'error:0E07506E:configuration file routines:module_load_dso:error loading dso',
    'error:25070067:DSO support routines:DSO_load:could not load the shared library'
  ],
  library: 'DSO support routines',
  function: 'win32_load',
  reason: 'could not load the shared library',
  code: 'ERR_OSSL_DSO_COULD_NOT_LOAD_THE_SHARED_LIBRARY'
}

为何发生错误：

因为我早期需要打包密钥文件，从官网下载了openssl的安装包进行安装，但后面没用到了，就扔在那了，也没去卸载

因为接入的支付宝和微信支付都会用到crypto这个库，这个库会调用系统的openssl进行编译？但我自行安装的可能有点问题或者就是无法版本不对，导致无法调用。

解决方法：

如果系统上已经有安装了openssl，如何判断已经有安装？卸载掉，或者删除系统环境变量（找到openssl）
安装git（一般程序员系统都自带这个了，可忽略）
添加系统环境变量（Path）
```
git的安装目录\usr\bin 例如：D:\System\Git\usr\bin
```
测试命令操作符窗口中输入openssl，查看是否可以使用

这样就可以了，这样我们就是直接调用git自带的openssl，就不用自己手动安装，免得出各种问题。如果也能帮到你的话，记得赏我杯咖啡…

参考资料：
ssl - How to install OpenSSL in windows 10? - Stack Overflow

Nginx知识梳理

进程模型

master 主进程
worker 子进程

默认连接数为1024，具体根据硬件信息配置

配置

vim nginx.conf

events{
    # 默认使用epoll,可不写
    use epoll;
    # 每个worker允许连接的客户端最大连接数
    worker_connections: 10240;
}

为何nginx性能会比较高？主要是通过epoll模型处理

其实是类似于一种多路复用的模式

nginx.conf 配置结构

main 全局配置

event 配置工作模式以及连接数

http http模块相关配置

server 虚拟主机配置，可以有多个

location 路由规则，表达式

upstream 集群，内网服务器

Vue 动态路由的实现

Vue 中后台鉴权的另一种方案 - 动态路由

前言

在今年年初在掘金发布了一篇文章记一次 Vue 动态渲染路由的实现,现在代码经过不断的 Review

现在完全优化了之前的实现方法,代码量减少很多,逻辑更加简单,同时也更加稳定

demo 已经部署到 github,欢迎体验~~ vue-element-asyncLogin, 你的 start 是我的动力!

鉴权-前端路由 VS 鉴权-动态路由

前端路由鉴权相信只要了解过vue-element-admin的都知道,前端鉴权方案是完全可行的,思路清晰,难度适中,项目中完全可以使用,那么相对来说动态路由优势在什么地方呢

前端鉴权不够灵活,线上版本每次修改权限页面,都需要重新打包项目
中小型项目中 前端鉴权明显更加好用,成本更低,程序员们也不用 996 了(雾),但是对于权限等级很多,并且比较大的项目,维护这一套鉴权路由,毫无疑问是一个大工程,并且面对频繁变更的需求,bug 会出现的更加频繁,前端工程师工作量大大增加,这时候似乎前端鉴权就不再是好的方案
动态路由并不是回归到刀耕火种的时代,而是一种新的思路,路由配置还是由前端完成,仅仅将状态交给了后端,不同角色的路由显示交给后端控制,前端不需要管理路由,最多只需要管理权限颗粒化的问题

layui纯css表格顶部显示控制滚动条

因表格字段过多，每次浏览需要滑到底部才能滚动查看其他字段，所以要求将滚动条置顶显示

思路

更换更大的屏幕（不是
隐藏底部滚动条，顶部自定义滚动条，增加滚动事件
翻转画布

后面选择了第三种方式，

原理

将画面翻转，内容再按原角度翻转回去，就达到这种效果了

<html lang="en">
<head>
    <style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 2px solid black;
            margin: 15px;
        }
        
        #vertical {
            direction: rtl;
            overflow-y: scroll;
            overflow-x: hidden;
            background: gold;
        }
        
        #vertical p {
            direction: ltr;
            margin-bottom: 0;
        }
        
        #horizontal {
            direction: rtl;
            transform: rotate(180deg);
            overflow-y: hidden;
            overflow-x: scroll;
            background: tomato;
            padding-top: 30px;
        }
        
        #horizontal span {
            direction: ltr;
            display: inline-block;
            transform: rotate(-180deg);
        }
    </style>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="vertical">
        <p>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content
            <br>content</p>
    </div>
    <div id="horizontal"><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
    </div>
</body>

</html>

还可以设置翻转到左边

layui添加样式

 .layui-card-body{
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
}
.layui-table-view{
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

参考资料

how-to-change-scroll-bar-position-with-css

更改实例密码导致redis无法启动

问题源头

更改了阿里云ECS实例的远程桌面密码后，它会自动重启服务器，重启后发现redis无法启动，手动在任务管理器启动服务时，一直报错：“服务器上出现1069错误（由于登录失败而无法启动服务）”，在网上无法找到对应答案，都是说账号密码错了的问题，但当我使用命令直接启动redis是正常的，但就是无法在服务中启动，虽然是解决了问题，但这样每次是无法跟随系统自启动就很郁闷了，在我重新排查了一遍，因为服务是使用宝塔面板安装的，首先先找宝塔面板查看对应配置，发现有个运行用户选项，而我在系统中也发现存在该用户，所以知道问题所在了。

宝塔是有单独新建各种用户来运行服务的，比如mysql,www,redis，所以当我使用administrator用户登录时，没有redis用户的配置或者权限，无法启动该服务，解决办法可以把原先服务中的redis删除，重新命令创建即可。但这样后面宝塔面板就感觉容易错乱掉，所以还是得用宝塔面板来解决。

解决方法

在选项还是redis用户的情况下，直接再次点击切换即可！

貌似原理就是会给redis用户自动再生成密码，重新运行redis

域名无法正确解析|DNS解析显示多个|域名解析长时间不生效解决

原因解析

之前域名绑定一台测试服务器，但后面没继续续费过期了，需要重新解析新的服务器IP上，本以为就很简单的绑定解析，然后提交百度收录时，发现网页无法打开，习惯性的ping了下域名，发现ip不对，一开始以为是本地没刷新，本地刷新后没有变化，排查了本地的host文件，后来重新ping一次是正常，但很玄学，有时候是解析到新的IP，有时候又是旧的IP，网上是说DNS解析没这么快同步，等了一天左右，还是一样，但使用部分设备访问是可以正常解析的，更改了本地网络的dns，发现正常，所以可以肯定的是因为部分DNS没同步问题，

47.103.xxx.181 -> 过期服务器
120.77.xxx.247 -> 新服务器（需要解析到这个IP)

Canvas绘制模糊问题

原因解析

首先我需要了解一个属性 devicePixelRatio 屏幕像素比

在高清显示屏出现之前，比如屏幕宽度为1000px 那么其宽度上的物理像素也是1000px，而在高清屏出现之后，屏幕宽度为 1000px 时，物理像素有可能达到 2000px 或者更高

为了方便查询物理像素和屏幕像素的比值，在 window 对象上增加了一个属性 devicePixelRatio 来表示这个比值。

比如在 devicePixelRatio 为2的设备上，当我们使用 CSS 绘制一条 1px 的线时，为了保证绘制的大小，物理像素实际上会使用 2px 来绘制这一条线，而这样的转换是浏览器自动处理的，所以对开发者来说并没有太大的困扰

那么上面既然说了浏览器在渲染的时候会自动处理像素比的问题，CSS 绘制的图像经过转换之后不会出现模糊的问题，但 canvas 上怎么就出现了呢？

因为在 canvas 标签上定义的 width 和 height 的值并不会被转换，100px 就会被渲染成 100px 的物理像素，但是设备要求的是 200px，这时浏览器只能智能地填充像素之间的空白，以适应要求的大小。这就是 canvas 绘制的图片出现模糊的原因

解决方案

第一步：获取像素比
第二步：将 canvas 标签上的宽高属性设置为显示大小 * 像素比
第三步：将 canvas 样式宽高设置为显示大小
第四步：使用 scale 方法设置比值
第五步：绘制 canvas 图形

function createHDCanvas (canvas, w, h) {
  const ratio = window.devicePixelRatio || 1;
  canvas.width = w * ratio; // 实际渲染像素
  canvas.height = h * ratio; // 实际渲染像素
  canvas.style.width = `${w}px`; // 控制显示大小
  canvas.style.height = `${h}px`; // 控制显示大小
  const ctx = canvas.getContext('2d')
  ctx.scale(ratio, ratio)
  // canvas 绘制
  return canvas;
}