本文介绍 Token 认证和 HMAC 认证两种方式。
一、Token 接口认证方式
原理：
客户端使用账号密码等信息登录，服务器验证通过后生成一个 Token 发送给客户端。客户端在后续的请求中携带这个 Token，服务器通过验证 Token 来确认用户的身份和权限。
应用场景：移动应用、Web 应用（特别是 SPA）
优点：
无状态性，即服务器不需要存储用户的会话信息。
易于实现跨域认证。
缺点：
Token 可能被窃取，应使用 HTTPS、不暴露在 URL 中、使用 HttpOnly 的 Cookie、对 Session ID 进行验证、设置合理过期时间、对 Token 进行加密等措施加强防范。
二、HMAC 接口认证方式
原理：
客户端将消息M与密钥K连接起来，通过哈希函数计算得到 HMAC 值，发送给服务器。服务器收到请求后，使用相同的密钥和请求参数重新计算 HMAC 值，如果与客户端发送的签名一致，即是合法请求。
优点：
安全性较高，攻击者很难伪造 HMAC 值，截获并篡改数据也无法通过服务端验证。
计算效率较高，哈希函数（如 MD5、SHA-1、SHA-256 等）计算效率比较高。
缺点：
密钥的更新和管理比较麻烦。
扩展：
在消息体中添加时间戳以防止重放攻击。
加密隐私数据：可以使用对称加密算法（如 AES）或非对称加密算法（如 RSA、ECC 等）对部分隐私数据进行加密。非对称算法虽然更安全，但速度较慢，如需加密大量数据，可以考虑使用对称加密算法进行加密，然后使用非对称加密算法对对称密钥进行加密。
前几天实现了在 nginx 中使用 lua 实现远程鉴权，今天想试试在 IIS 中能不能实现相同的功能。查询资料发现需要使用 URL 重写和 HTTP 请求模块，没有深究。干脆使用 ASP.NET 中间件来实现吧。
在 StratUp.cs 的 Configure 方法中，或 Program.cs 文件中添加以下代码：
// 远程鉴权
app.Use(async (context, next) =>
{
var ip = context.Connection.RemoteIpAddress!.ToString();
var ua = context.Request.Headers.UserAgent.ToString();
var host = context.Request.Host.Host;
var uri = new Uri(context.Request.GetDisplayUrl()).PathAndQuery;
var client = new HttpClient();
client.Timeout = TimeSpan.FromSeconds(1); // 设置超时时间
try
{
var requestUrl = "https://鉴权地址/";
var requestMessage = new HttpRequestMessage(HttpMethod.Get, requestUrl);
requestMessage.Headers.Add("X-Real-IP", ip);
requestMessage.Headers.Add("User-Agent", ua);
requestMessage.Headers.Add("X-Forwarded-Host", host);
requestMessage.Headers.Add("X-Forwarded-Uri", uri);
// 发送请求
var response = await client.SendAsync(requestMessage);
// 检查响应状态码
if (response.StatusCode == HttpStatusCode.Forbidden)
{
// 如果返回403，则拒绝访问
context.Response.StatusCode = (int)HttpStatusCode.Forbidden;
await context.Response.WriteAsync("Access Denied");
}
else
{
// 如果返回其他状态码，则继续执行管道中的下一个中间件
await next();
}
}
catch (TaskCanceledException ex) when (ex.CancellationToken.IsCancellationRequested)
{
// 如果请求超时（任务被取消），则继续执行管道中的下一个中间件
await next();
}
catch
{
// 如果遇到错误，则继续执行管道中的下一个中间件
await next();
}
});代码很简单，使用 HttpClient 发送请求，若返回 403 则拒绝访问，其它情况继续执行业务逻辑，超时或报错的情况按需修改即可。
若鉴权接口在私网中，建议将鉴权接口域名和私网 IP 添加到 hosts 文件中。
http {
...
lua_shared_dict cpu_cache 1m; # 定义共享字典用于缓存 CPU 使用率
access_by_lua_block {
local cpu_cache = ngx.shared.cpu_cache
local cache_time = cpu_cache:get("cache_time") or 0
local current_time = ngx.now()
if current_time - cache_time > 5 then -- 每 5 秒更新一次
local cpu_info = io.popen("top -bn1 | grep 'Cpu(s)'"):read("*all")
local cpu_usage = cpu_info:match("(%d+%.%d+) id") -- 获取空闲 CPU 百分比
local cpu_used = 100 - tonumber(cpu_usage) -- 计算使用率
cpu_cache:set("cpu_usage", cpu_used)
cpu_cache:set("cache_time", current_time)
end
local cpu_usage = cpu_cache:get("cpu_usage")
ngx.log(ngx.INFO, "CPU 使用率: " .. cpu_usage .. "%")
-- 将 cpu_usage 发送到远程鉴权接口，可根据服务器压力来决定是否拒绝一些不重要的请求
}
}代码解析：
共享字典：使用 lua_shared_dict 定义一个共享字典 cpu_cache，用于存储 CPU 使用率和缓存时间。
获取 CPU 使用率：在 access_by_lua_block 中，检查缓存时间，如果超过 5 秒，则重新获取 CPU 使用率，并更新共享字典。
记录日志：使用 ngx.log 将 CPU 使用率记录到 Nginx 日志中。
注意事项：
确保 Nginx 配置中已经加载了 Lua 模块（如 ngx_http_lua_module）。
根据实际需求调整缓存时间，以平衡性能和数据的实时性。
尝试过使用 ifconfig 或 ip 命令获取网卡流量，在宝塔面板中失败了，怀疑是权限问题，有空再研究。临时方案是鉴权接口定时调用宝塔面板 API 或阿里云控制台 API 来获取 ECS 的 CPU 和带宽使用率。
今天早上同事反映论坛某管理账号无法登录，于是我尝试用创始人账号登录，也不行，第一反应就是中招了。
于是进阿里云控制台，发现云安全中心有许多安全警告，类型是网站后门，幸好 nginx 中设置了仅部分文件可执行 PHP，这些后门文件无法被执行。
尝试在 config_global_default.php 文件中添加创始人，但账号必须是副站长等管理账号才能成为创始人。
于是借用一个小号，从表 pre_ucenter_members 中将这个小号的 password 和 salt 复制到创始人账号中，这样创始人账号就可以用这个小号的密码登录了。
进入论坛后台，在 工具-运行记录-系统记录-后台访问 中查看入侵时间段的记录（操作、时间、IP 等），可搜索。
发现基本上在操作模板管理和专题管理。
对比时间，发现进入后台操作在先，上传后门在后。
查询 web 访问日志，通过访问文件路径或 IP 查询，在进入论坛后台之间，他进入了 UCenter 的后台，但是再往前就没有记录了。
因此基本可以确定：
黑客从 UCenter 修改了某管理员账号的密码（可能是利用漏洞），然后登录论坛后台修改了创始人的密码（可能也是用 UCenter 改的），通过模板管理和专题管理功能的上传功能上传了后门文件。
索性他没有对数据进行破坏性处理，也没有挂马，只是发现后门文件无法执行就放弃了。
一年前记录过浏览器上如何下载小鹅通的课程视频，现在发现那个插件已经不能用了，所以重新整理了一下，下载过程比上次简单多了。
插件还是那只可爱的小黄猫
GitHub 地址：https://github.com/xifangczy/cat-catch
浏览器扩展安装地址：Chrome / Edge / Firefox
与之前相比，功能改进了不少：
“从头捕获”，不需要手动拖动进度条，生怕没有录制完全。但是实际使用还是会丢失一部分开头，希望下个版本改进；
“使用 ffmpeg 合并”可以自动合并捕获的视频和音频，下载得到的是一个完整的视频文件；
“自动跳转到缓冲尾”可以不间断加载、节省录制时间，对下载非直播画面非常有用；
可以设置播放速度，点击扩展图标，在“其他页面 / 媒体控制”中可以设置。但是有了“自动跳转到缓冲尾”，我觉得设置播放速度这个功能可有可无。
开始录制：
在浏览器上安装扩展后，打开需要录制视频的页面，点击缓存捕获：
然后在面板上点击“从头捕获”：
插件就自动开始从头播放并记录缓存了。
建议勾选“完成捕获自动下载”、“使用 ffmpeg 合并”。
如果是录制“非直播”，建议勾选“自动跳转到缓冲尾”。
另外两个选项“始终从头捕获”、“清理多余头部数据”我没有深入研究，有兴趣的自己研究下。
播放完成后，会自动打开一个“猫抓 cat-catch”的网页，自动使用 ffmpeg 进行转码与合并。
完成后自动下载该文件。
提示：如果要继续捕获其它视频，请先关闭那个“猫抓 cat-catch”网页，否则捕获完成后无法下载。
解析域名（非网站域名）、修改实例名称、主机名
设置阿里云（重要）
远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 22 端口，可在阿里云控制台登录系统，或先在安全组临时放行 22 端口）
修复系统漏洞
将磁盘挂载到目录（fdisk、df 命令参考：https://xoyozo.net/Blog/Details/SSH）
安装宝塔面板（本文以宝塔面板方案为例，选择任何你喜欢的环境部署方案都行）。可以在阿里云控制台ECS实例页安装扩展程序
临时放行宝塔面板端口，进入宝塔面板（http方式），或用命令更改宝塔面板端口
配置面板 SSH、添加新的安全端口、面板设置
更改 SSH 默认端口（参：https://xoyozo.net/Blog/Details/change-default-port）
安装 nginx、PHP 等
配置 PHP 扩展（Redis、sqlsrv（注意选择兼容的版本）、memcached 及端口）
创建网站，配置网站（路径、伪静态等）
迁移网站文件（参：https://xoyozo.net/Blog/Details/SSH）
仔细对比新旧网站的配置文件（特别是 .php 的访问权限，参：https://xoyozo.net/Blog/Details/nginx-location-if）
设置写入目录（使用 rsync 同步的文件会同步用户和权限）
解析域名（先改 hosts 测试网站功能）
更改内网其它 ECS 上的 hosts
关闭原 ECS（能马上发现问题，不然等运行一段时间才发现问题就麻烦点）
设置 FTP
迁移“计划任务”
所有网站和软件的配置文件都要使用 WinMerge 进行对比
移除“宝塔面板-安全”和“阿里云-ECS-安全组”中不用的端口
再次检查阿里云设置
私网中若有 ECS 的 hosts 中域名直接绑定到私网 IP 的，做相应更改
其它：ERP添加到期提醒、WAF增加ECS、备份工具增加ECS
更多文章：
一、活动时间
2023年10月31日0点0分0秒至2026年3月31日23点59分59秒
二、活动对象
同时满足以下全部条件的阿里云用户：
1、阿里云注册会员用户；
2、完成阿里云实名认证；
3、符合活动规则的新老用户，均可参与。
三、活动权益参与规则
1、云服务器ECS经济型e实例（简称“99实例”或“99元e实例”）活动范围：
个人认证或者企业认证的用户购买指定配置“e实例2核2G，3M固定带宽，40G ESSD Entry 系统盘”可享受包1年99元，活动地域包含北京，杭州，上海，张家口，呼和浩特，深圳，成都，河源，乌兰察布，广州。
2、云服务器通用算力型u1实例（简称“199实例”或“199元u1实例”）活动范围：
企业认证的用户购买指定配置“u1实例2核4G，5M固定带宽，80G ESSD Entry 系统盘”可享受包1年199元，活动地域包含青岛，北京，杭州，上海，深圳，成都，河源，乌兰察布，广州，中国香港，日本（东京），新加坡，美国（硅谷），英国（伦敦），德国（法兰克福）。
3、活动说明：
在活动期间内，同一个人认证主体只可保有1个“99元e实例”；同一企业认证主体最多可同时保有1个“99元e实例”和1个“199元u1实例”，实例到期后在活动时间范围内可持续以低价续费保有，另购使用官网价。本次优惠不可与优惠券叠加使用。同一用户同一时间只能保有一个“99实例”或者“199实例”。
四、购买场景
1、新购场景：
在符合参与规则的情况下，直接低价购买指定配置产品，有效期1年。若无法购买，请确认是否存在同人或其他实例已占用等情况。
2、续费场景：
在活动时间内，指定配置每年最多可以以优惠价格续费1次，1次1年，直到活动时间结束持续享受续费优惠。
备注：若续费其他实例时使用了低价权益，原低价产品实例将无法再享受低价权益。
根据以上规则，常见场景有以下几种：
场景1：若您在2023年10月31日新购“99元e实例”，您可在2023年10月31日至2024年10月30日（即新购后的一年内）完成第一次续费（此时服务器到期时间为2025年10月30日）；可在2024年10月31日至2025年10月30日完成第二次续费（此时服务器到期时间为2026年10月30日）；可在2025年10月31日至2026年3月31日完成第三次续费（此时服务器到期时间为2027年10月30日）；
即连续以99元1年的价格续费3年，可以使用“99元e实例”至2027年10月30日，该服务器总保有时长4年。
场景2：若您在2026年3月31日（活动截止前最后一天）新购“99元e实例”/“199元u1实例”，您可在2026年3月31日当天完成一次续费（此时服务器到期时间为2028年3月31日）；
即以99元/199元1年的价格续费1年，可以使用“99元e实例”/“199元u1实例”至2028年3月31日，该服务器总保有时长2年。
场景3：若您在2024年4月1日新购“99元e实例”/“199元u1实例”，您可在2024年4月1日至2025年3月31日完成第一次续费（此时服务器到期时间为2026年3月31日）；您可在2025年4月1日至2026年3月31日完成第二次续费（此时服务器到期时间为2027年3月31日）；
即连续以99元/199元1年的价格续费2年，可以使用“99元e实例”/“199元u1实例”至2027年3月31日，服务器总保有时长3年。
3、退订场景：
支持五天无理由退款，退款后保留“低价长效”优惠资格，在活动时间范围内可再次使用低价购买活动配置；
4、变配场景：
变配至“低价长效优惠”指定配置时当前付费周期不享受低价权益，续费时可享受包1年99元/199元优惠；“低价长效优惠”指定配置发生变配/升级/降配操作后，变配需按照官网价补差价，请仔细阅读变配页面引导及相关资费说明，但仍占用权益资格直到该实例释放，购买相同规格产品不能再享受低价，同时续费时也不再享受包1年99元/199元优惠；
5、如用户账号有欠费，需先补足欠费再进行购买。
6、低价权益产品仅供账号本人使用，不允许过户转让。
7、如在参与“低价长效”优惠过程中，使用其他收费产品/功能，则需按照产品/功能标准资费支付超额产生的费用。
8、其他规则：
阿里云有权根据业务需求，随时调整提供给用户低价购买的产品范围、产品数量、产品配置、购买规则等，用户应以购买时相关页面的展示内容为准，但不影响用户在活动规则调整前已经获得的权益。
9、禁止使用产品来挖掘货币，如您使用产品来挖掘货币，可能会被收取费用及取消权益资格。
10、为保证活动的公平公正，如用户在活动中存在隐瞒、虚构、作弊、欺诈或通过其他非正常手段规避活动规则、获取不当利益的行为，例如：作弊领取、恶意套现、网络攻击、虚假交易等，阿里云有权收回相关权益、取消用户的活动参与资格，撤销违规交易，必要时追究违规用户的法律责任。
您应确保您对云服务器的使用不侵犯他人著作权，不会用于私服架设服务、私服程序、私服网站、私服源码、私服服务器和空间等。
五、常见FAQ：
1.用户在购买完99实例/199实例后，如果因某些原因导致需要退款或者释放实例，还可以再以99元/199元的优惠价格重新购买吗？
答：可以，99实例/199实例支持五天无理由退款，退款后仍然保留优惠资格，用户在活动时间范围内可再次使用低价购买活动配置；
2.活动规则里写的1年续费1次中，“1年”指的是自然年吗？
答：“1年”指的是云服务器购买1年的付费周期，即两次续费时间必须间隔1年以上；
3.99实例/199实例优惠套餐最多可以享受几年的优惠？
答：若您在24年3月31日前首次新购99实例/199实例优惠套餐，最多可以享受4年优惠（包含新购1次，续费3次，1次1年）；
六、相关名词及解释
1、“阿里云官网”，是指包含域名为 www.aliyun.com/ 的网站以及阿里云客户端，如APP，但阿里云国际站，包括alibabacloud.com以及所有下属页面和jp.aliyun.com以及所有下属页面除外。
2、“同一用户”，是指根据不同阿里云账号在注册、登录、使用中的关联信息，阿里云判断其实际为同一用户。关联信息举例：同一手机号、同一邮箱、同一证件等。
3、“同人账号”，是指同一用户拥有多个阿里云账号的，各个账号之间互为同人账号。
4、“新用户”，是指在阿里云官网没有收费云产品购买记录的阿里云会员用户。新用户在进行首次云产品购买行为时，也被称为“首购用户”。
5、“老用户”，是指在阿里云官网已有收费云产品购买记录的阿里云会员用户。
6、“云产品”，是指阿里云官网售卖的中国大陆节点的产品和服务，但不包括域名、虚拟主机、云市场产品、专有云产品，云通信产品。
7、“指定云产品”，是指某场具体活动页面列举的活动云产品。
8、活动中涉及“打折”、“折扣”、“×折”或“省××元”，是指将本活动期间的某款产品的活动价格，与无任何活动期间的相同产品的日常最小单位售价（例如：月价），按相同购买时长进行比较后，所获得的比较结果。
9、活动涉及的“划线价”、“日常价”，通常是指该产品曾经展示过的销售价，并非原价，仅供参考。具体活动页面单独对“划线价”、“日常价”进行说明的，以其表述为准。
10、除非有相反证据证明外，用户参与活动所获得的全部权益和相应责任，均归属于参与活动的该阿里云账号所对应的实名认证主体。
11、活动中的“天”、“日”、“工作日”等均指该日的0点至24点（北京时间）。
12、阿里云可以根据活动的实际情况对活动规则进行变动或调整，相关变动或调整将公布在活动页面上，并于公布时即时生效；但不影响用户在活动规则调整前已经获得的权益。您购买阿里云单项产品时，亦应遵守该产品法律服务协议。
13、活动页面提到的“核” ，均指vcpu。
解析域名（非网站域名）、挂载磁盘（若有另购）、修改实例名称、主机名
设置阿里云（重要）
远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 3389 端口，可先在安全组临时放行 3389 端口）
开启 Windows 防火墙（使用推荐设置）
Windows 更新、并在高级选项中开启（更新 Windows 时接收其它 Microsoft 产品的更新）
安装 IIS：服务器管理器-添加角色和功能-勾选“Web 服务器(IIS)”包括管理工具
建议勾选：
默认已勾选项
按需安装 IP 和域限制
跟踪（即“失败请求跟踪”）
请求监视器、日志记录工具、
按需安装 ASP
按需安装 ASP.NET 4.8（会同时勾选 .NET Extensibility 4.8、ISAPI 扩展、ISAPI 筛选器）
按需安装 WebSocket 协议
应用程序初始化（建议安装）
管理服务（用于 Web 部署）
细节：设置任务栏；设置桌面图标；个性化-颜色-勾选“标题栏和窗口边框”；设置输入法；
下载 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）
服务：设置“ASP.NET State Service”自动启动
IIS 日志：路径（如 D:\wwwlogs），每小时（统一设置一个全局的就行了，不需要设置每个网站），按需勾选“使用本地时间进行文件命名和滚动更新”
IIS 导入证书：个人、允许导出证书。参
设置权限：设置网站所在分区（如 D 盘），安全，添加 IIS_IUSRS，全部拒绝（防止跨站）
添加用户：为每个网站创建用户（既能防止跨站，又能跟踪进程），密码不能改、不过期，仅隶属于 IIS_IUSRS，并添加到每个网站的根目录，若用户创建失败看这里。
创建网站：设置访问物理路径的用户；设置应用程序池的“标识”用户；编辑绑定：勾选需要服务器名称指示；检查域名是否绑全；设置写入目录；
重复上面两步
检查所有网站用户是否仅隶属于 IIS_IUSRS（在“组”页面双击 Users 和 IIS_IUSRS 查看成员）
在应用程序池列表页面检查 CLR 版本、管托管道模式和标识；在网站列表页面检查绑定和路径
设置“IP 地址和域限制”
废弃旧服时再次检查：IIS 中各功能设置、hosts、安装的应用程序、启动项、服务、防火墙等
解析各网站域名
其它：资源管理器-查看-选项-查看-去掉“始终显示图标，从不显示缩略图”前的勾
再次检查阿里云设置
在备份工具中添加该服务器的所有备份项
其它：到期日期提醒、
>> 关于域名解析
因各地域名解析生效时间不可控，一般国内域名 1 天内，国际域名 2 天内。
若网站数据库在 RDS、上传文件在 OSS，则解析 48 小时后直接停止原网站即可；（比较理想的）
文件上传到 ECS 的可使用 FTP 等工具定时同步文件，或直接停止原网站。（网友会遇到新文章中图片无法显示等问题）
还有一种方法是新网站提前解析一个备用域名，确保完全生效后再修改正式域名的解析，原网站无条件跳转到备用域名，如果数据库中有保存完整网址路径的，关闭原网站并解绑备用域名之后，进行批量替换。（缺点是可能会影响在搜索引擎的网站权重）
部分有定时器的网站要注意，如果两个网站的定时器都正常开启会导致意外的，需要停止其中一个网站的定时器。
当然每种方法都有优缺点，选择可以接受且方便的一种即可。
更多文章：
从 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。
不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。
方式一、监听 paste 事件：
const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
input.value = event.clipboardData.getData('text');
});这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。
经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。
方式二、监听 keydown 事件：
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
input.value = clipboardData.getData('text');
}
});测试发现报错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'getData')
Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')
看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
window.navigator.clipboard.readText().then(text => {
input.value = text;
});
}
});缺点是需要用户授权：
仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。
以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。
兼容更多时间格式，并调整时区
<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。
当然如果希望支持中文的年月日，可以先用正则表达式替换一下：
text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");处理页面上的所有 <input type="date" />
const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
input.addEventListener(...);
});封装为独立域
避免全局变量污染，使用 IIFE 函数表达式：
(function() {
// 将代码放在这里
})();或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。
在 Vue 中使用
如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：
<div id="app">
<input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
{{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
a: null,
}
},
methods: {
fn_pasteToDateInput: function (event) {
const text = event.clipboardData.getData('text');
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
const att = event.target.getAttribute('data-model');
this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}
},
}
});
const vm = app.mount('#app');
</script>示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。
如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值
let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);