VueJS 和 Laravel 中日期时间处理：解决数据表存储问题

在 JavaScript (VueJS) 和 PHP (Laravel) 之间处理日期和时间以在数据表中显示

问题

当你从用户那里收集日期和时间信息时，你会遇到一个问题。虽然你会收到一条成功消息，但日期和时间值并不会添加到表中。这是因为你在 VueJS 和 PHP 之间对日期和时间处理不当。

解决方法

要解决此问题，请执行以下步骤：

1. 在客户端（VueJS）转换日期和时间字符串：

在 VueJS 模态框中，在将日期和时间字符串发送到服务器之前，请将其转换为 ISO 8601 格式。PHP 需要日期和时间值采用此特定格式。

2. 在服务器端（PHP）转换日期和时间字符串：

在 Laravel 控制器中，将从客户端接收的日期和时间字符串转换为数据库存储格式。可以使用 DateTime::createFromFormat() 函数将字符串转换为 DateTime 对象。

3. 在服务器端（PHP）格式化日期和时间值：

转换日期和时间字符串为 DateTime 对象后，使用 format() 方法将它们格式化为要存储在数据库中的格式。

代码示例

VueJS 模态框：

// 将日期和时间字符串转换为 ISO 8601 格式
const isoDate = new Date(inputs.permission_date).toISOString();
const isoStartDate = new Date(inputs.permission_start_date).toISOString();
const isoEndDate = new Date(inputs.permission_end_date).toISOString();
const isoStartTime = inputs.permission_start_time;
const isoEndTime = inputs.permission_end_time;

// 将格式化的值发送到服务器
this.save({
  permission_date: isoDate,
  permission_start_date: isoStartDate,
  permission_end_date: isoEndDate,
  permission_start_time: isoStartTime,
  permission_end_time: isoEndTime,
});

Laravel 控制器：

use DateTime;

// ...

// 将日期和时间字符串转换为 DateTime 对象
$permissionDate = DateTime::createFromFormat('Y-m-d', $request->permission_date);
$permissionStartDate = DateTime::createFromFormat('Y-m-d', $request->permission_start_date);
$permissionEndDate = DateTime::createFromFormat('Y-m-d', $request->permission_end_date);
$permissionStartTime = $request->permission_start_time;
$permissionEndTime = $request->permission_end_time;

// 格式化 DateTime 对象
$permissionDate = $permissionDate->format('Y-m-d H:i:s');
$permissionStartDate = $permissionStartDate->format('Y-m-d H:i:s');
$permissionEndDate = $permissionEndDate->format('Y-m-d H:i:s');
$permissionStartTime = $permissionStartTime;
$permissionEndTime = $permissionEndTime;

// ...

注意： 请确保在迁移中使用正确的日期和时间数据类型，例如 string 或 datetime。

通过遵循这些步骤，你可以正确转换日期和时间值，并在数据表中成功存储它们。

常见问题解答

• Q：为什么我必须在 VueJS 中转换日期和时间值？

  • A：PHP 需要日期和时间值采用 ISO 8601 格式。

• Q：我可以在客户端（VueJS）使用 Date.parse() 函数吗？

  • A：不，Date.parse() 可能不返回兼容 PHP 的 ISO 8601 格式。

• Q：如何格式化存储在数据库中的日期和时间值？

  • A：使用 DateTime::format() 方法，并选择所需的格式。

• Q：如何确保日期和时间值以一致的方式存储？

  • A：使用相同的日期和时间转换规则，并在客户端和服务器端进行验证。

• Q：我还能在客户端或服务器端做什么其他检查？

  • A：验证日期和时间值是否有效，并确保它们在允许的范围内。