Интеграция Flask и ReactJS с использованием jQuery - PullRequest
Новая
       3

Интеграция Flask и ReactJS с использованием jQuery

0 голосов
/ 21 февраля 2019

TL; DR: Как я могу интегрировать / внедрить код jQuery (см. Ниже) в ReactJS?

Приветствую всех.Любительский пользователь ReactJS и Flask здесь.Я просто ищу решение о том, как интегрировать код jQuery в ReactJS или даже другие альтернативы, учитывая, что реализация в жизненном цикле становится другой в ReactJS.

В настоящее время этот фрагмент (см. Ниже приведенный ниже шаблонный код jQuery) очень хорошо связывается с CRUD-операциями Flask, которые отправляют выбранное изображение из FileReader() в форме base64 и отвечают соответствующим прогнозом (по модели ML) при нажатии #predict-button. 

<body>
    <input id="image-selector" type="file">
    <button id="predict-button">Predict</button>
    <p style="font-weight:bold">Predictions</p>
    <p>foo1: <span id="foo1"></span></p>
    <p>foo2:   <span id="foo2"></span></p>
    <p>foo3:   <span id="foo3"></span></p>
    <img id="selected-image" src=""/>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
let base64Image;
    $("#image-selector").change(function() {
        let reader = new FileReader();
        reader.onload = function(e) {
            let dataURL = reader.result;
            $('#selected-image').attr("src",dataURL);
            base64Image = dataURL.replace("data:image/jpeg;base64,","");
        }
        reader.readAsDataURL($("#image-selector")[0].files[0]);
        $("#foo1").text("");
        $("#foo2").text("");
        $("#foo3").text("");
    });

    $("#predict-button").click(function(event){
        let message = {
            image: base64Image
        }
        console.log(message);
        $.post("http://127.0.0.1:5000/predict",JSON.stringify(message),function(response){
            $("#foo1").text(response.prediction.foo1.toFixed(6));
            $("#foo2").text(response.prediction.foo2.toFixed(6));
            $("#foo3").text(response.prediction.foo3.toFixed(6));
            console.log(response);
        });
    });
</script>
</body>

NotОтметим, что мне больше не нужен FileReader(), так как у меня есть эта функция captureShot() из'act-webcam 'в ReactJS, которая возвращает закодированную в base64 строку текущего изображения веб-камеры.

  captureShot = () => {
    const screenshot = this.webcam.getScreenshot();
    this.setState({ imageData: screenshot });

  }

Возникают такие вопросы:

  1. Может ли это быть реализовано в ReactJS?
  2. Если так, то как?Будет ли это через ComponentDidMount() или внутри render()?
  3. Если нет, использует ли Express способ выполнения операций CRUD в ReactJS по пути к Flask?

Anyвид помощи будет высоко ценится.Большое спасибо за ваше время и внимание.

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

Мое волнение от того, что я задал этот странный вопрос, наверняка сбило с толку трех гаубиц.Спасибо за добрый совет @jmargolisvt, мне удалось это сделать, и теперь мой сервер Flask наконец-то может нормально общаться с моим ReactJS - проект готово!

Вот решение на тот случай, если кому-то интересно. 

export default class App extends Component { 
constructor(props){
    super(props);
    this.state = {
      bar: { foo1: null, foo2: null, foo3: null },
    }
  }

captureShot = () => {
    const screenshot = this.webcam.getScreenshot();
    let base64Image = screenshot.replace("data:image/jpeg;base64,","");
    this.setState({ 
      imageData: screenshot,
     });

    let message = {
      image: base64Image
    }

   fetch('http://127.0.0.1:5000/', {
    method: 'post',
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin': '*'
    },
    body: JSON.stringify(message)
    })
  .then((response) => {
    console.log(response);
    return response.json();  
  })
  .then((data) => {
    this.setState( {
      bar: {
        foo1: (data.prediction.foo1.toFixed(3)),
        foo2: (data.prediction.foo2.toFixed(3)),
        foo3: (data.prediction.foo3.toFixed(3)),
      }
    })   
  })
   .catch(error => this.setState({ error,  bar: { foo1: null, foo2: null, foo3: null }, }));
  }
}
0 голосов
/ 21 февраля 2019

Этот вопрос, вероятно, слишком широкий для SO, но короткий ответ «да», вы можете сделать это.Наверное, заставить вас думать в стиле React - это лучшее, что я могу предложить для ответа, не создавая его для вас.

Ваш image-selector div станет компонентом React.Он будет иметь onChange опору, которая будет указывать на пользовательский метод класса, где вы можете выполнять остальную часть своей бизнес-логики.Ваш predict-button также станет компонентом, на этот раз с onClick в качестве вашей опоры.Поскольку вы выполняете все свои функции в ответ на действие, вам не нужны загруженные данные в constructor или componentDidMount.

. Вы можете использовать собственные fetch или аналогичные библиотеки для замены$.post позвони тоже.В конце концов вам не понадобится ваш код jQuery, но если вы конвертируете свой код по частям, вы доберетесь туда и узнаете много нового.Я предлагаю использовать приложение «Создать React» для более удобного использования архитектуры.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...