Рубрики
Без рубрики

Как публиковать данные из реагирования на колбу.

В нашей предыдущей статье о подключении фронта React с бэкэнд фляп мы увидели, как получить данные … Tagged With Python, React, WebDev, программирование.

В нашей предыдущей статье о подключении фронта React с бэкэнд с колбами мы увидели, как извлекать данные из API Flask, а затем отобразить их в браузере, в этой статье продолжена мы рассмотрим, как отправить данные в бэкэнд с рукой из React, Затем обновите пользовательский интерфейс с помощью новых данных.

Проверьте мой GitHub Для полных кодов, используемых в этом руководстве.

Часть 1

Настройка бэкэнда флезы.

1. Routes.py

Прежде чем мы продолжим. Давайте изменим нашу колбу routes.py Чтобы принять ввод с фронта React, затем совершить базу данных. Мы добавим следующие строки кода в наш файл Routes.py.

@app.route("/add", methods=["POST"], strict_slashes=False)
def add_articles():
    title = request.json['title']
    body = request.json['body']

    article = Articles(
        title=title,
        body=body
        )

    db.session.add(article)
    db.session.commit()

    return article_schema.jsonify(article)

Функция выше в основном получает заголовок и описание статьи в формате JSON, добавляет запись в базу данных, а затем совершает, то есть сохраняет.

Часть 2

Настройка фронта React.

В отличие от последнего учебника, мы внесем некоторые изменения в наш проект, введя Компоненты каталог. Затем мы добавим несколько новых файлов, один для управления нашими службами API, а другой – для отображения формы в пользовательском интерфейсе, а также для обращения с нашим взаимодействием с Апсис , который предоставляет наши данные в колбе.

2. Компоненты/Apiservice.js

export default class APIService{
    // Insert an article
    static InsertArticle(body){
        return fetch(`http://localhost:5000/add`,{
            'method':'POST',
             headers : {
            'Content-Type':'application/json'
      },
      body:JSON.stringify(body)
    })
    .then(response => response.json())
    .catch(error => console.log(error))
    }

}

Чтобы лучше организовать наши файлы и повысить эффективность, мы проводим все службы API Flask в одном файле, а затем при необходимости называем методы.

Приведенный выше код запрашивает наши маршруты колбы, которые обрабатывают вставку данных, а затем публикуют наше название и описание статьи. Флэста заботится об остальном под капюшоном.

3. Компоненты/form.js

import { useState } from 'react';
import APIService from '../Components/APIService'

Потому что нам потребуется React USESTATE Крюк и Апирация Компонент, мы делаем их доступными, как видно выше.

const Form = (props) => {
    const [title, setTitle] = useState('')
    const [body, setBody] = useState('')

    const insertArticle = () =>{
      APIService.InsertArticle({title,body})
      .then((response) => props.insertedArticle(response))
      .catch(error => console.log('error',error))
    }

    const handleSubmit=(event)=>{ 
      event.preventDefault()
      insertArticle()
      setTitle('')
      setBody('')
    }

  return (
       

       // Form
       

  )}

export default Form;

В приведенном выше функциональном компоненте, который мы только что создали, мы определяем два набора переменных, заголовок и орган статьи, оба подвергаются крюку с использованием, который возвращает текущие состояния (заголовок и тело) и функцию, которая обновляет их (Settitle и набор тела).

Затем мы призываем Апирация. Insertarticle () метод Этот вызов принимает наш объект статьи – из формы, представленной пользователем, в качестве аргумента. Ответ затем отправляется в качестве параметра функции Insertedarticle что нам еще предстоит создать на более поздних шагах внутри App.js Анкет

Параметр является переменной в объявлении функции, в то время как аргумент является фактическим значением этой переменной, которая передается функции .- Переполнение стека

В Handlesubmit функция, мы называем вставка а затем очистите поля формы после подачи.

Оператор возврата компонента формы обеспечивает нашу фактическую форму HTML, как показано ниже.

        


          
          setTitle(e.target.value)}
          required
          />

3. App.js

Поскольку мы почти завершаем, нам нужно показать компонент формы на пользовательском интерфейсе. Мы импортируем его, а затем отобразим его на пользовательском интерфейсе, как показано в шагах ниже.

// import the component
import Form from './Components/Form'

Ранее мы передавали ответ от нашего Апирация. Insertarticle () В качестве параметра он затем получен на этом конце. Используя оператор спреда, мы объединим недавно созданную статью с доступными статьями. Обновление инициируется с использованием Сетартицы Метод и результат – список обновленных Статьи Анкет

  // update the existing article list
  const insertedArticle = (article) =>{
    const new_articles = [...articles,article]
    setArticles(new_articles)
  }

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

Кроме того, сохранять видимую форму все время не идеально, поэтому мы сделали ее кнопкой переключения.

  // define variables for the present state of the form and another to change its state
  const [showForm, setShowForm] = useState(false);
  ...
 // toggle between the two states,visible and hidden
  const toggleShowForm = () => {
    setShowForm(!showForm);
  }
  ...
// Trigger the hide/show method
  
  ...
 // display the form conditionally
  {showForm && (
  

  )}

Предварительный просмотр проекта

Спасибо за чтение. Пожалуйста, поделитесь, поделитесь и оставьте комментарий ниже.

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

Вдохновленный Parwiz forogh

Подпишись на меня в Твиттере

Оригинал: “https://dev.to/dev_elie/sending-data-from-react-to-flask-apm”

Читайте ещё по теме: