[JAVA] 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. スクリーンショット 2020-05-30 19.04.32.png 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.

Recommended Posts

Exécutez des fichiers Python à partir de HTML en utilisant Django
Exécutez des scripts Python à partir d'Excel (en utilisant xlwings)
Exécutez Ansible à partir de Python à l'aide de l'API
Créer un fichier deb à partir d'un package python
Utiliser Django à partir d'un script Python local
Exécuter des scripts Python à partir d'applications C # GUI
Créer un fichier GIF en utilisant Pillow en Python
Créez un outil qui secoue automatiquement furigana avec html en utilisant Mecab de Python3
Exécutez Python à partir d'Excel
Créer un fichier wav à partir du shader GLSL en utilisant python3
J'ai essayé de lire un fichier CSV en utilisant Python
Créez un fichier MIDI en Python en utilisant pretty_midi
Lire ligne par ligne à partir d'un fichier avec Python
Faire une copie d'un fichier Google Drive à partir de Python
(Python) Essayez de développer une application Web en utilisant Django
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 1 ~
J'ai essayé d'exécuter python à partir d'un fichier chauve-souris
Un mémorandum pour exécuter un script python dans un fichier bat
Remarque DJango: depuis le début (en utilisant une vue générique)
Étapes de l'installation de Python 3 à la création d'une application Django
Construire un environnement virtuel Python en utilisant venv (Django + MySQL ①)
J'ai essayé de lire les données d'un fichier en utilisant Node.js.
Script Python qui crée un fichier JSON à partir d'un fichier CSV
Exécuter un fichier Python avec une importation relative dans PyCharm
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 3 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 4 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 5 ~
[Python] Démarrez un fichier de commandes à partir de Python et passez des variables.
Comment exécuter un fichier Python à une invite de commande Windows 10
Comment exécuter un programme Python à partir d'un script shell
Python> Lire à partir d'une chaîne multiligne au lieu d'un fichier> io.StringIO ()
Tirez en accéléré à partir d'une caméra PC en utilisant Python, OpenCV
Exécuter le script Python à partir du fichier de commandes
Python: exclure les balises des données html
Toucher les objets Python d'Elixir
J'ai fait un Line-bot avec Python!
Utilisation de Rstan de Python avec PypeR
Créer une interface graphique python à l'aide de tkinter
Django: Importer une classe depuis une chaîne
Dessiner une courbe Silverstone en utilisant Python
Créer un fichier binaire en Python
python / Créer un dict à partir d'une liste.
Utiliser Cloud Storage depuis Python3 (Introduction)
Exécutez Aprili depuis Python sur Orange
Détection d'erreur Python exécutée à partir de Powershell
Extraire le fichier targz en utilisant python
Exécutez des scripts Python de manière synchrone à partir de C #
Installer le framework Python django à l'aide de pip
Exécutez un algorithme simple en Python
Précautions lors de l'utilisation de phantomjs de python
Accéder aux feuilles de calcul à partir de Python à l'aide d'OAuth 2.0
[Python] Opération de fichier utilisant l'instruction if
Exécutez le script Python à partir de Cisco Memorandum_EEM
Créer un téléchargeur de fichiers avec Django
Essayez d'utiliser Amazon DynamoDB à partir de Python
Traitez le résultat de l'exécution de Splunk en utilisant Python et enregistrez-le dans un fichier
Lisez le fichier en Python avec un chemin relatif depuis le programme
Appelez dlm depuis python pour exécuter un modèle de régression à coefficient variable dans le temps
[Python] Lire un fichier csv avec une grande taille de données à l'aide d'un générateur