Einführung

Ich kann alles mit dem Frontend machen, aber ich wollte den Spaß von Python im Berechnungsteil, also habe ich CGI berührt, das das Programm dynamisch auf dem Server ausführt, also habe ich es zusammengefasst. Das hintere Ende ist noch spärlich.

Ich habe ein XREA-Konto auf einem kostenlosen Mietserver, also werde ich es dort tatsächlich ausprobieren. Hochleistungsfähiger, qualitativ hochwertiger Mietserver, der kostenlos verwendet werden kann | XREA

Was ich tun möchte ist

Klicken Sie auf die Schaltfläche
Übergeben Sie Daten mit Vue.js und axios an den Server
Führen Sie das in Python geschriebene CGI-Skript aus, führen Sie die Berechnung durch und geben Sie das Ergebnis in JSON zurück
Zeigen Sie die zurückgegebenen Daten auf demselben Bildschirm an

Korrekt.

Dieses Mal erstellen wir als Beispiel ein Programm, das die maximalen und minimalen gemeinsamen Vielfachen der beiden Eingangszahlen berechnet und zurückgibt.

Versuchen Sie zu machen

Dateipositionierung

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

In Python geschriebene CGI-Skripte erstellen ein Verzeichnis namens "cgi-bin" und legen es darin ab. Geschrieben in Python, aber mit der Erweiterung .cgi.

Nach dem Hochladen auf den Server müssen Sie die Berechtigungen für CGI angeben, die später beschrieben werden.

HTML (index.html)

<html>
<head>
    <meta charset="UTF-8">
    <title>Gibt maximale und minimale gemeinsame Vielfache zurück</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">
        <!--Eingabeteil-->
        <p>
            <input v-model="a" type="number" value="12">
            <input v-model="b" type="number" value="15">
            <button v-on:click="getResult">Berechnung</button>
        </p>
        <!--Teil anzeigen-->
        <p>
Maximales Engagement: {{ result['gcd'] }}<br>
Minimales gemeinsames Vielfaches: {{ result['lcm'] }}
        </p>
    </div>
</body>
</html>

Laden Sie Vue.js und Axios mit CDN. Wenn Sie eine in Vue geschriebene JavaScript-Datei mit "type =" module "laden, wird sie nach dem Laden des DOM ausgeführt, sodass Sie sicher sein können.

JavaScript (main.js)

var vm = new Vue({
    el: '#app',
    data: {
        a: 12,
        b: 15,
        result: {},  //Variable zum Speichern des zurückgegebenen Objekts
    },
    methods: {
        getResult: function() {
            const url = './cgi-bin/';
            //Datenübertragung mit Axios
            axios.get(url, {
                params: {  //Geben Sie Parameter mit params an
                    a: this.a,
                    b: this.b
                }
            })
            .then(res => this.result = res.data)  //Daten im Ergebnis speichern
        }
    }
});

Erstellen Sie eine Vue-Instanz und übergeben Sie Daten mit axios. Die URL lautet ". / Cgi-bin /". Wenn der Name "index.cgi" lautet, müssen Sie den Dateinamen nicht wie HTML angeben.

Außerdem können die zurückgegebenen Daten "res.data" als Objekt abgerufen werden, sodass sie nicht mit "JSON.parse ()" behoben werden mussten. (Da ich es als JSON zurückgegeben habe, war ich überzeugt, dass es als JSON-Zeichenfolge zurückgegeben werden würde.) Ich bekomme übrigens diesen Fehler.

SyntaxError: Unexpected token o in JSON at position 1

Wenn Sie sich fragen, was "o" ist, scheint es "o" von "Objekt" zu sein ...

Python CGI (index.cgi)

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

cgitb.enable()  #Aktivieren Sie das CGI-Debugging

form = cgi.FieldStorage()  #Speichern Sie die von GET erhaltenen Daten
a = int(form['a'].value)   #Da die Daten als Zeichenfolge vorliegen, konvertieren Sie sie in einen numerischen Wert
b = int(form['b'].value)

data = {
    'gcd': math.gcd(a, b),  # math.gcd()Ist Python 3.Anscheinend in 5 hinzugefügt
    'lcm': a * b // math.gcd(a, b)
}

print('Content-Type: application/json')
print()
print(json.dumps(data))  #Rückkehr im JSON-Format

Geben Sie die Position des Python-Interpreters am Zeilenanfang an. Ich denke, dass der CGI-Ausführungspfad für jede Sprache auf der Spezifikationsseite des Mietservers geschrieben ist. Überprüfen Sie ihn daher. XREA ist da.

Context-Type Das print () nach der angegebenen Zeile steht für einen Zeilenumbruch und scheint eine nutzlose Spezifikation zu sein, sofern diese nicht eingefügt wird. Normalerweise können Sie "\ n" am Ende der Zeichenfolge "Context-Type" einfügen.

Nach dem Hochladen müssen Sie die Berechtigungen des Verzeichnisses angeben, das das CGI-Skript und seine Dateien enthält. XREA hat außerdem Berechtigungen empfohlen. Beachten Sie insbesondere, dass die ausführbare CGI-Datei mindestens 700 (ausführbar) sein muss (ich habe es oft vergessen).

Ich werde auch einen Link zu den oben genannten XREA-Spezifikationen veröffentlichen. Spezifikation|Hochleistungsfähiger, hochwertiger Mietserver, der kostenlos genutzt werden kann|XREA

Lauf

Hier ist der Bildschirm, auf dem ich die Datei angehoben und tatsächlich ausprobiert habe gutes Gefühl. Wenn Sie es leer oder in kleinen Zahlen senden, wird normalerweise eine Fehlermeldung angezeigt, es handelt sich jedoch um eine Testversion.

das ist alles.

[CGI] Führen Sie das Server-Python-Programm mit Vue.js + axios aus und rufen Sie die Ausgabedaten ab

Einführung

Versuchen Sie zu machen

Dateipositionierung

Lauf