幸福的猪窝

Electron 无边框界面

发表于 2019-11-30 | 分类于技术文章

Electron应用默认有一个浏览器的标题栏，多少看上去都有些不爽，隐藏掉默认浏览器的标题栏及边框方法很简单。

隐藏窗口

创建窗口时通过参数 frame 就可以控制是否显示。示例：

1
2
3

win = new BrowserWindow({width:1800,height:600,frame:false});
// frame :  true 显示边框，默认值
// frame :  false 不显示边框

通过这个参数很容易实现无边框的界面。但是发现窗口无法拖动了。就傻傻的待在启动的位置。这就尴尬了。想关闭都麻烦。于是就有了下面的设置方法。

通过样式设置界面的可拖动区域

electron通过一个样式来确定区域是否可以拖动 -webkit-app-region。这个样式有两个值分别是 drag 和 no-drag。通过设置不同值控制区域是否可以拖拽。

样例：

/**
 * 可以拖拽区域，主要使用在需要响应鼠标拖拽的区域上。
*/
.dragRegion{
  -webkit-app-region: drag;
}

/**
* 不可以拖拽区域，在设置了可拖拽区域的控件内部对于鼠标的点击等事件均不响应。
* 所以这个范围内如果有按钮等控件需要设置，保证控件的正常功能。
*/
.noDragRegion{
  -webkit-app-region: no-drag;
}

目前一个项目中没有开启时区转换逻辑，但是却发现系统中的时间戳在前端显示异常。与实际的北京时间相差了8个小时。明显是转换成了UTC时间。开始怀疑是服务器时间问题，因为以前遇到过Docker中默认时区有错。所以检查了应用服务器和数据库服务器。发现均没有问题。于是跟踪代码发现从数据库读出是时间仍然正确，就是return后的输出出错。问题确定是在SpringBoot使用的jsckson转换时出的问题。查询后有如下两种处理方法：

方法一：统一配制

#时间戳统一转换

可以在apllication.property加入下面配置就可以

1 2	spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring.jackson.time-zone=GMT+8

如果使用的是树状配制文件application.yml的话

spring:
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

方法二：单一配制

1 2	@JsonFormat(timezone = "GMT+8", pattern = "yyyyMMddHHmmss") private Date createTime;

React填坑笔记

发表于 2019-10-30 | 分类于技术文章

用来记录使用React过程中遇到的坑

启动程序报错
在 ubuntu 系统上执行 npm start出现如下错误：

1	rror: ENOSPC: System limit for number of file watchers reached, watch xxxxxxx

原因：系统限制

解决方法：

1	echo fs.inotify.max_user_watches=524288 \| sudo tee -a /etc/sysctl.conf && sudo sysctl -p

旅游

发表于 2019-10-30

Electron 开发桌面应用

发表于 2019-10-30 | 更新于 2019-11-01 | 分类于技术文章

1.环境安装

默认大家电脑上已经有可用的Nodejs环境，如果没有请自行安装。Nodejs安装参考官网。

2. 创建一个空白的React 应用

##创建应用
npx create-react-app electron-demo
cd electron-demo
npm start
## 如果能启动浏览器看到如下界面表示React应用创建成功。

React默认App截屏

3. 集成Electron

1.安装组件

1	npm install electron --save

package.json中添加这两行main是指定electron主文件的位置。electron-star是指定electron的启动脚本这样就可以通过你npm run electron-start 来启动了。

{
  "main": "src/electron/main.js",
  "scripts": {
    "electron-start": "electron ."
  },
}

2.添加Electron启动脚本

我们在package.json中指定的electron的主程序路径在src/electron下。首先在创建主文件main.js


/**
* Electron 主入口
*/
// 引入Electron
const { app, BrowserWindow} = require('electron');

// 定义默认启动窗口参数
let global_cfg = {
    window : {width:800,height:600},
    islocal : true,
    openDevTools : true
}

//定义窗口主对象。
let win = null

//创建窗口
function createWindow() {

    // 创建浏览器窗口。
    let winCfg = global_cfg.window;
    win = new BrowserWindow(winCfg);

     //如果是本地调试状态从React监听的url打开，打包后从本地文件读取
    if ( global_cfg.islocal ) {
        win.loadURL('http://localhost:3000')
    }else{
        win.loadURL(`file://${path.join(__dirname, '../build/index.html')}`)  
    }
    
    // 打开开发者工具
    if(global_cfg.openDevTools){
        win.webContents.openDevTools()
    }
  
    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    })
}

//系统初始化函数
function sysInit(){
    createWindow();
}

// Electron 会在初始化后并准备 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', sysInit)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
        createWindow()
    }
})

3.测试

1	npm run electron-start

顺利的话就能看到一个程序界面启动，内容就是第二步完成的React项目的内容。

到此一个 Electron + React 的项目框架就算初步完成。

Nginx操作脚本整理

发表于 2019-06-26 | 更新于 2019-10-30 | 分类于技术文章

最近部署服务器需要使用自己编译的 tengine 复制好编译好的文件后发现每次启动都要到服务器所在目录调用nginx太麻烦还要记录各种参数。尤其是这次的运行的路径和我编译时预设的不一样。要加一大堆参数。所以爆发了写一个脚本集成的需求。一条命令完成大部分操作。

目前这个脚本集成了四项功能

启动
停止
重新加载配置
测试默认配置文件
把下面内容保存到一个shell文件命名成nginx.sh ，执行 chmod +x nginx.sh赋予可执行权限后就可以了。
脚本中配置了nginx安装的绝对路径所以可以放到任何地方，放到PATH路径后使用方便。


#!/bin/bash
#定义nginx的安装目录
#后面使用 -p 参数指定了运行时 nginx的主目录，nginx会去这个目录中搜索配置文件。准备下一步改进一下把这个参数作为可传入的参数这样就可以在几套配置间切换了。

nginx_home=/data/software/utax/tengine
action=$1

if [ $# = 0 ]; then
   echo "Use case: nginx.sh {start|reload|stop|test}"
else
   echo "$action"
   echo "Profix: $nginx_home"
   case $action in
       "start")
           echo "Starting nginx"
           $nginx_home/sbin/nginx -p $nginx_home
       ;;
       "test")
           echo "Test nginx config"
           $nginx_home/sbin/nginx -p $nginx_home -t
       ;;
       "reload")
           echo "Reloading nginx config"
           $nginx_home/sbin/nginx -p $nginx_home -s reload
       ;;
       "stop")
           echo "Stoping nginx"
           $nginx_home/sbin/nginx -p $nginx_home -s quit
       ;;
       *)
       echo "Use case: nginx.sh {start|reload|stop|test}"
   esac
fi

Let's Encrypt 通配符证书申请-更新

发表于 2019-06-05 | 更新于 2019-10-30 | 分类于技术文章

之前介绍过一篇升级 Let’s Encrypt通配符证书的文章。当时时使用手动交互模式需要在DNS服务器添加记录证明对域名的所有权。开始以为就是签发是一次认证就可以，以后重新申请会像以前普通证书一样直接更新。最近在更新的时候发现这个认识是错误的。当执行 certbot-auto renew 时返回了如下错误：

1
2

Could not choose appropriate plugin: The manual plugin is not working; there may be problems with your existing configuration.
The error was: PluginError('An authentication script must be provided with --manual-auth-hook when using the manual plugin non-interactively.',)

意思就是没有找到认证的插件，需要通过参数 –manual-auth-hook 指定，否则无法申请。这个插件的用处就是在重新签发的时候仍然要验证一次身份，需要在DNS上添加解析记录。网上搜搜了一下有人用python写了一个支持阿里云和腾讯云插件。让我想起了之前用nodejs的一个修改ALIDNS的插件。当时用来实现类似花生壳的DDNS功能。于是准备升级一下这个系统用于自动处理证书签发。

申请证书

申请证书跟上篇内容有一些更新。不再需要指定服务器，默认已经是v2的服务器了，新加了一个参数默认允许记录申请时的公网IP实现全自动申请，中间没有交互步骤。
下面这个命令是测试命令，真是申请需要删除最后的 –dry-run。

sudo ./certbot-auto  certonly --email <email> -d <domain>  --manual --manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add" --manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete" --preferred-challenges dns --manual-public-ip-logging-ok --dry-run

参数说明：

certonly 只签发证书
--email <email> 关联账号的额main地址
-d <domain> 证书的域名，注意这里*.domain.com是不能用于 domain.com 的所以如果你想一个证书全搞定就需要添加多个参数。
--manual 指定使用手动认证模式
--manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add"  指定手动认证模式下认证的关联脚本，我没有在写脚本而是直接使用node启动。这里需要注意很有可能node不在sudo的 PATH 中所以需要手动指定完整目录
--manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete"   指定手动认证模式下验证后清理的关联脚本，因为认证的记录认证成功后就没用了，所以这里多加一个清理脚本从DNS上再删除。
--preferred-challenges dns 指定使用DNS方式验证。泛域名证书只能使用这个方式。
--manual-public-ip-logging-ok  可以跳过申请过程中询问是否允许记录申请人的公网IP。
--dry-run  以测试方式执行，不会实际签发证书，用来测试各个参数是否正确的好方法。成功后再次执行把这个参数删除就可以了。

重新签发

注意默认到期前30天内才允许再次申请，不够不会实际签发新证书
下面这个命令是测试命令，真是申请需要删除最后的 –dry-run。

1	sudo ./certbot-auto renew --manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add" --manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete" --dry-run

参数说明：

renew 重新签发证书
--manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add"  指定手动认证模式下认证的关联脚本，我没有在写脚本而是直接使用node启动。这里需要注意很有可能node不在sudo的 PATH 中所以需要手动指定完整目录
--manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete"   指定手动认证模式下验证后清理的关联脚本，因为认证的记录认证成功后就没用了，所以这里多加一个清理脚本从DNS上再删除。
--dry-run  以测试方式执行，不会实际签发证书，用来测试各个参数是否正确的好方法。成功后再次执行把这个参数删除就可以了。

插件项目地址：

NodeDDNS

Maven 安装jar到本地版本库

发表于 2019-06-05 | 更新于 2019-10-30 | 分类于技术文章

项目需要使用 oracle数据库，可是Oracle的jdbc驱动大部分的maven版本库上都没有或者都是旧版本的。但是为了一个驱动自己弄一个maven仓库又闲的有点重。于是本地安装的需求就来了。
下载到oracle的JDBC驱动 ojdbc6-12.1.0.2.jar 这个版本可以在JDK6、JDK7、JDK8下运行。再加一个JDK8下使用的 ojdbc8-12.2.0.1.jar 。

更多的JDBC下载地址请访问 Oracle下载页面

下载完成后把文件放到任意目录都可以，建议路径短点否则一会儿很麻烦，假设我们放到了D盘目录 D:\ojdbc6.jar

执行如下命令：

1	mvn install:install-file "-DgroupId=com.oracle" "-DartifactId=ojdbc6" "-Dversion=12.1.0.2" "-Dpackaging=jar" "-Dfile=D:\ojdbc6.jar"

安装成功后在需要使用的项目的pom.xml文件中加入下面内容就可以使用了。

<!-- Oracle 数据库驱动 -->
<dependency>
    <groupId>com.oracle</groupId>
    <artifactId>ojdbc6</artifactId>
    <version>12.1.0.2</version>
</dependency>

Hexo Next模板添加相册功能

发表于 2019-05-20 | 更新于 2019-10-30

由于Wordpress越来越笨重，在习惯使用Markdown后发现几次升级Wordpress对Markdown支持不太友好。遂决定更换Hexo。
文章的迁移过程比较顺利。最后图库好像默认情况下无法支持。于是只好自己动手。
本文主要参考了 asdfv1929的实现过程，稍作修改。
同时还有两个同样衍生自asdfv1929的文章也在此鸣谢：
如何在Hexo中实现自适应响应式相册功能
 Hexo NexT 博客增加瀑布流相册页面

我的主要实现思路

增加一个page的类型 gallery
修改Next的模板针对gallery数据调用工具类重新渲染页面。使用minigride生成瀑布式布局
调用lazyload 和
增加模板支持新建文章时默认支持

实现过程

修改next模板内容支持 gallery 类型的页面。打开 themes/next/layout/_scripts 目录下的commons.swig文件。修改为如下内容。为了区分被注释部分是我添加的。主要目的是遇到gallery的页面添加minigrid.min.js 和 gallery.js 两个文件。

/*
{% if page.type ==='gallery' %}
{%
  set js_commons = [
    'utils.js',
    'motion.js',
    'minigrid.min.js',
    'gallery.js'
  ]
%}
{% else %} */

{%
  set js_commons = [
    'utils.js',
    'motion.js'
  ]
%}
/*
{% endif %}*/

找到 themes/next/layout 目录复制一份tag.swig文件。重命名为 gallery.swig .

{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{{ __('title.tag') }}: {{ page.tag }} | {{ title }}{% endblock %}

{% block content %}

  {#################}
  {### GALLERY BLOCK ###}
  {#################}
  <div class="post-block tag">

    <div id="posts" class="posts-collapse">
      <div class="collection-title">
        <{% if theme.seo %}h2{% else %}h1{% endif %}>{#
        #}{{ page.tag }}{#
        #}<small>{{ __('title.tag') }}</small>
        </{% if theme.seo %}h2{% else %}h1{% endif %}>
      </div>

      {% for post in page.posts %}
        {{ post_template.render(post) }}
      {% endfor %}
    </div>

  </div>
  {#####################}
  {### END TAG BLOCK ###}
  {#####################}

  {% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

创建gallery.js 和 gallery.css 定义相册样式和相册生成脚本。
gallery.css 保存路径：themes/next/gallery/

.ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto; text-align: center;}
.card {overflow: hidden;transition: .3s ease-in-out; border-radius: 8px; background-color: #ddd;}
.ImageInCard {padding：1px 1px 1px 1px}
.ImageInCard img {padding: 0 0 0 0;}
.TextInCard {line-height: 54px; background-color: #ffffff; font-size: 24px;}

gallery.js 保存路径：themes/next/source/js
这个文件我修改比较大，主要原因是我使用VSCode写markdowd，使用七牛云存储保存图片资源。快速免费的CDN还有图片处理功能很不错。VSCode中有很好用的插件可以实现图片黏贴的同时上传到七牛，所以我这里也省掉了处理本地图片的逻辑，数据源的读取也进行了调整。

gallery = {
    page: 1, //未来支持分页。
    offset: 100, //offset 用于设置照片数量的上限
    init: function () {
        //初始化数据
        var data = [];
        //需要相册功能的页面需要把图片贴进去，再生成的时候会生成到 gallery-data的 div中然后遍历图片生成数组。
        $(".gallery-data").find("img").each(function (index, item) {
            data.push({ "src": item.src, "imageName": item.alt });
        });
        this.render(this.page, data);
    },
    render: function (page, data) {
        var begin = (page - 1) * this.offset;
        var end = page * this.offset;
        if (begin >= data.length) return;
        var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
        for (var i = begin; i < end && i < data.length; i++) {
            imgName = data[i].imageName;
            imgSrc = data[i].src + "-gallery"; //此处添加了七牛的图片处理功能，可以动态压缩缩略图提高访问速度。同时添加水印。
            //这里 250 指的是图片的宽度，可以根据自己的需要调整相册中照片的大小，我这里固定了图片的大小不会有瀑布式交错的效果。
            li += '<div class="card" style="width:250px">' +
                '<div class="ImageInCard" style="height: 250px">' +
                '<a data-fancybox="gallery" href="' + imgSrc + '" data-caption="' + imgName + '">' +
                '<img src="' + imgSrc + '"/>' +
                '</a>' +
                '</div>' +
                '<div class="TextInCard">' + imgName + '</div>' +  //图片下显示文件名作为说明的功能
                '</div>'
        }
        $(".ImageGrid").append(li);
        $(".ImageGrid").lazyload();
        this.minigrid();
    },
    minigrid: function () {
        var grid = new Minigrid({
            container: '.ImageGrid',
            item: '.card',
            gutter: 12
        });
        grid.mount();
        $(window).resize(function () {
            grid.mount();
        });
    }
}
gallery.init();

修改文件 themes/next/layout/page.swig 这里要自改两段第一段是 block title 部分中 page.type === “gallery”的两行是新加的。

{% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === 'categories' and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === 'tags' and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#
  #}{% elif page.type === 'schedule' and not page.title %}{#
    #}{{ __('title.schedule') + page_title_suffix }}{#
  
  #}{% elif page.type === "gallery" and not page.title %}{#
    #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

第二部分在 PAGE Body 部分，同样也是 elif page.type === ‘gallery’部分是新加的。这里的

{% elif page.type === 'schedule' %}
  {% include 'schedule.swig' %}
{% elif page.type === 'gallery' %}
  {### 生成好的图片会在这里所为数据源 ###}
  <div style = "display:none" class="gallery-data">{{ page.content }}</div>
  {### 下面这个是相册的真实容器，gallery.js会进行处理把数据源的图片添加到这里。###}
  <div class="ImageGrid"></div>
{% else %}
  {{ page.content }}
{% endif %}

修改 themes/next/_config.yml 找到 Lazyload和 Fancybox的配置项分别启动

*1. 启用 lazyload

1
2
3

# Vanilla JavaScript plugin for lazyloading images.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

启用 fancybox

# Fancybox. There is support for old version 2 and new version 3.
# Choose only one variant, do not need to install both.
# To install 2.x: https://github.com/theme-next/theme-next-fancybox
# To install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

找到vendors部分对应的 Lazyload和Fancybox配置好cdn

配置 fancybox

# Internal version: 2.1.5 & 3.5.7
# See: https://fancyapps.com/fancybox
# Example:
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
# fancybox_css: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css
fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

配置Lazyload

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
# Example:
# lazyload: //cdn.jsdelivr.net/npm/jquery-lazyload@1/jquery.lazyload.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js
lazyload: //cdn.jsdelivr.net/npm/jquery-lazyload@1/jquery.lazyload.min.js

配置结束