与“em”相关的文章 - 𝓍𝑜𝓎𝑜𝓏𝑜.𝓃𝑒𝓉

如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 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

xoyozo 2 年前

1,499

未能找到路径“\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 等，然后又退回到原来的状态和版本，竟然都正常了。

就这样吧！

xoyozo 2 年前

2,086

405 - HTTP verb used to access this page is not allowed.

可能的原因是 IIS 安装了“WebDAV 发布”，在 IIS - 模块中可见 WebDAVModule

解决方法：在网站的 web.config 中设置：

<system.webServer>
    <modules>
        <remove name="WebDAVModule" />
    </modules>
</system.webServer>

或在 IIS 中，在该网站的模块中删除 WebDAVModule。

如果网站需要用到 WebDAV 模块，那么考虑使用 Fetch API 或 XMLHttpRequest 来发送请求。

xoyozo 2 年前

2,956

如何更改默认端口

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

Windows 远程桌面（RDP）(3389)

在 Windows 防火墙中放行新端口：在“入站规则”中找到“Open RDP Port 3389”复制并粘贴该规则，修改端口和名称。
若没有这个规则：新建规则 - 端口 - TCP - 特定本地端口（填写新的端口号）- 允许连接 - 名称
如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
打开注册表（regedit），展开到：HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-Tcp，右侧双击“PortNumber”切换到“十进制”，将 3389 改为新端口号
重启生效
在防火墙和安全组中禁止原默认端口

SSH (22) 之 CentOS

从阿里云控制台登录服务器（如果未设置 root 密码则先设置），直接跳到第 4 步
在外部防火墙中放行新的端口号（如阿里云 ECS 的安全组）
在内部防火墙中放行新的端口号（如 firewalld 或 iptables），使用宝塔面板的直接在面板“安全”页面设置即可
打开 SSH 配置文件
```
sudo vi /etc/ssh/sshd_config
```
找到并编辑 Port 行的端口号并启用，改为其它端口号
```
#Port 22
```
重新加载使生效
```
sudo systemctl reload sshd
```
在防火墙和安全组中禁止原默认端口
建议使用 SSH 密钥对代替传统账号密码登录

FTP (21) 之 FileZilla Server Windows 版

一般地，在 Windows Defender 防火墙中是以添加应用 filezilla-server.exe 的方式允许的，所以不需要更改端口。如果以端口方式允许的，那么在入站规则中允许新的端口。
如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
打开 Administer FileZilla Server，打开菜单 - Server - Configure - Server listeners，右侧窗口中将 Port 改为新端口（强烈建议将 Protocol 改为“Require explicit FTP over TLS”，即禁止 FTP 协议，改为使用 FTPS 协议）
从防火墙和安全组移除 21 端口

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

在防火墙中放行新的端口号（如阿里云 ECS 的安全组）
进入宝塔面板，打开“安全”，添加端口规则 TCP
在宝塔面板中进入软件商店，找到 Pure-Ftpd 并打开，切换到“配置修改”，搜索“Bind”，删除开头的“#”，将端口号 21 改为新端口号，保存（强烈建议将 TLS 项改为 2，即禁止 FTP 协议，仅允许 FTPS 协议）
切换到“服务”选项卡，点击“重启”
从防火墙和安全组移除 21 端口

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

打开控制台 RDS 实例页，左侧菜单点击“白名单与安全组”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 RDS 实例页，左侧菜单点击“数据库连接”，点击“修改连接地址”，在弹出框中修改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）

PolarDB (3306)

打开控制台 PolarDB 集群实例页，左侧菜单点击“集群白名单”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 PolarDB 集群实例页，左侧菜单点击“基本信息”，点击“主地址”和“集群地址”的“配置”，在“网线信息”中点击“更多”更改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）

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

打开控制台 RDS 实例页，左侧菜单点击“白名单与安全组”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 RDS 实例页，左侧菜单点击“数据库连接”，点击“修改连接地址”，在弹出框中修改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）

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

打开控制台 Redis 实例页，左侧菜单点击“白名单设置”，切换到“安全组”查看正在使用的安全组ID
（若使用了安全组）打开控制台 ECS 首页，左侧菜单点击“安全组”，找到这个安全组，放行新的端口
打开控制台 Redis 实例页，在“连接信息”中点击“修改连接地址”，在弹出框中修改端口
从防火墙和安全组移除原端口（确保没有其它实例正在使用此端口）

宝塔面板 (8888)

在防火墙中放行新的端口号（如阿里云 ECS 的安全组），或直接在私网其它 ECS 上的浏览器上直接访问原 8888 端口的地址
进入宝塔面板，打开面板设置，切换到“安全设置”页，找到“面板端口”，点击“设置”
在防火墙和安全组中禁止原默认端口

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

在 Windows 防火墙中放行新端口：在“入站规则”中找到“Web 管理服务(HTTP 流量入站)”因其为预定义规则且复制也无法修改，所以按其设置新建一个，并指定新的端口。
如有其它防火墙或安全组也一并配置（如阿里云 ECS 的安全组）
打开 IIS 管理器 - 管理服务，右侧停止，左侧修改端口，右侧应用、启动
VS 中发布配置修改“服务器(E)”项添加端口（域名:端口），第一次连接接受证书
在防火墙和安全组中禁止原默认端口

xoyozo 2 年前

2,696

在 Vue 中，将一个布尔对象双向绑定到 radio 输入上时，如何确保 radio 的 value 属性仍然保持布尔类型

在 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>

xoyozo 2 年前

2,164

LINQ

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

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

查询语法：

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

方法语法：

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

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

类型	操作符	功能	方法语法	查询语法
投影操作符	Select	用于从集合中选择指定的属性或转换元素	`cats.Select(cat => cat.color)`	`from cat in cats select cat.color`
投影操作符	SelectMany	用于在嵌套集合中选择并平铺元素	`families.SelectMany(family => family.members .Select(member => member.name))`	`from family in families from member in family.members select member.name`
限制操作符	Where	根据指定的条件筛选集合中的元素	`cats.Where(cat => cat.color == "white")`	`from cat in cats where cat.color == "white" select cat`
排序操作符	OrderBy、OrderByDescending、ThenBy、ThenByDescending	用于对集合中的元素进行排序	`cats.OrderBy(cat => cat.age)`	`from cat in cats order by cat.age select cat`
排序操作符	Reverse	将集合中的元素顺序反转	`cats.Reverse()`
联接操作符	Join GroupJoin	用于在两个集合之间执行内连接（Join）操作，或者对一个集合进行分组连接（GroupJoin）操作	内联接 `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, }`
分组操作符	GroupBy	根据指定的键对集合中的元素进行分组
串联操作符	Concat	将两个集合连接成一个新集合
聚合操作符	Aggregate、Average、Count、LongCount、Max、Min、Sum	Aggregate 可以用于在集合上执行自定义的累积函数，其他方法用于计算集合中的元素的平均值、总数、最大值、最小值和总和
集合操作符	Distinct、Union、Intersect、Except	用于执行集合间的不同操作，Distinct 移除重复元素，Union 计算两个集合的并集，Intersect 计算两个集合的交集，Except 计算一个集合相对于另一个集合的差集
生成操作符	Empty、Range、Repeat	Empty 创建一个空集合，Range 创建一个包含一系列连续数字的集合，Repeat 创建一个重复多次相同元素的集合
转换操作符	AsEnumerable、Cast、OfType、ToArray、ToDictionary、ToList、ToLookup	这些方法用于将集合转换为不同类型的集合或字典
元素操作符	DefaultIfEmpty、ElementAt、ElementAtOrDefault、First、Last、FirstOrDefault、LastOrDefault、Single、SingleOrDefault	这些方法用于获取集合中的元素，处理可能的空集合或超出索引的情况
相等操作符	SequenceEqual	用于比较两个集合是否包含相同的元素，顺序也需要相同
量词操作符	All、Any、Contains	用于检查集合中的元素是否满足特定条件，All 检查是否所有元素都满足条件，Any 检查是否有任何元素满足条件，Contains 检查集合是否包含特定元素
分割操作符	Skip、SkipWhile、Take、TakeWhile	用于从集合中跳过一些元素或只取一部分元素，可以结合特定条件进行操作

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

xoyozo 2 年前

2,294

当 PropertyInfo.SetValue() 遇到“Object of type 'System.Int32' cannot be converted to type 'System.UInt32'.”

判断一下类型：

if (p.PropertyType == typeof(uint))
{
    p.SetValue(t, Convert.ToUInt32(row[p.Name]), null);
}
else
{
    p.SetValue(t, row[p.Name], null);
}

xoyozo 2 年前

2,966

在 ASP.NET 中输出 EF Core 生成的 SQL 语句

方法一：

在 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 语句了。

xoyozo 2 年前

2,399

anichart.js 使用笔记

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);

xoyozo 3 年前

3,333

如何在 Windows 11 任务栏时间上显示“秒”

从 2023 年 4 月的 22621.1635 版本起，Windows 11 支持在任务栏上显示“秒”。

需要安装 KB5025305 更新，家庭版从 Microsoft®Update Catalog 手动安装，其它版本直接在 Windows Update 中更新补丁。

然后只需在注册表中添加一个配置项即可，位置：

\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced

新建 DWORD (32 位)值，名称为：ShowSecondsInSystemClock，把值改为 1。

xoyozo 3 年前

6,444

1 2 3 4 5

Windows 远程桌面（RDP）(3389)

SSH (22) 之 CentOS

FTP (21) 之 FileZilla Server Windows 版

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

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

PolarDB (3306)

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

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

宝塔面板 (8888)

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

大家在看

最新发布

查询 / 检测

编程

前端

行业

本站 API

博客 (225)

Windows 远程桌面（RDP）(3389)

SSH (22) 之 CentOS

FTP (21) 之 FileZilla Server Windows 版

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

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

PolarDB (3306)

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

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

宝塔面板 (8888)

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

大家在看

最新发布