ucmir183

ucmir183 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织 artacode.com 编辑
编辑

个人动态

ucmir183 发布了文章 · 2020-10-13

Base64编码的前世今生

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。三个字节有24个比特,对应于4个Base64单元,即3个字节可表示4个可打印字符。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同。一些如uuencode的其他编码方法,和之后binhex的版本使用不同的64字符集来代表6个二进制数字,但是它们不叫Base64。

起因

计算机以二进制形式(0和1)进行通信,但是人们通常希望与更丰富的表单数据(例如文本或图像)进行通信。 为了在计算机之间传输此数据,首先必须将其编码为0和1,然后发送,然后再次解码。 以文本为例-有许多不同的方法可以执行此编码。 如果我们都可以同意一个编码,那就简单得多了,但不幸的是事实并非如此。
最初创建了许多不同的编码(例如Baudot码),每个字符使用不同数量的位,直到最终ASCII成为每个字符7位的标准。 但是,大多数计算机将二进制数据存储在每个字节由8位组成的字节中,因此ASCII不适合传输此类数据。 有些系统甚至会擦除最高位。 此外,跨系统的行尾编码的差异意味着有时还会修改ASCII字符10和13。
为了解决这些问题,引入了Base64编码。 这样,您就可以将框架字节编码为已知可以安全发送而不损坏的字节(ASCII字母数字字符和几个符号)。 缺点是使用Base64编码消息会增加其长度-每3个字节的数据会编码为4个ASCII字符。
为了可靠地发送文本,您可以首先使用所选的文本编码(例如UTF-8)将其编码为字节,然后再对Base64进行编码,将生成的二进制数据编码为可安全发送为ASCII的文本字符串。 接收者将不得不逆转此过程以恢复原始消息。 当然,这要求接收者知道使用了哪种编码,并且该信息通常需要单独发送。
从历史上看,它已用于对电子邮件中的二进制数据进行编码,其中电子邮件服务器可能会修改行尾。 一个更现代的示例是使用Base64编码将图像数据直接嵌入HTML源代码中。 在这里,有必要对数据进行编码,以避免像“ <”和“>”这样的字符被解释为标签。

原理

base64 加密原理,是将待转换字符串转换为二进制并以三个字为一组(数据不足用 0 补足),每 6 位为一个索引组转换为十进制索引,通过索引在 base64 索引表中找到对应的字符作为编码后的字符(若原数据长度不是 3 的倍数时则对 3 取余余数为 1,则在编码结果后加2个=;若余数为 2,则在编码结果后加 1 个 =。)。

转换流程
base64索引表

base64 转换实例

以 helloworld 为例转换过程如下:
base64转换实例
经过上述步骤转后字符串为:aGVsbG93d29ybGQ=,到此一个完整的转码例子便完成了。

应用

base64 在需要网络通讯的场景下,有着非常广泛的应用场景,比如邮件的附件和图象传输,html img 标签的 src 属性也可以是 base64 编码的图片,还有我们常用的各类证书(支付证书,ssl 证书)的公钥和私钥..

Summary

base64 是一个很优秀的编码方式,他很好的解决了复杂文件在传输中的问题,也因此被广泛的应用在各种场景之中。关于 base64 的使用,你还需要知道如下几点:

  1. base64 转码后的长度会有所变化,会比源数据的长度多出大约 1/3
  2. base64 不具有加密特性,因此他不适用于加密的场景
  3. 由于 base64 字符中会有 +,/ 等字符,因此如果需要 url 传参的时候注意需要使用 URL 编码一下,否则有可能会导致接受到的数据无法正常解密的情况

References

维基百科
Why do we use Base64?
What is base 64 encoding used for?

查看原文

赞 0 收藏 0 评论 0

ucmir183 发布了文章 · 2020-08-28

PHP-FFMpeg 安装

安装 FFMPEG

wget http://download.bt.cn/install/ext/ffmpeg.sh && sh ffmpeg.sh

安装完后可输入以下命令是否安装成功

ffmpeg -version

删除禁用函数

proc_open, exec, system

安装 PHP-FFMpeg

composer require php-ffmpeg/php-ffmpeg

常见问题

Executable not found, proposed : avprobe, ffprobe

php-fpm 在执行 FFMPEG 的时候,没有找到 ffprobeffmpeg 解决办法如下:

命令行解决

  1. 通过 shell 确定文件位置
whereis ffprobe
/usr/local/bin/ffprobe
which ffmpeg
/usr/local/bin/ffmpeg
  1. 在初始化 FFMpeg 的时候将文件位置写入
 $ffmpeg = FFMpeg::create([
            'ffmpeg.binaries' => '/usr/local/bin/ffmpeg',
            'ffprobe.binaries' => '/usr/local/bin/ffprobe',
 ]);

PHP 代码直接解决

// 写入 WWW 用户的环境变量
putenv('PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:$PATH');
// 通过 exec 函数找到文件对应位置
$ffmpeg = FFMpeg::create([
     'ffmpeg.binaries' => exec('which ffmpeg'),
     'ffprobe.binaries' => exec('which ffprobe'),
]);

虽然看似两种办法,其实解决思路是一致的,都是要指定 ffmpegffprobe 文件的位置。理论上直接在服务器上将 www 用户的环境变量加入 ffmpegffprobe 也可以解决此问题(没有测试,不保证有效,有兴趣的可以自行验证)。

Reference

PHP-FFMpeg

Executable not found, proposed : avprobe, ffprobe

一键安装ffmpeg命令

查看原文

赞 0 收藏 0 评论 0

ucmir183 发布了文章 · 2020-05-08

linux 发行版 manjaro 安装指南

manjaro

Linux 历史

1994 年 3 月,Linux1.0 版正式发布,Marc Ewing 成立 Red Hat 软件公司,成为最著名的 Linux 经销商之一。早期 Linux 的引导管理程序(boot loader)使用 LILO(Linux Loader),早期的 LILO存在着一些难以容忍的缺陷,例如无法识别 1024 柱面以后的硬盘空间,后来的 GRUB(GRand Unified Bootloader)克服这些缺点,具有‘动态搜索内核文件’的功能,可以让用户在引导的时候,自行编辑引导设置系统文件,透过 ext2 或 ext3 文件系统中加载 Linux Kernel(GRUB通过不同的文件系统驱动可以识别几乎所有 Linux 支持的文件系统,因此可以使用很多文件系统来格式化内核文件所在的扇区,并不局限于 ext 文件系统)。

今天由 Linus Torvalds 带领下,众多开发共同参与开发和维护 Linux 内核。理查德·斯托曼领导的自由软件基金会,继续提供大量支持 Linux 内核的GNU组件。一些个人和企业开发的第三方的非GNU组件也提供对Linux 内核的支持,这些第三方组件包括大量的作品,有内核模块和用户应用程序和库等内容。Linux社区或企业都推出一些重要的 Linux 发行版,包括 Linux 内核、GNU 组件、非 GNU 组件,以及其他形式的软件包管理系统软件。

什么人适合 linux 系统

  1. 对 Linux 保持高敏感度的人(运维人员,后端开发...)
  2. 有 Geek 精神喜欢折腾的人。
  3. 对 Windows 生厌, 想要尝试新系统的人,不差钱可以上 MAC。

Linux 发行版之 Manjaro

Manjaro Linux 基于 Arch Linux,但拥有自己独立的软件仓库。Manjaro 的目标是让强大的 Arch 更方便用户使用,Manjaro 使用著名的 Pacman 且可以直接利用 AUR 上的資源。Manjaro 本身使用三个软件仓库:不稳定库,即含有那些不成熟的 Arch 包,这些包与 Arch 源有 1-2 天 的延后;测试库,每周同步一次,包含那些 Arch 不稳定源的包;以及稳定库,包含那些由开发团队确认稳定的软件。
Manjaro Linux 拥有开箱即用的多媒体支持、成熟的硬件识别软件,并支持多核 CPU。Manjaro 拥有命令行安装器和图形安装器。同时滚动更新也意味着用户无需通过重装系统或系统更新来更新自己的操作系统。软件包管理由 Pacman 处理,未来也计划提供一个 GUI 版本。Manjaro 有 32 位 和 64 位 的版本,且都与 Arch 兼容。可对其进行配置,选择是与使用稳定库的 Arch 同步(默认),或者是与不稳定的Arch 库同步。

Manjaro 软件库由自带的 BoxIt 工具管理,BoxIt 类似git
Manjaro 对显卡驱动的兼容性高,可自主选择安装开源驱动或者闭源驱动。

XFCE

XFCE 是一个轻量级的桌面环境,,它被广泛的运用于各种 UNIX 中,它非常的小巧,运行程序很快,节省系统资源。XFCE 融合了 UNIX 哲学中的“模块化”和“可重用性”这两个极为重要的思想。它包含了很多的组件,而正是这些组件构成了整个 XFCE 的强大。它轻量及的特点,也是拯救家中旧电脑的必备神器。

KDE

由德国人创立而开发的桌面,据说还受到德国政府的资助。KDE 桌 面默认的主题与布局接近于 Windows Vista,因此 Windows 用户很容易熟悉这个桌面。不过,KDE 桌面具有强大的自定义功能,可以根据自己需要来折腾自己的桌面。

GNOME

由 GUN 软件计划组织创立而开发的桌面,有自己的一套完整的风格,支持扩展插件与主题更换,同时也为越来越多的触摸设备做出优化。高颜值的 UI 设计,也在这个颜值即正义的时代,迎来了越来越多人的青睐。

Manjaro ISO 下载地址

Manjaro 下载地址

WINDOWS 下 U盘启动工具制作(虚拟机安装忽略该章节)

U盘安装Linux必备软件 Rufus 下载
打开下载好的 refus 软件,相关设置如下,注意点了开始之后,选择DD模式写入,ISO 模式写入的启动不了。
Rufus

Rufus-check

启动安装

将制作好的 U盘,插入需要安装系统电脑,进入 BIOS 关闭安全启动,保存,重启,按F9,进入启动选项,选择 uefi usb3.0 的启动项


关于 driver 选项有连个 free 和 nonfree, free 为社区提供的开源版, nonfree 为 AMD 或 Nvidia 厂商提供的驱动版本,也意味这有更好的性能和更少的 bug,因而建议选择 nofree 选项。
在所有选项配置完毕后,选择 Boot: Manjaro x86_64 gnome 进入安装界面

launch-install

点击 Launch install 启动安装程序

选择语言

选择安装语言

选择位置

选择未知

选择键盘排布方式

选择键盘排布方式

分区

主分区、扩展分区、逻辑分区 关系

磁盘分区有三种: 主分区,扩展分区,逻辑分区。
通常情况下,一个硬盘中最多能够分割四个主分区。因为硬盘中分区表的大小只有64Bytes,而分割一个分区就需要利用16Bytes空间来存储这个分区的相关信息。由于这个分区表大小的限制,硬盘之能够分给为四个主分区。如果此时一块硬盘有120个G,而管理员划分了4个主分区,每个主分区的空间为20个G。那么总共才用去了80G的空间。这块硬盘剩余的40G空间就将无法使用。这显然浪费了硬盘的空间。
为了突破这最多四个主分区的限制,Linux系统引入了扩展分区的概念。即管理员可以把其中一个主分区设置为扩展分区(注意只能够使用一个扩展分区)来进行扩充。而在扩充分区下,又可以建立多个逻辑分区。也就是说,扩展分区是无法直接使用的,必须在细分成逻辑分区才可以用来存储数据。通常情况下,逻辑分区的起始位置及结束位置记录在每个逻辑分区的第一个扇区,这也叫做扩展分区表。在扩展分区下,系统管理员可以根据实际情况建立多个逻辑分区,将一个扩展分区划割成多个区域来使用。

分区说明

  • /boot 存放系统启动文件 800M-2G(ext4 文件系统)
  • swap 交换空间,交换空间大小与计算机内存内存存在关联。内存在8 G 以下设置 内存容量 * 2,8 G 以上设置和内存同等大小即可。

    • 当内存不够用时,系统会将长时间没有运行的程序的缓存从内存中写入 swap 分区中,并释放该程序所占用的内存给其他程序使用
    • Linux 电源管理有休眠模式,系统会将内存中程序运行状态存储在 swap 中然后设备进入完全断电状态,当下次启动计算机时系统会从 swap 恢复休眠前的计算机运行状态。
  • / 根目录, 25G 左右 (etx4 文件系统)
  • /home (etx4 文件系统) Linux 系统中用户的家文件,此目录空间越大越好。

新建分区表

新建分区表

点击新建分区表,选择主引导记录,点击 OK 完成分区表创建。

创建分区

  1. 选择空闲空间
  2. 点击创建进行分区创建

创建 boot 分区

创建 swap (交换空间)

创建根分区

创建 home 分区

设置用户

选择 office 套件安装

建议不安装,安装完系统后可以用 wps for linux 替代

安装

摘要部分安装前确认步骤,如果没有需要调整的配置项,点击安装进入系统安装过程,安装完成后重启拔掉 U盘,进入系统就可以了。

安装进度在 95% 左右,有时会出现卡住的情况,是因为国内连接外国网络速度过慢导致的,可以断开网络跳过。

安装后配置

更换源

$ sudo pacman -Syy
$ sudo pacman-mirrors -i -c China -m rank
$ sudo pacman -Syyu

使用root权限编辑/etc/pacman.conf增加以下内容

[archlinuxcn]
SigLevel = Optional TrustedOnly
Server =https://mirrors.ustc.edu.cn/archlinuxcn/$arch

然后执行

$ sudo pacman -Syy && sudo pacman -S archlinuxcn-keyring

安装中文输入法

sudo pacman -S fcitx-lilydjwg-git
sudo pacman -S fcitx-sogoupinyin
sudo pacman -S fcitx-im         # 全部安装

编辑~/.xprofile文件,在文件末尾增加以下内容

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS="@im=fcitx"

安装 中文字体

sudo pacman -S ttf-roboto noto-fonts ttf-dejavu
# 文泉驿
sudo pacman -S wqy-bitmapfont wqy-microhei wqy-microhei-lite wqy-zenhei
# 思源字体
sudo pacman -S noto-fonts-cjk adobe-source-han-sans-cn-fonts adobe-source-han-serif-cn-fonts

安装 wps

sudo pacman -S wps-office
sudo pacman -S ttf-wps-fonts

AUR助手(以防官方仓库没有想要的软件)

sudo pacman -S yay

安装 chrome 浏览器

sudo pacman -S google-chrome

总结

关于 manjaro 安装已经告一段落,参考上述操作,已经搭建出一个可用的 Linux 系统。值得注意的是,Linux 系统与 Windows 系统不同,在 Linux 中,你可以拥有很高的权限,即便是系统核心文件也是可以进行操作的,因此如果你是刚刚接触 Linux 的用户,养成及时备份的习惯是非常明智的选择。最后, 欢迎入坑,我相信在以后 Linux 使用中你一定是痛并快乐着的,坚持下来,时间会给正确的选择以回报。

博客地址

查看原文

赞 4 收藏 2 评论 0

ucmir183 发布了文章 · 2019-06-21

vs code 调试远程代码

简介

Visual Studio Code Remote - SSH 可以打开远程计算机或容器中的文件(计算机或容器中需要运行 SSH Server),而且可已充分利用 VS Code 的一切特性.一旦连接上服务器,可以与任意位置的文件进行交 由于 Remote-SSH 扩展运行命令行和其他扩展是在远程主机上,因此本地不需要代码,就可以正常运行.
Remote-SSH示意图

入门

  1. 确保本机已经安装 VS CODE
  2. 确保本机已安装 SSH client, 并且确保远程主机已安装 SSH server
  3. 为本机 VS CODE 安装 Remote Development 扩展

连接远程主机

连接配置

Ctrl + Shift + p 输入 Configure SSH Hosts... 回车,设置远程主机信息,配置信息如下

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host oa-online
    HostName 远程主机Ip
    User root 
  • Host 远程主机名称
  • HostName 远程主机IP
  • User 连接用户名

用户名密码连接

在配置文件 settings.json 加入 "remote.SSH.showLoginTerminal": true
Ctrl + Shift + p 输入 Remote-SSH:Connect to Host... 回车, 选择配置的远程主机,在命令行处输入远程主机密码,即可连接远程主机
此方式会导致每次都需要输入密码,相对来说比较麻烦,推荐方式二(SSH 密钥连接)

密钥连接

检查 c盘->用户->自己的用户名->.ssh 是否有id_rsaid_rsa.pub文件,如果没用使用 ssh-keygen 命令生成密钥文件
id_rsa.pub 里的内容复制到远程主机的'~/.ssh/authorized_keys' 文件中
Ctrl + Shift + p 输入 Remote-SSH:Connect to Host... 回车, 选择配置的远程主机,在命令行处输入远程主机密码,即可连接远程主机.

插件安装

VS Code 支持安装插件到远程主机,以增加远程代码调试的流畅性. VS Code 支持两种方式安装插件到远程主机

  1. 同步本地已安装插件到远程主机
  2. 搜索插件直接安装到远程主机

需要注意安装插件到远程主机,需要在与远程主机建立好连接后,才可以进行远程主机插件的安装
搜索插件安装到远程主机
安装插件到远程主机
同步本地插件到远程主机
同步本地插件到远程主机
本地插件列表及远程主机插件列表
本地插件列表及远程主机插件列表

远程主机命令行使用

Ctrl + ~ 打开终端窗口,点 + 新建一个
VS Code 连接到远程主机后,就可以直接使用终端窗口在远程主机上执行终端命令

总结

随着 Remote Development 插件的上线标志者远程开发的时代到来,通过一些简单的了解 VS Code 对远程开发的实现已经是一个比较完善的阶段, 对于一个 VS Code 的重度使用者来说, 这也将一定程度减少对XshellXFTP 的依赖.
目前 Remote Development 还不支持 32 位系统, 据官方信息应该在很快的版本更新中就可以添加对 32 为远程主机的支持,期待 VS Code 将此功能越做越好.

参考连接

VS Code Remote Developmen
Remote Development using SSH
博客地址

查看原文

赞 0 收藏 0 评论 0

ucmir183 关注了专栏 · 2019-05-24

CODING

CODING(https://coding.net)提供给企业用户全套 DevOps 研发管理工具,包括项目管理,代码托管,制品管理等功能,有效提高软件研发团队的代码质量和交付速度。

关注 3020

ucmir183 发布了文章 · 2019-04-13

electron 改变窗体大小

相关链接:
electron-vue 集成 element-ui
在开发 electron 的时候遇到了需要在 render 中修改 BrowserWindow 窗口大小的方式,经过一番尝试,有两种方法实现:

  1. 通过 ipcRendereripcMain 的通讯来实现
  2. 通过 renderremote 模块来实现

ipcRenderer 和 ipcMain 实现

实现原理是 render 进程通过 ipcRendereripcMain 进行通讯以通知 main 进程操作窗体操作。

render 引入 ipcRenderer

let {ipcRenderer} = require('electron')

发送同步消息给 main 进程

ipcRenderer.sendSync('synchronous-message','logined')

main 中监听同步消息,并处理 logined 消息操作

ipcMain.on('synchronous-message', (event, arg) => {
  if (arg === 'logined') {
    mainWindow.resize(1000, 1000)
  }
})

remote 方式是实现

引入 remote 模块

const { remote } = require('electron')

调用 remote 方法中的 getCurrentWindow 获取当前窗体对象,然后进行修改窗体属性

remote.getCurrentWindow().setSize(1000, 1000)

总结

上面实现方式可以看出 remote 方式其实是比较简单和方便的,我个人更倾向于用第二种方式实现此功能。其实在 remote 模块的底层实现也是通过发布同步消息的方式来实现与 main 进程通讯的,本质上和我们实现的方式一是一样的,既然 eletron 已经做了一个很好的封装,完全也没有必要舍近求远 直接用 remote 方式实现是一个比较优雅的方式。

参考链接

electron remote
electron ipcMain
electron ipcRenderer

查看原文

赞 1 收藏 1 评论 0

ucmir183 发布了文章 · 2019-04-13

electron-vue 集成 element-ui

简介

什么是 electron

Electron 是由 Github 开发,用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中,并将其打包为 Mac ,Windows 和 Linux 系统下的应用来实现这一目的。

Electron 于 2013 年作为构建 Github 上可编程的文本编辑器 Atom 的框架而被开发出来。这两个项目在2014春季开源。

目前它已成为开源开发者、初创企业和老牌公司常用的开发工具

什么是 electron-vue

electron-vue 是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等

什么是 elecment ui

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型

安装 electron-vue

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli  //如果你已经安装忽略此处
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

运行结果如下:

安装 element-ui

npm i element-ui -S

/my-project/src/renderer/main.js 中引入 element ui

// element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

此时就可以在任意 .vue 文件中添加和使用 element-ui 元素了。

<el-button @click="message" type="success" icon="el-icon-search" round>默认按钮</el-button>

运行效果如下:

总结

整个安装过程并不复杂,
为什么是 electron 以我目前的技术栈来讲 electron 是最容易上手的开发桌面程序的一个途径,尽管他也有这样或那样的缺点,但总归来说还是瑕不掩瑜,此番安装成功,接下来就开始了 electron 开发之旅

参考链接

electron-vue 文档
element ui
博客地址

查看原文

赞 1 收藏 0 评论 0

ucmir183 赞了文章 · 2019-04-05

使用 Electron 创建和管理窗体

使用 Electron 创建和管理窗体

此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .

Electron 中的 BrowserWindow 模块允许您创建新的浏览器窗口或管理现有的浏览器窗口.

每个浏览器窗口都是一个单独的进程, 称为渲染器进程. 这个进程, 像控制应用程序生命周期的主进程一样,可以完全访问 Node.js API.

查看 完整的 API 文档 .

创建一个新窗体

支持: Win, macOS, Linux | 进程: Main

通过 BrowserWindow 模块可以在应用程序中创建新窗口. 这个主进程模块可以和渲染器进程与 remote 模块一起使用, 如本示例中所示.

创建新窗口时有很多参数. 示例中用了一部分, 完整的列表请查看 API 文档.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const newWindowBtn = document.getElementById('new-window')

newWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html')
  let win = new BrowserWindow({ width: 400, height: 320 })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
  win.show()
})

高级技巧

使用不可见的浏览器窗口来运行后台任务.

您可以将新的浏览器窗口设置为不显示 (即不可见), 以便将该渲染器进程作为 JavaScript 的一种新线程附加在应用程序后台运行. 您可以通过在定义新窗口时将 show 属性设置为 false 来执行此操作.

var win = new BrowserWindow({
  width: 400, height: 225, show: false
})

管理窗体状态

支持: Win, macOS, Linux | 进程: Main

在这个示例中, 我们创建一个新窗口, 并监听 moveresize 事件. 点击示例按钮, 并更改新窗口大小和位置, 然后在上方查看输出的大小和位置信息.

有很多方法用于控制窗口的状态, 如大小, 位置和焦点状态以及监听窗口更改的事件. 完整的列表请查看 API 文档.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const manageWindowBtn = document.getElementById('manage-window')
let win

manageWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html')
  win = new BrowserWindow({ width: 400, height: 275 })
  win.on('resize', updateReply)
  win.on('move', updateReply)
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
  win.show()
  function updateReply () {
    const manageWindowReply = document.getElementById('manage-window-reply')
    const message = `大小: ${win.getSize()} - 位置: ${win.getPosition()}`
    manageWindowReply.innerText = message
  }
})

窗体事件: 获取和失去焦点

支持: Win, macOS, Linux | 进程: Main

在这个示例中, 我们创建一个新窗体并监听它的 blur 事件. 点击示例按钮创建一个新的模态窗体, 然后点击父级窗体来切换焦点. 你可以通过点击 示例获取焦点 按钮来让示例窗体再次获得焦点.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')

const manageWindowBtn = document.getElementById('listen-to-window')
const focusModalBtn = document.getElementById('focus-on-modal-window')
let win

manageWindowBtn.addEventListener('click', function () {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal-toggle-visibility.html')
  win = new BrowserWindow({ width: 600, height: 400 })
  win.on('focus', hideFocusBtn)
  win.on('blur', showFocusBtn)
  win.on('close', function () {
    hideFocusBtn()
    win = null
  })
  win.loadURL(modalPath)
  win.show()
  function showFocusBtn (btn) {
    if (!win) return
    focusModalBtn.classList.add('smooth-appear')
    focusModalBtn.classList.remove('disappear')
    focusModalBtn.addEventListener('click', function () { win.focus() })
  }
  function hideFocusBtn () {
    focusModalBtn.classList.add('disappear')
    focusModalBtn.classList.remove('smooth-appear')
  }
})

创建一个无框窗体

支持: Win, macOS, Linux | 进程: Main

图片描述

无框窗口就是一个没有 "chrome" 的窗口, 比如工具栏,标题栏,状态栏,边框等. 你可以在创建窗体时通过设置 framefalse 来创建一个无框的窗体.

渲染器进程

const BrowserWindow = require('electron').remote.BrowserWindow
const newWindowBtn = document.getElementById('frameless-window')

const path = require('path')

newWindowBtn.addEventListener('click', function (event) {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal.html')
  let win = new BrowserWindow({ frame: false })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
  win.show()
})

窗体也可以有一个透明的背景. 通过设置 transparent 参数为 true, 你也可以让你的无框窗口透明:

var win = new BrowserWindow({
  transparent: true,
  frame: false
})

更多内容, 请查阅 无框窗体文档 .

如果这边文章对您有帮助, 感谢 下方点赞 或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.

查看原文

赞 9 收藏 14 评论 0

ucmir183 发布了文章 · 2019-03-27

VS Code 断点调试golang

实现效果

安装 delve

windows

go get -u github.com/go-delve/delve/cmd/dlv

linux

方式一:
go get -u github.com/go-delve/delve/cmd/dlv
方式二

$ git clone https://github.com/go-delve/delve.git $GOPATH/src/github.com/go-delve/delve
$ cd $GOPATH/src/github.com/go-delve/delve
$ make install
注意: 若果你go版本为1.5需要设置GO15VENDOREXPERIMENT=1

OSX

$ go get -u github.com/go-delve/delve/cmd/dlv

执行上述代码前,确保你电脑上有编译工具

设置 launch.json 配置文件

ctrl+shift+p 输入 Debug: Open launch.json 打开 launch.json 文件,如果第一次打开,会新建一个配置文件,默认配置内容如下

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "program": "${fileDirname}",
            "env": {},
            "args": []
        }
    ]
}

常见属性如下

属性介绍
name调试界面下拉选择项的名称
type设置为go无需改动,是 vs code 用于计算调试代码需要用哪个扩展
mode可以设置为 auto, debug, remote, test, exec 中的一个
program调试程序的路径(绝对路径)
env调试时使用的环境变量。例如:{ "ENVNAME": "ENVVALUE" }
envFile包含环境变量文件的绝对路径,在 env 中设置的属性会覆盖 envFile 中的配置
args传给正在调试程序命令行参数数组
showLog布尔值,是否将调试信息输出
logOutput配置调试输出的组件(debugger, gdbwire, lldbout, debuglineerr, rpc),使用,分隔, showLog 设置为 true 时,此项配置生效
buildFlags构建 go 程序时传给 go 编译器的标志
remotePath远程调试程序的绝对路径,当 mode 设置为 remote 时有效

在 debug 配置中使用 VS Code 变量

  • ${workspaceFolder} 调试 VS Code 打开工作空间的根目录下的所有文件
  • ${file} 调试当前文件
  • ${fileDirname} 调试当前文件所在目录下的所有文件

使用构建标记(build tags)

如果需要使用构建标记(e.g. go build -tags=whatever_tag)在参数 buildFlags 里写入 -tags=whatever_tag" 即可,支持多标签,使用单引号将标签包围,例如: "-tags='first_tag second_tag third_tag'"

debug 配置代码片段

可以在 launch.json 文件中,使用 Go 关键词调出 debug 配置项的代码片段。

调试当前文件配置片段

{
    "name": "Launch file",
    "type": "go",
    "request": "launch",
    "mode": "auto",
    "program": "${file}"
}

调试单个测试用例配置片段

{
    "name": "Launch test function",
    "type": "go",
    "request": "launch",
    "mode": "test",
    "program": "${workspaceFolder}",
    "args": [
        "-test.run",
        "MyTestFunction"
    ]
}

调试包中所有的测试用例配置片段

{
    "name": "Launch test package",
    "type": "go",
    "request": "launch",
    "mode": "test",
    "program": "${workspaceFolder}"
}

调试构建二进制文件配置片段

{
    "name": "Launch executable",
    "type": "go",
    "request": "launch",
    "mode": "exec",
    "program": "absolute-path-to-the-executable"
}

远程调试

远程调试需要在服务器上期一个无头的 Delve 服务
例如:

$ dlv debug --headless --listen=:2345 --log --api-version=2

如果需要传给参数到程序中则需要将参数传入到 Delve 服务中
例如:

dlv debug --headless --listen=:2345 --log -- -myArg=123

launch.json 配置如下:

{
    "name": "Launch remote",
    "type": "go",
    "request": "launch",
    "mode": "remote",
    "remotePath": "服务器调试文件的目录(绝对路径)",
    "port": 2345,
    "host": "127.0.0.1",
    "program": "本地调试文件所在的目录(绝对路径)",
    "env": {}
}
  • 将上述配置中的 hostport 修改 Delve 服务所在的服务器ip和其监听的端口号。
  • remotePath 应该配置为调试文件的绝对路径
  • program 需要配置本地机器文件所在的绝对路径,是 remotePath 的一个副本

配置完成后,点击调试按钮,VS Code 将会项远程的 dlv 服务发出调试指令,而不是使用本机的 dlv 实例。

参考链接

Debugging Go code using VS Code
Delve Installation

查看原文

赞 11 收藏 8 评论 1

ucmir183 发布了文章 · 2019-03-11

vscode 自定义代码片段

实现效果

起因

最近在写一个全新的项目,在项目中频繁创建各种类,这就导致很多重复的东西需要频繁的写,例如类名,命名空间,继承关系...那么有没有一种 办法能解决这个问题呢?

提出设想

我想起了,最初用 sublime text 的时候,可以利用代码片段功能大段的生成html代码,当时就觉得十分的方便,那么 vscode 有没有这个功能呢?经过 google 之后我知道 vscode 是有代码片段功能的。既然有了想法,也具备了基础实施条件,那么接下来开始尝试实现之前的想法。

资料查询

经过一番 google 后发现对于 vscode snippet 介绍都在相对基础的简单应用(只是一些插入固定代码和光标介绍),者显然无法实现我们生成类名和明明空间的想法,google 无果,那么只能看看 vscode 官方文档果然有意想不到的收获,看完官网介绍后,基本就确定此路是可行的。

snippet 示例

File > Preferences (Code > Preferences on macOS) 中选择 User Snippets 在弹出框里选择对应的代码片段语言,我这里使用的是php

 "Print to console": {
         "prefix": "log",
         "body": [
             "console.log('$1');",
             "$2"
         ],
         "description": "Log output to console"
    }

在打开的 php.json 中有示例代码:

  • Print to console 代码片段名称
  • prefix 插件前缀
  • body 插件内容可以是字符串,也可以为数组,若为数组每个元素都做为单独的一行插入。
  • description 插件描述

Snippet 语法

制表位(Tabstops)

使用制表位(Tabstops)可是在代码片段中移动光标位置,使用$1,$2来指定光标的位置,数字代表光标的移动的顺序,值得注意的时$0代表光标的最后位置。如果有多个相同的制表位(Tabstops)会在编译器里同时出现多个光标(类似编译器的块编辑模式)。

占位符(Placeholders)

占位符(Placeholders) 是带默认值的制表位(Tabstops),占位符(Placeholders)的文本会被插入到制表位(Tabstops)所在位置并且全选以方便修改,占位符(Placeholders)可以嵌套使用,比如${1:another ${2:placeholder}}

选择项(Choice)

占位符(Placeholders)可以有多选值,每个选项的值用 , 分隔,选项的开始和结束用管道符号(|)将选项包含,例如: ${1|one,two,three|},当插入代码片段,选择制制表位(Tabstops)的时候,会列出选项供用户选择。

变量(Variables)

使用 $name 或者 ${name|default} 可以插入变量的值,如果变量未被赋值则插入 default 的值或者空值 。当变量未被定义,则将变量名插入,变量(Variables)将被转换为占位符(Placeholders)
系统变量如下

  • TM_SELECTED_TEXT 当前选定的文本或空字符串
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标下的单词的内容或空字符串
  • TM_LINE_INDEX 基于零索引的行号
  • TM_LINE_NUMBER 基于一索引的行号
  • TM_FILENAME 当前文档的文件名
  • TM_FILENAME_BASE 当前文档的文件名(不含后缀名)
  • TM_DIRECTORY 当前文档的目录
  • TM_FILEPATH 当前文档的完整文件路径
  • CLIPBOARD 剪切板里的内容

插入当前日期或时间:

  • CURRENT_YEAR 当前年(四位数)
  • CURRENT_YEAR_SHORT 当前年(两位数)
  • CURRENT_MONTH 当前月
  • CURRENT_MONTH_NAME 本月的全名(’七月’)
  • CURRENT_MONTH_NAME_SHORT 月份的简称(’Jul’)
  • CURRENT_DATE 当前日
  • CURRENT_DAY_NAME 当天的名称(’星期一’)
  • CURRENT_DAY_NAME_SHORT 当天的短名称(’Mon’)
  • CURRENT_HOUR 当前小时
  • CURRENT_MINUTE 当前分钟
  • CURRENT_SECOND 当前秒

当前语言的行注释或块注释:

  • BLOCK_COMMENT_START 块注释开始标识,如 PHP /* 或 HTML <!--
  • BLOCK_COMMENT_END 块注释结束标识,如 PHP */ 或 HTML -->
  • LINE_COMMENT 行注释,如: PHP // 或 HTML <!-- -->

下面片则会生成 PHP / Hello World /

{
    "hello": {
        "scope": "php",
        "prefix": "hello",
        "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
    }
}

变量转换(Variable transforms)

变量转换(Variable transforms) 允许变量在插入前改变变量的值,变量转换(Variable transforms)由三部分组成

  1. 正则匹配:使用正则表达式匹配变量值,若变量无法解析则值为空。
  2. 格式串:允许引用正则表达式匹配组。格式串允许条件插入和做简单的修改。
  3. 正则表达式匹配选项

下面例子是使用变量转换(Variable transforms)将带后缀的文件名转换为不带后缀的文件名

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> 无选项设置
  |           |         |
  |           |         |-> 引用捕获组的第一个分组内容
  |           |             
  |           |
  |           |-> 匹配后缀前的所有字符串
  |               
  |
  |-> 文件名(带后缀)

需求实现

要解决的问题

生成Class 的命名空间、类名、选择继承关系

问题分析

项目目录结构如下所示

peoject
|
|----application
|--------admin
|------------services
|----------------TestServices.php

类名可以直接使用 TM_FILENAME_BASE 变量的值即可,命名空间则需要使用 TM_DIRECTORY 变量,以 TestServices.php 为例,TM_DIRECTORY 得到的目录为 peoject\application\admin\services我们只需要将peoject\application\ 替换为 app 得到 app\admin\services 就是我们的明明空间了,至于继承就是一个选择项就可以了。既然已经全部知道该如何实现,接下来就是代码实现的过程了。

代码实现

"service-construct" :{
        "prefix": "gen",
        "body": [
            "namespace ${TM_DIRECTORY/.*application/app/};\n",
            "class $TM_FILENAME_BASE extends ${1|BaseService,BaseController,BaseModel|}",
            "{",
            "\tpublic function __construct() \r\n    {\n\t\t\\$this->model = new \r\n\t}",
            "}"
        ],
        "description": "generate service class"

    },

一些思考

上述代码基本上完成了我要实现的功能,但是也存在了一些问题,例如:我现在是用 windows 操作系统,因而TM_DIRECTORY 得到的目录为 peoject\application\admin\services 若是 linux 系统,此代码片段是无法正常的生成命名空间的,我做了一些资料的搜索,代码片段并没有自定义变量的功能(也许可以,只是我么有找到方法,如果有知道的大牛,请留言赐教。
随着对 vscode snippet 的深入了解,我之前所设想的方案要用代码片段的方式实现是有些困难的,vscode 将其作为一个快速生成代码的解决方案,我们所写的代码片段相当于一个带有填空模板,而对代码片段的应用就是生成带有制表符的代码模板,然后根据制表符顺序补全代码。
至于这个不完美的方案,我打算再研究一下代码片段是否能完全实现,如果依旧解决不了,就选用其它方案进行尝试。

参考链接

Creating your own snippets

查看原文

赞 19 收藏 12 评论 5

认证与成就

  • 获得 36 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-03-04
个人主页被 781 人浏览