【CGI】Vue.js + axios로 서버의 Python 프로그램을 움직여 출력 데이터를 받는다
소개
프런트 엔드로 전부 할 수 있을 수 있지만, 역시 계산 부분에 Python의 즐거움은 갖고 싶다, 라는 생각으로부터 서버로 프로그램을 동적으로 움직이는 CGI를 만져 보았으므로 그 정리. 백엔드는 아직 희소하다.
무료 대여 서버의 XREA 계정을 가지고 있기 때문에 실제로 거기에서 시도해보십시오.
무료로 사용할 수있는 고기능 · 고품질 렌탈 서버 | XREA (엑스리아)
하고 싶은 것은
라는 감자.
이번에는 예로서 입력된 2수의 최대 공약수와 최소 공배수를 계산해 돌려주는 프로그램을 만든다.
만들어 보자
파일 배치
├─ cgi-bin
│ └─ index.cgi
├─ index.html
└─ main.js
파이썬으로 작성된 CGI 스크립트는 cgi-bin라는 디렉토리를 만들어 그 안에 투입. 파이썬으로 작성되었지만 확장자는 .cgi
서버에 업로드한 후, CGI 주위의 퍼미션을 지정할 필요가 있지만 그것은 후술.
HTML(index.html)
<html>
<head>
<meta charset="UTF-8">
<title>最大公約数と最小公倍数を返す</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">
<!-- 入力部分 -->
<p>
<input v-model="a" type="number" value="12">
<input v-model="b" type="number" value="15">
<button v-on:click="getResult">計算</button>
</p>
<!-- 表示部分 -->
<p>
最大公約数: {{ result['gcd'] }}<br>
最小公倍数: {{ result['lcm'] }}
</p>
</div>
</body>
</html>
CDN에서 Vue.js와 axios를 로드하십시오.
Vue로 쓴 JavaScript 파일은 type="module" 로 읽으면 DOM이 로드된 후에 실행되므로 안심.
JavaScript (main.js)
var vm = new Vue({
el: '#app',
data: {
a: 12,
b: 15,
result: {}, // 返ってきたオブジェクトを格納する変数
},
methods: {
getResult: function() {
const url = './cgi-bin/';
// axiosでデータの受け渡し
axios.get(url, {
params: { // paramsでパラメータを指定
a: this.a,
b: this.b
}
})
.then(res => this.result = res.data) // データをresultに格納
}
}
});
Vue 인스턴스를 만들고 axios에서 데이터를 전달합니다.
URL은 ./cgi-bin/ . index.cgi 라는 이름이라면 HTML처럼 파일명을 지정하지 않아도 OK인 것 같다.
또, 돌려주는 데이터 res.data 는 오브젝트로서 꺼낼 수 있으므로 JSON.parse() 라든가로 고칠 필요가 없었다. (JSON으로 돌려주었으니까 JSON 문자열로 되돌아올 것이라고 하는 생각이 들었다.)
덧붙여서 하면 이런 에러가 나온다.
SyntaxError: Unexpected token o in JSON at position 1
o 라고 뭐라고 생각하면 object 의 o
파이썬 CGI (index.cgi)
#!/usr/local/bin/python3
# -*- coding: UTF-8 -*-
import cgi
import cgitb
import math
import json
cgitb.enable() # CGIのデバッグをオン
form = cgi.FieldStorage() # GETで得たデータを格納
a = int(form['a'].value) # データは文字列でやってくるので数値に変換
b = int(form['b'].value)
data = {
'gcd': math.gcd(a, b), # math.gcd() は Python 3.5 で追加されたらしい
'lcm': a * b // math.gcd(a, b)
}
print('Content-Type: application/json')
print()
print(json.dumps(data)) # json形式にして返す
선두에서 Python 인터프리터의 위치를 지정. 렌탈 서버의 사양 페이지에 각 언어의 CGI의 실행 패스가 쓰여 있다고 생각하므로 확인한다. XREA라고 여기.
Context-Type 지정의 행의 뒤의 print() 는 개행을 위해서, 이것을 넣지 않으면 안되는 사양 같다. 보통 Context-Type 문자열의 끝에 \n 그래도 OK.
업로드 후는 CGI 스크립트를 넣은 디렉토리와 그 파일의 퍼미션을 지정할 필요가 있어, XREA에도 추천 퍼미션이 쓰여 있다.
특히, CGI 실행 파일은 700 이상(실행 가능)이어야 하는 것은 주의(잘 잊었다).
이상의 XREA의 사양이 써 있는 링크도 붙여 둔다.
사양 | 무료로 사용할 수있는 고기능 · 고품질 렌탈 서버 | XREA (엑스리아)
실행
파일을 올리고 실제로 시도한 화면이 여기
좋은 감자. 공란이나 소수로 송신하면 보통에 에러가 되지만, 뭐 시험이므로.
이상.
Reference
이 문제에 관하여(【CGI】Vue.js + axios로 서버의 Python 프로그램을 움직여 출력 데이터를 받는다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/utf8sjis/items/590b421c61febe5b8af7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
├─ cgi-bin
│ └─ index.cgi
├─ index.html
└─ main.js
<html>
<head>
<meta charset="UTF-8">
<title>最大公約数と最小公倍数を返す</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">
<!-- 入力部分 -->
<p>
<input v-model="a" type="number" value="12">
<input v-model="b" type="number" value="15">
<button v-on:click="getResult">計算</button>
</p>
<!-- 表示部分 -->
<p>
最大公約数: {{ result['gcd'] }}<br>
最小公倍数: {{ result['lcm'] }}
</p>
</div>
</body>
</html>
var vm = new Vue({
el: '#app',
data: {
a: 12,
b: 15,
result: {}, // 返ってきたオブジェクトを格納する変数
},
methods: {
getResult: function() {
const url = './cgi-bin/';
// axiosでデータの受け渡し
axios.get(url, {
params: { // paramsでパラメータを指定
a: this.a,
b: this.b
}
})
.then(res => this.result = res.data) // データをresultに格納
}
}
});
SyntaxError: Unexpected token o in JSON at position 1
#!/usr/local/bin/python3
# -*- coding: UTF-8 -*-
import cgi
import cgitb
import math
import json
cgitb.enable() # CGIのデバッグをオン
form = cgi.FieldStorage() # GETで得たデータを格納
a = int(form['a'].value) # データは文字列でやってくるので数値に変換
b = int(form['b'].value)
data = {
'gcd': math.gcd(a, b), # math.gcd() は Python 3.5 で追加されたらしい
'lcm': a * b // math.gcd(a, b)
}
print('Content-Type: application/json')
print()
print(json.dumps(data)) # json形式にして返す
파일을 올리고 실제로 시도한 화면이 여기
좋은 감자. 공란이나 소수로 송신하면 보통에 에러가 되지만, 뭐 시험이므로.
이상.
Reference
이 문제에 관하여(【CGI】Vue.js + axios로 서버의 Python 프로그램을 움직여 출력 데이터를 받는다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/utf8sjis/items/590b421c61febe5b8af7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
