Ich möchte eine Webanwendung mit React und Python Flask erstellen

Einführung

Seit ich bei der Arbeit von React an der Frontentwicklung beteiligt bin, habe ich eine einfache Webanwendung erstellt, die auch als Ausgabepraxis dient.

Ich hatte keine Ahnung, welche Art von App ich erstellen sollte, also verwendete ich das Freigabeskript mecab, das ich zur Hand hatte, und erhielt den Eingabetext an der Rezeption. Es ist eine sehr einfache Anwendung, die die Daten auf der Serverseite aufteilt und das Ergebnis an der Rezeption anzeigt. (Da der Hauptzweck darin bestand, den Teil zu untersuchen, der die Reaktion und den Kolben verbindet, bin ich mir nicht sicher, ob das Erscheinungsbild und die Funktionen der App überhaupt nicht erstellt wurden.)

Wie der Titel schon sagt, ist die Vorderseite mit React und die Serverseite mit Python Flask implementiert.

Das diesmal implementierte Skript ist unter [hier] verfügbar (https://github.com/Pu-of-Parari/jparser_app).

Fertiges Produkt

Bildschirm

Ich werde versuchen zu teilen

Montageumgebung

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

npm: 6.14.7

Ich werde diesmal nicht auf die Umgebungskonstruktion von React eingehen, aber das offizielle Tutorial ist auch auf Japanisch umfangreich und es war sehr hilfreich.

• https://ja.reactjs.org/

Dies ist auch sehr zu empfehlen.

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

Implementieren

Diagramm

Die Konfiguration der diesmal implementierten Anwendung ist wie folgt (nur der Hauptteil).

Serverseite

Die Serverseite hat die folgende Konfiguration.

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

server.py ist der Code, der den Flask-Server startet.

Die Adresse und der Port werden unten mit "app.run (host =" 127.0.0.1 ", port = 5000)" angegeben.

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)

Der Teil @ app.route (" / wakati ", Methods = ['GET', 'POST') empfängt den Text von vorne, teilt ihn und gibt ihn dann nach vorne zurück. Ruft den von data = request.get_json () von vorne geposteten Inhalt im json-Format ab. Nehmen Sie die erforderlichen Daten von hier, führen Sie eine Verarbeitung durch (wenden Sie sie auf eine Funktion an, fügen Sie sie in die Datenbank ein), erstellen Sie sie im JSON-Format wie "response = {'result': res}" und geben Sie sie an die Vorderseite zurück.

(Ergänzung: Was ist CORS) Diese Regel ist erforderlich, um den Zugriff auf eine andere Ressource zu ermöglichen (= standortübergreifende HTTP-Anforderung). Ohne dies können Sie nicht auf den von der Vorderseite gestarteten Kolbenserver zugreifen.

• Referenz: https://aloerina01.github.io/blog/2016-10-13-1

Vorderseite

Dieses Mal habe ich die Vorlage "create-react-app" verwendet. (Hier ist sehr einfach zu verstehen, wie die App create-react-app eingerichtet und verwendet wird!)

Die Vorderseite hat die folgende Struktur (nur die Hauptdateien werden aufgelistet).

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

Die App.js in der automatisch generierten Vorlage wurde wie folgt umgeschrieben.

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;

Die folgenden Teile davon werden zur Kommunikation mit der Serverseite verwendet.

  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);
    })
  };

Veröffentlichen Sie den Wert von "this.state.value" in "http: //127.0.0.1: 5000 / wakati", der in "server.py" eingerichtet wurde. Nach der Verarbeitung auf der Serverseite wird der zurückgegebene Wert "result" im Browser durch "alert (res.data.result)" angezeigt.

Bewegung

Starten Sie ein Terminal für das Front-End bzw. das Back-End und führen Sie die folgenden Befehle aus.

Serverseite

$ cd backend
$ python server.py

Vorderseite

$ cd frontend/app
$ yarn start

Sie können die App verwenden, indem Sie über Ihren Browser auf localhost: 3000 zugreifen (sie startet automatisch mit dem Garnstart).

abschließend

Dieses Mal habe ich eine einfache Webanwendung mit React und Python Flask implementiert. Es ist einfach, aber großartig, weil Sie eine Webanwendung in kurzer Zeit problemlos implementieren können.

Da ich im Fronttraining bin, bin ich mir über das Aussehen und die Funktionen immer noch nicht sicher, daher würde ich mich über Ihre Meinungen und Ratschläge freuen. Vielen Dank für das Lesen bis zum Ende!