In questo tutorial, esamineremo l’utilizzo del framework Flask per sfruttare le variabili JavaScript in Python. In questa sezione parleremo dei numerosi approcci e strategie utilizzati per combinare i due linguaggi, passaggio essenziale per molte candidature online. Verrà trattato tutto, dai fondamenti ad argomenti più complessi, come come gestire enormi set di dati. Esamineremo anche i modi migliori per organizzare il codice Python per un’efficacia ottimale. Avrai una conoscenza approfondita di come combinare Python e JavaScript in Flask entro la fine di questa lezione. Sarai in grado di risolvere problemi complicati con facilità e velocità una volta che avrai queste informazioni. allora andiamo!
Due dei linguaggi di programmazione più utilizzati al mondo sono Python e JavaScript. Lavorano spesso insieme in progetti di sviluppo web poiché ognuno di loro ha punti di forza in aree particolari. Gli sviluppatori possono produrre applicazioni web sofisticate e potenti integrando i due.
Una libreria Python per la creazione di applicazioni Web è il framework Flask. È un framework semplice che semplifica la creazione di app Web dinamiche per i programmatori. Aiuta i programmatori a creare applicazioni rapidamente e con poca codifica.
Una fase cruciale per molte applicazioni web è l’integrazione di Python e JavaScript in Flask. Le strategie e gli approcci appropriati per realizzare l’integrazione devono essere attentamente pianificati. Gli sviluppatori che hanno familiarità con il framework Flask e come utilizzare le variabili JavaScript in Python possono creare app robuste che sono semplici da mantenere ed espandere.
Imparerai i fondamenti dell’utilizzo delle variabili JavaScript in Python con il framework Flask in questa lezione. Esamineremo argomenti avanzati, gestendo enormi set di dati e strutturando i programmi Python per un’efficienza ottimale. Avrai una conoscenza approfondita di come combinare Python e JavaScript in Flask entro la fine di questa lezione. Sarai in grado di risolvere problemi complicati con facilità e velocità una volta che avrai queste informazioni.
Concetti:
Prima di iniziare, esaminiamo brevemente alcuni dei concetti coinvolti:
- Borraccia – Un framework Web Python che consente di creare applicazioni Web.
- javascript – Un linguaggio di programmazione che viene eseguito nel browser e può manipolare le pagine web.
- AIAX – Una tecnica per creare applicazioni Web asincrone in grado di comunicare con i server senza aggiornare la pagina.
- JSON – Un formato di dati comunemente utilizzato per lo scambio di dati tra applicazioni web.
Configurazione dell’ambiente:
Devi avere Python e Flask installati sul tuo computer per poter utilizzare Flask e fornire variabili JavaScript a Python. I passaggi per preparare l’ambiente sono i seguenti:
- Installa Flask: dopo aver installato Python, puoi installare Flask digitando il seguente comando da una riga di comando o da un terminale:
pip install flask
Questo comando installa Flask e tutte le sue dipendenze.
2. Installare eventuali librerie aggiuntive necessarie: a seconda del caso d’uso, potrebbe essere necessario eseguire questa operazione per elaborare i dati, gestire le richieste o operare con particolari formati di file. Ad esempio, puoi utilizzare il seguente comando per installare la libreria panda se stai lavorando con file CSV:
pip install pandas
3. Organizza il tuo progetto: per il tuo progetto, crea una nuova directory e aggiungi un nuovo file Python. Ecco un’illustrazione di come potrebbe apparire la struttura del tuo progetto:
myproject/ ├── app.py ├── static/ │ ├── script.js └── templates/ └── index.html
4. Avvio del server di sviluppo Flask Eseguire il comando seguente nel terminale o nel prompt dei comandi mentre ci si trova nella directory principale del progetto:
JavaScript
|
export FLASK_APP=app.py export FLASK_ENV=development flask run |
Questo comando avvia il server di sviluppo Flask, a cui puoi accedere visitando nel tuo browser web. Se tutto è impostato correttamente, dovresti vedere a “Ciao mondo!” Messaggio.
Passaggi per passare le variabili JavaScript a Python in Flask:
- Crea un percorso Flask che riceverà la variabile JavaScript.
- Crea una funzione JavaScript che invierà la variabile al percorso Flask utilizzando una richiesta AJAX.
- Nel percorso Flask, recupera la variabile utilizzando l’oggetto richiesta.
- Elabora la variabile nel codice Python secondo necessità.
- Restituisce il risultato alla funzione JavaScript come risposta alla richiesta AJAX.
Ecco un esempio di implementazione:
Pitone
|
from flask import Flask,render_template, request
app = Flask(__name__,template_folder=”templates”)
@app.route(“/”) def hello(): return render_template(‘index.html’)
@app.route(‘/process’, methods=(‘POST’)) def process(): data = request.get_json()
result = data(‘value’) * 2 return jsonify(result=result)
if __name__ == ‘__main__’: app.run(debug=True) |
HTML
|
<!DOCTYPE html> <html> <head> <title>JavaScript to Python Example</title> </head> <body> <input type=”text” id=”input”> <button onclick=”sendData()”>Send Data</button> <div id=”output”></div> <script> function sendData() { var value = document.getElementById(‘input’).value; $.ajax({ url: ‘/process’, type: ‘POST’, contentType: ‘application/json’, data: JSON.stringify({ ‘value’: value }), success: function(response) { document.getElementById(‘output’).innerHTML = response.result; }, error: function(error) { console.log(error); } }); } </script> </body> </html> |
Qui abbiamo un semplice modulo HTML con un pulsante e un campo di input. La funzione javascript `sendData()` viene richiamato quando si preme il pulsante, recupera il valore dal campo di input e lo trasmette tramite una richiesta AJAX alla rotta Flask `/processo` in Boccetta.
`request.get_json()` viene utilizzato per recuperare i dati nella rotta Flask e il codice Python viene quindi utilizzato per elaborarli. Basta moltiplicare il valore per 2 in questo caso. Un oggetto JSON che rappresenta il risultato viene quindi restituito alla funzione JavaScript e mostrato nel div di output.
Produzione:
Doppia corda
Esempi:
Ecco alcuni altri esempi di passaggio di variabili JavaScript a Python in Flask:
Esempio 1:
Passaggio di una stringa
Pitone
|
from flask import Flask,render_template, request
app = Flask(__name__,template_folder=”templates”)
@app.route(“/”) def hello(): return render_template(‘index.html’)
@app.route(‘/process’, methods=(‘POST’)) def process(): data = request.form.get(‘data’)
result = data.upper() return result
if __name__ == ‘__main__’: app.run(debug=True) |
HTML
|
<!DOCTYPE html> <html> <head> <title>JavaScript to Python Example</title> </head> <body> <input type=”text” id=”input”> <button onclick=”sendData()”>Send Data</button> <div id=”output”></div> <script> function sendData() { var value = document.getElementById(‘input’).value; $.ajax({ url: ‘/process’, type: ‘POST’, data: { ‘data’: value }, success: function(response) { document.getElementById(‘output’).innerHTML = response; }, error: function(error) { console.log(error); } }); } </script> </body> </html> |
In questo esempio, stiamo passando una stringa dalla funzione JavaScript alla rotta Flask. La stringa viene convertita in maiuscolo nel codice Python e restituita alla funzione JavaScript per la visualizzazione.
Produzione:
Output dell’app Web (passaggio di una stringa)
Esempio 2:
Passaggio di un numero
Pitone
|
from flask import Flask,render_template, request
app = Flask(__name__,template_folder=”templates”)
@app.route(“/”) def hello(): return render_template(‘index.html’)
@app.route(‘/process’, methods=(‘POST’)) def process(): data = request.form.get(‘data’)
result = int(data) * 2 return str(result)
if __name__ == ‘__main__’: app.run(debug=True) |
HTML
|
<!DOCTYPE html> <html> <head> <title>JavaScript to Python Example</title> </head> <body> <input type=”number” id=”input”> <button onclick=”sendData()”>Send Data</button> <div id=”output”></div> <script> function sendData() { var value = document.getElementById(‘input’).value; $.ajax({ url: ‘/process’, type: ‘POST’, data: { ‘data’: value }, success: function(response) { document.getElementById(‘output’).innerHTML = response; }, error: function(error) { console.log(error); } }); } </script> </body> </html> |
In questo esempio, stiamo passando un numero dalla funzione JavaScript al percorso Flask. Il numero viene moltiplicato per 2 nel codice Python e restituito alla funzione JavaScript per la visualizzazione.
Produzione:
Output dell’app Web (passaggio di un numero)
Esempio 3:
Passaggio di un array
JavaScript
|
const data = (1, 2, 3, 4, 5);
fetch(‘/process-data’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({data: data}) }) .then(response => response.text()) .then(result => { console.log(result); }) .catch(error => { console.error(‘Error:’, error); }); |
Pitone
|
from flask import Flask,render_template, request, jsonify
app = Flask(__name__,template_folder=”templates”)
@app.route(“/”) def hello(): return render_template(‘index.html’)
@app.route(‘/process-data’, methods=(‘POST’)) def process_data(): data = request.json(‘data’) result = sum(data) return jsonify({‘result’: result})
if __name__ == ‘__main__’: app.run(debug=True) |
In questa illustrazione, abbiamo utilizzato JavaScript per costruire un array di numeri interi utilizzando l’API Fetch per trasferirlo in Python. Abbiamo avuto accesso all’array nel codice Python usando `request.json(‘dati’)` e poi calcolò la somma dei numeri. `jsonify()` è stato utilizzato per restituire il risultato come oggetto JSON.
Tieni presente che la chiamata all’API Fetch ha utilizzato l’estensione `applicazione/json` tipo di contenuto e l’accesso Python ai dati utilizzava l’estensione `richiesta.json` tipo di contenuto. Questo perché JSON è il formato in cui inviamo e riceviamo i dati.
Questa funzione semplifica il trasferimento di array di dati tra Python e JavaScript in Flask.
Produzione:
Passaggio dei dati dell’array