博客 (65)

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);

不知道从哪个版本的 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);

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

第一步，创建用户和 AccessKey

登录阿里云控制台后，从头像处进入 AccessKey 管理

“开始使用子用户 AccessKey”

点击“创建用户”，填写用户名（本文以 oss-bbs 为例），并勾选“Open API 调用访问”

点击确定创建成功，可以看到 AccessKey ID 和 AccessKey Secret

第二步，创建权限策略

在阿里云控制台左侧菜单“RAM 访问控制”中展开“权限管理”，选择“权限策略”

点击“创建权限策略”，切换到“脚本编辑”

输入以下策略文档（JSON 格式）

{
    "Version": "1",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                    "oss:ListBuckets",
                    "oss:GetBucketStat",
                    "oss:GetBucketInfo",
                    "oss:GetBucketAcl" 
                      ],    
            "Resource": "acs:oss:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": [
                    "oss:Get*",
                    "oss:Put*",
                    "oss:List*",
                    "oss:DeleteObject"
                    ],
            "Resource": "acs:oss:*:*:bbs"
        },
        {
            "Effect": "Allow",
            "Action": [
                    "oss:Get*",
                    "oss:Put*",
                    "oss:List*",
                    "oss:DeleteObject"
            ],
            "Resource": "acs:oss:*:*:bbs/*"
        }
    ]
}

脚本中第一段表示允许用户登录，第二段表示允许操作 Bucket，第三段表示允许操作 Bucket 内的文件对象。

示例中的 bbs 是 Bucket Name，请修改为自己的 Bucket 名称。

点击下一步，填写名称，确定即可。

第三步，添加用户权限

转到“用户”页面，在刚才创建的用户行“添加权限”

切换到“自定义策略”，将上一步创建的权限策略添加到右侧“已选择”区

确定。

相关信息：

You have no right to access this object because of bucket acl.

本文使用 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 进行调用。

Senparc.Weixin.Sample.MP 盛派微信公众平台示例项目在 VS 中运行正常，当发布到 IIS 后出现应用程序池自动停止的情况，在服务器管理器中找到 .NET Runtime 错误，可以看到错误原因：

\App_Data\SenparcTraceLog 目录需要写入权限。

以下目录也需要写入权限：

\App_Data\WeChat_OfficialAccount

\App_Data\NeuChar

public static class EntityFrameworkCoreExtension
{
    private static DbCommand CreateCommand(DatabaseFacade facade, string sql, out DbConnection connection, params object[] parameters)
    {
        var conn = facade.GetDbConnection();
        connection = conn;
        conn.Open();
        var cmd = conn.CreateCommand();
        cmd.CommandText = sql;
        cmd.Parameters.AddRange(parameters);
        return cmd;
    }

    public static DataTable SqlQuery(this DatabaseFacade facade, string sql, params object[] parameters)
    {
        var command = CreateCommand(facade, sql, out DbConnection conn, parameters);
        var reader = command.ExecuteReader();
        var dt = new DataTable();
        dt.Load(reader);
        reader.Close();
        conn.Close();
        return dt;
    }

    public static List<T> SqlQuery<T>(this DatabaseFacade facade, string sql, params object[] parameters) where T : class, new()
    {
        var dt = SqlQuery(facade, sql, parameters);
        return dt.ToList<T>();
    }

    public static List<T> ToList<T>(this DataTable dt) where T : class, new()
    {
        var propertyInfos = typeof(T).GetProperties();
        var list = new List<T>();
        foreach (DataRow row in dt.Rows)
        {
            var t = new T();
            foreach (PropertyInfo p in propertyInfos)
            {
                if (dt.Columns.IndexOf(p.Name) != -1 && row[p.Name] != DBNull.Value)
                {
                    p.SetValue(t, row[p.Name], null);
                }
            }
            list.Add(t);
        }
        return list;
    }
}

调用示例：

var data = db.Database.SqlQuery<List<string>>("SELECT 'title' FROM `table` WHERE `id` = {0};", id);

Regex.Escape(String) 方法：

通过替换为转义码来转义最小的字符集（\、*、+、?、|、{、[、(、)、^、$、.、# 和空白）。 这将指示正则表达式引擎按原义解释这些字符而不是解释为元字符。

示例：

string str = @"123\c\d\e";
string r1 = @"\d";
string r2 = Regex.Escape(r1);

return Json(new
{
    m1 = Regex.Matches(str, r1).Select(c => c.Value),
    m2 = Regex.Matches(str, r2).Select(c => c.Value)
});

结果：

{
    "m1":[
        "1",
        "2",
        "3"
    ],
    "m2":[
        "\\d"
    ]
}

一般地，我们使用通配符 a*c 在字符串 abcd 中查找：

string s = @"abcd";
string w = @"a*c";
string r = Regex.Escape(w).Replace(@"\*", @".*?").Replace(@"\?", @".?");
return Content(Regex.Match(s, r).Value);

结果：

abc

同理，使用通配符 \d*\f 在字符串 \a\b\c\d\e\f 中查找：

string s = @"\a\b\c\d\e\f";
string w = @"\d*\f";
string r = Regex.Escape(w).Replace(@"\*", @".*?").Replace(@"\?", @".?");
return Content(Regex.Match(s, r).Value);

结果：

\d\e\f

Linux 设置服务开机自动启动的方式有好多种，这里介绍一下通过 chkconfig 命令添加脚本为开机自动启动的方法。

1. 编写脚本 ossftp（这里以开机启动 ossftp 服务为例），脚本内容如下：

   #!/bin/sh
   #chkconfig: 2345 80 90
   #description: 开机自动启动的脚本程序
   
   # 开启 ossftp 服务
   /root/ossftp-1.2.0-linux-mac/start.sh &

   脚本第一行 “#!/bin/sh” 告诉系统使用的 shell；

   脚本第二行 “#chkconfig: 2345 80 90” 表示在 2/3/4/5 运行级别启动，启动序号(S80)，关闭序号(K90)；

   脚本第三行 表示的是服务的描述信息；

   要执行的文件（示例中的 /root/ossftp-1.2.0-linux-mac/start.sh）必须设置“可执行”权限，命令结尾的“&”可使进程持续。

   注意： 第二行和第三行必写，否则会出现如“服务 ossftp 不支持 chkconfig”这样的错误。
   

2. 将写好的 ossftp 脚本移动到 /etc/rc.d/init.d/ 目录下

   

3. 给脚本赋可执行权限

   chmod +x /etc/rc.d/init.d/ossftp

4. 添加脚本到开机自动启动项目中

   chkconfig --add ossftp
   chkconfig ossftp on

   执行命令“chkconfig --list”可列出开机启动的服务及当前的状态。

   
   

到这里就设置完成了，我们只需要重启一下我们的服务器，就能看到我们配置的 ossftp 服务已经可以开机自动启动了。

1. HttpHelper类：

   using System;
   using System.Collections.Specialized;
   using System.IO;
   using System.Net;
   using System.Text;
   
   namespace ConsoleApplication1
   {
       public static class HttpHelper
       {
           private static readonly Encoding DEFAULTENCODE = Encoding.UTF8;
   
           /// <summary>
           /// HttpUploadFile
           /// </summary>
           /// <param name="url"></param>
           /// <param name="file"></param>
           /// <param name="data"></param>
           /// <returns></returns>
           public static string HttpUploadFile(string url, string file, NameValueCollection data)
           {
               return HttpUploadFile(url, file, data, DEFAULTENCODE);
           }
   
           /// <summary>
           /// HttpUploadFile
           /// </summary>
           /// <param name="url"></param>
           /// <param name="file"></param>
           /// <param name="data"></param>
           /// <param name="encoding"></param>
           /// <returns></returns>
           public static string HttpUploadFile(string url, string file, NameValueCollection data, Encoding encoding)
           {
               return HttpUploadFile(url, new string[] { file }, data, encoding);
           }
   
           /// <summary>
           /// HttpUploadFile
           /// </summary>
           /// <param name="url"></param>
           /// <param name="files"></param>
           /// <param name="data"></param>
           /// <returns></returns>
           public static string HttpUploadFile(string url, string[] files, NameValueCollection data)
           {
               return HttpUploadFile(url, files, data, DEFAULTENCODE);
           }
   
           /// <summary>
           /// HttpUploadFile
           /// </summary>
           /// <param name="url"></param>
           /// <param name="files"></param>
           /// <param name="data"></param>
           /// <param name="encoding"></param>
           /// <returns></returns>
           public static string HttpUploadFile(string url, string[] files, NameValueCollection data, Encoding encoding)
           {
               string boundary = "---------------------------" + DateTime.Now.Ticks.ToString("x");
               byte[] boundarybytes = Encoding.ASCII.GetBytes("\r\n--" + boundary + "\r\n");
               byte[] endbytes = Encoding.ASCII.GetBytes("\r\n--" + boundary + "--\r\n");
   
               //1.HttpWebRequest
               HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
               request.ContentType = "multipart/form-data; boundary=" + boundary;
               request.Method = "POST";
               request.KeepAlive = true;
               request.Credentials = CredentialCache.DefaultCredentials;
   
               using (Stream stream = request.GetRequestStream())
               {
                   //1.1 key/value
                   string formdataTemplate = "Content-Disposition: form-data; name=\"{0}\"\r\n\r\n{1}";
                   if (data != null)
                   {
                       foreach (string key in data.Keys)
                       {
                           stream.Write(boundarybytes, 0, boundarybytes.Length);
                           string formitem = string.Format(formdataTemplate, key, data[key]);
                           byte[] formitembytes = encoding.GetBytes(formitem);
                           stream.Write(formitembytes, 0, formitembytes.Length);
                       }
                   }
   
                   //1.2 file
                   string headerTemplate = "Content-Disposition: form-data; name=\"{0}\"; filename=\"{1}\"\r\nContent-Type: application/octet-stream\r\n\r\n";
                   byte[] buffer = new byte[4096];
                   int bytesRead = 0;
                   for (int i = 0; i < files.Length; i++)
                   {
                       stream.Write(boundarybytes, 0, boundarybytes.Length);
                       string header = string.Format(headerTemplate, "file" + i, Path.GetFileName(files[i]));
                       byte[] headerbytes = encoding.GetBytes(header);                    
                       stream.Write(headerbytes, 0, headerbytes.Length);
                       using (FileStream fileStream = new FileStream(files[i], FileMode.Open, FileAccess.Read))
                       {                        
                           while ((bytesRead = fileStream.Read(buffer, 0, buffer.Length)) != 0)
                           {
                               stream.Write(buffer, 0, bytesRead);
                           }
                       }
                   }
   
                   //1.3 form end
                   stream.Write(endbytes, 0, endbytes.Length);
               }
               //2.WebResponse
               HttpWebResponse response = (HttpWebResponse)request.GetResponse();
               using (StreamReader stream = new StreamReader(response.GetResponseStream()))
               {
                   return stream.ReadToEnd();
               }
           }
       }
   }

2. 调用示例：

   using System;
   using System.Collections.Specialized;
   
   namespace ConsoleApplication1
   {
       class Program
       {
           static void Main(string[] args)
           {
               NameValueCollection data = new NameValueCollection();
               data.Add("name", "木子屋");
               data.Add("url", "http://www.mzwu.com/");
               Console.WriteLine(HttpHelper.HttpUploadFile("http://localhost/Test", new string[] { @"E:\Index.htm", @"E:\test.rar" }, data));
   
               Console.ReadKey();
           }
       }
   }