[Python] J'ai essayé d'exécuter un serveur local en utilisant flask
introduction
Jusqu'à ce que l'auteur, qui n'a touché à python qu'avec Progate, mette en place un serveur local en utilisant python et le fasse fonctionner pour n'importe quelle adresse. mémorandum.
Environnement de développement
Windows 10 64bit Python 3.7.3 pip 19.3.1 flask 1.1.1
Environnement
Si vous n'avez pas installé python, installez-le d'abord! Pour plus de détails, voir ici
Si vous ne vous souvenez pas de l'avoir installé, mais que vous pensez que vous pourriez ... Ouvrez une invite de commande et vérifiez avec python -V!
$ python --version
Python 3.7.3
$ python -V
Python 3.7.3
S'il est déjà installé, il s'affichera comme ci-dessus!
Une fois l'installation terminée, nous installerons l'outil de gestion des packages Python pip! Si vous voulez vérifier s'il est installé
python -m pip -V
En peut être confirmé! Si vous ne l'avez pas installé, veuillez cliquer ici pour la méthode d'installation détaillée (https://www.python-izm.com/tips/pip/)
Appuyez sur la commande suivante pour installer!
py -m pip install pypdf2
Après l'installation, nous installerons flask, qui est le framework léger de python utilisé cette fois! En supposant que les personnes qui ont utilisé flask ne liront pas cet article, à partir de la méthode d'installation!
pip install Flask
Quand vous voulez vérifier
$ python
>> import flask
>> flask.__version__
(Ne copiez pas la marque \ $. Qu'est-ce que c'est \ $?) Si vous pouvez le faire jusqu'à présent, la construction de l'environnement est terminée pour le moment. Merci pour votre soutien.
Mis en œuvre immédiatement
Cette fois, nous allons l'implémenter afin que les données spécifiées soient renvoyées lorsque le bouton est cliqué avec l'application react-app créée dans l'article précédent. Article avant-dernier → [React] J'ai essayé React pour la première fois! ~ édition create-react-app ~ S'il vous plaît, aimez-le si vous aimez ()
A part ça, je vais écrire le code. La corrélation avec le dossier de celui que j'ai fait la dernière fois est comme ça!
Sample
└ resource
└ react-test
└ node_modules
└ public
└ src
└ App.js
・
・
・
└ flask-test
└ run.py
Tout d'abord, j'ai créé le code côté python en faisant référence à différents sites.
run.py
import json
#Importez les bibliothèques requises telles que Flask
from flask import Flask
from flask_cors import CORS
from flask import request, make_response, jsonify
#Instanciez votre nom en tant qu'application
app = Flask(__name__)
# CORS (Cross-Origin Resource Sharing)
CORS(app)
#Écrire le routage pour les applications Web à partir d'ici
#Que se passe-t-il lorsque vous accédez à l'index
@app.route('/', methods=['GET'])
def show_user():
response = {'user': {'name': 'index', 'age': 'hoge', 'job': 'web'}}
return make_response(jsonify(response))
# /Que se passe-t-il lorsque vous accédez à l'utilisateur
@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()
↓ Cliquez ici pour de nombreux articles auxquels j'ai fait référence ↓
- Essayez d'utiliser le framework d'application Web Flask · Créons une application Web en utilisant le Python de Flask (1) Hello World](https://qiita.com/penpenta/items/47d23e2ea1decb4fb252) ・ Guide de l'utilisateur Flask
Ensuite, nous modifierons l'application qui a été précédemment créée à l'aide de create-react-app! J'ai ouvert react-test> App.js et j'ai fait ce qui suit:
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;
Finalement exécuté
Une fois que vous êtes ici, lancez-le simplement à l'invite de commande! Ouvrez immédiatement l'invite de commande,
cd C:\Users\{user}\Documents\Sample\flask-test
Se déplace vers le répertoire spécifié. ici,
python run.py
Début!
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)
Si ça réussit! !!
Ensuite, ouvrez l'invite de commande dans une autre fenêtre et ouvrez-la.
cd C:\Users\{user}\Documents\Sample\react-test
Accédez au répertoire create-react-app avec. Et comme la dernière fois
C:\Users\{user}\Documents\Sample\react-test>npm start
Commencer avec! C'est émouvant ... non!?
Module not found: Can't resolve 'axios'・ ・ ・
Il n'y a pas de module axios ... Certes, je ne me souviens pas avoir installé le module axios à importer ... J'ai donc tout de suite frappé la commande suivante pour l'installer!
C:\Users\{user}\Documents\Sample\react-test>npm install axios
Vous devriez pouvoir y aller! C'est pourquoi encore
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 ~~~~~~~~!
Maintenant, lorsque vous appuyez sur le bouton clic ...
hoge est de retour! !! Succès! !!
Changez l'adresse de vol la prochaine fois que vous cliquez!
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);
})
}
cette
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);
})
}
Lorsque vous appuyez sur le bouton de clic (ajouter un utilisateur à la fin de l'adresse),
Il a changé en fuga! !! !! Pour le moment, j'ai pu le déplacer comme prévu, ce qui est bien. Il y avait quelques écueils, mais une fois l'environnement construit, ce serait tout à fait le cas!
en conclusion
Si quelqu'un l'a vu jusqu'à la fin, merci beaucoup. Je l'ai essayé depuis un endroit rudimentaire, mais je suis vraiment content de pouvoir le déplacer. J'aimerais l'améliorer davantage et le résumer à nouveau!
Recommended Posts