发表于 | 分类于 ， |
字数统计: 2.1k | 阅读时长 ≈ 8

在我们的日常开发中，手上有好几个项目，每个项目的需求不同，如果不同项目必须依赖不同版的 NodeJS 运行环境，这个问题将非常棘手，如果有个 NodeJS 版本管理工具就好了。

nvm 应运而生，nvm 是 Mac 下的 NodeJS 管理工具，有点类似管理 Ruby 的 rvm，如果需要管理 Windows 下的 node，官方推荐使用 nvmw 或 nvm-windows（是使用go语言编写的软件）。不过，nvm-windows 并不是 nvm 的简单移植，他们也没有任何关系。但下面介绍的所有命令，都可以在 nvm-windows 中运行。

阅读全文 »

发表于 | 分类于 ， |
字数统计: 698 | 阅读时长 ≈ 3

服务器环境使用的是lnmp集成包搭建的，根据业务要求，我们需要使用https访问链接

  1. 首先nginx必须安装了ssl模块，此处就不讲解如何安装ssl模块了

  2. 然后我们把证书文件放到服务器上的 /usr/local/nginx/cert 目录里

1
2
3
├─ /usr/local/nginx/cert
│  ├─ 4023842_www.xxxxxx.com.pem
│  ├─ 4023842_www.xxxxxx.com.key
  1. 然后修改 vhost nginx 配置文件 www.xxxxxx.com.conf

原始的配置为：

阅读全文 »

发表于 | 分类于 |
字数统计: 606 | 阅读时长 ≈ 2

在开发过程中，我们经常会遇到端口被占用的情况，本文讲述在Windows系统下，查看端口以及结束占用端口的程序。

1. 用管理员身份打开命令窗口

开始—->运行 输入cmd，或者是 window+R 组合键 输入cmd，调出命令窗口。

1
2
3
4
Microsoft Windows [版本 6.3.9600]
(c) 2013 Microsoft Corporation。保留所有权利。

C:\Users\Peak>
阅读全文 »

发表于 | 分类于 ， |
字数统计: 1.2k | 阅读时长 ≈ 6

选择多张图片从上到下排列合成一张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼长图</title>
</head>

<body>
    <input id="uploadInput" type="file" accept="image/*" multiple="multiple" style="display: none;">
    <label for="uploadInput" style="border: 1px solid #333; cursor: pointer; padding: 5px 20px;">
        点击选择图片
    </label>

    <div id="imageBox"></div>

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        // 拼出来的图片的宽度
        const width = 300;
        // 拼出来的图片的质量，0-1之间，越大质量越好
        const encoderOptions = 0.5;
        // 图片选择输入框
        const uploadInput = document.getElementById('uploadInput');
        // 图片展示框
        const imageBox = document.getElementById('imageBox');

        // 给图片选择输入框添加change监听事件
        uploadInput.addEventListener('change', event => {
            const files = Array.from(event.target.files); // 将图片文件对象转换为数组

            filesToInstances(files, instances => {
                drawImages(instances, finalImageUrl => {
                    imageBox.innerHTML = `<img src=${finalImageUrl}><a download href=${finalImageUrl}>点击下载</a>`;
                });
            });
        });

        /**
         * 根据图片文件拿到图片实例
         * @param files 图片文件对象数组
         * @param callback
         */
        const filesToInstances = (files, callback) => {
            const length = files.length; // 文件个数
            let instances = []; // 文件实例数组
            let finished = 0; // 转换成功个数

            // 遍历图片文件数组
            files.forEach((file, index) => {
                const reader = new FileReader();
                // 把文件读为 dataUrl
                reader.readAsDataURL(file);
                reader.onload = e => {
                    const image = new Image();
                    image.src = e.target.result; // 获取图片文件的base64数据
                    // 解决跨域
                    // image.setAttribute('crossOrigin', 'anonymous');   
                    // image.src = e.target.result + '?time=' + new Date().valueOf();
                    image.onload = () => {
                        // 图片实例化成功后存起来
                        instances[index] = image;
                        finished++;
                        if (finished === length) { // 如果全部完成转换，调用回调函数
                            callback(instances);
                        }
                    }
                }
            });
        }

        /**
         * 拼图
         * @param images 图片实例数组
         * @param callback
         */
        const drawImages = (images, callback) => {
            const heights = images.map(item => width / item.width * item.height); // 计算获取每个图片文件根据指定width后的高度
            const canvas = document.createElement('canvas'); // 创建canvas元素
            canvas.width = width; // canvas宽度
            canvas.height = heights.reduce((total, current) => total + current); // 计算heights数组元素相加后的总和为canvas的高度
            const context = canvas.getContext('2d'); // 创建渲染
            let y = 0; // canvas Y轴坐标

            // 遍历图片实例数组
            images.forEach((item, index) => {
                const height = heights[index];
                context.drawImage(item, 0, y, width, height);
                y += height; // Y轴坐标加上上一张图片高度
            });

            // canvas数据放到回调函数
            callback(canvas.toDataURL('image/jpeg', encoderOptions));
        }
    </script>
</body>

</html>
阅读全文 »

发表于 | 分类于 ， |
字数统计: 93 | 阅读时长 ≈ 1

On Laravel 5.8, you cannot use Log::useFiles() to create custom log files,after some digging around I found that I could add a channel to config/logging.php like this

1
2
3
4
5
'customlog' => [
            'driver' => 'single',
            'path' => storage_path('logs/custom.log'),
            'level' => 'info',
],
阅读全文 »

发表于 | 分类于 ， |
字数统计: 771 | 阅读时长 ≈ 3

Hexo的Next主题集成了多种评论系统，在这里介绍两种个人感觉还不错的评论系统：Valine和Gitment。

Valine 评论系统

使用 Valine 评论系统，这款系统不需要登录便可以登录，没有后端，Next 主题最新已经支持安装

  • 基于 Leancloud 的系统
  • 支持 MarkDown 语法
  • 无后端实现，快速高效
阅读全文 »
0%