博客 (6)

在 Vue 中，当你将一个布尔对象双向绑定到 radio 输入上时，确保 radio 的 value 属性仍然保持布尔类型是很重要的。如果 value 属性是字符串，那么 Vue 会将其解释为字符串而不是布尔值。以下是一个示例，演示如何正确地将布尔对象双向绑定到 radio 按钮，并确保 value 属性保持布尔类型：

<template>
  <div>
    <input type="radio" v-model="myBoolean" :value="true" /> True
    <input type="radio" v-model="myBoolean" :value="false" /> False
    <p>myBoolean: {{ myBoolean }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myBoolean: false, // 布尔对象
    };
  },
};
</script>

在这个示例中，我们使用了 v-model 指令将 myBoolean 属性与两个 radio 按钮进行了双向绑定。通过将 value 属性设置为 true 和 false，我们确保了 myBoolean 属性保持布尔类型。

这样，当用户选择其中一个 radio 按钮时，myBoolean 属性将保持布尔值而不是字符串。确保 value 属性的类型与要绑定的数据类型匹配，以确保绑定的数据类型保持一致。

同样的问题出现在 select 上也是一样：

<select v-model="cat.colorId" required>
    <option :value="null">不选择</option>
    <option v-for="color in colors" :value="color.id">{{color.name}}</option>
</select>

POST

axios.post('AjaxCases', {
    following: true,
    success: null,
    page: 1,
}).then(function (response) {
    console.log(response.data)
}).catch(function (error) {
    console.log(error.response.data);
});

[HttpPost]
public IActionResult AjaxCases([FromBody] AjaxCasesRequestModel req)
{
    bool? following = req.following;
    bool? success = req.success;
    int page = req.page;
}

GET

axios.get('AjaxCase', {
    int: 123,
}).then(function (response) {
    console.log(response.data)
}).catch(function (error) {
    console.log(error.response.data);
});

[HttpGet]
public IActionResult AjaxCases([FromQuery] int id)
{
}

* 若服务端获取参数值为 null，可能的情况如下：

• 请检查相关枚举类型是否已设置 [JsonConverter] 属性，参：C# 枚举（enum）用法笔记，且传入的值不能为空字符串，可以传入 null 值，并将服务端 enum 类型改为可空。可以以 string 方式接收参数后再进行转换。

• 模型中属性名称不能重复（大小写不同也不行）。

• 布尔型属性值必须传递布尔型值，即在 JS 中，字符串 "true" 应 JSON.parse("true") 为 true 后再回传给服务端。

核心文件路径：/theme/html/demo*/src/js/components/core.datatable.js

所有参数的默认值见该文件 3369 行起。

data：

data.source：

query: {
}

{
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
}

function (raw) {
    console.log(raw)
    // sample data mapping
    var dataSet = raw;
    if (typeof raw.data !== 'undefined') {
        dataSet = raw.data;
    }
    return dataSet;
}

layout：

{
	overlayColor: '#000000',
	opacity: 0,
	type: 'loader',
	state: 'primary',
	message: true,
}

{
	sort: {
	    asc: 'flaticon2-arrow-up', 
	    desc: 'flaticon2-arrow-down'
	},
	pagination: {
		next: 'flaticon2-next',
		prev: 'flaticon2-back',
		first: 'flaticon2-fast-back',
		last: 'flaticon2-fast-next',
		more: 'flaticon-more-1',
	},
	rowDetail: {
	    expand: 'fa fa-caret-down', 
	    collapse: 'fa fa-caret-right'
	},
}

{
	// 按回车键确认
	onEnter: false,
	// 文本内容
	input: null,
	// 搜索延时
	delay: 400,
	// 键名
	key: null
}

layout.columns：

其它：

translate: {
    records: {
        processing: '加载中...',
        noRecords: '没有找到相关内容',
    },
    toolbar: {
        pagination: {
            items: {
                default: {
                    first: '首页',
                    prev: '前一页',
                    next: '后一页',
                    last: '末页',
                    more: '更多',
                    input: '请输入跳转页码',
                    select: '设置每页显示项数',
                },
                info: '当前第 {{start}} - {{end}} 项 共 {{total}} 项',
            },
        },
    },
},

暂时没有找到对字符串内容进行自动 HTML 编码的属性，这可能带来 XSS 攻击风险，在 remote 方式中必须在服务端预先 HtmlEncode。即使在 layout.columns.template 中进行处理也是无济于事，恶意代码会在 ajax 加载完成后立即执行。

方法和事件：待完善。

更多信息请查询官方文档：https://keenthemes.com/keen/?page=docs&section=html-components-datatable

在数据库连接字符串可设置是否将 tinyint(1) 映射为 bool，否则为 sbyte：

TreatTinyAsBoolean=false/true

tinyint(1) 一般用于表示 bool 型字段，存储内容为 0 或 1，但有时候也用来存储其它数字。

以 Discuz! 的表 pre_forum_post 为例，字段 first 和 invisible 都是 tinyint(1)，但 first 只储存 0 和 1，invisible 却有 -1、-5 之类的值。

因此我们一般设置 TreatTinyAsBoolean=false，程序中 first 与 invisible 均以 sbyte 处理。

设置 TreatTinyAsBoolean=true 后，EF 或 EF Core 自动将该类型映射为 bool，方便在程序中作进一步处理。

一旦设置 TreatTinyAsBoolean=true，那么所有查询结果中 tinyint(1) 字段的返回值永远只有 1 和 0（即 True/False），即使真实值为 -1，也返回 1。

因为我们必须在确保所有的 tinyint(1) 类型字段都仅表示布尔值是才设置 TreatTinyAsBoolean=true。

一旦部分 tinyint(1) 类型字段用于存放 0 和 1 以外的数，那么就应该设置 TreatTinyAsBoolean=false。

在数据库优先的项目中，以 TreatTinyAsBoolean=false 生成数据模型后，可将明确为布尔类型的字段改为 bool。列出 MySQL 数据库中所有表所有字段中类型为 tinyint(1) 的字段值

以 .edmx 为例：

在项目中搜索该字段名，在搜索结果中找到 .edmx 文件中的两处。

.edmx 文件中的注释已经表明其包含 SSDL、CSDL、C-S mapping 三块内容，

在 SSDL content 下方找到该字段：

<Property Name="字段名" Type="tinyint" Nullable="***" />

改为

<Property Name="字段名" Type="bool" Nullable="***" />

在 CSDL content 下方找到该属性：

<Property Name="属性名" Type="SByte" Nullable="***" />

改为

<Property Name="属性名" Type="Boolean" Nullable="***" />

在解决方案管理器中展开 .edmx ->库名.tt -> 表名.cs 文件，

将模型类中的属性

public sbyte invisible { get; set; }

改为

public bool invisible { get; set; }

或 sbyte? 改为 bool?。

在 EF Core 中，直接打开对应数据表的 .cs 文件，更改属性类型即可。

相关报错：

错误: 指定的成员映射无效。类型中的成员的类型“Edm.SByte[Nullable=False,DefaultValue=]”与类型中的成员的“MySql.bool[Nullable=False,DefaultValue=]”不兼容。

InvalidOperationException: The property '***' is of type 'sbyte' which is not supported by the current database provider. Either change the property CLR type, or ignore the property using the '[NotMapped]' attribute or by using 'EntityTypeBuilder.Ignore' in 'OnModelCreating'.

尝试先连接一次能解决此问题（概率），非常的莫名其妙：

using Data.Discuz.db_bbs2021Context dbd = new();
var conn = dbd.Database.GetDbConnection();
conn.Open();
conn.Close();

参考：

https://mysqlconnector.net/connection-options/

https://stackoverflow.com/questions/6656511/treat-tiny-as-boolean-and-entity-framework-4

2023年1月注：本文适用于 Pomelo.EntityFrameworkCore.MySql 6.0，升级到 7.0 后会出现：

System.InvalidOperationException:“The 'sbyte' property could not be mapped to the database type 'tinyint(1)' because the database provider does not support mapping 'sbyte' properties to 'tinyint(1)' columns. Consider mapping to a different database type or converting the property value to a type supported by the database using a value converter. See https://aka.ms/efcore-docs-value-converters for more information. Alternately, exclude the property from the model using the '[NotMapped]' attribute or by using 'EntityTypeBuilder.Ignore' in 'OnModelCreating'.”

解决方法：https://xoyozo.net/Blog/Details/the-sbyte-property-could-not-be-mapped-to-the-database-type-tinyint-1

当 MySQL 中使用 tinyint(1) 作为布尔值类型时，ASP.NET Core DBFirst 创建模型时会将其定义为 sbyte，运行时会抛出异常：

InvalidCastException: Unable to cast object of type 'System.Boolean' to type 'System.SByte'.

我们可以在数据库连接字符串中加入 TreatTinyAsBoolean=false 来实现不抛出异常，但程序中赋值和判断该字段时还是会比较麻烦。

因此我更倾向于将数据库中该字段类型改为 bit(1)。

2019.11.28 注：这回遇到 tinyint(1) 映射到了 C# 的 bool，而 bit(1) 却映射到了 ulong。具体什么原因未作排查，反正哪个最终为 bool 就选哪个吧。

－－－－－－－－－－－－－－－－－－－－
常量：
整型，实型，布尔值，字符串型，null，undefined

变量：var
－－－－－－－－－－－－－－－－－－－－
除法运算：9/4 = 2.25 （而不是2）

－－－－－－－－－－－－－－－－－－－－
系统函数：
1，encodeURI URL编码
   var urlStr=encodeURI("http://www.abc.com/?country=吴&name=z x");
   结果：http://www.abc.com/?country=%E5%90%B4&name=z%20x
2，decodeURI URL解码
3，parseInt 将字符串按指定进制转换成一个整数,参数二表示进制
   parseInt("32",10) 结果：32
   parseInt("3c2",10) 结果：3
   parseInt("c32",10) 结果：NaN
   parseInt("0x18",10) 结果：0
   parseInt("12",16) 结果18
4，parseFloat 将字符串转成小数
   parseFloat("2.5") 结果：2.5
   parseFloat("2.c5") 结果：2
   parseFloat("c2.5") 结果：NaN
5，isNaN 用于检测parseInt和parseFloat返回是否为NaN
   返回true/false
6，escape 编码
   非ASCII替换为%xx
7，unescape 解码
8，eval 将字符串作为JS表达式执行，例
   for(var i=0;i<3;i++) eval("var a"+i+"="+i);
   相当于：
   var a0=0; var a1=1; var a2=2;
－－－－－－－－－－－－－－－－－－－－
对象
1，Object
2，String
   方法：
   indexOf,
   lastIndexOf,
   match,使用正则表达式模式对字符串执行搜索，返回包含该搜索结果的数组
   replace,
   search,使用正则表达式搜索，第一个匹配的字符的位置
   slice,截字符串：参数一，开始位置，参数二，结束位置（不指定或为-1时表示末位置）
   split,返回一个字符串按照某种分隔标志符拆分为若干子字符串时所产生的字符串数组，分隔符可以是多个字符或一个正则表达式，它不作为任何数组元素的一部分返回。
   substr,截字符串：参数一，开始位置，参数二，长度
   toLowerCase,
   toUpperCase,
3，Math（不能用new创建）
   方法：
   abs,绝对值
   sin,cos,正余弦
   asin,acos,反正余弦
   random,返回介于0~1之间的伪随机数
   例：var num = Math.randow();
4，Date
    var currentTime=new Date();
    //var currentTime=new Date(2002,3,4);
    var strDate=currentTime.getYear()+"年";
    strDate+=currentTime.getMonth()+"月";
    strDate+=currentTime.getDate()+"日";
    strDate+=currentTime.getHours()+":";
    strDate+=currentTime.getMinutes()+":";
    strDate+=currentTime.getSeconds()+" ";
    strDate+=currentTime.getMilliseconds();
    alert(strDate);
   结果：2008年1月19日15:27:10 518
－－－－－－－－－－－－－－－－－－－－－－
数组
1，
    var arr=["abc",123,'abc',,3.4];
    for(var i=0;i<arr.length;i++)
    {
        alert(arr[i]);
    }
2，用对象的方式实现数组
    function MyArray(){this.length=arguments.length;for(var i=0;....
3，Array对象
    var arr=new Array(2.4,"abc",2);
    arr.sort(); //排序
    alert的结果为 2 2,4 abc
－－－－－－－－－－－－－－－－－－－－－－－