博客 (72)

一般我们使用原生 JS 的时候使用 abort() 来取消 fetch 请求。

在使用 axios 发送请求时，如果我们想要取消请求，可以使用 axios 提供的 CancelToken 和 cancel 方法。下面是具体的实现步骤：

// 创建 CacnelToken 实例
const cancelTokenSource = axios.CancelToken.source();
// GET 方式请求
axios.get(url, {
    cancelToken: cancelTokenSource.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    console.log('An error occurred', thrown);
  }
});
// POST 方式请求
axios.post(url, data, {
    cancelToken: cancelTokenSource.token
});
// 取消请求
cancelTokenSource.cancel('请求被取消');

get 请求的时候，cancelToken 是放在第二个参数里；post 的时候，cancelToken 是放在第三个参数里。axios-0.27.2 中测试成功。

在即时响应的搜索框中可以这样处理：（vue3）

let cancelTokenSource;
const app = Vue.createApp({
    methods: {
        fn_list: function () {
            // 如果已有请求则取消
            cancelTokenSource && cancelTokenSource.cancel();
            // 创建一个新的请求
            cancelTokenSource = axios.CancelToken.source();
            axios.post(url, data, {
                cancelToken: cancelTokenSource.token
            }).then(function (response) {
                // 请求成功
            }).catch(function (error) {
                // 请求失败/取消
            });
        },
    }
});
const vm = app.mount('#app');

如果你用 jQuery，请参此文。

以 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"
}

错误 Web 部署任务失败。

在远程计算机上处理请求时出错。

无法执行此操作。请与服务器管理员联系，检查授权和委派设置。

原因：WDeployAdmin 与 WDeployConfigWriter 这两个用户密码过期。

解决方法：

第一步，打开用户管理，重新设置这两个用户的密码

并在“属性”窗口勾选“密码永不过期”

第二步，打开 IIS 管理器中的“管理服务委派”

找到所有与这两个用户有关的项，右键“编辑”

点击左下角的“设置”按钮，填入与原来一致的用户名与第一步新设置的密码

全部设置完成后，即可正常发布项目。

本文使用 ASP.NET 6 版本 Senparc.Weixin.Sample.MP 示例项目改造。

第一步 注册多公众号

方法一：打开 appsettings.json 文件，在 SenparcWeixinSetting 节点内添加数组节点 Items，该对象类型同 SenparcWeixinSetting。

//Senparc.Weixin SDK 设置
"SenparcWeixinSetting": {
  "IsDebug": true,
  "Token": "",
  "EncodingAESKey": "",
  "WeixinAppId": "",
  "WeixinAppSecret": "",
  "Items": [
    {
      "IsDebug": true,
      "Token": "a",
      "EncodingAESKey": "a",
      "WeixinAppId": "a",
      "WeixinAppSecret": "a"
    },
    {
      "IsDebug": true,
      "Token": "b",
      "EncodingAESKey": "b",
      "WeixinAppId": "b",
      "WeixinAppSecret": "b"
    }
  ]
}

方法二：修改 Program.cs 文件，在 UseSenparcWeixin 方法中注册多个公众号信息。

var registerService = app.UseSenparcWeixin(app.Environment,
    null /* 不为 null 则覆盖 appsettings  中的 SenparcSetting 配置*/,
    null /* 不为 null 则覆盖 appsettings  中的 SenparcWeixinSetting 配置*/,
    register => { /* CO2NET 全局配置 */ },
    (register, weixinSetting) =>
    {
        //注册公众号信息（可以执行多次，注册多个公众号）
        //register.RegisterMpAccount(weixinSetting, "【盛派网络小助手】公众号");
        foreach (var mp in 从数据库或配置文件中获取的公众号列表)
        {
            register.RegisterMpAccount(new SenparcWeixinSetting
            {
                //IsDebug = true,
                WeixinAppId = mp.AppId,
                WeixinAppSecret = mp.AppSecret,
                Token = mp.Token,
                EncodingAESKey = mp.EncodingAeskey,
            }, mp.Name);
        }
    });

完成后，我们可以从 Config.SenparcWeixinSetting.Items 获取这些信息。

第二步 接入验证与消息处理

打开 WeixinController 控制器，将构造函数改写为：

public WeixinController(IHttpContextAccessor httpContextAccessor)
{
    AppId = httpContextAccessor.HttpContext!.Request.Query["appId"];
    var MpSetting = Services.MPService.MpSettingByAppId(AppId);
    Token = MpSetting.Token;
    EncodingAESKey = MpSetting.EncodingAESKey;
}

示例中 Services.MPService.MpSettingByAppId() 方法实现从 Config.SenparcWeixinSetting.Items 返回指定 appId 的公众号信息。

为使 IHttpContextAccessor 注入生效，打开 Program.cs，在行

builder.Services.AddControllersWithViews();

下方插入

builder.Services.AddHttpContextAccessor();

这样，我们就可以在构造函数中直接获取地址栏中的 appId 参数，找到对应的公众号进行消息处理。

第三步 消息自动回复中的 AppId

打开 CustomMessageHandler.cs，将 

private string appId = Config.SenparcWeixinSetting.MpSetting.WeixinAppId;
private string appSecret = Config.SenparcWeixinSetting.MpSetting.WeixinAppSecret;

替换为：

private string appId = null!;
private string appSecret = null!;

并在构造函数中插入

appId = postModel.AppId;
appSecret = Services.MPService.MpSettingByAppId(postModel.AppId).WeixinAppSecret;

这样，本页中使用的 appId / appSecret 会从 postModel 中获取，而非默认公众号。postModel 已在 WeixinController 中赋值当前的 appId。

改造后，我们可以在 OnTextRequestAsync() 等处理消息的方法中可以判断 appId 来处理不同的消息。

第四步 其它功能和接口

其它功能和接口均可用指定的 AppId 和对应的 AppSecret 进行调用。

iPhone 或安卓上传的照片，可能因横向或纵向拍摄，导致上传后照片显示成 90 度、180 度、270 度角旋转，使用 C# 处理该照片时同样会遇到相同的问题。

解决的方案：

客户端使用 base64 显示图片，可按正常方向显示，且不通过服务端即时显示。关键代码：

$('#file_input').change(function (e) {
    if (e.target.files.length == 0) { return; }
    // file 转换为 base64
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = function (event) {
        $('#myImg').attr('src', event.target.result).css({ width: 'auto', height: 'auto' });
    }
});
$('#myImg').on('load', function () {
    console.log('图片加载完成')
});

但 base64 字符串传递到服务端受请求大小限制（一般比直接 POST 文件要小）。所以显示图片的同时应即时使用 POST 方式上传图片（如 jquery.fileupload.js）。

当然如果是在微信中打开网页，使用 JS-SDK 的 wx.chooseImage() 返回的 localId 也可以在 <img /> 中正常显示，然后使用 wx.uploadImage() 上传到微信服务器并获取 serverId，在通过获取临时素材接口取回图片文件。

服务端如果需要处理该图片（缩放、裁切、旋转等），需要先读取照片的拍摄角度，旋正后，再进行处理，相关 C# 代码：

/// <summary>
/// 调整照片的原始拍摄旋转角度
/// </summary>
/// <param name="img"></param>
/// <returns></returns>
private Image ImageRotateFlip(Image img)
{
    foreach (var prop in img.PropertyItems)
    {
        if (prop.Id == 0x112)
        {
            switch (prop.Value[0])
            {
                case 6: img.RotateFlip(RotateFlipType.Rotate90FlipNone); break;
                case 3: img.RotateFlip(RotateFlipType.Rotate180FlipNone); break;
                case 8: img.RotateFlip(RotateFlipType.Rotate270FlipNone); break;
            }
            prop.Value[0] = 1;
        }
    }
    return img;
}

m① R②

x① R②

① 表示屏幕尺寸，一般有 15、17 等

② 表示第几代，对应 CPU 和显卡的不同，数字越大越新

相同 ① 与 ② 的情况下仍有细分款式，对应内存、硬盘、屏幕分辨率刷新率等不同

x 系列是全新的系列，是 m 系列的更新款（m 系列不再更新），相比 m 系列提升了散热性能

x15 是板载内存，x17 是卡槽内存

x 系列屏幕有 1K165Hz / 1K360Hz / 2K240Hz（15寸独有）/ 4K120Hz（17寸独有）

x 系列有 2 个 M.2 硬盘位，没有 2.5 寸硬盘位

Area-51m R(数字)：可拆 CPU

Area-51m R2：10 代 i7，20 系显卡

以上规则整理于 2021 年 7 月，随着时间的推移，以上信息将逐渐失效。

1. 打开浙江省通信管理局网站

2. 点击“办事服务”

3. 滚动到底部，在“下载专栏”中找到“浙江省网站备案注销申请表”

4. 下载浙江省网站备案注销申请表，按填表说明填写表格、准备资料，邮寄到指定地址。

5. 管局将在收到资料到 7 个工作日内进行处理。

省通管局备案咨询电话：0571-87078277

本文更新于：2021年6月

“Web 部署”方式发布 ASP.NET Core 网站项目可解决发布到本地文件夹再通过 FTP 上传到 IIS 中会遇到的文件被锁定/占用的问题。相对于手动停止网站甚至结束进程来说，Web 部署更为方便。

1. 服务器管理器 - 添加角色和功能 - 服务器角色 - Web 服务器(IIS) - 管理工具 - 管理服务

   
   

2. 安装 Web Deploy

   下载 Web 部署，安装时选择“完整”
   

   

3. 在“服务”中设置“Web Management Service”和“Web 部署代理服务”自动启用。（若没有找到“Web 部署代理服务”，检查安装 Web Deploy 时是否勾选全部）

   

4. IIS 管理器 - 管理服务 - 启用远程连接

   

   这里我们不使用 Windows 凭据（本地用户），而使用 IIS 管理器用户。

   端口默认 8172，需要在防火墙中允许该端口。在阿里云 ECS 的安全组规则中添加该端口允许。

   

5. 创建 IIS 管理器用户

   

   打开后右侧添加用户，以“iisWebDeploy”为例

   
   

6. 配置 IIS 管理器权限

   选择单个网站

   

7. 给整个网站目录添加 LOCAL SERVICE 的完全控制权限 2023年在 Windows Server 2022 上未设置 LOCAL SERVICE 的权限也能部署成功，所以忽略此步骤！2024年同样在 Windows Server 2022 上未设置 LOCAL SERVICE 部署失败，设置后部署成功。

   
   

8. 发布

   

9. 【建议】设置用户 WDeployAdmin 与 WDeployConfigWriter 的密码永不过期，否则会遇到：在远程计算机上处理请求时出错。
   

   
   

一些已知错误的解决办法：

• 若遇到已下载的 Microsoft SQL Server 2012 Transact-SQL ScriptDom 签名验证失败，手动下载安装即可：Microsoft SQL Server 2012 SP4 功能包，选择 SqlDom.msi（有两个同名文件，感觉上尺寸较大的应该是 x64，我没有具体对比，安装大的成功了）。

• 若遇到 SQL Server 2012 SP1 Shared Management Object (x86 / x64) 下载失败，同样点击上面的链接，选择 SharedManagementObjects.msi 下载安装。

• Web Deploy 安装失败，如果 Web Deploy for Hosting Servers 下载失败，可以尝试安装 Web Deploy without bundled SQL support (last)。

• 如果是新项目，记得在 IIS 对应的网站中添加“IIS 管理器权限”中添加用户。

• 连接对话框中的“站点名称”或“网站名”必须与 IIS 中的网站名称一致。
  

• 还是无法连接？查看 IIS 管理服务中的 SSL 证书是否过期。

• Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失败。检查输出窗口了解更多详细信息。尝试在“控制面板-卸载或更改程序”中修复 Microsoft Web Deploy 程序。
  

前言：本文源于前几天看到的一条微博：

对于这种言论我并不赞同。我大学学的是化学，没有学习过计算机专业的课程，但我认为至少这个问题并不需要多么高端的计算机专业知识，只要中学数学没有全还给老师，就应该能给出至少一种解法。比如说，我就随便涂了一个多边形和一个点，现在我要找出一种通用的方法来判断这个点是不是在多边形内部（别告诉我用肉眼观察……）。

首先想到的一个解法是从这个点做一条射线，计算它跟多边形边界的交点个数，如果交点个数为奇数，那么点在多边形内部，否则点在多边形外。

这个结论很简单，那它是怎么来的？其实，对于平面内任意闭合曲线，我们都可以直观地认为，曲线把平面分割成了内、外两部分，其中“内”就是我们所谓的多边形区域。

基于这一认识，对于平面内任意一条直线，我们可以得出下面这些结论：

1. 直线穿越多边形边界时，有且只有两种情况：进入多边形或穿出多边形。

2. 在不考虑非欧空间的情况下，直线不可能从内部再次进入多边形，或从外部再次穿出多边形，即连续两次穿越边界的情况必然成对。

3. 直线可以无限延伸，而闭合曲线包围的区域是有限的，因此最后一次穿越多边形边界，一定是穿出多边形，到达外部。

现在回到我们最初的题目。假如我们从一个给定的点做射线，还可以得出下面两条结论：

1. 如果点在多边形内部，射线第一次穿越边界一定是穿出多边形。

2. 如果点在多边形外部，射线第一次穿越边界一定是进入多边形。

把上面这些结论综合起来，我们可以归纳出：

1. 当射线穿越多边形边界的次数为偶数时，所有第偶数次（包括最后一次）穿越都是穿出，因此所有第奇数次（包括第一次）穿越为穿入，由此可推断点在多边形外部。

   

2. 当射线穿越多边形边界的次数为奇数时，所有第奇数次（包括第一次和最后一次）穿越都是穿出，由此可推断点在多边形内部。

   

到这里，我们已经了解这个解法的思路了，下面接着看算法实现的一些具体问题和边界条件的处理。

1. 点在多边形的边上

   上面我们讲到，这个解法的主要思路就是计算射线穿越多边形边界的次数，那么对于点在多边形的边上这种特殊情况，射线出发的这一次，是否应该算作穿越呢？

   

   看了上面的图就会发现，不管算不算穿越，都会陷入两难的境地——同样落在多边形边上的点，可能会得到相反的结果。这显然是不正确的，因此对这种特殊情况需要特殊处理。

2. 点和多边形的顶点重合

   这其实是第一种情况的一个特例。

   

3. 射线经过多边形顶点

   射线刚好经过多边形顶点的时候，应该算一次还是两次穿越？这种情况比前两种复杂，也是实现中的难点。

   

4. 射线刚好经过多边形的一条边

   这是上一种情况的特例，也就是说，射线连续经过了多边形的两个相邻顶点。

   

解决方案：

1. 判断点是否在线上的方法有很多，比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等，中学数学都学过。

2. 点和多边形顶点重合的情况更简单，直接比较点的坐标就行了。

3. 顶点穿越看似棘手，其实我们换一个角度，思路会大不相同。先来回答一个问题，射线穿越一条线段需要什么前提条件？没错，就是线段两个端点分别在射线两侧。只要想通这一点，顶点穿越就迎刃而解了。这样一来，我们只需要规定被射线穿越的点都算作其中一侧。

   

   如上图，假如我们规定射线经过的点都属于射线以上的一侧，显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧，所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧，所以射线 Y 和 BC 发生了穿越，由此我们可以断定点 Y 在多边形内。同理，射线 X 分别与 AD 和 CD 都发生了穿越，因此点 X 在多边形外，而射线 Z 没有和多边形发生穿越，点 Z 位于多边形外。

4. 解决了第三点，这一点就毫无难度了。根据上面的假设，射线连续经过的两个顶点显然都位于射线以上的一侧，因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例，因此不需要再做特别的处理。

这种简单直观的算法通常叫做射线法或奇偶法，下面给出 JavaScript 的算法实现。

/**
 * @description 射线法判断点是否在多边形内部
 * @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
 * @param {Array} poly 多边形顶点，数组成员的格式同 p
 * @return {String} 点 p 和多边形 poly 的几何关系
 */function rayCasting(p, poly) {
  var px = p.x,
      py = p.y,
      flag = false

  for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
    var sx = poly[i].x,
        sy = poly[i].y,
        tx = poly[j].x,
        ty = poly[j].y

    // 点与多边形顶点重合
    if((sx === px && sy === py) || (tx === px && ty === py)) {
      return 'on'
    }

    // 判断线段两端点是否在射线两侧
    if((sy < py && ty >= py) || (sy >= py && ty < py)) {
      // 线段上与射线 Y 坐标相同的点的 X 坐标
      var x = sx + (py - sy) * (tx - sx) / (ty - sy)

      // 点在多边形的边上
      if(x === px) {
        return 'on'
      }

      // 射线穿过多边形的边界
      if(x > px) {
        flag = !flag
      }
    }
  }

  // 射线穿过多边形边界的次数为奇数时点在多边形内
  return flag ? 'in' : 'out'}

除了射线法还有很多其他的方法，下面再介绍一种回转数法。

平面中的闭合曲线关于一个点的回转数（又叫卷绕数），代表了曲线绕过该点的总次数。下面这张图动态演示了回转数的概念：图中红色曲线关于点（人所在位置）的回转数为 2。

回转数是拓扑学中的一个基本概念，具有很重要的性质和用途。本文并不打算在这一点上展开论述，这需要具备相当的数学知识，否则会非常乏味和难以理解。我们暂时只需要记住回转数的一个特性就行了：当回转数为 0 时，点在闭合曲线外部（回转数大于 0 时所代表的含义，大家可以自己想一想，还是很有趣的）。

对于给定的点和多边形，回转数应该怎么计算呢？

1. 用线段分别连接点和多边形的全部顶点。

   

2. 计算所有点与相邻顶点连线的夹角。

   

3. 计算所有夹角和。注意每个夹角都是有方向的，所以有可能是负值。

   

4. 最后根据角度累加值计算回转数。看过前面的介绍，很容易理解 360°（2π）相当于一次回转。

思路介绍完了，下面两点是实现中需要留意的问题。

1. JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数，浮点数计算不可避免会造成一些误差，因此在最后计算回转数时需要做取整操作。

2. 通常情况下，平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间，这也是 JavaScript 三角函数 Math.atan2() 返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角，我们只能先计算两条线与 X 正轴夹角，再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间，因此我们还需要处理差值超出取值区间的情况。

这里也给出回转数法的 JavaScript 实现。

/**
 * @description 回转数法判断点是否在多边形内部
 * @param {Object} p 待判断的点，格式：{ x: X 坐标, y: Y 坐标 }
 * @param {Array} poly 多边形顶点，数组成员的格式同 p
 * @return {String} 点 p 和多边形 poly 的几何关系
 */function windingNumber(p, poly) {
  var px = p.x,
      py = p.y,
      sum = 0

  for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
    var sx = poly[i].x,
        sy = poly[i].y,
        tx = poly[j].x,
        ty = poly[j].y

    // 点与多边形顶点重合或在多边形的边上
    if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
      return 'on'
    }

    // 点与相邻顶点连线的夹角
    var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px)

    // 确保夹角不超出取值范围（-π 到 π）
    if(angle >= Math.PI) {
      angle = angle - Math.PI * 2
    } else if(angle <= -Math.PI) {
      angle = angle + Math.PI * 2
    }

    sum += angle
  }

  // 计算回转数并判断点和多边形的几何关系
  return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'}

也有人问到像下面这种复杂多边形有没有办法？答案是肯定的。至于为什么，就留给大家思考吧。

本文示例：https://xoyozo.net/Demo/IsThePointInsideThePolygon