Сегодня мы собираемся узнать о создании приложения SPA (Single Page Application) Crud с использованием Fetch. Нам нужно иметь возможность отправлять и получать JSON из БД. Это то, что обеспечивает функциональность CRUD. Помните об этом основном принципе. Вы сможете создать любое приложение, которое захотите.

Думайте об этой функциональности как о СЕРДЦЕ любого crud-приложения SPA, которое вы хотите создать.

C.R.U.D. = Создать | Читать | Обновить | Удалить

Как устроен этот блог, мы собираемся проанализировать выборку, используя код моего предварительно созданного CRUD-приложения SPA. Мы не собираемся сосредотачиваться на бэкенде в этом блоге, потому что fetch не зависит от БД. Но для тех из вас, кому интересно. Я использую Rails в качестве своего бэкэнда. Итак, весь этот проект выполняется с использованием моего локального хоста http://127.0.0.1:3000. Так что учтите, что переменная BaseUrl = http://127.0.0.1:3000».

И просто для того, чтобы каждый мог следовать за ним немного легче. Мой проект основан на моей любимой детской страсти; Ю-ги-о карты.

Если мы посмотрим на структуру карты, мы увидим, что карта имеет:

  1. Имя
  2. Тип
  3. Звездный номер
  4. Изображение
  5. Описание
  6. АТК (очки атаки)
  7. DEF (Очки защиты)

Но для простоты в будущем мы просто сосредоточимся на:

  1. Имя
  2. Изображение
  3. Описание

МОЙ ORM (не то, чтобы он вам понадобится)

Теперь, когда у нас есть детали, вам нужно не отставать от урока. Начнем с создания функциональности.

Создать

«Создать» позволяет нам добавлять объекты в нашу базу данных.

Мы начинаем с создания хэша (он же JS Object), который содержит всю информацию, которую мы хотим, чтобы наша будущая карта имела. Как видите, у нашей карты есть имя (cardName), описание (cardDesc), изображение (cardImgSm) и идентификатор корзины (1). Это переменные, которые могут быть назначены с использованием любых необходимых средств. Вы можете использовать форму с прослушивателем событий JS или вы можете получить информацию из другого API, используя другой запрос на выборку и организуя/назначая информацию соответствующим переменным.

После того, как вы организовали свой хэш. Мы можем начать фактический процесс выборки. На самом деле вы можете сделать запрос на выборку и настроить свой запрос внутри действия выборки, но я лично люблю чистый код. И я решил организовать свои конфигурации заранее внутри моего объекта конфигурации.

Если мы заглянем внутрь нашего объекта конфигурации. хорошо получить лучшее представление о том, что происходит с выборкой. Как мы можем видеть:

  1. Мы отправляем запрос POST.
  2. У нас есть конфигурации заголовков.
  3. Мы хотим, чтобы наш хэш был преобразован в JSON с помощью последней команды.

Как только у нас есть наши конфигурации, мы запускаем команду fetch, чтобы фактически создать наш объект внутри db.

Читать

«Чтение» позволяет нам извлекать информацию и видеть, что находится в нашей БД. В приведенном выше примере я извлекаю информацию о картах из своего индексного маршрута, который содержит информацию обо всех картах. Если вы внедрили неактивную маршрутизацию, вы также можете получить информацию о конкретной карте, используя Baseurel/${cardId}. Я решил отображать все карточки последовательно из-за структуры и функциональности моего приложения. И этот конкретный запрос показывал все карточки в моей корзине. Но это зависит от вас в отношении того, чего вы пытаетесь достичь.

Итак, сначала мы создаем базу данных тура запроса на выборку с помощью команды fetch. Затем мы конвертируем ответ в JSON, используя «.json()», а затем, поскольку я получаю обратно массив данных; Я перебираю каждый элемент массива. Но если ваше возвращаемое значение не является массивом, вы; у вас нет причин перебирать массив; вы готовы начать обработку своих данных. Когда вы будете готовы к обработке данных, вы можете выбрать, что вы хотите с ними делать. Поскольку предполагается, что мы «читаем», я решил отобразить данные в файл «index.html». Но не стесняйтесь делать с данными все, что хотите.

Обновить

«Обновление» позволяет нам редактировать объекты в нашей БД. Как правило, у вас есть форма редактирования, которую вы будете использовать для установки значений переменной, а затем назначьте эту переменную соответствующим парам KEY: Value для хеша (объекта JS), который вы пытаетесь построить. Но вы также можете жестко закодировать эти значения. Глядя на мой код, вы можете видеть, что в хэше моей карты единственные значения, которые я обновляю, — это имя и описание. Это показывает, что вам не нужно редактировать все значения объекта, чтобы это работало. Вы можете выбрать и выбрать. После создания моего объекта я был готов запустить запрос на выборку в свою базу данных. Но я предпочитаю держать свой код в чистоте. И записал свои конфигурации вне запроса на выборку. Если мы посмотрим на мой объект конфигурации, мы увидим, что мы делаем запрос «PATCH». вместе с отправкой конфигурации заголовков, и мы превращаем тело нашей карты в JSON.

Как только наши конфигурации будут готовы, мы готовы запустить запрос на выборку. Так как мы обновляем одну карту за раз. Мы должны убедиться, что отправляем запрос на получение по правильному URL-адресу. В нашем случае наш URL-адрес «Baseurl/cards/${cardId}». Таким образом, мы можем редактировать эту конкретную карту. И, честно говоря, вы можете просто остановиться прямо здесь. Ваша карта в БД обновлена.

Я лично включил 2 «.then», потому что я хотел также мгновенно отображать обновление, используя мою библиотеку JS. Хотя не обязательно что-то, что вы должны сделать.

Удалить

«Удалите» нашу окончательную функциональность для нашего приложения SPA CRUD. «Удалить» также является самой простой командой CRUD. Чтобы подготовить функциональность удаления, давайте начнем с выборки. Просто шучу. Мы собираемся начать с конфигураций выборки, потому что мы отличные инженеры и нам нравится поддерживать порядок в нашем коде. В нашей конфигурации мы видим, что мы делаем метод удаления. У нас также есть наши заголовки. Теперь, когда мы закончили с нашей конфигурацией, мы собираемся сделать запрос на выборку (в основном там, где происходит действие). Поскольку мы отправляем запрос на удаление, мы должны указать, что именно мы пытаемся удалить. Итак, в моем примере я удаляю карту с определенным идентификатором из базы данных карт.

Вывод

В заключение вы можете создать одностраничное CRUD-приложение, используя javascript fetch(). Теперь вы знаете достаточно, чтобы создать приложение любого типа. Удачного кодирования! :)