Logo Logo Logo
浅色
深色
跟随系统

博客 (99)

升级 MySQL 8.0 后将字符集从 utf8 改为 utf8mb4

因 MySQL 8 默认使用 utf8mb4 字符集，如果是从 MySQL 5-7 等低版本迁移的，那么仍然是 utf8（相当于 utf8mb3）。

这在保存字符串时有可能会报错：

An error occurred while saving the entity changes. See the inner exception for details.

Incorrect string value: '\xF0\xA1\x90\x93\xE6\x9D...' for column 'Html' at row 1

即使连接字符串上加上 CharSet=utf8 或 CharSet=utf8mb3 或 CharSet=utf8mb4 也没用。

那么只能把数据库的字符集改为 utf8mb4。


更改字符集和排序方式前必须先备份数据库！


  1. 更改现有数据库的字符集和排序规则

    ALTER DATABASE mydatabase 
CHARACTER SET utf8mb4 
COLLATE utf8mb4_unicode_ci;

  2. 更改现有表的字符集和排序规则

    ALTER TABLE mytable 
CONVERT TO CHARACTER SET utf8mb4 
COLLATE utf8mb4_unicode_ci;

  3. 更改现有列的字符集和排序规则

    当列单独设置了字符集时执行，未设置的不需要执行，会继承表的字符集

    ALTER TABLE mytable 
MODIFY mycolumn VARCHAR(255) 
CHARACTER SET utf8mb4 
COLLATE utf8mb4_unicode_ci


数据库中可能存在许多表，数据表中可能存在许多列，使用下面的命令可以生成批量执行的命令：

  1. 更改所有表的默认字符集和排序规则

    USE database_name; -- 替换为你的数据库名

SELECT CONCAT('ALTER TABLE `', TABLE_SCHEMA, '`.`', TABLE_NAME, '` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') 
FROM information_schema.TABLES 
WHERE TABLE_SCHEMA = 'database_name'; -- 再次替换为你的数据库名

  2. 更改所有列的字符集和排序规则

    USE database_name; -- 使用你的数据库名

SELECT CONCAT('ALTER TABLE `', TABLE_SCHEMA, '`.`', TABLE_NAME, '` MODIFY `', COLUMN_NAME, '` ', COLUMN_TYPE, ' CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') 
FROM information_schema.COLUMNS 
WHERE TABLE_SCHEMA = 'database_name'; -- 使用你的数据库名


另外给出几条查询语句：

  1. 查看特定数据库的字符集和排序规则

    SELECT DEFAULT_CHARACTER_SET_NAME, DEFAULT_COLLATION_NAME
FROM information_schema.SCHEMATA
WHERE SCHEMA_NAME = 'your_database_name';

  2. 查看特定表的字符集和排序规则

    SELECT TABLE_SCHEMA, TABLE_NAME, TABLE_COLLATION
FROM information_schema.TABLES
WHERE TABLE_SCHEMA = 'your_database_name';

  3. 查看特定列的字符集和排序规则

    SELECT COLUMN_NAME, CHARACTER_SET_NAME, COLLATION_NAME 
FROM information_schema.COLUMNS 
WHERE TABLE_SCHEMA = 'your_database_name' AND TABLE_NAME = 'your_table_name';
xoyozo 22 天前
274
WebSocket 示例（JS + ASP.NET）

推荐使用 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 4 个月前
400
手机网页保持竖屏

如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 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 4 个月前
336
如何获取微信小程序页面路径

登录微信公众平台，在“草稿箱”中依次点击“新的创作”，“写新图文”：

image.png

顶部选择“小程序”，在弹出窗中搜索小程序名称，以“浙里办”为例：

image.png

点击“获取更多页面路径”，并输入你的微信号

image.png


在手机上打开小程序，并打开你要复制路径的页面，点击右上角菜单，点击“复制页面路径”

image.png

得到一串类似下面格式的路径：

pages/zwfwBase/index.html?data=***


xoyozo 7 个月前
559
textarea 提交的数据中包含换行符时，如何在 vue 的 {{}} 表达式中显示换行效果

ChatGPT：

当你从 <textarea> 中获取到的数据中包含换行符时，如果直接在 Vue 模板中使用插值表达式 {{}} 显示，是无法保持换行的。因为在 HTML 中，多个连续的空格和换行符都会被视为一个空格，因此如果直接将 \n 显示在模板中，会被渲染成一个空格。

解决这个问题的方法之一是使用 CSS 样式来控制换行的显示。可以为显示数据的元素添加 white-space: pre-wrap; 样式，该样式可以保留换行符并自动换行。

例如，假设你的数据保存在 text 变量中，可以这样在模板中使用：

<pre style="white-space: pre-wrap;">{{ text }}</pre>

在上面的例子中，使用 <pre> 元素来包裹要显示的数据，并添加 white-space: pre-wrap; 样式，这样数据中的换行符就能被保留并自动换行了。

另外，如果你在 Vue 组件中使用了 v-html 指令来显示数据，也可以在数据中使用 <br> 标签来手动添加换行符，然后使用 v-html 来渲染数据。但是，这种方法需要注意 XSS 攻击的问题，因为 v-html 可以渲染任意的 HTML 标签和内容，如果数据中包含恶意代码，很容易被攻击者利用。

xoyozo 1 年前
1,053
LigerShark.WebOptimizer.Core 对比 BuildBundlerMinifier

LigerShark.WebOptimizer.CoreBuildBundlerMinifier
特点

在运行时捆绑和缩小 CSS 和 JavaScript 文件

具有完整的服务器端和客户端缓存，以确保高性能

可禁用缩小

支持使用通配模式

标记帮助程序与缓存破坏

支持内联

支持 SCSS

将 CSS、JavaScript 或 HTML 文件捆绑到单个输出文件中

保存源文件会自动触发重新捆绑

支持通配模式

支持 CI 方案的 MSBuild 支持

缩小单个或捆绑的 CSS、JavaScript 和 HTML 文件

每种语言的缩小选项是可定制的

打开生成的文件时显示水印

任务运行程序资源管理器集成

命令行支持

快捷更新解决方案中所有捆绑包

禁止生成输出文件

转换为 Gulp

注入（Program.cs）

services.AddWebOptimizer();

app.UseWebOptimizer();


指定捆绑的项目在运行时自动缩小 css 和 js，也可以在 AddWebOptimizer 中自定义。默认情况下，生成的文件不会保存到磁盘，而是保存在缓存中。手动编辑 bundleconfig.json 文件来指定需要合并和缩小的文件
功能配置
{
  "webOptimizer": {
    // 确定是否应设置 HTTP 标头以及是否应支持条件 GET （304） 请求。在开发模式下禁用此功能可能会有所帮助。cache-control
    "enableCaching": true,
    // 确定是否用于缓存。在开发模式下禁用可能会有所帮助。IMemoryCache
    "enableMemoryCache": true,
    // 确定管道资产是否缓存到磁盘。这可以通过从磁盘加载 pipline 资产而不是重新执行管道来加快应用程序重新启动的速度。在开发模式下禁用可能会有所帮助。
    "enableDiskCache": true,
    // 设置资产将存储的目录 ifistrue。必须为读/写。enableDiskCache
    "cacheDirectory": "/var/temp/weboptimizercache",
    // 确定元素是否应指向捆绑路径或应为每个源文件创建引用。这在开发模式下禁用很有帮助。
    "enableTagHelperBundling": true,
    // 是一个绝对 URL，如果存在，它会自动为页面上的任何脚本、样式表或媒体文件添加前缀。注册标记帮助程序后，标记帮助程序会自动添加前缀。在此处查看如何注册标记帮助程序。
    "cdnUrl": "https://my-cdn.com/",
    // 确定捆绑包的源文件中没有内容时的行为，默认情况下，请求捆绑包时将引发 404 异常，设置为 true 以获取包含空内容的捆绑包。
    "allowEmptyBundle": false
  }
}


在 bundleconfig.json 捆绑时设置

[
  {
    "outputFileName": "output/bundle.css",
    "inputFiles": [
      "css/lib/**/*.css", // globbing patterns are supported
      "css/input/site.css"
    ],
    "minify": {
        "enabled": true,
        "commentMode": "all"
    }
  },
  {
    "outputFileName": "output/all.js",
    "inputFiles": [
      "js/*.js",
      "!js/ignore.js" // start with a ! to exclude files
    ]
  },
  {
    "outputFileName": "output/app.js",
    "inputFiles": [
      "input/main.js",
      "input/core/*.js" // all .js files in input/core/
    ]
  }
]


热重载（在开发模式中保存文件自动更新浏览器效果）
VS 安装扩展，方法：菜单 - 扩展 - 管理扩展 - 联机 搜索“Bundler & Minifier”
其它资料
ASP.NET 官方文档


xoyozo 2 年前
1,532
vue 中如何直接显示双大括号（{{}}）

使用 v-pre 指令：

<span v-pre>{{ this will not be compiled }}</span>

参：https://cn.vuejs.org/api/built-in-directives.html#v-pre

xoyozo 2 年前
2,131
中国蚁剑利用漏洞入侵服务器种植木马后门

中国蚁剑

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 2 年前
1,452
clipboard.js 在 vue.js 中使用

本文以 vue 3 为例，vue 2 同理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard.js 在 vue.js 中使用</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
                <button class="btn-cp" :value="item">复制</button>
            </li>
        </ul>
    </div>
    <script src="//xxx/vue/core-3.x.x/vue.global.js"></script>
    <script src="//xxx/clipboard/clipboard.js-2.x.x/dist/clipboard.min.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    list: ["aaa", "bbb", "ccc"]
                }
            },
            mounted: function () {
                var clipboard = new ClipboardJS('.btn-cp', {
                    text: function (trigger) {
                        return trigger.getAttribute('value');
                    }
                });
                clipboard.on('success', function (e) {
                    alert('已复制“' + e.text + '”到粘贴板');
                    e.clearSelection();
                });
            }
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>


xoyozo 2 年前
1,481
nginx 禁止目录中的所有 .php 访问，但允许部分 .php 文件访问（附 Discuz! X3 论坛可写入目录禁止执行 PHP，附匹配不包含某个字符串的正则表达式）

首先，禁止网站下所有 .php 等文件均不允许被访问到。

在 nginx 网站配置文件中，include enable-php-**.conf; 上方插入：

location ~ ^/.*\.(php|php5|py|sh|bash|out)$ { deny all; }

其中，^ 匹配开始，/.* 匹配所有目录和文件名，\.(php|php5|py|sh|bash|out) 匹配文件后缀名，$ 匹配结束。

即便如此，仍然忽略了 nginx 中 .php 文件名后加斜杠仍然能访问到的情况，譬如我们访问这个网址：

https://xoyozo.net/phpinfo.php/abc.html

nginx 仍然运行了 phpinfo.php，给了后门可趁之机，所以改进为：

location ~ ^/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }


Discuz! X3.4 需要写入权限的目录：

  • /自研目录/upload/

  • /config/

  • /data/

  • /uc_client/data/

  • /uc_server/data/

  • /source/plugin/

但，这些都不重要，我们已经禁止了所有目录的 .php 访问了。


第二步，解禁需要直接被访问到的文件路径。

Discuz! X3.4 根目录下的 .php 文件都是入口文件，需要能够被访问到：

/admin.php
/api.php
/connect.php
/forum.php
/group.php
/home.php
/index.php
/member.php
/misc.php
/plugin.php
/portal.php
/search.php

其它目录中需要被直接访问到的文件：

/archiver/index.php
/m/index.php
/uc_server/admin.php
/uc_server/avatar.php
/uc_server/index.php

部分插件文件需要能够被直接访问到：

/source/plugin/magmobileapi/magmobileapi.php
/source/plugin/smstong/accountinfo.php
/source/plugin/smstong/checkenv.php

另外如果有自建目录需要有 .php 访问权限，那么也需要在此处加白，本文以 /_/ 目录为例

最终拼成：工具

location ~ ^(?:(?!(/admin\.php|/api\.php|/connect\.php|/forum\.php|/group\.php|/home\.php|/index\.php|/member\.php|/misc\.php|/plugin\.php|/portal\.php|/search\.php|/archiver/index\.php|/m/index\.php|/uc_server/admin\.php|/uc_server/avatar\.php|/uc_server/index\.php|/source/plugin/magmobileapi/magmobileapi\.php|/source/plugin/smstong/accountinfo\.php|/source/plugin/smstong/checkenv\.php|/_/.*\.php))/.*\.(php|php5|py|sh|bash|out)(/.*)?)$ { deny all; }

这里用到正则表达式中的“不捕获”和“负向零宽断言”语法，格式为：

^(?:(?!(允许的目录或文件A|允许的目录或文件B))禁止的目录和文件)$

值得注意的是，此句负向零宽断言中的匹配内容是匹配前缀的，也就是说

https://xoyozo.net/index.php
https://xoyozo.net/index.php/abc.html

都可以访问到，而

https://xoyozo.net/forbidden.php
https://xoyozo.net/forbidden.php/abc.html

都访问不到，这是符合需求的。

如果自建目录 /_/ 下有写入需求，单独禁止即可，以 /_/upload/ 为例：

location ~ ^/_/upload/.*\.(php|php5|py|sh|bash|out)(/.*)?$ { deny all; }


ThinkPHP 网站有统一的访问入口，可按本文方法配置访问权限。


特别注意：上面的代码必须加在 PHP 引用配置（include enable-php-**.conf;）的上方才有效。


附：一键生成 nginx 访问控制 location URI { } 语句工具

xoyozo 2 年前
2,329
1 2 3 4 5

大家在看

如何在 Windows 11 任务栏时间上显示“秒”
Photoshop 去除图片背景色改为透明色（不留锯齿）
错误 TS5055 无法写入文件“***.js”，因为它会覆盖输入文件。
使用 Notepad++ 查看文件 16 进制编码
阿里云 ECS CentOS 7 更新内核后无法正常启动

最新发布

如何修改 Discuz! 网站标题
汽车驾驶自动化分级及各车企驾驶安全与辅助、智能领航和泊车辅助系统简介
升级 MySQL 8.0 后将字符集从 utf8 改为 utf8mb4
Character set 'utf8mb3' is not supported by .Net Framework.
如何配置在 Linux / CentOS 中安装 PHP 扩展 sqlsrv 以连接 SQL Server