博客 (166)

1. 购买 ECS
   

2. 解析域名（非网站域名）、修改实例名称、主机名

3. 设置阿里云（重要）

4. 远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 22 端口，可在阿里云控制台登录系统，或先在安全组临时放行 22 端口）

5. 修复系统漏洞

6. 将磁盘挂载到目录（fdisk、df 命令参考：https://xoyozo.net/Blog/Details/SSH）

7. 安装宝塔面板（本文以宝塔面板方案为例，选择任何你喜欢的环境部署方案都行）。可以在阿里云控制台ECS实例页安装扩展程序

8. 临时放行宝塔面板端口，进入宝塔面板（http方式），或用命令更改宝塔面板端口

9. 配置面板 SSH、添加新的安全端口、面板设置

10. 更改 SSH 默认端口（参：https://xoyozo.net/Blog/Details/change-default-port）
    

11. 安装 nginx、PHP 等

12. 通过 lua 接入 WAF

13. 配置 PHP 扩展（Redis、sqlsrv（注意选择兼容的版本）、memcached 及端口）

14. 创建网站，配置网站（路径、伪静态等）

15. 迁移网站文件（参：https://xoyozo.net/Blog/Details/SSH）

16. 仔细对比新旧网站的配置文件（特别是 .php 的访问权限，参：https://xoyozo.net/Blog/Details/nginx-location-if）

17. 设置写入目录（使用 rsync 同步的文件会同步用户和权限）

18. 解析域名（先改 hosts 测试网站功能）

19. 更改内网其它 ECS 上的 hosts

20. 关闭原 ECS（能马上发现问题，不然等运行一段时间才发现问题就麻烦点）
    

21. 设置 FTP
    

22. 迁移“计划任务”

23. 所有网站和软件的配置文件都要使用 WinMerge 进行对比
    

24. 移除“宝塔面板-安全”和“阿里云-ECS-安全组”中不用的端口

25. 再次检查阿里云设置

26. 私网中若有 ECS 的 hosts 中域名直接绑定到私网 IP 的，做相应更改

27. 其它：ERP 添加到期提醒、WAF 增加该 ECS、备份工具增加该 ECS

更多文章：

从零搭建一台阿里云 ECS（Windows Server）并迁移网站

SignalR 是一个开源的实时通信库，用于构建实时 Web 应用程序。它提供了一个简单的 API，可以在客户端和服务器之间建立持久连接，以便实时地推送数据。

与传统的 WebSocket 相比，SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别：

• 支持多种传输方式：SignalR 可以使用多种传输方式，包括 WebSocket、Server-Sent Events（SSE）、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力，即使某些浏览器不支持 WebSocket，也可以使用其他传输方式。

• 自动处理连接管理：SignalR 管理连接的生命周期，包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑，简化了开发人员的工作。

• 服务器端推送：SignalR 允许服务器端主动推送消息给客户端，而不需要客户端发起请求。这使得实时通信变得更加高效和实时，适用于聊天应用、实时监控等场景。

• 跨平台支持：SignalR 可以在多个平台上使用，包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。
  

微软官方提供了针对 ASP.NET Core Web 应用（Razor 页面）的详细教程，这里给出 MVC 版本入门教程。

最终将创建一个正常运行的聊天应用：

创建 Web 应用项目

添加 SignalR 客户端库

在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。

在“添加客户端库”对话框中：

• “提供程序”选择“unpkg”

• “库”，请输入 @microsoft/signalr@latest。

• 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。

• 点击“安装” 。
  

创建 SignalR Hubs 类

using Microsoft.AspNetCore.SignalR;

/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
        /// <summary>
        /// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
        /// </summary>
    public async Task SendMessage(string user, string message)
    {
        // Clients.All 向所有的客户端发送消息
        // ReceiveMessage 是客户端监听的方法
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。

配置 SignalR

打开 Program.cs，添加注入：

builder.Services.AddSignalR();

添加路由：

app.MapHub<ChatHub>("/chatHub");

添加 SignalR 客户端代码

视图页面：

<div class="container">
    <div class="row p-1">
        <div class="col-1">用户</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">消息</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="发送消息" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>

chat.js 文件：

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // 修改此处时应注意脚本注入问题
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

完成。在线示例：https://xoyozo.net/Demo/SignalRDemo

如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 api，用 css 设置旋转。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>保持竖屏示例</title>
</head>
<body>
    <div id="app">
        <div class="page">
            <div>把手机横过来试试</div>
            <div>页面永远保持竖屏方向</div>
        </div>
    </div>
</body>
</html>

CSS：

body { margin: 0; }
.page { text-align: center; padding-top: 100px; }

@media screen and (orientation: landscape) {
    body { width: 100vh; height: 100vw; overflow: hidden; }
    .page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
    .page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}

JS:

function fn_set_orientation() {
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
    const div = document.querySelector('.page');
    console.log(orientation.type)
    switch (orientation.type) {
        case 'landscape-primary': {
            div.classList.remove('landscape-secondary');
            div.classList.add('landscape-primary');
            break;
        }
        case 'landscape-secondary': {
            div.classList.remove('landscape-primary');
            div.classList.add('landscape-secondary');
            break;
        }
        default: {
            div.classList.remove('landscape-primary');
            div.classList.remove('landscape-secondary');
            break;
        }
    }
}
window.addEventListener("orientationchange", function () {
    fn_set_orientation();
});
fn_set_orientation();

示例：

https://xoyozo.net/Demo/Orientation

未能找到路径“\roslyn\csc.exe”的一部分。

解决方法：

在 nuget 中直接卸载 Microsoft.CodeDom.Providers.DotNetCompilerPlatform

如果 web.config 报错，删除与 Microsoft.CodeDom.Providers.DotNetCompilerPlatform 相关的项，如：

<system.codedom>
	<compilers>
		<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701;612;618" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
		<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008,40000,40008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
	</compilers>
</system.codedom>

然后遇到错误：

功能 空传播运算符 在 C# 5 中不可用。请使用 6 或更高的语言版本

所以还是少不了 Microsoft.CodeDom.Providers.DotNetCompilerPlatform

又把这货装上了，竟然不报错了。

这期间我更改过在 Release 模式下调试，将 .NET Framework 4.8 升级到 .NET Framework 4.8.1 等，然后又退回到原来的状态和版本，竟然都正常了。

就这样吧！

使用远程桌面连接时提示你的凭据不工作：

解决方法一：关闭 Windows Defender Credential Guard

1. 打开组策略编辑器（gpedit.msc）

2. 展开：计算机配置 - 管理模板 - 系统 - Device Guard，双击右侧的“打开基于虚拟化的安全”，改为“已禁用”

3. 重启电脑

解决方法二【推荐】：使用其他远程桌面客户端

在 Microsoft Store 中查找“Microsoft 远程桌面”，或者点此安装

这个应用同样来自微软，使用方式与传统的远程桌面连接略有区别，如果你在 iPhone 或安卓上使用过，那么就能快速上手。

若要共享剪贴板，在“编辑电脑”中开启，并且在 设置 - 隐私与安全 - 文件系统 中允许“远程桌面”。

相对于传统的远程桌面连接，对高 DPI 兼容性不完美。

默认端口带来安全隐患，建议更改为 50000-60000 之间的端口号。

Windows 远程桌面（RDP）(3389)

1. 在 Windows 防火墙中放行新端口：在“入站规则”中找到“Open RDP Port 3389”复制并粘贴该规则，修改端口和名称。

   若没有这个规则：新建规则 - 端口 - TCP - 特定本地端口（填写新的端口号）- 允许连接 - 名称

2. 如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
   

3. 打开注册表（regedit），展开到：HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-Tcp，右侧双击“PortNumber”切换到“十进制”，将 3389 改为新端口号

4. 重启生效

5. 在防火墙和安全组中禁止原默认端口

SSH (22) 之 CentOS

1. 从阿里云控制台登录服务器（如果未设置 root 密码则先设置），直接跳到第 4 步

2. 在外部防火墙中放行新的端口号（如阿里云 ECS 的安全组）

3. 在内部防火墙中放行新的端口号（如 firewalld 或 iptables），使用宝塔面板的直接在面板“安全”页面设置即可

4. 打开 SSH 配置文件

   sudo vi /etc/ssh/sshd_config

5. 找到并编辑 Port 行的端口号并启用，改为其它端口号

   #Port 22

6. 重新加载使生效

   sudo systemctl reload sshd

7. 在防火墙和安全组中禁止原默认端口

8. 建议使用 SSH 密钥对代替传统账号密码登录

FTP (21) 之 FileZilla Server Windows 版

1. 一般地，在 Windows Defender 防火墙中是以添加应用 filezilla-server.exe 的方式允许的，所以不需要更改端口。如果以端口方式允许的，那么在入站规则中允许新的端口。

2. 如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）

3. 打开 Administer FileZilla Server，打开菜单 - Server - Configure - Server listeners，右侧窗口中将 Port 改为新端口（强烈建议将 Protocol 改为“Require explicit FTP over TLS”，即禁止 FTP 协议，改为使用 FTPS 协议）

4. 从防火墙和安全组移除 21 端口

FTP (21) 之 Pure-Ftpd（宝塔面板）

1. 在防火墙中放行新的端口号（如阿里云 ECS 的安全组）

2. 进入宝塔面板，打开“安全”，添加端口规则 TCP

3. 在宝塔面板中进入软件商店，找到 Pure-Ftpd 并打开，切换到“配置修改”，搜索“Bind”，删除开头的“#”，将端口号 21 改为新端口号，保存（强烈建议将 TLS 项改为 2，即禁止 FTP 协议，仅允许 FTPS 协议）

4. 切换到“服务”选项卡，点击“重启”

5. 从防火墙和安全组移除 21 端口

MySQL (3306) 之阿里云云数据库 RDS MySQL 版

1. 打开控制台 RDS 实例页，左侧菜单点击“白名单与安全组”，切换到“安全组”查看正在使用的安全组ID

2. （若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口

3. 打开控制台 RDS 实例页，左侧菜单点击“数据库连接”，点击“修改连接地址”，在弹出框中修改端口

4. 从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）

PolarDB (3306)

1. 打开控制台 PolarDB 集群实例页，左侧菜单点击“集群白名单”，切换到“安全组”查看正在使用的安全组ID

2. （若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口

3. 打开控制台 PolarDB 集群实例页，左侧菜单点击“基本信息”，点击“主地址”和“集群地址”的“配置”，在“网线信息”中点击“更多”更改端口

4. 从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
   

MSSQL (1433) 之阿里云云数据库 RDS SQL Server 版

1. 打开控制台 RDS 实例页，左侧菜单点击“白名单与安全组”，切换到“安全组”查看正在使用的安全组ID

2. （若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口

3. 打开控制台 RDS 实例页，左侧菜单点击“数据库连接”，点击“修改连接地址”，在弹出框中修改端口

4. 从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
   

Redis (6379) 之阿里云云数据库 Redis 版

1. 打开控制台 Redis 实例页，左侧菜单点击“白名单设置”，切换到“安全组”查看正在使用的安全组ID

2. （若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口

3. 打开控制台 Redis 实例页，在“连接信息”中点击“修改连接地址”，在弹出框中修改端口

4. 从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）
   

宝塔面板 (8888)

1. 在防火墙中放行新的端口号（如阿里云 ECS 的安全组），或直接在私网其它 ECS 上的浏览器上直接访问原 8888 端口的地址

2. 进入宝塔面板，打开面板设置，切换到“安全设置”页，找到“面板端口”，点击“设置”

3. 在防火墙和安全组中禁止原默认端口

IIS 管理服务（Web 部署）(8172)

1. 在 Windows 防火墙中放行新端口：在“入站规则”中找到“Web 管理服务(HTTP 流量入站)”因其为预定义规则且复制也无法修改，所以按其设置新建一个，并指定新的端口。

2. 如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）

3. 打开 IIS 管理器 - 管理服务，右侧停止，左侧修改端口，右侧应用、启动

4. VS 中发布配置修改“服务器(E)”项添加端口（域名:端口），第一次连接接受证书

5. 在防火墙和安全组中禁止原默认端口

在 Vue 中，当你将一个布尔对象双向绑定到 radio 输入上时，确保 radio 的 value 属性仍然保持布尔类型是很重要的。如果 value 属性是字符串，那么 Vue 会将其解释为字符串而不是布尔值。以下是一个示例，演示如何正确地将布尔对象双向绑定到 radio 按钮，并确保 value 属性保持布尔类型：

<template>
  <div>
    <input type="radio" v-model="myBoolean" :value="true" /> True
    <input type="radio" v-model="myBoolean" :value="false" /> False
    <p>myBoolean: {{ myBoolean }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myBoolean: false, // 布尔对象
    };
  },
};
</script>

在这个示例中，我们使用了 v-model 指令将 myBoolean 属性与两个 radio 按钮进行了双向绑定。通过将 value 属性设置为 true 和 false，我们确保了 myBoolean 属性保持布尔类型。

这样，当用户选择其中一个 radio 按钮时，myBoolean 属性将保持布尔值而不是字符串。确保 value 属性的类型与要绑定的数据类型匹配，以确保绑定的数据类型保持一致。

同样的问题出现在 select 上也是一样：

<select v-model="cat.colorId" required>
    <option :value="null">不选择</option>
    <option v-for="color in colors" :value="color.id">{{color.name}}</option>
</select>

语言集成查询（LINQ）为 C# 和 VB 提供语言级查询功能和高阶函数 API，让你能够编写具有很高表达力度的声明性代码。

LINQ 有两种写法：查询语法和方法语法，查询语法又称查询表达式语法。

查询语法：

from 变量名 in 集合 where 条件 select 结果变量

方法语法：

集合.Where(变量名 => 条件)

LINQ 的标准查询运算符及语法示例

cats.Select(cat => cat.color)

from cat in cats
select cat.color

families.SelectMany(family => family.members
.Select(member => member.name))

from family in families
from member in family.members
select member.name

cats.Where(cat => cat.color == "white")

from cat in cats
where cat.color == "white"
select cat

cats.OrderBy(cat => cat.age)

from cat in cats
order by cat.age
select cat

cats.Reverse()

families.Join(
    members,
    family => family.familyId,
    member => member.familyId,
    (family, member) => new
    {
        family.familyId,
        member.name,
    })

families.GroupJoin(
    members,
    family => family.familyId,
    member => member.familyId,
    (family, familyMembers) => new
    {
        family.familyId,
        name = familyMembers.FirstOrDefault()?.name
    })

from family in families
join member in members on family.familyId equals member.familyId
select new
{
    family.familyId,
    member.name,
}

from family in families
join member in members on family.familyId equals member.familyId into g
from member in g.DefaultIfEmpty()
select new
{
    family.familyId,
    name = member?.name,
}

了解立即执行与延迟执行可以大大改善性能。

方法一：

在 DbContext.cs 文件中找到 OnConfiguring 方法，添加代码：

#if DEBUG
    optionsBuilder.EnableSensitiveDataLogging();
    optionsBuilder.LogTo(Console.WriteLine); // 输出日志到控制台
    //optionsBuilder.LogTo(message => Debug.WriteLine(message)); // 输出日志到“输出”窗口
#endif

搞定。

若原来是 => 形式的，改为 { } 形式写法即可。

方法二：使用 Logging

打开 DbContext 文件，添加

using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Logging.Debug;

将

optionsBuilder.UseMySql

替换为

optionsBuilder.UseLoggerFactory(MyLoggerFactory).UseMySql

添加方法

public static readonly LoggerFactory MyLoggerFactory = new LoggerFactory(new[] {
    new DebugLoggerProvider()
});

即可在“输出”窗口看到生成的 SQL 语句了。

anichart.js 是一款将数据转化为动态柱状图/线性图的 js/ts 工具，可导出视频。

github: https://github.com/Jannchie/anichart.js

中文使用指南：https://github.com/Jannchie/anichart.js/blob/main/README-CN.md

docs 目录中有更详细的使用方法（英文）。

在线演示：https://xoyozo.net/Demo/BarGraph

目前 release 版本 3.0.0。

这里有一点常用设置示例：https://codesandbox.io/s/anichart-2x-m3xbz?file=/main.js

设置画布尺寸

stage.canvas.width = 1000;
stage.canvas.height = 500;

重设尺寸不会重新计算内部元素的大小和位置，因此对响应式布局不太友好。

配置柱状图

示例：

const barChart = new ani.BarChart({
    dy: 2, // 文字下沉
    imageField: 'logo', // 图标字段名
    itemCount: 16, // 最多显示条数
    dateFormat: '%Y年%-m月', // 日期格式
    barGap: 10, // 柱条间距
    barInfoFormat: () => '', // 隐藏柱条上的文字
});
stage.addChild(barChart);

循环播放

setInterval(function () {
    if (!stage.playing) {
        stage.sec = 0;
        stage.play();
    }
}, 1000);