官方文档：HTTP Proxy | WebStorm Documentation (jetbrains.com)
影响插件、工具下载等常用请求

二：Git代理配置

#设置全局代理
git config --global http.proxy http://127.0.0.1:10811
git config --global https.proxy https://127.0.0.1:10811
git config --global http.proxy socks5://127.0.0.1:10810
git config --global https.proxy socks5://127.0.0.1:10810

#只对github.com使用代理，其他仓库不走代理
git config --global http.https://github.com.proxy socks5://127.0.0.1:10810
git config --global https.https://github.com.proxy socks5://127.0.0.1:10810
#取消github代理
git config --global --unset http.https://github.com.proxy
git config --global --unset https.https://github.com.proxy

#取消全局代理
git config --global --unset http.proxy
git config --global --unset https.proxy

影响代码仓库的拉取、推送及git的其他请求

三：Npm代理配置

#直接代理
npm config set proxy http://127.0.0.1:18011
npm config set https-proxy https://127.0.0.1:18011

#授权代理
npm config set proxy http://username:password@127.0.0.1:18011
npm config set https-proxy https://username:password@127.0.0.1:18011

#取消代理
npm config delete proxy
npm config delete https-proxy

影响npm下载、推送等

过完春节回来，忽然就启动不了了，错误日志如下

Cannot find checkpoint record at LSN (1,0x60c9)
2023-01-31 16:47:40 0 [ERROR] mysqld.exe: Aria recovery failed. Please run aria_chk -r on all Aria tables and delete all aria_log.######## files
2023-01-31 16:47:40 0 [ERROR] Plugin 'Aria' init function returned error.
2023-01-31 16:47:40 0 [ERROR] Plugin 'Aria' registration as a STORAGE ENGINE failed.
2023-01-31 16:47:40 0 [Note] InnoDB: Mutexes and rw_locks use Windows interlocked functions
2023-01-31 16:47:40 0 [Note] InnoDB: Uses event mutexes
2023-01-31 16:47:40 0 [Note] InnoDB: Compressed tables use zlib 1.2.12
2023-01-31 16:47:40 0 [Note] InnoDB: Number of pools: 1
2023-01-31 16:47:40 0 [Note] InnoDB: Using SSE2 crc32 instructions
2023-01-31 16:47:40 0 [Note] InnoDB: Initializing buffer pool, total size = 16M, instances = 1, chunk size = 16M
2023-01-31 16:47:40 0 [Note] InnoDB: Completed initialization of buffer pool
2023-01-31 16:47:40 0 [Note] InnoDB: 128 out of 128 rollback segments are active.
2023-01-31 16:47:40 0 [Note] InnoDB: Creating shared tablespace for temporary tables
2023-01-31 16:47:40 0 [Note] InnoDB: Setting file 'C:\xampp\mysql\data\ibtmp1' size to 12 MB. Physically writing the file full; Please wait ...
2023-01-31 16:47:40 0 [Note] InnoDB: File 'C:\xampp\mysql\data\ibtmp1' size is now 12 MB.
2023-01-31 16:47:40 0 [Note] InnoDB: Waiting for purge to start
2023-01-31 16:47:41 0 [Note] InnoDB: 10.4.27 started; log sequence number 29968412; transaction id 12673
2023-01-31 16:47:41 0 [Note] InnoDB: Loading buffer pool(s) from C:\xampp\mysql\data\ib_buffer_pool
2023-01-31 16:47:41 0 [Note] Plugin 'FEEDBACK' is disabled.
2023-01-31 16:47:41 0 [ERROR] Could not open mysql.plugin table. Some plugins may be not loaded
2023-01-31 16:47:41 0 [ERROR] Failed to initialize plugins.
2023-01-31 16:47:41 0 [ERROR] Aborting

二：解决办法

不会的东西就要学，搜索引擎好助手，参考链接：
xampp windows mariadb not starting – Stack Overflow

白话版：使用mysql安装目录下bin文件夹下的工具aria_chk检测修复所有数据文件.MAI

1. 用管理员权限打开cmd，因为我默认安装在系统盘
2. cd C:\xampp\mysql\data，此为xampp安装路径中的data目录
3. ..\bin\aria_chk -r mysql\*.MAI，执行检测修复
4. del aria_log.*，删除当前目录（data）下所有aria_log.########文件

重新启动即可

一：XAMPP环境

本地启用wordpress，还原现网主题与配置，启用本地测试域名

1.1：本地wordpress

XAMPP是免费的集成安装包（下载地址），集成了Apache、php8、mysql、phpMyAdmin

• 下载wordpress解压到自己想要放的位置，我选择在/xampp/apps/www.hu365.test
• 把线上使用的主题完整下载并在本地主题使用
• 通过phpMyAdmin，创建数据库并导入线上的备份数据
• 配置xampp/apache/conf/extra/httpd-vhosts.conf文件，添加本地测试域名：www.hu365.test
• 本地host文件，将www.hu365.test指向127.0.0.1

此时，就可以通过www.hu365.test访问和线上环境一样的页面了

1.2：wordpress页面

新建页面技术题库，使用代码编辑器，引入最新的react.js、以及生产js、css

<!-- 所有额外引入的js、css -->
<div>
	<script src="/wp-content/apps/topic-bank/static/js/react.production.min.js" crossorigin></script>
	<script src="/wp-content/apps/topic-bank/static/js/react-dom.production.min.js" crossorigin></script>
	<script defer="defer" src="/wp-content/apps/topic-bank/static/js/main.js"></script>
	<link href="/wp-content/apps/topic-bank/static/css/main.css" rel="stylesheet">
</div>
<!-- 这是react渲染节点 -->
<div id="react_root"></div>

• 这里有进行格式化排版，实际代码为了减少多余换行，去掉了所有换行与空格
• 引入路径都是用绝对路径引入
• 路径/wp-content/apps/topic-bank是react指定的生产目录
• main.js、main.css为生产环境不含hash的最终文件，此举是为了测试，异步加载主js
• 页面访问路径（URL），需在路由配置中配置为basename，此处配置为/topic-bank

二：React应用

使用create-react-app构建react app，配置生产文件名、生产路径、静态资源等

2.1：替换index.html

访问本地页面：技术题库，右键另存为页面得到index.html页面和资源文件夹

• 把资源文件夹重命名：static，并在static下新建文件夹：js、css
• js文件移动到js文件夹，css文件移动到css文件夹，并同步修改相关引用路径
• 下载react.production.min.js、react-dom.production.min.js到js文件夹

此举是为了实现测试环境的样式和线上相同，方便直接使用react进行调试开始

2.2：生产配置

因为create-react-app构建应用无法直接修改webpack，这里需要安装使用react-app-rewired，可以同步安装customize-cra

npm install react-app-rewired --save-dev

创建文件config-overrides.js，在其中修改配置：

module.exports = function override(config, env) {
	// 仅修改生产配置
	if (env !== 'production') return config;
	const paths = require('react-scripts/config/paths');

	// 额外引入的
	// react.production.min.js、react-dom.production.min.js
	// 不参与打包
	config.externals = {
		'react': 'React',
		'react-dom': 'ReactDOM',
	}

	// 生产输出目录
	// 与"页面"中路径一致：/wp-content/apps/topic-bank
	config.output.path = "C:/xampp/apps/www.hu365.dev/wp-content/apps/topic-bank";
	paths.appBuild = "C:/xampp/apps/www.hu365.dev/wp-content/apps/topic-bank";

	// Get rid of hash for js files
	// 方便测试，脚本文件去除hash
	config.output.filename = "static/js/[name].js";
	config.output.chunkFilename = "static/js/[name].chunk.js";

	// Get rid of hash for css files
	// 方便测试，样式文件去除hash
	const miniCssExtractPlugin = config.plugins.find(element => element.constructor.name === "MiniCssExtractPlugin");
	miniCssExtractPlugin.options.filename = "static/css/[name].css";
	miniCssExtractPlugin.options.chunkFilename = "static/css/[name].css";

	// Get rid of hash for media files
	// 方便测试，其他文件去除hash
	config.module.rules[1].oneOf.forEach(oneOf => {
		if (!oneOf.options || oneOf.options.name !== "static/media/[name].[hash:8].[ext]") {
			return;
		}
		oneOf.options.name = "static/media/[name].[ext]";
	});
	return config;
}

2.3：添加路由

新建router/index.tsx

// 列表页、和详情页
import TopicList from "../views/TopicList";
import TopicContent from "../views/TopicContent";
import {
	createBrowserRouter,
	RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
	{
		path: "/",
		element: <TopicList />,
	},
	{
		path: "/topicName",
		element: <TopicContent />,
	},
], {
	// 通过环境变量配置基础路径
	basename: process.env.REACT_APP_ROUTER_BASE_NAME
});

export default function Router() {
	return (
		<RouterProvider router={router} />
	)
}

环境变量配置：

// 测试环境：.env.development
// 随意填写
REACT_APP_ROUTER_BASE_NAME = /

// 生产环境：.env.production
// 该路径必须和"页面"访问URL相同，否则无法访问（/topic-bank）
REACT_APP_ROUTER_BASE_NAME = /topic-bank

2.4：配置别名

正在开发中，忽然发现../../*的书写格式还是太丑了，赶紧把别名加上
webpack的alias配置，同样在config-override.js中配置：

const path = require("node:path");

module.exports = function override(config, env) {
    // 相对路径别名
    config.resolve.alias = {
        '@': path.resolve(__dirname, 'src'),
        '@Pages': path.resolve(__dirname, 'src/pages'),
        '@Style': path.resolve(__dirname, 'src/style'),
        '@Components': path.resolve(__dirname, 'src/components'),
    };

    // 其他内容
    
    return config;
}

TS配置，tsconfig.json文件：

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./*"],
      "@Pages/*": ["./pages/*"],
      "@Style/*": ["./style/*"],
      "@Components/*": ["./components/*"]
    }
  },
  ...
}

三：开发中

完成以上工作后，启动测试服务，访问的页面和线上“技术题库”页面样式一致
这样就可以脱离wordpress进行本地开发
待到一定阶段，需要看最终效果时；直接build一下，再在本地环境访问“技术题库”即可

好了，可以开始接下来开发工作了！

• Microsoft PowerToys | Microsoft Learn

一：Microsoft PowerToys

今天在整理音乐资源

1. 使用mp3tag批量修改文件信息，批量修改文件名为：【歌手 – 歌曲名】
2. 再用ZonyLrcToolsX批量获取歌词文件，以上命名方式是为了提高准确度
3. 得到数据后，在有文件夹分类的情况下，想把文件名改为【歌曲名】

然后发现mp3tag无法实现歌词歌曲同步修改（不记得上一次是怎么重命名的了）
于是需要再寻求一个批量重命名的方法/工具
结果被我发现了：Microsoft PowerToys

该工具包是微软自己维护开发的，稳定性和安全性不用质疑
系统要求：Windows 10 v2004 (19041) 及以上版本或Windows 11
总算又为Windows 11找到一个“更香”的理由了

二：PowerRename

PowerRename属于Microsoft PowerToys中的一个小工具，其他还有很多功能扩展的工具，需要自己慢慢去探索
就我个人而言，PowerRename已经满足了我对批量重命名的要求：

• 支持文件夹、子文件夹下批量修改，可以直接在文件夹上右键启用工具
• 支持单独文件勾选，排除某些特殊情况
• 支持正则匹配，这对于编码人员来说挺友好
• 实时的预览对比，再确认修改之前可以反复尝试

当然，要吐槽的地方也有，那就是速度有点慢

不过我这是是在【网络位置】的【网盘】操作，受网络速度影响挺大
没再测试本地磁盘的速度情况了，需求实现还是很香

• Upgrade from 6.x to 7.0 – Proxmox VE

一：升级到6.4.x

之前一直用的6.1.3，那首要任务是升级到6.4.x
不过升级的过程也是困难重重

1.1：更换软件源

参考文档：Package Repositories – Proxmox VE

在执行更新时，出现未认证的错误提示，这是因为在文件
/etc/apt/sources.list.d/pve-enterprise.list
中默认使用了企业版软件源，此处需要更换为免费版软件源

#企业源
#deb https://enterprise.proxmox.com/debian/pve buster pve-enterprise
#非订阅源
deb http://download.proxmox.com/debian/pve buster pve-no-subscription

1.2：生成公钥

以为换了源就万事大吉？结果又出现
the following signatures couldn’t be verified because the public key is not available

看意思是公钥失效/不存在，正好找到一个类似问题，参照问答中的方式，重建公钥
参考链接：[SOLVED] – Public key not available when using apt update | Proxmox Support Forum

#安装
wget https://enterprise.proxmox.com/debian/proxmox-release-bullseye.gpg -O /etc/apt/trusted.gpg.d/proxmox-release-bullseye.gpg
#验证
sha512sum -c <(echo "7fb03ec8a1675723d2853b84aa4fdb49a46a3bb72b9951361488bfd19b29aab0a789a4f8c7406e71a69aabbc727c936d3549731c4659ffa1a08f44db8fdcebfa /etc/apt/trusted.gpg.d/proxmox-release-bullseye.gpg")

可惜，还是同样报错···这时又找到另一个文章：
Fix apt-get update “the following signatures couldn’t be verified because the public key is not available”

# XXXXXX 是错误提示中的公钥
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys XXXXXX

具体方法、原因没来得及考究，不过问题算是解决了···

1.3：扩容root

以为万事大吉，但是更新过程却提示失败，在确认root剩余空间只有几百兆时，觉得这就是问题所在了
用指令lvresize实现扩容
参考相关提问：pve-root directory runs out of space: Why and What should I do?
合并local-lvm、swap空间到pve/root

# 移除绑定，不影响数据
pvesm remove local-lvm

# 删除空间，会清除内容
lvremove /dev/pve/data

# 可选: 删除缓存空间，对于安装在低速介质的系统可能会影响速度
#lvremove /dev/pve/swap
# 移除启动加载
#sed -i '/ swap /d' /etc/fstab

# 增加空闲空间到 root
lvresize -l +100%FREE --resizefs /dev/pve/root

在这之后，终于可以顺畅地更新了

二：更新准备

执行官方检测工具，检测升级环境

pve6to7 --full

把所有可修复的内容都修复，包括FAILURES、WARNINGS项

• jsPDF – Documentation (artskydj.github.io)
• Options – html2canvas (hertzen.com)

一：我的需求

浏览器接口：window.print()，可以直接调用打印，并存储为PDF文档
用工具库：html2canvas+jsPDF实现以上（类似的）PDF

二：我的实现

2.1：基础参数

首先定义一个标准数据，以Windows下的A4打印为基础：

// 基础参数
const printParams = {
	a4: {
		dpi: 96, // windows 下默认 dpi
		width: 210, // A4 标准宽度 mm，含边距
		height: 297, // A4 标准高度 mm， 含边距
		marginX: 10, // 默认打印左右边距，约为 10mm
		marginY: 10, // 默认打印上下边距，约为 10mm
	},
	// 以下是设置值/初始值
	dpi: 288, // 设置的打印密度，数值越大越清晰，PDF文件越大
	format: 'a4', // 打印类型，这里只有 A4
	orientation: 'portrait', // portrait | landscape
	// 以下为计算出的值，方便调用
	ratio: 1, // dpi 比例
	width: 0, // PDF 文档宽度，不含边距
	widthFull: 0, // PDF 文档完整宽度
	height: 0, // PDF 文档高度，不含边距
	heightFull: 0, // PDF 文档完整高度
	marginX: 0, // PDF 左右边距
	marginY: 0, // PDF 上下边距
}

数据初始化：

// 根据设置的 dpi，format，orientation 数据初始化
const { dpi: setDpi, orientation, format } = printParams;
const { dpi, width, height, marginX, marginY } = printParams[format];
printParams.ratio = setDpi/dpi;
let setWidth;
switch (orientation) {
	case 'landscape':
		printParams.width = height - 2 * marginY; // 不含边距的内容宽度
		printParams.height = width - 2 * marginX; // 不含边距的内容高度
		printParams.widthFull = height; // 整页PDF宽度
		printParams.heightFull = width; // 整页PDF高度
		printParams.marginX = marginY; // 左右单边边距
		printParams.marginY = marginX; // 上下单边边距
		setWidth = mm2px(height, dpi); // 页面宽度像素值
		break;
	case 'portrait':
	default:
		printParams.width = width - 2 * marginX;
		printParams.height = height - 2 * marginY;
		printParams.widthFull = width;
		printParams.heightFull = height;
		printParams.marginX = marginX;
		printParams.marginY = marginY;
		setWidth = mm2px(width, dpi);
}
// 设置body宽度，给 window.print 一个“最适合”的宽度
window.document.body.style.width = `${setWidth}px`;

这里有用到一个mm/px的转换，把以前写过的方法拿过来：

/**
 * 工具类：mm转px
 * */
function mm2px(mm, dpi, radio) {
	if (mm == null) return 0;
	dpi = dpi || printParams.dpi;
	const ret = parseFloat(`${(mm * dpi * 10) / 254}`);
	if (radio == null || radio <= 0) radio = 4;
	radio = 10 ** radio;
	return Math.floor(ret * radio) / radio;
}
/**
 * 工具类：px转mm
 * */
function px2mm(px, dpi, radio) {
	if (px == null) return 0;
	dpi = dpi || printParams.dpi;
	const ret = parseFloat(`${(px * 254) / (dpi * 10)}`);
	if (radio == null || radio <= 0) radio = 4;
	radio = 10 ** radio;
	return Math.floor(ret * radio) / radio;
}

2.2：生成图片

// 需要用到的数据
const $pdfDom = document.getElementById('pdf');
const {
	ratio, orientation, format,
	width, height, widthFull, marginX, marginY
} = printParams;

html2canvas($pdfDom, {
	scale: window.devicePixelRatio * Math.ceil(ratio), // 缩放
	allowTaint: true,
	useCORS: true,
}).then((canvas) => {
	const canvasWidth = this.px2mm(canvas.width);
	const canvasHeight = this.px2mm(canvas.height);
	// ··· 以下是 pdf 生成
	// ···
});

此处用到html2canvas实现绘制页面生成图片，主要影响清晰度的是参数scale：

默认值为window.devicePixelRatio，主要用于防止页面缩放导致的生成图片不清晰问题
为了实现更好地缩放，最好乘以一个整数值，以保证像素值的对应，就把它当作windows下的高分屏缩放理解就行

这里用px2mm转换成mm主要方便用于后面的PDF编辑

2.3：生成PDF

// 得到图片数据
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 创建PDF文档对象
const PDF = new JsPDF({ orientation, format });
// 标准宽度下，图片的相对高度
const imageHeight = (width / canvasWidth) * canvasHeight;
// 考虑可能有多页的情况，用 leftHeight 循环判断
let leftHeight = imageHeight;
// 每次绘制图片的位置垂直偏移量
let position = marginY;
while (leftHeight > 0) {
	// 1：图形绘制到PDF
	PDF.addImage(pageData, 'JPEG', marginX, position, width, imageHeight);
	leftHeight -= height;
	position -= height;
	// 2：页头页脚添加，用 rect 遮罩
	PDF.setFillColor(255, 255, 255); // 填充白色，每次填充前都要定义
	PDF.rect(0, 0, widthFull, marginY, 'F');
	PDF.rect(0, height + marginY, widthFull, marginY, 'F');
	// 添加空白页
	if (leftHeight > 0) {
		PDF.addPage();
	}
}
PDF.save(`${title}.pdf`);

这里有几个点，需要留意：

1. 默认PDF为单页，需要判断“图片”相对高度，超出标准高度时添加新页面
2. 每次添加新页面，PDF绘制即“当前页”，相对位置都是相对“当前页”而言
3. 绘制遵循页面标准的层级，后绘制内容会覆盖已绘制内容
4. 垂直偏移position是图片相对“当前页”的偏移，向上偏移一个内容页的距离后，当前页绘制的就是下一页该显示的图片内容
5. 页眉页脚的模拟绘制，每次都要设置填充颜色（默认为黑色），因为每次都是“不同页”，参考第2点

三：实现效果

目前只需要模拟A4下的打印，在对比使用window.print()生成的PDF和手动生成的PDF之后，还是比较满意的，以后再有自定义编辑页眉页脚，到时候再说

要说有什么不满意的地方，那肯定是哪里不满意再改哪里，哪里不购加哪里
不过呢，有个东西肯定只会越改（加）越糟的，那就是文件大小：

Holy shit，大了整整20倍·····
这和生成图片时设置的缩放比（scale）有关，目前我测试时改值为4.5（1.5*288/96），既使变成1/5也还有400KB，大约4倍的差距，看来文件大小的劣势还是挺明显的

不过呢，现在谁还在乎这么点大小呢···谁还在乎呢···谁···

• Window.status – Web APIs | MDN (mozilla.org)

在使用apiCloud编写手机App的项目里，有部分使用纯原生js实现的功能，在这里调试的时候，我遇到了一个奇怪的问题，简单地说，他是这样的：

var status = ['111', '222'];
for (var i = 0;i < status.length;i++) {
	// 处理数据
	console.log(status[i]); // 1 1 1 , 2 2 2
}

我的本意是打算把'111'和'222'当作参数来处理的，但是结果却超出我的预料
它居然循环出了：'1' '1' '1' ',' '2' '2' '2'总计6个参数

看结构，它似乎是对处理的数组进行了字符串转换，但是我并没有做此操作
第一想法，是不是appCloud哪里做了特殊处理，毕竟这是在它家的平台运行，但是并没有找到相关处理

在寻人讨论的时候，他说了一句：你在浏览器调试试试，看有没有这个问题
听到这话的我，内心其实是抗拒的，这么简单的代码，看一眼就知道结果，还要跑去浏览器去调试？那不是多此一举么

然后我就被打脸了，浏览器的调试工具输出了一样的结果···

这···这···最基础的调试方法狠狠的打了一耳光

所以再仔细分析问题，把var换成let/const，打印结果如预期

const status = ['111', '222'];
for (var i = 0;i < status.length;i++) {
	// 处理数据
	console.log(status[i]); // 111 222
}

那么用var的问题，自然是全局变量的问题，那对应的全局变量就是：window.status

一个早期用来显示浏览器加载状态的文本信息字段，只能用来存储String类型，所以用var定义时，实际上是在给window.status赋值，而且它会自动将数据进行字符串转换

那么，记录这次经历不是为了记下这个将被废弃的属性，而是要让自己了解到，查找问题、解决问题的思路与逻辑，一定要一丝不苟，容不得“想当然”的跳过

• linuxserver/nginx – Docker Image | Docker Hub

一：WordPress站点健康

二：安装imagick

环境：linuxserver/nginx:latest [2022-11-04]

记得很久以前是不需要手动安装的，可能某一个版本之后又把这个组件移除了

查看更新日志：

有明确提到移除了php7-pecl-imagick，并有写出自定义添加的方法：

在环境变量中添加：-e DOCKER_MODS=linuxserver/mods:swag-imagemagick
或者选择用图形界面/其他方法都可以

三：Happy Ending

• 字节顺序标记 – 维基百科，自由的百科全书 (wikipedia.org)
• The byte-order mark (BOM) in HTML (w3.org)

一：启动报错

在一个协作的前端工程，拉取代码之后，启动工程出现如下错误：

从错误日志看，是第一个字符JSON转换时就抛出错误

对比相关代码，并没有发现特殊的字符，甚至全选粘贴改成相同内容，仍然提示相同错误
直接替换文件，或者回退到老版本又正常

于是再对比差异，发现：

编码没问题，但多出来的 BOM是什么

二：字节顺序标记

2.1：BOM（byte-order mark）

是位于码点U+FEFF的统一码字符的名称。当以UTF-16或UTF-32来将UCS/统一码字符所组成的字符串编码时，这个字符被用来标示其字节序。它常被用来当做标示文件是以UTF-8、UTF-16或UTF-32编码的标记。

中文维基百科

【谷歌翻译】

在 1993 年初引入UTF-8之前，传输Unicode文本的预期方式是使用 16 位代码单元，使用称为UCS-2的编码，后来扩展到UTF-16。16 位代码单元可以用两种方式表示为字节：最高有效字节在前（big-endian）或最低有效字节在前（little-endian）。为了传达正在使用的字节顺序，在流的开头使用了U+FEFF（字节顺序标记）作为幻数，该幻数在逻辑上不是流所表示的文本的一部分。

W3C

2.2：UTF-8 中的 BOM

在UTF-8中，虽然在Unicode标准上允许字节顺序标记的存在，但实际上并不一定需要。UTF-8编码过的字节顺序标记则被用来标示它是UTF-8的文件。它只用来标示一个UTF-8的文件，而不用来说明字节顺序。

许多Windows程序（包含记事本）会需要添加字节顺序标记到UTF-8文件，否则将无法正确解析编码，而出现乱码。然而，在类Unix系统中，这种做法则不被建议采用。

Unicode标准允许在UTF-8中使用BOM，但并不要求或推荐使用它。字节顺序在UTF-8中没有任何意义，所以它在UTF-8中的唯一用途是在开始时发出信号，表明文本流是用UTF-8编码的，或者表明它是从包含可选BOM的文本流转换到UTF-8的。

中文维基百科

【谷歌翻译】

在UTF-8编码中，BOM的存在不是必需的，因为与UTF-16编码不同，字符中没有替代的字节序列。但是，BOM仍可能出现在UTF-8编码文本中，或者作为编码转换的副产品，或者因为它是由编辑器添加以将内容标记为UTF-8。在这种情况下，BOM通常称为UTF-8签名。

W3C

2.3：JSON 中的 BOM

由于在文件前插入了不可见但又实际存在的字符（\UFEFF），导致JSON无法正常解析字符串
这就是问题所在

三：解决方法

本人使用jetbrains系列软件开发，软件中自带“添加”/“移除”BOM的选项
不过这个问题也不是很罕见的问题了，估摸着大部分编辑器应该都自带该选项功能

• IaaS、PaaS、SaaS – 云服务模型概述 – 英特尔® (intel.cn)
• IaaS，PaaS，SaaS 的区别 – 阮一峰的网络日志 (ruanyifeng.com)

一：基础定义

1.1：IaaS：Infrastructure-as-a-service

基础设施服务
云服务提供商可以拥有并管理那些运行您的软件堆栈的硬件。它包括服务器、网络和存储

1.2：PaaS：Platform-as-a-service

平台服务
在IaaS基础服务的基础上，还提供了操作系统和数据库

1.3：SaaS：Software-as-a-service

软件服务
在PaaS平台服务的基础上，还提供了应用程序、功能和数据
为最终用户提供了最多的支持，是所有交付模型中最简单的一种

二：图示对比