不知道从哪个版本的 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); // vue2
target[atts[atts.length - 1]] = text; // vue3
错误 BLAZOR102 The scoped css file was defined but no associated razor component or view was found for it.
错误 BLAZOR106 The JS module file was defined but no associated razor component or view was found for it.
解决方法：将相关文件从项目中排除，再包括到项目中即可正常生成。
若仍报错，备份这些文件，删除并新建文件，复制代码进去尝试生成。
若仍报错，通过注释代码的方式排查问题原因。
本文以 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>普通的 nginx http 反向代理 https 时是需要配置证书的，但我们又不可能由源域名的证书，所以要使用 nginx 的 stream 模块。普通的 nginx 反向代理属于第七层代理，而 stream 模块是第四层代理，通过转发的 tcp/ip 协议实现高功能，所以不需要证书。
我们这里以使用宝塔安装的 nginx 为例，其实其他系统也是类似，只要找到编译的 nginx 的源码目录就行了
编译前先将已经安装的 nginx 文件进行备份
通过 ps 命令查看 nginx 文件的路径。以下所有步骤都以自身 nginx 路径为准
# ps -elf | grep nginx
# cd /www/server/nginx/sbin/
# cp nginx nginx.bak然后查看当前 nginx 编译的参数
/www/server/nginx/sbin/nginx -V将 ./configure arguents：之后的内容复制到记事本备用（备注：我们这里其实使用的是 Tengine-2.3.1，所以下面的编译参数可能跟普通 nginx 不是很一样）
内容如下：
--user=www --group=www --prefix=/www/server/nginx --add-module=/www/server/nginx/src/ngx_devel_kit --with-openssl=/www/server/nginx/src/openssl --add-module=/www/server/nginx/src/ngx_cache_purge --add-module=/www/server/nginx/src/nginx-sticky-module --add-module=/www/server/nginx/src/lua_nginx_module --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_image_filter_module --with-http_gzip_static_module --with-http_gunzip_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --with-pcre=pcre-8.42 --with-cc-opt=-Wno-error --add-module=/www/server/nginx/src/ngx-pagespeed
进入 src 目录
cd /www/server/nginx/src我们在上面的内容中加入两个参数
./configure --user=www --group=www --prefix=/www/server/nginx --add-module=/www/server/nginx/src/ngx_devel_kit --with-openssl=/www/server/nginx/src/openssl --add-module=/www/server/nginx/src/ngx_cache_purge --add-module=/www/server/nginx/src/nginx-sticky-module --add-module=/www/server/nginx/src/lua_nginx_module --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_image_filter_module --with-http_gzip_static_module --with-http_gunzip_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --with-pcre=pcre-8.42 --with-cc-opt=-Wno-error --add-module=/www/server/nginx/src/ngx-pagespeed --with-stream --with-stream_ssl_preread_module
并执行它
然后
make && make install重启 nginx
service nginx restartnginx -V 看看模块是不是加载了
新建个站点，配置反向代理
卸载
使用 nginx.bak 文件替换掉自编译的 nginx 文件，替换后重启 nginx。
如果你的视图页面（.cshtml）是由另一个视图页面复制而来的，就有可能出现开发调试时正常，发布到服务器后打开报 500 错误。
解决方法是：新建一个 .cshtml 页面，将代码移植到这个文件上，删除原来的页面，更改刚创建的文件名。
你也可以直接修改项目文件将视图页面重新包含到项目中。
通过 nuget 安装 UEditorNetCore
从 UEditor 官网 下载最新的包 ueditorx_x_x_x-utf8-net.zip
解压包，并复制到项目的 wwwroot/lib 目录下，删除 net 目录。
根据 UEditorNetCore 官方的使用说明进行操作
步骤中，控制器 UEditorController 接替原 controller.ashx 的功能，用于统一处理上传逻辑
原 config.json 复制到项目根目录，用于配置上传相关设置（若更改文件名和路径在 services.AddUEditorService() 中处理）。
个人喜欢将 xxxPathFormat 值改为：upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}，方便日后迁移附件后进行批量替换。
记得配置 catcherLocalDomain 项。
上传相关的身份验证和授权控制请在 UEditorController 中处理，如：
public void Do()
{
if (用户未登录) { throw new System.Exception("请登录后再试"); }
_ue.DoAction(HttpContext);
}如果图片仅仅上传到网站目录下，那么这样配置就结束了，如果要上传到阿里云 OSS 等第三方图床，那么继续往下看。
因 UEditorNetCore 虽然实现了上传到 FTP 和 OSS 的功能，但未提供配置相关的账号信息的途径，所以只能（1）重写 action，或（2）下载 github 的源代码，将核心项目加入到您的项目中进行修改。
重写 action 不方便后期维护，这里记录修改源码的方式。
将源码改造为可配置账号的上传到 OSS 的功能，具体步骤如下：
将 Consts.cs 从项目中排除。
打开 Handlers/UploadHandler.cs，找到 UploadConfig 类，将
FtpUpload 改为 OssUpload，
FtpAccount 改为 OssAccessKeyId，
FtpPwd 改为 OssAccessKeySecret，
FtpIp 改为 OssAccessEndpoint，
再添加一个属性 OssBucketName。
打开 Handlers/UploadHandler.cs，找到 Process() 方法，
将 UploadConfig.FtpUpload 改为 UploadConfig.OssUpload，
将 Consts.AliyunOssServer.* 改为 UploadConfig.Oss*。
打开 Handlers/CrawlerHandler.cs，找到 Fetch() 方法，
将 Config.GetValue<bool>("catcherFtpUpload") 改为 Config.GetValue<bool>("OssUpload")，
将 Consts.AliyunOssServer.* 改为 Config.GetString("Oss*")。
打开 UEditorActionCollection.cs，找到 UploadImageAction，将
FtpUpload = Config.GetValue<bool>("imageFtpUpload"), FtpAccount = Consts.ImgFtpServer.account, FtpPwd = Consts.ImgFtpServer.pwd, FtpIp = Consts.ImgFtpServer.ip,替换为
OssUpload = Config.GetValue<bool>("OssUpload"), OssAccessKeyId = Config.GetString("OssAccessKeyId"), OssAccessKeySecret = Config.GetString("OssAccessKeySecret"), OssAccessEndpoint = Config.GetString("OssAccessEndpoint"), OssBucketName = Config.GetString("OssBucketName"),其余 3 个 Action（UploadScrawlAction、UploadVideoAction、UploadFileAction）按同样的方式修改。
在所有创建 UploadHandler 对象时补充添加 SaveAbsolutePath 属性。
打开 config.json，添加相关配置项（注：配置文件中的 *FtpUpload 全部废弃，统一由 OssUpload 决定）
"OssUpload": true, "OssAccessEndpoint": "", "OssAccessKeyId": "", "OssAccessKeySecret": "", "OssBucketName": "",将 xxxUrlPrefix 的值改为 OSS 对应的 CDN 网址（以 / 结尾，如：//cdn.xoyozo.net/）。
其它注意点：
若使用 UEditorNetCore github 提供的源代码类库代替 nuget，且使用本地存储，那么需要将 Handlers 目录中与定义 savePath 相关的代码（查找 var savePath）替换成被注释的行
纯真 IP 数据库官方下载地址：http://www.cz88.net/
下载安装纯真 IP，将 qqwry.dat 文件复制到项目下。（本文以放在 /App_Data/ 目录下为例）
在 qqwry.dat 上右键打开属性窗口，将“复制到输出目录”切换到“始终复制”或“如果较新则复制”。
通过 nuget 安装 QQWry，喜欢依赖注入方式的可以选择 QQWry.DependencyInjectio。
var config = new QQWryOptions
{
DbPath = dbPath ?? (AppContext.BaseDirectory + @"App_Data\qqwry.dat")
};
var ipSearch = new QQWryIpSearch(config);
var ipl = ipSearch.GetIpLocation(ip);
return new IpLocation
{
Ip = ipl.Ip,
Country = ipl.Country?.Replace("CZ88.NET", "").Trim(),
Area = ipl.Area?.Replace("CZ88.NET", "").Trim(),
};github 开源地址：https://github.com/JadynWong/IP_qqwry
当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。
但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。
这个场景会在小程序开发的时候遇到。
我们可以在客户端用 JS 进行处理，也可以在服务端用类似的方法处理（使用正则表达式）。参此文
这里使用 HtmlAgilityPack 通过递归节点来处理：
/// <summary>
/// 给所有指定节点添加样式
/// </summary>
/// <param name="html"></param>
/// <param name="tag">节点名称（小写），如：img</param>
/// <param name="styles">要添加的样式，如：max-width:100%;</param>
/// <returns></returns>
public static string AddStyleToHtmlNode(string html, string tag, string styles)
{
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(html);
for (var i = 0; i < doc.DocumentNode.ChildNodes.Count; i++)
{
doc.DocumentNode.ChildNodes[i] = AddStyleToHtmlNode(doc.DocumentNode.ChildNodes[i], tag, styles);
}
return doc.DocumentNode.OuterHtml;
}
private static HtmlNode AddStyleToHtmlNode(HtmlNode node, string tag, string styles)
{
if (node.Name == tag)
{
var style = node.GetAttributeValue("style", null);
node.SetAttributeValue("style", ((string.IsNullOrWhiteSpace(style) ? "" : style.Trim() + ";") + styles).Replace(";;", ";"));
}
for (var i = 0; i < node.ChildNodes.Count; i++)
{
node.ChildNodes[i] = AddStyleToHtmlNode(node.ChildNodes[i], tag, styles);
}
return node;
}直接调用：
Content = zStringHTML_190126.AddStyleToHtmlNode(Content, "img", "max-width:100%;height:auto;");当使用在线编辑器编辑一篇文章（或从 Word 复制）后，会得到包含 HTML 标签的字符串内容，可以直接将它输出到页面上而不需要进行 HTML 编码。
但是，当我们需要改变图片大小时，我们发现有些图片的尺寸是直接使用 style 属性固定的，除了用 JS 进行后期处理，我们可以在服务端对 <img /> 进行修正。
这个场景会在小程序开发的时候遇到。
网上一般使用正则表达式直接将 <img 替换成 <img style="max-width: 100%; height: auto;" ，缺点是如果该 <img /> 本身就带有 style 属性，那么会出现一个标签两个 style，很多情况导致这两个样式同时失效，所以我们应针对有 style 和无 style 分别处理。
// 把 <img src="a.jpg" style="display: block;" /> 替换成 <img src="a.jpg" style="display: block;;max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+[^>]*style\s*\=\s*['"][^'"]*)(['"])/gi, '$1;max-width:100%;height:auto;$2');
// 把 <img src="b.jpg" /> 替换成 <img src="b.jpg" style="max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+((?!style).)+?)(\/?>)/gi, '$1 style="max-width:100%;height:auto;" $3');复制以上代码时，半角空格可能会变成全角空格，请注意修正。
当有 style 时，我们将 max-width: 100%; height: auto;追加在原样式之后，以重写原样式。这里没有直接判断原样式是否以 ; 结尾，而是直接追加 ;，这并不会影响实现展示效果。
在判断没有 style 用到正则表达式的“断言”，参：https://blog.csdn.net/xuyangxinlei/article/details/81359366
一、显示信息的命令
console.log("normal"); // 用于输出普通信息
console.info("information"); // 用于输出提示性信息
console.error("error"); // 用于输出错误信息
console.warn("warn"); // 用于输出警示信息
二、点位符：字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o);
console.log("%s","string"); //字符(%s)
console.log("%d年%d月%d日",2016,8,29); //整数(%d或%i)
console.log("圆周率是%f",3.1415926); //浮点数(%f)
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
dog.sex = "母狗";
console.log("%o",dog); //对象(%o)
三、信息分组 (console.group(),console.groupEnd())
console.group("第一组信息");
console.log("第一组第一条：我的博客");
console.log("第一组第二条：CSDN");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条：程序爱好者QQ群");
console.log("第二组第二条：欢迎你加入");
console.groupEnd(); 
四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)
var info = {
name : "Alan",
age : "27",
grilFriend : "nothing",
getName : function(){
return this.name;
}
}
console.dir(info);
五、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)
var node = document.getElementById("info");
node.innerHTML += "<p>追加的元素显示吗</p>";
console.dirxml(node);
六、判断变量是否是真 (console.assert()用来判断一个表达式或变量是否为真，只有表达式为false时，才输出一条相应作息，并且抛出一个异常)
var testObj = false; console.assert(testObj, '当testObj为false时才输出！');
七、计时功能 (console.time()和console.timeEnd()，用来显示代码的运行时间)
console.time("控制台计时器");
for(var i = 0; i < 10000; i++){
for(var j = 0; j < 10000; j++){}
}
console.timeEnd("控制台计时器");
八、性能分析performance profile (就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()和console.proileEnd();)
function All(){
// alert(11);
for(var i = 0; i < 10; i++){
funcA(100);
}
funcB(1000);
}
function funcA(count){
for(var i = 0; i < count; i++){};
}
function funcB(count){
for(var i = 0; i < count; i++){};
}
console.profile("性能分析器");
All();
console.profileEnd();详细的信息在chrome控制台里的"profile"选项里查看
九、console.count()统计代码被执行的次数
function myFunction(){
console.count("myFunction 被执行的次数");
}
myFunction(); //myFunction 被执行的次数: 1
myFunction(); //myFunction 被执行的次数: 2
myFunction(); //myFunction 被执行的次数: 3
十、keys和values，要在浏览器里输入
十一、console.table表格显示方法
var mytable = [
{
name: "Alan",
sex : "man",
age : "27"
},
{
name: "Wu",
sex : "gril",
age : "28"
},
{
name: "Tao",
sex : "man and gril",
age : "29"
}
]
console.table(mytable);
十二、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节。
$("body"); //选择body节点
十三、copy通过此命令可以将在控制台获取到的内容复制到剪贴板
copy(document.body); //复制body
copy(document.getElementById("info")); //复制某id元素的的节点
十四、$_命令返回最近一次表达式执行的结果，$0-$4代表了最近5个你选择过的DOM节点
十五、利用控制台输出文字,图片,以%c开头，后面的文字就打印的信息，后面一个参数就是样式属性；
console.log("请在邮件中注明%c 来自:console","font-size:16px;color:red;font-weight:bold;");