Получение данных: Построение форм | Next.js
Веб-форма имеет отношение клиент-сервер . Они используются для отправки данных, обрабатываемых веб-сервером, для обработки и хранения. Сама форма является клиентом, а сервер — любым механизмом хранения, который можно использовать для хранения, извлечения и отправки данных при необходимости.
Это руководство научит вас создавать веб-формы с помощью Next.js.
HTML-формы создаются с использованием тега . Требуется набор атрибутов и полей, чтобы структурировать форму для таких функций, как текстовые поля, флажки, раскрывающиеся меню, кнопки, переключатели и т. д.
Вот синтаксис формы HTML:
Внешний вид выглядит следующим образом:
Тег HTML действует как контейнер для различных элементов, таких как текст поле и кнопка отправки .
Давайте изучим каждый из этих элементов:
-
действие: Атрибут, указывающий, куда отправляются данные формы при отправке формы. Обычно это URL-адрес (абсолютный URL-адрес или относительный URL-адрес). -
метод: указывает метод HTTP, т. е.GETилиPOST, используемый для отправки данных при отправке формы. -
<метка>: Элемент, определяющий метку для других элементов формы. Метки улучшают доступность, особенно для программ чтения с экрана. -
типа. Типы ввода могут бытьтекст,флажок,электронная почта,радиои другие. -
Проверка формы
Процесс, проверяющий правильность информации, предоставленной пользователем.
- Клиентская сторона : проверка выполняется в браузере
- На стороне сервера : проверка выполняется на сервере
Хотя оба эти типа одинаково важны, в этом руководстве рассматривается только проверка на стороне клиента.
Проверка на стороне клиента дополнительно классифицируется как:
- Встроенная : использует атрибуты на основе HTML, такие как
required,type,minLengthmaxL длина,шаблони т. д. - На основе JavaScript : Проверка, закодированная с помощью JavaScript.
Встроенная проверка формы с использованием
требуется , тип , minLength , maxLength -
required: Указывает, какие поля должны быть заполнены перед отправкой формы.
-
тип: указывает тип данных (т. е. число, адрес электронной почты, строка и т. д.). -
minLength -
maxLength: Указывает максимальную длину строки текстовых данных.
Таким образом, форма с использованием этих атрибутов может выглядеть так:
Поле формы пароля должно содержать только цифры (от 0 до 9), строчные буквы (от a до z) и должно быть не более 15 символов в длину. Никакие другие символы (#, $, & и т. д.) не допускаются. Правило в RegEx записывается как [a-z0-9]{1,15} .
Чтобы узнать больше о HTML-формах, ознакомьтесь с веб-документами MDN.
В следующем разделе вы будете создавать формы в React с помощью Next.js.
Создайте новое приложение Next.js. Вы можете использовать приложение create-next-app для быстрого старта. В терминале командной строки выполните следующее:
npx create-next-app
Ответьте на вопросы, чтобы создать свой проект, и дайте ему имя, в этом примере используется next-forms . Далее cd в этот каталог и запустите команду npm run dev или yarn dev , чтобы запустить сервер разработки.
Откройте URL-адрес, напечатанный в терминале, чтобы убедиться, что ваше приложение работает успешно.
И клиент, и сервер будут созданы с использованием Next.js. Для серверной части создайте конечную точку API, куда вы будете отправлять данные формы.
Next.js предлагает файловую систему маршрутизации, основанную на концепции страниц.
pages/api сопоставляется с /api/* и будет рассматриваться как конечная точка API, а не как страница. Эта конечная точка API будет только на стороне сервера. Перейдите к pages/api , создайте файл с именем form.js и вставьте этот код, написанный в Node.js:
обработчик функции экспорта по умолчанию (req, res) {
// Получить данные, представленные в теле запроса.
константное тело = требуемое тело
// Необязательное ведение журнала для просмотра ответов
// в командной строке, где запущено приложение next.js.
console.log('тело:', тело)
// Предложение Guard проверяет имя и фамилию,
// и возвращает раньше, если они не найдены
если (!body.first || !body.last) {
// Отправляет код ошибки неверного HTTP-запроса
return res.status(400).json({ data: 'Имя или фамилия не найдены' })
}
// Имя найдено.
// Отправляет HTTP-код успеха
res.status(200).json({данные: `${body. first} ${body.last}` })
} 
first} ${body.last}` })
} Эта функция обработчика формы получит запрос req от клиента (т.е. отправленные данные формы). А взамен он отправит ответ res в формате JSON, в котором будет и имя, и фамилия. Вы можете получить доступ к этой конечной точке API по адресу http://localhost:3000/api/form или заменить URL-адрес локального хоста фактическим развертыванием Vercel при развертывании.
Кроме того, вы также можете подключить этот API к базе данных, такой как MongoDB или Google Sheets. Таким образом, отправленные вами данные формы будут надежно сохранены для последующего использования. Для этого руководства база данных не используется. Вместо этого те же данные возвращаются пользователю для демонстрации того, как это делается.
Отправка формы без JavaScript
Теперь вы можете использовать относительную конечную точку /api/form внутри атрибута action формы.
Вы отправляете данные формы на сервер, когда форма отправляется с помощью HTTP-метода POST (который используется для отправки данных).
)
}
экспорт по умолчанию ContactPage
Что ж, это было разочаровывающе. Его даже в браузере не видно. Давайте добавим поле формы, чтобы хоть что-то видеть. Redwood поставляется с несколькими входными данными, а поле ввода простого текста — . Мы также дадим полю атрибут name , чтобы, когда на этой странице будет несколько входных данных, мы знали, какие данные содержат: .js
import {MetaTags} from '@redwoodjs/web'
import {Form, TextField} from '@redwoodjs/forms' const ContactPage = () => {
return (
<>
)
}
экспорт по умолчанию ContactPage
Что-то есть показ! Тем не менее, довольно скучно.
Как насчет добавления кнопки отправки?
- JavaScript
- TypeScript
web/src/pages/ContactPage/ContactPage.js
import {MetaTags} from '@redwoodjs/web'
import {Form, TextField, Submit} из '@redwoodjs/forms' const ContactPage = () => {
return (
<>
<Форма>
Сохранить
)
}
export default ContactPage
У нас есть то, что можно было бы считать настоящей, добросовестной формой. Попробуйте ввести что-нибудь и нажать «Сохранить». Ничего не взорвалось на странице, но у нас нет указаний на то, что форма была отправлена или что случилось с данными. Далее мы получим данные из наших полей.
onSubmit
Подобно простой форме HTML, мы дадим обработчик onSubmit .
Этот обработчик будет вызываться с одним аргументом — объектом, содержащим все поля отправленной формы:
- JavaScript
- TypeScript
web/src/pages/ContactPage/ContactPage.js
import {MetaTags} from '@redwoodjs/web'
import {Form, TextField, Submit} из '@redwoodjs/forms' const ContactPage = () => {
const onSubmit = (data) => {
console.log(data)
}
return (
<>
<Форма onSubmit={onSubmit}>
Save
)
}
export default ContactPage
Теперь попробуйте ввести некоторые данные и отправить, затем проверьте консоль в Web Inspector:
Отлично! Давайте превратим это в более полезную форму, добавив пару полей.
Мы переименуем существующий в «имя» и добавим «электронную почту» и «сообщение»:
- JavaScript
- TypeScript
web/src/pages/ContactPage/ContactPage.js
импорт {метатегов} из '@redwoodjs/web'
импорт {формы, TextField, TextAreaField, Submit} из '@redwoodjs/forms' const ContactPage = () => {
const onSubmit = (data) => {
console.log(data)
}
return (
<>
)
}
export default ContactPage
См. здесь новый компонент , который генерирует HTML