Introduction

I can do everything with the front end, but I wanted the fun of Python in the calculation part, so I touched CGI that dynamically runs the program on the server, so I summarized it. The back end is still sparse.

I have an XREA account on a free rental server, so I will actually try it there. High-performance, high-quality rental server that can be used for free | XREA

What I want to do is

Click the button
Pass data to the server using Vue.js and axios
Execute a CGI script written in Python, perform an operation, and return the result in JSON
Display the returned data on the same screen

That's right.

This time, as an example, we will create a program that calculates and returns the greatest common divisor and least common multiple of the two input numbers.

Try to make

File placement

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

CGI scripts written in Python create a directory called cgi-bin and put it in it. Written in Python but with the extension .cgi.

After uploading to the server, you need to specify the permissions around CGI, which will be described later.

HTML (index.html)

<html>
<head>
    <meta charset="UTF-8">
    <title>Returns the greatest common divisor and least common multiple</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">
        <!--Input part-->
        <p>
            <input v-model="a" type="number" value="12">
            <input v-model="b" type="number" value="15">
            <button v-on:click="getResult">Calculation</button>
        </p>
        <!--Display part-->
        <p>
Greatest common divisor: {{ result['gcd'] }}<br>
Least common multiple: {{ result['lcm'] }}
        </p>
    </div>
</body>
</html>

Load Vue.js and axios on the CDN. If you load a JavaScript file written in Vue with type =" module ", it will be executed after the DOM is loaded, so you can rest assured.

JavaScript (main.js)

var vm = new Vue({
    el: '#app',
    data: {
        a: 12,
        b: 15,
        result: {},  //Variable to store the returned object
    },
    methods: {
        getResult: function() {
            const url = './cgi-bin/';
            //Data transfer with axios
            axios.get(url, {
                params: {  //Specify parameters with params
                    a: this.a,
                    b: this.b
                }
            })
            .then(res => this.result = res.data)  //Store data in result
        }
    }
});

Create a Vue instance and pass data with axios. The URL is ./cgi-bin/. If the name is ʻindex.cgi`, you don't have to specify the file name like HTML.

Also, the returned data res.data can be retrieved as an object, so there was no need to fix it withJSON.parse (). (Because I returned it as JSON, I was convinced that it would be returned as a JSON string.) By the way, I get this error.

SyntaxError: Unexpected token o in JSON at position 1

If you wonder what ʻo is, it seems to be ʻo of ʻobject` ...

Python CGI (index.cgi)

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

cgitb.enable()  #Turn on CGI debugging

form = cgi.FieldStorage()  #Store the data obtained by GET
a = int(form['a'].value)   #Data comes as a character string, so convert it to a number
b = int(form['b'].value)

data = {
    'gcd': math.gcd(a, b),  # math.gcd()Is python 3.Apparently added in 5
    'lcm': a * b // math.gcd(a, b)
}

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

Specify the location of the Python interpreter at the beginning of the line. I think that the execution path of CGI of each language is written on the specification page of the rental server, so check it. XREA is here.

Context-Type Theprint ()after the specified line is for a line break, and it seems to be a useless specification unless this is inserted. You can usually do \ n at the end of the Context-Type string.

After uploading, you need to specify the permissions of the directory containing the CGI script and its files, and XREA also has recommended permissions. In particular, note that the CGI executable must be 700 or more (executable) (I often forgot).

I will also post a link with the above XREA specifications. specification|High-performance, high-quality rental server that can be used for free|XREA

Run

Here is the screen that I uploaded the file and actually tried it good feeling. If you send it blank or decimal, you will usually get an error, but it's a trial.

that's all.

[CGI] Run the Python program on the server with Vue.js + axios and get the output data

Introduction

Try to make

File placement

Run