Je souhaite créer une application Web en utilisant React et Python flask

introduction

Depuis que j'ai commencé à m'impliquer dans le développement frontal par React au travail, j'ai créé une application Web simple qui sert également de pratique de sortie.

Je n'avais aucune idée du type d'application à créer, alors j'ai utilisé le script de partitionnement mecab que j'avais sous la main et j'ai reçu le texte d'entrée à la réception. C'est une application très simple qui divise les données côté serveur et affiche le résultat à la réception. (Étant donné que l'objectif principal était d'étudier la partie qui relie la réaction et le flacon, je ne suis pas sûr que l'apparence et les fonctions de l'application n'aient pas du tout été créées.)

Comme le titre l'indique, le recto est implémenté avec React et le côté serveur est implémenté avec python flask.

Le script implémenté cette fois-ci est disponible sur ici.

Produit fini

écran

J'essaierai de partager

Environnement de montage

OS: Ubuntu 18.04.2 LTS
Python: 3.6
flask==1.0.2

npm: 6.14.7

Je n'aborderai pas cette fois la construction de l'environnement de react, mais le tutoriel officiel était également substantiel en japonais et a été très utile.

• https://ja.reactjs.org/

Ceci est également fortement recommandé.

• https://mae.chab.in/archives/2529

Mettre en place

Diagramme

La configuration de l'application implémentée cette fois est la suivante (uniquement la partie principale).

Du côté serveur

Le côté serveur a la configuration suivante.

backend/
   ├─ requirements.txt
   ├─ server.py
   └─ utils.py

server.py est le code qui lance le serveur flask.

L'adresse et le port sont spécifiés en bas avec ʻapp.run (host = '127.0.0.1', port = 5000) `.

server.py

from flask import Flask
from flask import request, make_response, jsonify
from flask_cors import CORS
from utils import wakati

app = Flask(__name__, static_folder="./build/static", template_folder="./build")
CORS(app) #Cross Origin Resource Sharing

@app.route("/", methods=['GET'])
def index():
    return "text parser:)"

@app.route("/wakati", methods=['GET','POST'])
def parse():
    #print(request.get_json()) # -> {'post_text': 'Test test test'}
    data = request.get_json()
    text = data['post_text']

    res = wakati(text)
    response = {'result': res}
    #print(response)
    return make_response(jsonify(response))

if __name__ == "__main__":
    app.debug = True
    app.run(host='127.0.0.1', port=5000)

La partie @ app.route (" / wakati ", methods = ['GET', 'POST') reçoit le texte de l'avant, le divise, puis le retourne à l'avant. Obtient le contenu publié depuis l'avant par data = request.get_json () au format json. Il enlève les données nécessaires d'ici, effectue un certain traitement (en l'appliquant à une fonction, en la plaçant dans la base de données) et en les renvoyant au premier plan au format json comme response = {'result': res}.

(Supplément: Qu'est-ce que CORS) Cette règle est requise pour permettre l'accès à une autre ressource (= requête HTTP intersite). Sans cela, vous ne pouvez pas accéder au serveur flask lancé depuis la face avant. --Référence: https://aloerina01.github.io/blog/2016-10-13-1

Face avant

Cette fois, j'ai utilisé le modèle de create-react-app. (Ici est très facile à comprendre comment configurer et utiliser create-react-app!)

Le recto a la structure suivante (seuls les fichiers principaux sont répertoriés).

frontend/app/
   ├─ node_modules/
   ├─ public/
   ├─ src/
   |   ├─ App.css
   |   ├─ App.js
   |   ├─ index.js
   |   └─ ...
   └─ ...

J'ai réécrit ʻApp.js` dans le modèle généré automatiquement comme suit.

App.js

import React from 'react';
import './App.css';
import Axios from 'axios';

//function App() {
export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>text parser</h1>
          <form onSubmit={this.handleSubmit}>
            <label>
              <textarea name="text" cols="80" rows="4" value={this.state.value} onChange={this.handleChange} />
            </label>
            <br/>
            <input type="submit" value="Parse" />
          </form>
        </header>
      </div>
    );
  }


  wakati = text => {
    //console.log("input text >>"+text)
    Axios.post('http://127.0.0.1:5000/wakati', {
      post_text: text
    }).then(function(res) {
      alert(res.data.result);
    })
  };

  handleSubmit = event => {
    this.wakati(this.state.value)
    event.preventDefault();
  };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };
}

export default App;

Les parties suivantes de ceci sont utilisées pour communiquer avec le côté serveur.

  wakati = text => {
    //console.log("input text >>"+text)
    Axios.post('http://127.0.0.1:5000/wakati', {
      post_text: text
    }).then(function(res) {
      alert(res.data.result);
    })
  };

Publiez la valeur de this.state.value sur http: //127.0.0.1: 5000 / wakati configuré dans server.py. Après avoir été traitée côté serveur, la valeur retournée result est affichée dans le navigateur par ʻalert (res.data.result);`.

bouge toi

Lancez un terminal pour le front-end et le back-end respectivement et exécutez les commandes suivantes.

Du côté serveur

$ cd backend
$ python server.py

Face avant

$ cd frontend/app
$ yarn start

Vous pouvez utiliser l'application en accédant à localhost: 3000 depuis votre navigateur (elle démarrera automatiquement avec le démarrage du fil).

en conclusion

Cette fois, j'ai implémenté une application web simple en utilisant React et Python flask. C'est simple, mais c'est génial car vous pouvez facilement implémenter une application Web en peu de temps.

Comme je suis en formation avant, je ne suis toujours pas sûr de l'apparence et des fonctions, alors j'apprécierais vos opinions et vos conseils. Merci d'avoir lu jusqu'au bout!