Skip to content

Commit

Permalink
根据建议进行了修改
Browse files Browse the repository at this point in the history
  • Loading branch information
ikenk committed Nov 4, 2024
1 parent 043a96c commit 690ec2d
Showing 1 changed file with 13 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ slug: Learn/Server-side/Express_Nodejs/forms/Create_author_form

## 导入验证和修整方法

[创建种类表单](/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form) 一样,要使用 _express-validator_,我们必须 _require_ 我们想要使用的函数。
[类型表单](/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form)一样,要使用 _express-validator_,我们必须 _require_ 我们想要使用的函数。

打开 **/controllers/authorController.js**,并将以下代码添加到文件顶部(路由函数上方):

Expand All @@ -19,7 +19,7 @@ const { body, validationResult } = require("express-validator");

## 控制器——get 路由

找到导出的 `author_create_get()` 控制器方法并用以下代码替换。此方法会将 `title` 变量传入 `author_form.pug` 视图并渲染。
找到导出的 `author_create_get()` 控制器方法并用以下代码替换。此方法会将 `title` 变量传入 **author_form.pug** 视图并渲染。

```js
// 展示 GET 方法获取的创建作者表单
Expand All @@ -35,7 +35,7 @@ exports.author_create_get = (req, res, next) => {
```js
// 处理 POST 方法提交的创建作者表单
exports.author_create_post = [
// 验证并且修整字段
// 验证并且清理字段
body("first_name")
.trim()
.isLength({ min: 1 })
Expand Down Expand Up @@ -64,7 +64,7 @@ exports.author_create_post = [
// 从请求中提取验证错误
const errors = validationResult(req);

// 使用经过 trim() 和 escape() 处理过的数据创建作者对象
// 使用经转义和去除空白字符处理的数据创建作者对象
const author = new Author({
first_name: req.body.first_name,
family_name: req.body.family_name,
Expand All @@ -73,7 +73,7 @@ exports.author_create_post = [
});

if (!errors.isEmpty()) {
// 出现了错误,那么就用修整过的值和错误信息再次渲染一遍表单
// 出现错误。使用清理后的值/错误信息重新渲染表单
res.render("author_form", {
title: "Create Author",
author: author,
Expand All @@ -85,7 +85,6 @@ exports.author_create_post = [

// 保存作者信息
await author.save();
// Redirect to new author record.
// 重定向到新的作者记录
res.redirect(author.url);
}
Expand All @@ -96,11 +95,11 @@ exports.author_create_post = [
> [!WARNING]
> 切勿使用 `isAlphanumeric()` 来验证 _name_(正如上面代码所写的那样),因为有许多名字会使用其他字符集。我们在这里这样做是为了演示如何使用验证器,以及如何将其与其他验证器和错误报告进行链式调用。
此代码的结构和行为几乎与创建 `Genre` 对象一致。首先,我们验证并修整数据。如果数据无效,我们将重新显示表单以及用户最初输入的数据和错误消息列表。如果数据有效,那么我们将保存新的作者记录并将用户重定向到作者详情页面。
此代码的结构和行为几乎与创建 `Genre` 对象一致。首先,我们验证并清理数据。如果数据无效,我们将重新显示表单以及用户最初输入的数据和错误消息列表。如果数据有效,那么我们将保存新的作者记录并将用户重定向到作者详情页面。

`Genre` 的 post 处理程序不同,我们不会在保存 `Author` 对象之前检查其是否已经存在。从某种程度上说我们应该这样做,但目前我们可能会有多个同名作者。
`Genre` 的 post 处理器不同,我们不会在保存 `Author` 对象之前检查其是否已经存在。从某种程度上说我们应该这样做,但目前我们可能会有多个同名作者。

验证代码演示了几个新功能
验证代码演示了几个新特性

- 我们可以链式调用验证器,使用 `withMessage()` 指定在先前的验证方法失败时需要显示的错误消息。这使得在没有大量代码重复的情况下,提供特定的错误消息变得非常容易。

Expand Down Expand Up @@ -158,23 +157,23 @@ block content
li!= error.msg
```

该视图的结构和行为与 `genre_form.pug` 模板完全相同,因此我们不会再次描述它。
该视图的结构和行为与 **genre_form.pug** 模板完全相同,因此我们不会再次描述它。

> [!NOTE]
> 某些浏览器不支持 input 标签的 `type=date` 属性,因此你不会获得日期选择器小组件或默认的 `dd/mm/yyyy` 占位符,而是获取一个空的纯文本字段。一种解决方法是显式添加属性 `placeholder='dd/mm/yyyy'`,以便在功能较差的浏览器上仍然可以获得有关所需文本格式的信息。
> 某些浏览器不支持 `type="date"` 的 input,因此你不会获得日期选择器微件或默认的 `dd/mm/yyyy` 占位符,而是获取一个空的纯文本字段。一种解决方法是显式添加属性 `placeholder='dd/mm/yyyy'`,以便在功能较差的浏览器上仍然可以获得有关所需文本格式的信息。
### 自我挑战:添加死亡日期

上面的模板缺少用于输入死亡日期 `date_of_death` 的字段。按照与出生日期表单组相同的模式创建字段!

## 它看起來像是
## 它看起来像是

运行本应用,打开浏览器访问网址 `http://localhost:3000/`,然后点击 `Create new author` 链接。如果一切设置正确,你的网站应类似于下方截图。在你输入一个值后,它应该会被保存,并且进入作者详情页面。
运行本应用,打开浏览器访问网址 `http://localhost:3000/`,然后点击 _Create new author_ 链接。如果一切设置正确,你的网站应类似于下方截图。在你输入一个值后,它应该会被保存,并且进入作者详情页面。

![作者创建页面——Express 本地图书馆网站](locallibary_express_author_create_empty.png)

> [!NOTE]
> 如果你尝试使用各种日期输入格式,你可能会发现格式 `yyyy-mm-dd` 行为不恰当。这是因为 JavaScript 中的日期字符串包含了 0 小时这个时间,而且还将该格式的日期字符串(ISO 8601 标准)视为包括 0 小时的 UTC 时间,而不是本地时间。如果你的时区在 UTC 以西,则本地日期显示将会是你输入的日期的前一天。这是我们在此没有解决的几个复杂问题(例如多字姓氏和多作者书籍)之一。
> 如果你尝试使用各种日期输入格式,你可能会发现格式 `yyyy-mm-dd` 行为不恰当。这是因为 JavaScript 中的日期字符串包含了 0 时这个时间,而且还将该格式的日期字符串(ISO 8601 标准)视为包括 0 时的 UTC 时间,而不是本地时间。如果你的时区在 UTC 以西,则本地日期显示将会是你输入的日期的前一天。这是我们在此没有解决的几个复杂问题(例如多字姓氏和多作者书籍)之一。
## 下一步

Expand Down

0 comments on commit 690ec2d

Please sign in to comment.