7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Создание приложения для блога на React, часть 1: вход пользователя в систему

Read Time: 7 mins
This post is part of a series called Creating a Blogging App Using React.
Creating a Blogging App Using React, Part 2: User Sign-Up

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В этой серии учебников вы увидите, как начать работу с созданием приложения для ведения блога с помощью React. На протяжении всей этой серии учебников вы будете сосредоточены на том, как использовать React для разработки пользовательского интерфейса для вашего приложения. Для серверной части приложения мы будем использовать Node.js

В этом уроке вы увидите, как реализовать пользовательский интерфейс и бекенд для регистрации пользователя и входа пользователя.

Начинаем

Создайте каталог проекта и назовите его ReactNodeApp.  Перейдите в каталог проекта и инициируйте проект node.

Заполните необходимые данные, и вы должны будите получить файл package.json. Вот как он выглядит:

Вы будете использовать фреймворк express для обслуживания вашего приложения. Установите express, используя следующую команду:

Используя Фреймворк express, давайте создадим наше приложение, прослушивающее адрес порта. Внутри каталога проекта создайте файл под названием app.js. Подключим модуль express внутри app.js и создадим приложение. Задайте статический путь приложения, где оно сможет найти статические файлы. Вот как это выглядит:

Назначьте номер порта, который приложение будет прослушивать. Добавьте следующий код для создания сервера:

Внутри каталога проекта создайте папку html. Внутри html-папки создайте файл index.html. Добавьте следующий код в index.html:

Сохраните указанные выше изменения и запустите сервер, используя следующую команду:

Откройте в своем браузере следующий адрес http://localhost:7777/index.html, и вы сможете увидеть страницу index.html.

Создание окна входа в систему

Вы будете использовать bootstrap для создания пользовательского интерфейса. Загрузите и подключите bootstrap на странице index.html.

Добавьте необходимые библиотеки React на страницу index.html.

Вы создадите представление с помощью JSX. Если вы не знакомы с JSX, я бы рекомендовал прочитать вводный учебник по React и JSX.

Чтобы преобразовать JSX-код в JavaScript, вам понадобится babel, компилятор JavaScript. Подключите babel на странице index.html.

Создайте файл main.jsx внутри папки html. Этот файл будет содержать компоненты React UI.

Давайте создадим новый компонент React под названием Signin внутри файла main.jsx.

Добавьте метод render внутри компонента Signin, который отобразит пользовательский интерфейс для нашего компонента Signin.

В приведенном выше коде это всего лишь HTML с одним отличием. Атрибут class был изменен на className при использовании в JSX.

Компонент Signin, когда отображается, отображает HTML-код внутри метода render.

Добавьте контейнер div на страницу index.html, где вы будете отображать компонент Signin.

Выведите компонент Signin внутри .container div в index.html.

Сохраните указанные выше изменения и перезапустите сервер. В своем браузере откройте http://localhost:7777/index.html, и вы должны будите увидеть экран входа.

React Blog App SignIn ScreenReact Blog App SignIn ScreenReact Blog App SignIn Screen

Реализация входа пользователя

Чтобы реализовать процесс входа в систему, вам необходимо обработать введенный текст и событие onChange а затем сохранить значения текстового поля в переменной состояния. Когда пользователь нажимает кнопку, вы будете использовать переменные состояния для чтения значений текстового поля адреса электронной почты и пароля. Итак, добавим событие onChange в текстовые поля:

Определите события onChange в компоненте Signin:

Привяжите указанные выше события и переменные состояния в методе конструктора компонента:

Определите метод onClick, который вы будете вызывать при нажатии кнопки.

Добавьте событие OnClick в кнопку SignIn.

Сохраните указанные выше изменения и перезапустите сервер. В своем браузере откройте http://localhost:7777/index.html. Введите адрес электронной почты и пароль и нажмите кнопку «Sign In», и вы сможете увидеть, как всплывают письма и пароль.

Передача данных из React в Node

После того, как у вас есть данные на стороне клиента, вам необходимо отправить эти данные на серверный метод Node.js, чтобы проверить вход пользователя в систему. Для отправки данных вы будете использовать другой скрипт под названием axios. Axios - это HTTP-клиент на основе промисов для браузера и Node.js. Подключите axios на странице index.html.

Внутри метода signin в файле main.jsx добавьте следующую строку кода, чтобы сделать пост запрос.

Код делает пост запрос методу /signin с указанными параметрами. Как только запрос будет успешным, промис будет разрешено в обратном вызове then. При ошибке ответ регистрируется в обратном вызове catch.

Давайте создадим метод signin на стороне Node.js для проверки процесса входа пользователя. В файле app.js создайте метод под названием signin.

Вы будете использовать модуль body-parser для анализа запроса, отправленного с клиентской стороны React. Установите модуль body-parser в проект.

Подключите модуль body-parser в файле app.js.

Добавьте следующую строку кода, чтобы разрешить разбор JSON.

Внутри метода signin вы можете разобрать запрос, как показано здесь:

Измените метод signin, как показано для подтверждения входа пользователя.

В настоящее время учетные данные пользователя жестко закодированы. Вы можете заменить его соответствующим сервисом в соответствии с вашими предпочтениями.

Как только параметры были проанализированы, они проверяются на ожидаемые учетные данные. Если true, передается сообщение об успешном завершении, иначе возвращается сообщение об ошибке.

Сохраните указанные выше изменения и перезапустите сервер Node.js. Введите действительное имя пользователя и пароль и нажмите метод входа. На основе учетных данных он вернет сообщение об успешном завершении или сбое, которое будет отображаться в консоли браузера.

Создание представления регистрации пользователя

Процесс создания пользовательского регистрационного представления очень похож на то, как вы внедрили модуль входа пользователя. Начнем с создания компонента Signup в файле main.jsx.

Поскольку регистрация и вход в систему - это два разных компонента, вам необходимо связать эти два компонента. В целях маршрутизации вы будете использовать react-router. Если вы новичок в маршрутизации в React, я бы рекомендовал прочитать учебник по маршрутизации React.

Подключите react-router на странице index.html.

Определите требуемые переменные react-router для создания ссылок в файле main.jsx.

Определите различные маршруты и маршрут по умолчанию, как показано ниже:

Включите ссылку на компонент входа в компонент регистрации и наоборот. Вот метод render компонента Signin со ссылкой для регистрации:

Сохраните указанные выше изменения и перезапустите сервер Node.js.  В своем браузере откройте http://localhost:7777/index.html, и вы сможете увидеть экран входа с ссылкой на регистрацию. Нажмите на ссылку регистрации, и вы должны перейти на экран регистрации.

Sign In Screen with Sign Up LinkSign In Screen with Sign Up LinkSign In Screen with Sign Up Link

Внедрение регистрации пользователя аналогично тому, как вы выполнили вход пользователя. Я оставлю реализацию регистрации пользователя в качестве упражнения. В следующей части этой серии уроков я опубликую версию регистрации пользователя.

Подведем итоги

В этой части серии учебников вы создали и внедрили экран входа в систему. Вы также видели, как использовать react-router для реализации маршрутизации в React. В следующей части этого урока вы увидите, как реализовать раздел «Sign Up» и «Add Post».

Исходный код этого учебника доступен в GitHub.

Сообщите нам свои мысли и предложения в комментариях ниже.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.