Exécutez des fichiers Python à partir de HTML en utilisant Django
Ecrire ici
Cet article décrit «Comment utiliser Django pour exécuter un fichier Python préparé sur le serveur à partir d'une page Web et générer les données passées du html vers un fichier csv».
De plus, l'environnement d'écriture est Système d'exploitation: macOS Catalina version 10.15.4 Python：3.7.6 Django：3.0.3 Il est devenu.
À propos de Django
Dans Article précédent, j'ai écrit sur le flux de l'installation de Django à l'affichage du html, veuillez donc vous y référer pour l'introduction de Django. Se il vous plaît se référer.
Préparation du fichier Python
Créer un fichier Python
Tout d'abord, préparez le fichier Python que vous souhaitez exécuter sur le serveur de Django. Pour des raisons d'explication, préparez cette fois le fichier Python suivant.
write_data.py
# coding:utf-8
import os
import csv
#Enregistrer les données du html au fichier csv
def write_csv(data):
datas = [data]
with open(os.getcwd()+'/myapp/application/'+'data.csv','a') as f:
writer = csv.writer(f, lineterminator='\n')
writer.writerow(datas)
Cela écrira ces données dans data.csv en l'appelant en le passant à l'argument de write_csv (). Notez qu'ici, il est supposé que le fichier Python est placé dans le dossier `<nom de l'application> / application``` et que le fichier csv est sorti, donc` `ʻos.getcwd () + '/ myapp / application /' Bien qu'il s'agisse de + 'data.csv' ``, veuillez lire cette partie en fonction de l'environnement.
Placement des fichiers Python
Placez le fichier Python préparé sur le serveur de Django. Si vous placez le fichier Python dans le dossier `` <nom de l'application> / application '', le répertoire de l'application ressemblera à ceci:
<Nom du projet>
- db.sqlite3
- manage.py
- <Nom du projet>
- __init__.py
- asgi.py
- settings.py
- urls.py
- wsgi.py
- __pycashe__
- (.Plusieurs fichiers pyc)
- <nom de l'application>
- __init__.py
- admin.py
- apps.py
- models.py
- tests.py
- urls.py
- views.py
- migrations
- __init__.py
- application #Dossier créé
- write_data.py #Fichier Python préparé
- templates
- static
Bien sûr, vous n'êtes pas obligé de le mettre ici, vous pouvez donc placer le fichier n'importe où.
Autoriser les fichiers Python à être exécutés depuis html
Après avoir préparé et organisé le fichier, exécutons le fichier Python à partir de html et créons un fichier csv. Avant cela, je pense qu'il est plus facile de travailler après avoir compris à quoi ressemble le flux de données, alors j'aimerais écrire le flux de données supposé cette fois.
Je l'ai fait avec Powerpo, je suis désolé pour le chiffre approximatif,
Il existe de nombreuses parties qui sont différentes du programme par souci de simplification, mais le flux de données jusqu'à l'écriture dans le fichier csv ressemble à ceci. Je serais heureux si l'image pouvait être véhiculée d'une manière ou d'une autre.
html(index.html) → Envoyez des données à call_write_data () dans myapp / views.py → Exécutez la méthode write_csv () de l'application / write_data.py dans call_write_data () → Les données transmises sont écrites dans le fichier csv.
Exprimé en mots, cela ressemble à ceci. Sur cette base, nous éditerons chaque fichier afin de pouvoir exécuter le fichier Python à partir du html à partir du suivant.
html: envoyer des données à views.py en utilisant ajax
Afin de transmettre les données à la méthode call_write_data () dans views.py, je voudrais envoyer les données en utilisant ajax sur html. Je pense qu'il existe différentes méthodes pour cela, veuillez donc utiliser la méthode qui convient à votre application.
index.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML</title>
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}"/>
<script type="text/javascript" src="{% static 'script.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span>Appuyez sur le bouton après avoir saisi les caractères</span>
<br>
<input type="text" size="50" id="input_form">
<button type="button" onclick="clickBtn()">Envoyer</button>
<script>
function clickBtn() {
var txt = document.getElementById("input_form").value;
$.ajax({
url: "{% url 'myapp:call_write_data' %}",
method: 'GET',
data: {"input_data": txt},
dataType: "text",
contentType: "application/json",
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrf_token);
}
},
error: function(xhr, status, error) {
console.log("error")
}
})
.done(function(data) {
console.log("Success");
});
// csrf_Utilisé pour obtenir un jeton
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
//Csrf dans l'en-tête_Fonction qui accorde un jeton
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
}
</script>
</body>
</html>
Lorsque vous appuyez sur le bouton d'envoi, clickBtn () est exécuté et les données sont envoyées par ajax. La partie url est `` myapp: call_write_data```, qui envoie les données à la méthode appelée call_write_data () décrite dans views.py.
La partie données est `data: {" input_data ": txt}`, et le côté récepteur de données peut acquérir les données cibles en spécifiant "input_data". Un seul est utilisé ici, mais vous pouvez définir librement le format des données tel que le nombre et le type de données telles que `data: {" data1 ": txt1," data2 ": txt2}`. ..
myapp / views.py: spécifiez le fichier Python et la méthode que vous souhaitez exécuter et exécuter
myapp/views.py
from django.shortcuts import render
from django.http import HttpResponse
# application/write_data.Importer py
from .application import write_data
# Create your views here.
def index(req):
return render(req, 'index.html')
#Méthode spécifiée par url dans ajax
def call_write_data(req):
if req.method == 'GET':
# write_data.py écrire_csv()Appelez la méthode.
#Des données envoyées par ajax"input_data"A obtenir en précisant.
write_data.write_csv(req.GET.get("input_data"))
return HttpResponse()
Ici, nous récupérons les données envoyées par ajax, les transmettons à la méthode du fichier Python que nous voulons exécuter et l'appelons.
myapp / urls.py: permet à html d'envoyer des données à call_write_data () dans views.py
myapp/urls.py
from django.urls import path
from . import views
app_name = 'myapp'
urlpatterns = [
path(r'', views.index, name='index'),
#Ajoutez ce qui suit(views.appel py_write_data()Vous permet d'envoyer des données à)
path("ajax/", views.call_write_data, name="call_write_data"),
]
En passant le chemin, vous pouvez envoyer des données de html à la méthode spécifiée de views.py à l'aide de la communication ajax.
Vérifiez s'il est réellement écrit dans le fichier csv
Ceci termine les modifications nécessaires.
$ python manage.py runserver
Démarrez le serveur avec, accédez à l'adresse affichée (affichage html), entrez les caractères appropriés dans le formulaire de saisie, puis appuyez sur le bouton d'envoi.
- <nom de l'application>
- __init__.py
...
- application
- write_data.py
- data.csv #Fichier csv généré
Si le fichier csv est généré dans le dossier d'application créé dans l'application de cette manière et que la chaîne de caractères saisie est enregistrée dans le fichier, les données sont envoyées sans aucun problème et le fichier Python est exécuté.
Supplément
Cette fois, j'ai expliqué comment exécuter un fichier Python à partir de html et écrire les données envoyées dans un fichier csv, mais vice versa.
Par souci de simplicité, je voudrais faire "obtenir les données passées de write_data.py dans views.py et les transmettre au html pour affichage". Seuls les fichiers avec des modifications sont répertoriés ci-dessous.
myapp/application/write_data.py Ajoutez une méthode appelée return_text ().
myapp/application/write_data.py
# coding:utf-8
import os
import csv
#Enregistrer les données du html au fichier csv
def write_csv(data):
datas = [data]
with open(os.getcwd()+'/myapp/application/'+'data.csv','a') as f:
writer = csv.writer(f, lineterminator='\n')
writer.writerow(datas)
#Ajoutez ce qui suit(return_text()Quand vous appelez"Hello!!"Est retourné)
+ def return_text():
+ return "Hello!!"
myapp/views.py Appelez return_text () ajouté dans write_data.py pour obtenir la chaîne de caractères retournée (stockez-la dans les données). Transmettez ces données au html en utilisant `` HttpResponse () ''.
myapp/views.py
from django.shortcuts import render
from django.http import HttpResponse
# application/write_data.Importer py
from .application import write_data
# Create your views here.
def index(req):
return render(req, 'index.html')
#Méthode spécifiée par url dans ajax
def call_write_data(req):
if req.method == 'GET':
# write_data.py écrire_Appelez la méthode csv.
#Des données envoyées par ajax"input_data"A obtenir en précisant.
write_data.write_csv(req.GET.get("input_data"))
# write_data.Méthode nouvellement écrite en py(return_text())Appeler.
+ data = write_data.return_text()
#Transmettez les données reçues au html.
+ return HttpResponse(data)
index.html
Lorsque la communication ajax est réussie, l'argument passé par HttpResponse () est passé à la partie .done (function (data) {`` '', de sorte que les données soient affichées sur la page.
index.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML</title>
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}"/>
<script type="text/javascript" src="{% static 'script.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span>Appuyez sur le bouton après avoir saisi les caractères</span>
<br>
<input type="text" size="50" id="input_form">
<button type="button" onclick="clickBtn()">Envoyer</button>
<!-- views.Affichez la chaîne de caractères transmise par py.-->
+ <br>
+ <span id="text"></span>
<script>
function clickBtn() {
var txt = document.getElementById("input_form").value;
$.ajax({
url: "{% url 'myapp:call_write_data' %}",
method: 'GET',
data: {"input_data": txt},
dataType: "text",
contentType: "application/json",
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrf_token);
}
},
error: function(xhr, status, error) {
console.log("error")
}
})
.done(function(data) {
// views.appel py_write_data()HttpResponse renvoyé dans(data)Les données peuvent être obtenues ici.
//Réécrivez le contenu de la partie de travée ajoutée au bas du formulaire.
+ document.getElementById("text").textContent = data;
console.log("Success");
});
// csrf_Utilisé pour obtenir un jeton
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
//Csrf dans l'en-tête_Fonction qui accorde un jeton
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
}
</script>
</body>
</html>
Par conséquent, lorsque le bouton d'envoi est enfoncé et que le fichier Python est exécuté correctement, la chaîne de caractères "Hello !!" est passée au html, et lorsque la chaîne de caractères "Hello !!" passée à la partie inférieure du formulaire de saisie est affichée. pense.
En appliquant cela, il est possible d'exécuter le fichier Python sur le serveur, de lire et d'écrire les données du fichier sur le serveur et de refléter les données sur html.