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
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.
├─ 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
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.
Recommended Posts