2026.5.12@霖宇博客制作中遇见的问题

1
one
<el-form :model="passwordForm" :rules="rules" ref="formRef" label-width="100px"> <el-form-item label="原密码" prop="oldPassword"> <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码" show-password /> </el-form-item>解读这段代码
这段代码是使用 Vue.js 和 Element Plus UI 库构建的一个表单片段，专门用于收集用户的“原密码”。
下面为你逐层解读：
🧩 整体结构：<el-form> 组件
<el-form> 是 Element Plus 提供的表单容器组件，它负责整合和管理内部所有表单项的数据和校验规则。
- :model="passwordForm"
- 这是一个数据绑定。它将表单与一个名为 passwordForm 的响应式数据对象关联起来。表单内所有输入框的值都会同步到这个对象中。
- :rules="rules"
- 这是校验规则的绑定。它将一个名为 rules 的对象作为整个表单的校验规则集。这个 rules 对象里定义了每个字段（如 oldPassword）需要遵守的规则，比如是否必填、长度限制等。
- ref="formRef"
- 这是一个引用标识。它为这个 <el-form> 组件实例起了一个名字叫 formRef。在 JavaScript 代码中，你可以通过 formRef 来获取这个表单实例，并调用其方法，例如 formRef.value.validate() 来手动触发表单的整体校验。
- label-width="100px"
- 这是一个样式设置。它统一设置了表单内所有标签（label）的宽度为 100 像素，使表单看起来更整齐对齐。
✍️ 表单项：<el-form-item> 组件
<el-form-item> 是表单中的单个项目容器，用于包裹一个标签和一个输入控件。
- label="原密码"
- 这定义了该表单项的标签文本，即用户看到的“原密码”这几个字。
- prop="oldPassword"
- 这是实现校验的关键。它指定了当前这个表单项对应 passwordForm 数据模型中的哪个属性。Element Plus 会根据这个 prop 的值，去 :rules 对象中找到对应的校验规则，并对 passwordForm.oldPassword 的值进行验证。
⌨️ 输入控件：<el-input> 组件
<el-input> 是 Element Plus 提供的输入框组件。
- v-model="passwordForm.oldPassword"
- 这是双向数据绑定。它将输入框的值与 passwordForm 对象里的 oldPassword 属性实时同步。用户在输入框中输入内容时，passwordForm.oldPassword 的值会随之改变；反之亦然。
- type="password"
- 这指定了输入框的类型为密码框。用户输入的字符会被隐藏，通常显示为圆点或星号。
- placeholder="请输入原密码"
- 这是在输入框为空时显示的灰色提示文字。
- show-password
- 这是 Element Plus 提供的一个便捷功能。它会在输入框右侧添加一个“小眼睛”图标，用户可以点击该图标来切换显示或隐藏输入的密码明文。
总结来说
这段代码创建了一个带有“原密码”标签的密码输入框。它在视觉上提供了“显示/隐藏密码”的功能，在逻辑上将用户的输入值实时保存到 passwordForm.oldPassword 变量中，并且准备就绪，可以根据预设的规则对这个输入值进行校验。

2.
two
// 密码的校验规则 password: [ // 规则1：必填校验 { required: true, message: '请输入密码', trigger: 'blur' }, // 规则2：限制密码长度在 6 到 20 个字符之间 { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ],密码中不能包含空格怎么写
要实现密码中不能包含空格，最优雅和直接的方法是使用正则表达式进行校验。
你可以在现有的 password 校验规则数组中添加一个新的规则对象。
🚀 解决方案：使用正则表达式
你可以添加一个 pattern 规则，利用正则表达式 /^\S+$/ 来确保输入的字符串不包含任何空白字符（包括空格、制表符等）。
修改后的代码如下：javascript

编辑

1// 密码的校验规则
2password: [
3 // 规则1：必填校验
4 { required: true, message: '请输入密码', trigger: 'blur' },
5 // 规则2：限制密码长度在 6 到 20 个字符之间
6 { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
7 // 规则3：禁止输入任何空格
8 { pattern: /^\S+$/, message: '密码中不能包含空格', trigger: 'blur' }
9],
代码解读
- pattern: /^\S+$/
- ^ 和 $：分别代表字符串的开始和结束，确保对整个字符串进行匹配。
- \S：这是一个特殊字符，代表“非空白字符”。它与 \s (代表空格、制表符等) 相反。
- +：表示前面的元素（即 \S）可以出现一次或多次。
- 综合起来，/^\S+$/ 的意思是：整个字符串必须完全由一个或多个非空白字符组成。只要出现一个空格，校验就会失败。
✨ 进阶方案：自定义校验函数
如果你的密码规则变得更复杂，比如要求同时包含字母、数字和特殊符号，并且不能有空格，那么使用自定义校验函数 (validator) 会更灵活。javascript

编辑

1// 密码的校验规则
2password: [
3 { required: true, message: '请输入密码', trigger: 'blur' },
4 { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
5 // 使用自定义函数进行更复杂的校验
6 {
7 validator: (rule, value, callback) => {
8 if (!value) {
9 // 这个错误会被上面的 required: true 规则捕获，这里可以省略
10 return callback();
11 }
12 // 检查是否包含空格
13 if (/\s/.test(value)) {
14 callback(new Error('密码中不能包含空格'));
15 } else {
16 callback(); // 校验通过
17 }
18 },
19 trigger: 'blur'
20 }
21],
对于你目前的需求，第一种使用 pattern 的方案更加简洁高效。

3
three
username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],用户名只能输入大小写字母和数字，不能有特殊字符
要实现用户名只能包含大小写字母和数字，你可以利用 Element Plus 表单校验规则中的 pattern 属性，通过一个正则表达式来限制输入内容。
你只需要在现有的 username 规则数组中添加一个新的规则对象即可。
🚀 解决方案：使用正则表达式
添加的规则如下：javascript

编辑

1{ pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能包含字母和数字', trigger: 'blur' }
代码解读
- pattern: /^[a-zA-Z0-9]+$/
- ^ 和 $：分别代表字符串的开始和结束，确保对整个字符串进行匹配，而不是部分匹配。
- [a-zA-Z0-9]：这是一个字符集，表示只允许匹配小写字母 (a-z)、大写字母 (A-Z) 和数字 (0-9)。
- +：表示前面的字符集可以出现一次或多次。这确保了用户名不能为空（当然，空值的校验已经由 required: true 处理了）。
- 综合起来，这个正则表达式的意思是：整个字符串必须完全由一个或多个字母或数字组成。
完整代码示例
将新规则加入后，你的 username 校验规则应该像这样：javascript

编辑

1username: [
2 { required: true, message: '请输入用户名', trigger: 'blur' },
3 { pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能包含字母和数字', trigger: 'blur' }
4],

4.
four
该错误的核心原因是：MySQL 在执行 SQL 更新时，接收到一个本应是整数值的参数（id），但实际传入的却是一个 Java 对象的序列化字节流（以 \xAC\xED\x00\x05 开头，这是 Java 对象序列化特有的魔数）。
从堆栈中的 SQL 语句：
sql
UPDATE admin SET password=? WHERE (id = ?)
可以看到，更新时两个占位符分别对应 password（字符串）和 id（整数）。而错误信息明确指出 “Truncated incorrect INTEGER value”，说明在设置 id 参数时，数据库收到的数据不是整数，而是类似 com.blog.personalBlogAdmin.admin.entity.po.Admin 对象的序列化内容。
常见的原因有以下几种：
Mapper 方法参数传递错误
在 AdminMapper 中可能自定义了一个 update 方法，但调用时错误地将整个 Admin 实体对象传给了 id 参数的位置。
例如：adminMapper.update(password, admin) 或 adminMapper.update(admin) 而 SQL 映射中却写了 where id = #{xxx}，导致 MyBatis 把 admin 对象尝试转换成 INTEGER。
误用 MyBatis-Plus 的 update 方法
调用 update(T entity, Wrapper<T> wrapper) 时，如果不小心将 entity 传给了 wrapper 参数，或者 Wrapper 中错误地使用了对象而非条件字段，可能导致条件值变成整个对象序列化后的形式。
或者直接写了 adminMapper.update(admin, null)，并且 admin 对象的某个字段（如 id）被错误地映射到了 SQL 中的 id 占位符。
使用了不正确的 @Param 注解或 XML 参数引用
若在 Mapper 接口中定义了类似 int update(@Param("password") String password, @Param("admin") Admin admin);，但在 XML 中却写了 where id = #{admin}，就会把整个 Admin 对象作为参数填充到 id 位置上。
序列化问题（较少见）
如果某个拦截器或处理器错误地将对象直接写入 JDBC 参数（而不经过类型转换），也可能导致此现象。但从堆栈看，更可能是代码层面的参数错位。
排查建议：
检查 AdminBaseFacade.resetOneselfPassword 方法第 266 行附近的调用，确认传递给 adminMapper.update(...) 的参数是否正确。
如果使用的是 MyBatis-Plus 的 updateById(admin)，请确保 admin.getId() 返回的是 Integer 或 Long 类型且不为空；同时确认 admin 对象没有被序列化成奇怪的格式传递到 SQL 中（一般 updateById 不会出现此问题，除非自定义了其他拦截器）。
检查 AdminMapper 中是否存在自定义的 update 方法（XML 或注解），核实参数名称与顺序是否匹配。
简单来说，就是本应放 id 值的地方，放了一个 Java 对象，导致数据库无法把序列化字节流转换成整数。

5.
five