Создание приложения CRUD - хорошее начало для изучения веб-разработки.

Когда вы начинаете изучать React (или любой другой интерфейсный фреймворк), у вас в конечном итоге возникает один общий вопрос. Как реализовать функции CRUD без создания собственной серверной службы?
Ответ ниже

«Получите полный поддельный REST API с нулевым кодированием за менее 30 секунд (серьезно)

Создано с ❤ для разработчиков внешнего интерфейса, которым нужна быстрая серверная часть для создания прототипов и имитаций ». - json-сервер

Окончательный результат этого приложения будет таким, как показано ниже.

В целом, каким бы сложным ни было ваше веб-приложение, есть три общие черты.

а) Серверная служба - для хранения и извлечения данных. (Роль серверной службы намного больше, включая управление сеансами, хостинг и т. Д., В этом примере мы будем придерживаться только части извлечения данных)
б) Фронтенд-служба - для чтения данных из бэкэнд и добавьте к нему взаимодействия. Взаимодействия включают функции обновления / удаления, как показано в примере.
c) CSS - для стилизации. Хотя стиль не влияет на ваше приложение и не портит его, рекомендуется всегда включать его. Без CSS пример приложения выглядел бы просто старым скучным 😃. Поскольку это обширный предмет для изучения, самый простой способ - использовать Bootstrap, чтобы быстро получить страницы профессионального качества.

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

Сервер JSON как бэкэнд для извлечения данных.

С самого начала мы видели, что Backend - это одна из трех опор, формирующих ваше веб-приложение. Но предстоит еще много работы, даже если мы просто хотим создать службу для извлечения данных.

Настройте локальную базу данных, создайте несколько таблиц, создайте HTTP-сервер, создайте маршруты на сервере для различных операций, напишите SQL для управления данными в таблицах… ..и список можно продолжить.

JSON Server все это упрощает. Просто npm install -g json-server, и вы получите готовую базу данных и HTTP-сервер. Этот пакет использует один файл db.json (или любой другой файл JSON), обрабатывает файл как базу данных JSON, а также предоставляет маршруты, по которым вы можетеGET, POST, PUT, DELETE для этого db.json файла.

Чтобы запустить службу, все, что вам нужно сделать, это открыть терминал и запустить
json-server --watch db.json --port 3000

В этой статье я использую приведенный ниже db.json файл.

После запуска этой службы у вас активированы следующие маршруты, которые мы можем

  1. GET http: // localhost: 3002 / posts /
  2. GET http: // localhost: 3002 / posts /: id
  3. POST http: // localhost: 3002 / posts /
  4. PUT http: // localhost: 3002 / posts /: id
  5. DELETE http: // localhost: 3002 / posts /: id

/:id в конце - это извлечь или обработать конкретную запись с помощью этого “id” из db.json файла.
Например, GET http: // localhost: 3002 / posts / 1 получит запись с заголовком JSON SERVER

И вот, с одним файлом и командой ваша Backend-служба готова. Чтобы пойти еще на один шаг вперед, вы можете проверить Typicode, который представляет собой тот же пакет, что размещен на Heroku, поэтому вам не нужно устанавливать какой-либо локальный пакет.

REACT как интерфейс для добавления взаимодействий.

Когда ваш Backend позаботился, пришло время использовать эти определенные маршруты в вашей структуре Frontend и добавить взаимодействия в ваше приложение. По сути, это создает наш «пользовательский опыт». В этой статье мы надеемся, что вы уже знакомы с основами React, поскольку мы сосредоточимся больше на том, как создать приложение-пример с уже установленными концепциями фреймворка.

Если вы новичок в React, я настоятельно рекомендую просмотреть пример игры Крестики-нолики на https://reactjs.org/. Учебник очень хорошо объяснен и охватывает все концепции, необходимые для этого примера.

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

Итак, возвращаясь к React, общее дерево компонентов для нашего приложения выглядит следующим образом

CRUD, как вы знаете, означает создание, чтение, обновление и удаление. В следующих разделах мы подробно рассмотрим эти аспекты.

R - Читать

На языке HTTP Read называется GET. Мы не требуем, чтобы React отправлял GET request, мы используем для этого FETCH API. React вступает в действие, когда нам нужно обработать вывод, полученный в результате вызова FETCH API.

Если мы проверим файл App.js, у нас будет следующая getLists() функция. Теперь эта функция делает две вещи

  1. Использует Fetch API для GET списка всех сообщений. (Маршруты http://localhost:3002/posts и другие предоставляются уже запущенным сервером JSON)
  2. Изменяет state компонента App (App.js) и заполняет переменную состояния alldata

После изменения state компонент Lists (Lists.js) отображает каждую запись в выходных данных JSON как отдельную строку с компонентом Update (UpdateList.js) и Delete component (DeleteList.js) с использованием переменной состояния alldata, переданной как Props компоненту.

Все это происходит при срабатывании события onClick на кнопке «Получить списки». Это составляет нашу первую часть приложения, функцию READ.

C - Создать

На языке HTTP Create - это POST. Подобно GET, POST и другие действия HTTP выполняются Fetch API.

Мы создали отдельный Create Компонент (CreateList.js) для этой функции. Этот компонент отображает HTML <form>, чтобы предоставить <input> для ввода «Заголовок» и «Автор». Обработчик событий onClick внутри этого Компонента запускает функцию createList() в (App.js), которая регистрирует новую запись (значения, взятые из полей <input> внутри <form>) в файле db.json, а также сбрасывает state в конец.

Пожалуйста, обратитесь к полному списку (CreateList.js), чтобы узнать больше о том, как создавать <form> элементы и управлять их элементами в React. Мы завершили нашу вторую функциональность нашего приложения. Давайте рассмотрим последние два вместе, поскольку у них один и тот же рабочий код с некоторыми отличиями.

U - обновить и D - удалить

Функции обновления и удаления работают одинаково.

  1. Подобно Компоненту Create, Компоненты Update/Delete имеют <form> с <inputs> для «Заголовка» и «Автор».
  2. ОбработчикonClick в кнопке Обновить / Удалить выбирает требуемые Заголовок и Автор, используя GET http: // localhost: 3002 / posts /: id
  3. Вышеупомянутые выбранные значения используются для отображения значений <form>s <input>, которые затем могут быть обновлены / удалены.

4. Обработчик onClick на внутренней кнопке обновления / удаления (Строка 41 в UpdateList.js и DeleteList.js) запускает функцию updateList(), присутствующую в App.js, которая использует Fetch API для выполнения соответствующего вызова для изменения db.json

В приведенном ниже фрагменте показана функция обновления, функция удаления будет такой же, за исключением того, что вместо PUT будет выполнено действие HTTP DELETE.

Выводы

  1. JSON Server и Fetch API являются ядром приложения, а не React.
  2. React практически не используется во всем примере, но это важно, когда в вашем приложении много более сложных взаимодействий.

Резюме

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