Lolipop's Studio.

Lolipop's Studio.

how about groping lights through young ages

loading
使用 Nginx 治理我的服务

这些天在阿里云的 ECS 服务器上捣鼓自己的东西,通过 Nginx 转发请求,允许以域名的方式访问到笔者开设的不同站点、服务。

笔者撰写本篇文章,晒晒在服务器上都做了哪些工作,也希望能为您提供一些启发。

安装最新版本的 Nginx

笔者使用的服务器为 CentOS 7 系统,默认的 yum 源中包含的 Nginx 版本为 1.20.1(2021-05-21)。

更新 yum 源,添加 Nginx 的官方源:

1
rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
基于原生 Node 备份软路由上的 Minecraft 服务器存档,并通过 Alist 上传到云端

笔者最近在 OpenWRT 软路由上部署了一个 Minecraft 服务器,出于对数据安全的焦虑,于是折腾了一下存档备份的相关事宜,记录为此文。

在 CurseForge 等模组站上已有方便好用的 Minecraft 服务器存档备份插件,除非您喜欢折腾或高自由度的定制,不用像笔者这样编写一整个脚本。

完整的脚本可见此

编写备份脚本

前置准备

为了脚本编写方便,约定应该在 Minecraft 服务器的根目录执行脚本。校验当前脚本的执行目录:

遇到 AntD 组件中文乱码问题,可以试试这么解决

项目中使用了 AntD 4.x 的 <DatePicker /> 组件,开发环境显示正常,生产环境显示乱码,如下图所示:

error

问题原因

<DatePicker /> 组件底层的国际化既由 AntD 提供的 <ConfigProvider /> 控制(如上图的“年”,显示正常),又由 Moment 控制(如上图的“月”,显示乱码)。

经查询,当我们以 ISO8859-1 方式读取 UTF-8 编码的中文时,会出现如“由月è¦�å¥½å¥½å­¦ä¹ å¤©å¤©å�‘上”这样的符号型乱码,正如上图所示。

因此产生问题的关键在于,为何浏览器没有正确地以 UTF-8 格式读取 Moment 提供的中文语言包文本。

为什么我使用 Umi 的 model 简易数据流管理插件

Umi 是一款企业级的 React 前端应用框架,云巧产业数字组件中心推荐使用基于 Umi 的 Koi 框架统一前端应用研发流程,支撑前端项目从研发、联调到上线、发布的全流程。

本文假设您正在或计划使用 Umi 或 Koi 作为底层框架支撑前端应用的开发,并且对 Umi 有一定的了解。

数据治理的原则

React 的核心特征是“数据驱动视图”,用公式表达即 UI = render(data),通过数据变化来驱动视图变化。React 将组件内部自有的数据称作 state(状态),通过管理 state 来实现对组件的管理。

通过 Props 传参,可以在 React 中实现简单的父子、子父和兄弟组件间数据传递。对于跨级组件间的数据传递,React 提供了基于生产者-消费者模式的 Context API 来实现全局通信。

随着应用的膨胀,组件内部的状态变得愈加复杂,数据流管理的成本也越来越高。如果说所有代码的末路都是成为一座难以维护的大山的话,在那之前,我们应当好好想想如何尽可能多地延长代码的寿命,去重新思考我们的 React 项目的代码组织逻辑。

定时器 SetTimeout 在后台失效?试试 Web Worker 吧

业务上有这样一个需求:「若用户不活跃超过 12 个小时,自动退出当前页面,并切换路由到首页」。

想都没想,直接在 useEffect() 里用 setTimeout() 定个时,12 个小时后触发相应跳转事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { useEffect } from "react";

const LEAVE_PAGE_COUNTDOWN = 12 * 60 * 60 * 1000; // 12h

/** 离开页面的方法 */
const leavePage = () => {
// ...离开当前页面的业务代码
};

export default () => {
useEffect(() => {
// 初始化时设置定时器
const timer = setTimeout(() => {
leavePage();
}, LEAVE_PAGE_COUNTDOWN);

return () => {
// 页面卸载时清除定时器
if (timer) clearTimeout(timer);
};
}, []);
};

没想到,今天上班来,切换到没有关闭的标签页,发现还在当前页面,掐指一算怎么也有 12 个小时了,这是怎么一回事儿……?

昨天晚上走的时候还在和前辈探讨页面卸载(unload)事件与浏览器后台优化的坑,于是首先就想到了可能是浏览器优化的缘故,导致定时器没有正常执行。以「setTimeout」和「后台失效」为搜索关键词,很快找到了原因和优化解决方案。

失效原因

连接到 Windows 端的 PostgreSQL 数据库

假设,您身边有两台电脑,一台打算用来做 PostgreSQL 数据库服务器,一台用来做客户端。服务器上的 PostgreSQL 14 安装在 C:\Program Files\PostgreSQL\14 目录下,数据库文件保存在 C:\Program Files\PostgreSQL\14\data 目录,欲访问的数据库名为 db_name,访问数据库的用户为 db_user

配置 postgresql.conf

编辑数据库配置文件 C:\Program Files\PostgreSQL\14\data\postgresql.conf,设置监听的远程连接地址。将 listen_addresses 项的值设置为 *,如下所示:

1
2
3
# - Connection Settings -

listen_addresses = '*' # what IP address(es) to listen on

配置 pg_hba.conf

编辑数据库客户端认证配置文件 C:\Program Files\PostgreSQL\14\data\pg_hba.conf,设置允许连接到数据库的客户端 IP 地址。

这位客官,要来一张我珍藏许久的图片吗

笔者自高中到现在,游走于 Pixiv 若干载,不慎收藏了许多名家雅作。

独乐乐不如众乐乐!笔者想做一个 web 页面来随机访问我的收藏,不过在此之前,可以先实现服务端上的内容。再之后做网页时,不过是简单的读取数据库罢了!

最初,笔者以为得将我的库存全部放到服务器上项目中去,然后随机访问其中的图片实现功能,但这样做很难得同步,遂搁置。不过,笔者在最近发现有一个 Pixiv 图片代理网站 可以快速下载到图片,大喜,于是开始了这个小工程。

请求需包含 Referer

实现此功能分为两个阶段:一,为本地的图片生成数据库索引条目。二,开发 Telegram Bot 接口,随机从数据库索引中获取一张图片转发给聊天。

为本地的 Pixiv 图片建立索引

从零开始使用 Telegram Bot

本文旨在基于 Koa 从零开始搭建一个简单的 Telegram Bot 应用服务,帮助笔者更好地将爱传递给 Telegram!

本文假设您已对 Node.js 和 Koa 有一定的了解。

初始化 Koa 项目

Koa 是为 Node.js 设计的下一代 Web 框架,其幕后开发者主要来自知名的 Express 团队。

尽管使用 koa-generator 来初始化 Koa 项目是一个不错的选择,但笔者还是喜欢从头开始的感觉。

那么首先,新建文件夹并进入,使用 npm init 初始化 package.json

把自己的简历做成 Web 页面

去年投简历的时候,在 Github 上找了个开源的,星星很多的仓库 best-resume-ever 来制作自己的简历。其中的 Creative 模板我觉得很喜欢,就用它制作了我人生中的第一份找工作用的简历:

my first resume

然后到了现在,到了秋招真正找工作走向社会的季节了,又该制作自己的简历了。一年的时光给自己的人生又增添了几分色彩,原先简历模板已然不够用了。正巧,这个仓库由 Vue 编写,可以用自己已有的知识对简历做一些改造手术。

改造简历

举四个改造的例子好了。

添加 Chip 纸片

使用 jsDelivr 加速 Github 仓库搭建自己的图床服务

起因

今天突然想去搞个图床,使用 CDN 加速图片资源。因为博客放在小水管服务器上,直接用这个服务器向用户传输图片资源对带宽有很大影响。

遂上网搜索有无免费图床的服务,看到有人提起,便出现了此文的主题:使用 jsDelivr 加速 Github 仓库资源,用作图床使用。

在国内,直接使用 Github 链接来加载图片是很慢的,甚至于加载不出来;但访问 jsDelivr 速度较快。通过 jsDelivr 来加速 Github 上的图片资源,即可以实现我们想要的图床服务。

使用其它的可以加速 Github 资源的 CDN 服务来替换 jsDelivr 也可以;这应该算是目前对于个人开发者来说,最简单且经济的方式了。

创建图床仓库

avatar
Lolipop
Make them happen.