[Python] Ich habe versucht, einen lokalen Server mit flask auszuführen
Einführung
Bis der Autor, der Python nur mit Progate berührt hat, einen lokalen Server mit Python eingerichtet und für jede Adresse verwendet hat. Memorandum.
Entwicklungsumgebung
Windows 10 64bit Python 3.7.3 pip 19.3.1 flask 1.1.1
Umgebung
Wenn Sie Python nicht installiert haben, installieren Sie es zuerst! Weitere Informationen finden Sie unter hier.
Wenn Sie sich nicht erinnern, es installiert zu haben, aber Sie denken, Sie könnten ... Öffnen Sie eine Eingabeaufforderung und überprüfen Sie mit python -V!
$ python --version
Python 3.7.3
$ python -V
Python 3.7.3
Wenn es bereits installiert ist, wird es wie oben angezeigt!
Sobald die Installation abgeschlossen ist, installieren wir das Python-Paketverwaltungstool pip! Wenn Sie überprüfen möchten, ob es installiert ist
python -m pip -V
In kann bestätigt werden! Wenn Sie es nicht installiert haben, klicken Sie hier, um eine detaillierte Installationsmethode anzuzeigen (https://www.python-izm.com/tips/pip/).
Drücken Sie den folgenden Befehl, um zu installieren!
py -m pip install pypdf2
Nach der Installation installieren wir flask, das diesmal verwendete leichte Framework von Python! Angenommen, Personen, die eine Flasche verwendet haben, werden diesen Artikel anhand der Installationsmethode nicht lesen!
pip install Flask
Wenn Sie überprüfen möchten
$ python
>> import flask
>> flask.__version__
(Kopieren Sie nicht die Markierung \ $. Was ist das \ $?) Wenn Sie dies bisher tun können, ist der Umgebungsbau vorerst abgeschlossen. Danke für Ihre Unterstützung.
Sofort implementiert
Dieses Mal werden wir es so implementieren, dass die angegebenen Daten zurückgegeben werden, wenn auf die Schaltfläche mit der im vorherigen Artikel erstellten Reaktions-App geklickt wird. Vorletzter Artikel → [Reagieren] Ich habe zum ersten Mal Reagieren versucht! ~ create-react-app edition ~ Bitte mag es, wenn du magst ()
Abgesehen davon werde ich den Code schreiben. Die Korrelation mit dem Ordner des Ordners, den ich das letzte Mal erstellt habe, ist wie folgt!
Sample
└ resource
└ react-test
└ node_modules
└ public
└ src
└ App.js
・
・
・
└ flask-test
└ run.py
Zunächst habe ich den Code auf der Python-Seite unter Bezugnahme auf verschiedene Sites erstellt.
run.py
import json
#Importieren Sie die erforderlichen Bibliotheken wie Flask
from flask import Flask
from flask_cors import CORS
from flask import request, make_response, jsonify
#Instanziieren Sie Ihren Namen als App
app = Flask(__name__)
# CORS (Cross-Origin Resource Sharing)
CORS(app)
#Schreiben Sie von hier aus das Routing für Webanwendungen
#Was passiert, wenn Sie auf den Index zugreifen?
@app.route('/', methods=['GET'])
def show_user():
response = {'user': {'name': 'index', 'age': 'hoge', 'job': 'web'}}
return make_response(jsonify(response))
# /Was passiert, wenn Sie auf den Benutzer zugreifen?
@app.route('/user', methods=['GET'])
def show_user2():
response = {'user': {'name': 'user', 'age': 'fuga', 'job': 'free'}}
return make_response(jsonify(response))
if __name__ == '__main__':
app.run()
↓ Klicken Sie hier für viele Artikel, auf die ich verwiesen habe ↓
- Versuchen Sie, das Webanwendungsframework Flask zu verwenden · Erstellen wir eine Web-App mit Python of Flask (1) Hello World](https://qiita.com/penpenta/items/47d23e2ea1decb4fb252) ・ Flask User Guide
Als nächstes werden wir die App ändern, die zuvor mit create-react-app erstellt wurde! Ich habe den Reaktionstest> App.js geöffnet und Folgendes ausgeführt:
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Axios from 'axios';
function App() {
function click(){
Axios.get('http://127.0.0.1:5000/').then(function(res){
console.log(res);
alert(res.data.user.age);
}).catch(function(e){
alert(e);
})
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
<br/>
</a>
<button onClick={() => {click()}}>click</button>
</header>
</div>
);
}
export default App;
Endlich ausgeführt
Sobald Sie hier angekommen sind, führen Sie es einfach an der Eingabeaufforderung aus! Öffnen Sie sofort die Eingabeaufforderung und
cd C:\Users\{user}\Documents\Sample\flask-test
Verschiebt sich in das angegebene Verzeichnis. Hier,
python run.py
Start!
C:\Users\{user}\Documents\Sample\flask-test>python run.py
* Serving Flask app "run" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Wenn es erfolgreich wird! !!
Öffnen Sie anschließend die Eingabeaufforderung in einem anderen Fenster und öffnen Sie sie.
cd C:\Users\{user}\Documents\Sample\react-test
Wechseln Sie mit in das Verzeichnis create-react-app mit. Und wie beim letzten Mal
C:\Users\{user}\Documents\Sample\react-test>npm start
Beginnen mit! Das bewegt sich ... nein !?
Module not found: Can't resolve 'axios'・ ・ ・
Es gibt kein Axios-Modul ... Natürlich kann ich mich nicht erinnern, das zu importierende Axios-Modul installiert zu haben ... Also habe ich sofort den folgenden Befehl gedrückt, um es zu installieren!
C:\Users\{user}\Documents\Sample\react-test>npm install axios
Sie sollten hier gehen können! Deshalb schon wieder
C:\Users\{user}\Documents\Sample\react-test>npm start
...
C:\Users\{user}\Documents\Sample\react-test>npm start
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\10.15.3\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> [email protected] start C:\Users\sleep\Documents\React-Tutorial\test
> react-scripts start
Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.
Starting the development server...
Compiled successfully!
You can now view test in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.10.101:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
Kita ~~~~~~~~!
Jetzt, wenn Sie die Klick-Taste drücken ...
hoge ist zurück! !! Erfolg! !!
Ändern Sie die Adresse, um beim nächsten Klicken zu fliegen!
App.js
function click(){
Axios.get('http://127.0.0.1:5000/').then(function(res){
console.log(res);
alert(res.data.user.age);
}).catch(function(e){
alert(e);
})
}
Dies
App.js
function click(){
Axios.get('http://127.0.0.1:5000/user').then(function(res){
console.log(res);
alert(res.data.user.age);
}).catch(function(e){
alert(e);
})
}
Wenn Sie die Klick-Taste drücken (Benutzer am Ende der Adresse hinzufügen),
Es wurde zu Fuga! !! !! Vorerst konnte ich es wie erwartet bewegen, was gut ist. Es gab einige Stolpersteine, aber sobald die Umgebung gebaut war, würde es ganz so sein!
abschließend
Wenn jemand es bis zum Ende gesehen hat, vielen Dank. Ich habe es von einem rudimentären Ort aus versucht, aber ich bin wirklich froh, es bewegen zu können. Ich möchte es weiter verbessern und noch einmal zusammenfassen!
Recommended Posts