introduction

Je peux tout faire avec le front-end, mais je voulais le plaisir de Python dans la partie calcul, alors j'ai touché CGI qui exécute dynamiquement le programme sur le serveur, donc je l'ai résumé. Le back-end est encore clairsemé.

J'ai un compte XREA sur un serveur de location gratuit, je vais donc l'essayer là-bas. Serveur de location haute performance et de haute qualité qui peut être utilisé gratuitement | XREA

Ce que je veux faire c'est

Cliquez sur le bouton
Transmettez les données au serveur en utilisant Vue.js et axios
Exécutez un script CGI écrit en Python, effectuez une opération et renvoyez le résultat en JSON.
Afficher les données renvoyées sur le même écran

C'est vrai.

Cette fois, à titre d'exemple, nous allons créer un programme qui calcule et renvoie les multiples communs maximum et minimum des deux nombres d'entrée.

Essayer de faire

Placement des fichiers

├─ cgi-bin
│    └─ index.cgi
├─ index.html
└─ main.js

Les scripts CGI écrits en Python créent un répertoire appelé cgi-bin et le mettent dedans. Écrit en Python mais avec l'extension .cgi.

Après le téléchargement sur le serveur, vous devez spécifier les autorisations autour de CGI, qui seront décrites plus tard.

HTML (index.html)

<html>
<head>
    <meta charset="UTF-8">
    <title>Renvoie les multiples communs maximum et minimum</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
    <script type="module" src="main.js"></script>
</head>
<body>
    <div id="app">
        <!--Partie d'entrée-->
        <p>
            <input v-model="a" type="number" value="12">
            <input v-model="b" type="number" value="15">
            <button v-on:click="getResult">Calcul</button>
        </p>
        <!--Pièce d'affichage-->
        <p>
Engagement maximum: {{ result['gcd'] }}<br>
Multiple commun minimum: {{ result['lcm'] }}
        </p>
    </div>
</body>
</html>

Chargez Vue.js et axios avec CDN. Si vous chargez un fichier JavaScript écrit en Vue avec type =" module ", il sera exécuté après le chargement du DOM, vous pouvez donc être rassuré.

JavaScript (main.js)

var vm = new Vue({
    el: '#app',
    data: {
        a: 12,
        b: 15,
        result: {},  //Variable pour stocker l'objet retourné
    },
    methods: {
        getResult: function() {
            const url = './cgi-bin/';
            //Passer des données avec axios
            axios.get(url, {
                params: {  //Spécifiez les paramètres avec des paramètres
                    a: this.a,
                    b: this.b
                }
            })
            .then(res => this.result = res.data)  //Stocker les données dans le résultat
        }
    }
});

Créez une instance Vue et transmettez les données avec axios. L'URL est «. / Cgi-bin /». Si le nom est ʻindex.cgi`, vous n'avez pas à spécifier le nom du fichier comme HTML.

De plus, les données retournées res.data peuvent être récupérées en tant qu'objet, il n'était donc pas nécessaire de les corriger avec JSON.parse (). (Parce que je l'ai renvoyé en tant que JSON, j'étais convaincu qu'il serait renvoyé sous forme de chaîne de caractères JSON.) Au fait, j'obtiens cette erreur.

SyntaxError: Unexpected token o in JSON at position 1

Si vous vous demandez ce qu'est «o», cela semble être «o» de «objet» ...

Python CGI (index.cgi)

#!/usr/local/bin/python3
# -*- coding: UTF-8 -*-
import cgi
import cgitb
import math
import json

cgitb.enable()  #Activer le débogage CGI

form = cgi.FieldStorage()  #Stocker les données obtenues par GET
a = int(form['a'].value)   #Étant donné que les données se présentent sous la forme d'une chaîne de caractères, convertissez-les en valeur numérique
b = int(form['b'].value)

data = {
    'gcd': math.gcd(a, b),  # math.gcd()Est Python 3.Apparemment ajouté dans 5
    'lcm': a * b // math.gcd(a, b)
}

print('Content-Type: application/json')
print()
print(json.dumps(data))  #Retour au format json

Spécifiez l'emplacement de l'interpréteur Python au début de la ligne. Je pense que le chemin d'exécution de CGI pour chaque langue est écrit sur la page de spécifications du serveur de location, alors vérifiez-le. XREA est là.

Context-Type Le` print () ʻaprès la ligne spécifiée est pour un saut de ligne, et cela semble être une spécification inutile à moins que cela ne soit inséré. Vous pouvez généralement mettre «\ n» à la fin de la chaîne «Type de contexte».

Après le téléchargement, vous devez spécifier les autorisations du répertoire contenant le script CGI et ses fichiers, et XREA a également des autorisations recommandées. En particulier, notez que le fichier exécutable CGI doit être de 700 ou plus (exécutable) (j'ai souvent oublié).

Je publierai également un lien avec les spécifications XREA ci-dessus. spécification|Serveur de location haute performance et de haute qualité qui peut être utilisé gratuitement|XREA

Courir

Voici l'écran sur lequel j'ai soulevé le fichier et essayé bon sentiment. Si vous l'envoyez vierge ou en petit nombre, vous obtiendrez généralement une erreur, mais c'est un essai.

c'est tout.

[CGI] Exécutez le programme Python du serveur avec Vue.js + axios et obtenez les données de sortie

introduction

Essayer de faire

Placement des fichiers

Courir