博客 (74)

POST

$.post('AjaxCases', {
    following: true,
    success: null,
    page: 1,
}, function (response) {
    console.log(response.data)
}, 'json').fail(function (xhr, status, error) {
    console.log(xhr.responseText);
});
[HttpPost]
public IActionResult AjaxCases([FromForm] AjaxCasesRequestModel req)
{
    bool? following = req.following;
    bool? success = req.success;
    int page = req.page;
}

提示:只能传输对象(Object),不能传输数组(Array)。


相关:axios 请求 .NET Core / .NET 5 / .NET 6

xoyozo 1 年前
1,533

.NET Framework 项目中使用 MySql.Data.EntityFramework 连接 MySQL 8.0 时遇到以下错误:

NotSupportedException: Character set 'utf8mb3' is not supported by .Net Framework.

解决方法:

Nuget 中将 MySql.Data 和 MySql.Data.EntityFramework 更新到最新版。

xoyozo 2 年前
1,710

推荐使用 SignalR 来平替 WebSocket,参考教程


【服务端(.NET)】

一、创建 WebSocketHandler 类,用于处理客户端发送过来的消息,并分发到其它客户端

public class WebSocketHandler
{
    private static List<WebSocket> connectedClients = [];

    public static async Task Handle(WebSocket webSocket)
    {
        connectedClients.Add(webSocket);

        byte[] buffer = new byte[1024];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        while (!result.CloseStatus.HasValue)
        {
            string message = Encoding.UTF8.GetString(buffer, 0, result.Count);
            Console.WriteLine($"Received message: {message}");

            // 处理接收到的消息,例如广播给其他客户端
            await BroadcastMessage(message, webSocket);

            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

        connectedClients.Remove(webSocket);
        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }

    private static async Task BroadcastMessage(string message, WebSocket sender)
    {
        foreach (var client in connectedClients)
        {
            if (client != sender && client.State == WebSocketState.Open)
            {
                await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, CancellationToken.None);
            }
        }
    }
}

二、在 Program.cs 或 Startup.cs 中插入:

// 添加 WebSocket 路由
app.UseWebSockets();
app.Use(async (context, next) =>
{
    if (context.Request.Path == "/chat")
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await WebSocketHandler.Handle(webSocket);
        }
        else
        {
            context.Response.StatusCode = 400;
        }
    }
    else
    {
        await next();
    }
});

这里的路由路径可以更改,此处将会创建一个 WebSocket 连接,并将其传递给 WebSocketHandler.Handle 方法进行处理。

也可以用控制器来接收 WebSocket 消息。


【客户端(JS)】

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>WebSocket 示例(JS + ASP.NET)</title>
    <style>
        #list { width: 100%; max-width: 500px; }
        .tip { color: red; }
    </style>
</head>
<body>
    <h2>WebSocket 示例(JS + ASP.NET)</h2>
    <textarea id="list" readonly rows="20"></textarea>
    <div>
        <input type="text" id="msg" />
        <button onclick="fn_send()">发送</button>
        <button onclick="fn_disconnect()">断开</button>
    </div>
    <p id="tip_required">请输入要发送的内容</p>
    <p id="tip_closed">WebSocket 连接未建立</p>

    <script>
        var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/chat";
        var webSocket;
        var domList = document.getElementById('list');

        // 初始化 WebSocket 并连接
        function fn_ConnectWebSocket() {
            webSocket = new WebSocket(wsUrl);

            // 向服务端发送连接请求
            webSocket.onopen = function (event) {
                var content = domList.value;
                content += "[ WebSocket 连接已建立 ]" + '\r\n';
                domList.innerHTML = content;

                document.getElementById('tip_closed').style.display = 'none';

                webSocket.send(JSON.stringify({
                    msg: 'Hello'
                }));
            };

            // 接收服务端发送的消息
            webSocket.onmessage = function (event) {
                if (event.data) {
                    var content = domList.value;
                    content += event.data + '\r\n';
                    domList.innerHTML = content;
                    domList.scrollTop = domList.scrollHeight;
                }
            };

            // 各种情况导致的连接关闭或失败
            webSocket.onclose = function (event) {
                var content = domList.value;
                content += "[ WebSocket 连接已关闭,3 秒后自动重连 ]" + '\r\n';
                domList.innerHTML = content;

                document.getElementById('tip_closed').style.display = 'block';

                setTimeout(function () {
                    var content = domList.value;
                    content += "[ 正在重连... ]" + '\r\n';
                    domList.innerHTML = content;
                    fn_ConnectWebSocket();
                }, 3000); // 3 秒后重连
            };
        }

        // 检查连接状态
        function fn_IsWebSocketConnected() {
            if (webSocket.readyState === WebSocket.OPEN) {
                document.getElementById('tip_closed').style.display = 'none';
                return true;
            } else {
                document.getElementById('tip_closed').style.display = 'block';
                return false;
            }
        }

        // 发送内容
        function fn_send() {
            if (fn_IsWebSocketConnected()) {
                var message = document.getElementById('msg').value;
                document.getElementById('tip_required').style.display = message ? 'none' : 'block';
                if (message) {
                    webSocket.send(JSON.stringify({
                        msg: message
                    }));
                }
            }
        }

        // 断开连接
        function fn_disconnect() {
            if (fn_IsWebSocketConnected()) {
                // 部分浏览器调用 close() 方法关闭 WebSocket 时不支持传参
                // webSocket.close(001, "Reason");
                webSocket.close();
            }
        }

        // 执行连接
        fn_ConnectWebSocket();
    </script>
</body>
</html>


【在线示例】

https://xoyozo.net/Demo/JsNetWebSocket


【其它】

  • 服务端以 IIS 作为 Web 服务器,那么需要安装 WebSocket 协议

  • 一个连接对应一个客户端(即 JS 中的 WebSocket 对象),注意与会话 Session 的区别

  • 在实际项目中使用应考虑兼容性问题

  • 程序设计应避免 XSS、CSRF 等安全隐患

  • 参考文档:https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets

xoyozo 2 年前
1,709

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

未能找到路径“\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 年前
1,984
  1. 购买 ECS

  2. 解析域名(非网站域名)挂载磁盘(若有另购)、修改实例名称、主机名

  3. 设置阿里云(重要)

  4. 远程连接进入 ECS(若解析未生效可以先用 IP)(若新服默认使用 3389 端口,可先在安全组临时放行 3389 端口)

  5. 开启 Windows 防火墙(使用推荐设置)

  6. Windows 更新、并在高级选项中开启(更新 Windows 时接收其它 Microsoft 产品的更新)

  7. 安装 IIS:服务器管理器-添加角色和功能-勾选“Web 服务器(IIS)”包括管理工具

    建议勾选:

    默认已勾选项

    按需安装 IP 和域限制

    常见 HTTP 功能(不建议安装 WebDAV 发布

    跟踪(即“失败请求跟踪”)

    请求监视器、日志记录工具、

    按需安装 ASP

    按需安装 ASP.NET 4.8(会同时勾选 .NET Extensibility 4.8、ISAPI 扩展、ISAPI 筛选器)

    按需安装 WebSocket 协议

    应用程序初始化(建议安装)

    管理服务(用于 Web 部署)

  8. 细节:设置任务栏;设置桌面图标;个性化-颜色-勾选“标题栏和窗口边框”;设置输入法;

  9. 更改远程桌面端口

  10. 按需安装:

    下载 URL 重写(文件名:rewrite_amd64_zh-CN.msi)

    下载 MySQL Connector/NET(文件名:mysql-connector-net-8.0.19.msi)

    下载 ASP.NET Core 运行时 Hosting Bundle(文件名:dotnet-hosting-*.*.*-win.exe)

    下载 .NET 桌面运行时 Windows x64(文件名:windowsdesktop-runtime-*.*.*-win-x64.exe)

    下载 Web Deploy(文件名:WebDeploy_amd64_zh-CN.msi)

  11. 服务:设置“ASP.NET State Service”自动启动

  12. IIS 日志:路径(如 D:\wwwlogs),每小时(统一设置一个全局的就行了,不需要设置每个网站),按需勾选“使用本地时间进行文件命名和滚动更新”

  13. IIS 导入证书:个人、允许导出证书。

  14. 设置默认网站的 https、设置默认网站跳转到指定网站。

  15. 设置权限:设置网站所在分区(如 D 盘),安全,添加 IIS_IUSRS,全部拒绝(防止跨站)

  16. 添加用户:为每个网站创建用户(既能防止跨站,又能跟踪进程),密码不能改、不过期,仅隶属于 IIS_IUSRS,并添加到每个网站的根目录,若用户创建失败看这里

  17. 创建网站:设置访问物理路径的用户;设置应用程序池的“标识”用户;编辑绑定:勾选需要服务器名称指示;检查域名是否绑全;设置写入目录的用户权限;设置写入目录的“处理程序映射”取消“脚本”

  18. 重复上面两步

  19. 检查所有网站用户是否仅隶属于 IIS_IUSRS(在“组”页面双击 Users 和 IIS_IUSRS 查看成员)

  20. 在应用程序池列表页面检查 CLR 版本、管托管道模式和标识;在网站列表页面检查绑定和路径

  21. 设置 Web 部署

  22. 设置“IP 地址和域限制”

  23. 废弃旧服时再次检查:IIS 中各功能设置、hosts、安装的应用程序、启动项、任务计划程序、服务、防火墙等

  24. 更改默认端口

  25. 接入 WAF

  26. 解析各网站域名

  27. 其它:资源管理器-选项-查看-去掉“始终显示图标,从不显示缩略图”前的勾

  28. 再次检查阿里云设置

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

  30. 在备份工具中添加该服务器的所有备份项

  31. 其它:到期日期提醒、


>> 关于域名解析

因各地域名解析生效时间不可控,一般国内域名 1 天内,国际域名 2 天内。

  • 若网站数据库在 RDS、上传文件在 OSS,则解析 48 小时后直接停止原网站即可;(比较理想的)

  • 文件上传到 ECS 的可使用 FTP 等工具定时同步文件,或直接停止原网站。(网友会遇到新文章中图片无法显示等问题)

  • 还有一种方法是新网站提前解析一个备用域名,确保完全生效后再修改正式域名的解析,原网站无条件跳转到备用域名,如果数据库中有保存完整网址路径的,关闭原网站并解绑备用域名之后,进行批量替换。(缺点是可能会影响在搜索引擎的网站权重)

  • 部分有定时器的网站要注意,如果两个网站的定时器都正常开启会导致意外的,需要停止其中一个网站的定时器。

当然每种方法都有优缺点,选择可以接受且方便的一种即可。


更多文章:

从零搭建一台阿里云 ECS(Alibaba Cloud Linux / CentOS / Linux)并迁移网站

xoyozo 2 年前
5,016

有一个项目,在 VS2022 中正常打开,在 VS2019 中无法加载项目,项目目标框架是 .NET Standard 2.0。报错内容:

error: 无法打开项目文件。 .NET SDK 的版本 7.0.306 至少需要 MSBuild 的 17.4.0 版本。当前可用的 MSBuild 版本为 16.11.2.50704。请将在 global.json 中指定的 .NET SDK 更改为需要当前可用的 MSBuild 版本的旧版本。

解决方法:

运行 Visual Studio Installer,选择 Visual Studio 2019 进行修改,切换到“单个组件”,勾选“.NET SDK (out of support)”,会联动勾选“.NET 5.0 Runtime (Out of support)”与“.NET Core 3.1 Runtime (Out of support)”。

QQ截图20230728135007.png

xoyozo 2 年前
8,828

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 2 年前
2,938

以 ASP.NET 6 返回 BadRequestObjectResult 为例。

public IActionResult Post()
{
    return BadRequest("友好的错误提示语");
}


axios

请求示例:

axios.post(url, {})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.log(error.response.data);
});

error 对象:

{
  "message": "Request failed with status code 400",
  "name": "AxiosError",
  "code": "ERR_BAD_REQUEST",
  "status": 400,
  "response": {
    "data": "友好的错误提示语",
    "status": 400
  }
}


jQuery

请求示例:

$.ajax 对象形式

$.ajax({
    url: url,
    type: 'POST',
    data: {},
    success: function (data) {
        console.log(data)
    },
    error: function (jqXHR) {
        console.log(jqXHR.responseText)
    },
    complete: function () {
    },
});

$.ajax 事件处理形式(Event Handlers)jQuery 3+

$.ajax({
    url: url,
    type: 'POST',
    data: {},
})
    .done(function (data) {
        console.log(data)
    })
    .fail(function (jqXHR) {
        console.log(jqXHR.responseText)
    })
    .always(function () {
    });

$.get / $.post / $.delete

$.post(url, {}, function (data) {
    console.log(data)
})
    .done(function (data) {
        console.log(data)
    })
    .fail(function (jqXHR) {
        console.log(jqXHR.responseText)
    })
    .always(function () {
    });

jqXHR 对象:

{
  "readyState": 4,
  "responseText": "友好的错误提示语",
  "status": 400,
  "statusText": "error"
}


xoyozo 3 年前
2,551

中国蚁剑

https://github.com/AntSwordProject

https://github.com/AntSwordProject/AntSword-Loader

http://t.zoukankan.com/liang-chen-p-14181806.html


使用说明:

下载 AntSword-Loader 和 antSword 并解压;

打开 AntSword.exe,初始化时选择 antSword 目录;

右键“添加数据”,填 URL,选择连接类型,以 PHP 为例,服务器上放置一个 PHP 文件,格式如:

<?php @ev删除这七个汉字al($_POST['value']); ?>

那么,“连接密码”就填 POST 的参数名 value。

添加完成,双击可打开树状菜单,显示服务器上所有有权限的文件。


Burp:篡改请求(譬如上传图片时将文件名改为.php,并添加shell脚本)

https://portswigger.net/burp


使用方法:https://zhuanlan.zhihu.com/p/537053564


一句话木马:https://www.icode9.com/content-4-1081174.html


xoyozo 3 年前
6,015