一， 简介
最近前端使用vue开发， 后端使用python开发。开发的是简单的应用， 没有搭建额外的服务器。于是通过CGI、axios实现前后端交互。
二，实现方法
1.get方法
前端请求 axios.get("test.py", {params: {ID:123, NAME:"test"}}))
后端接受 form = cgi.FieldStorage()
2, post方法
前端请求 axios.post("test.py", {ID:123, NAME:"test"}))
后端接受 form = sys.stdin.read()
三，示例代码
1，get 方法
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8"/>
<title>jokes</title>
</head>
<style>
#login_background{
background-image: url("img.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;};
</style>
<body id="login_background">
<div id="test" style="text-align:center; margin-top: 100px;">
<input type="button" value="test" class="layui-btn layui-btn-radius" @click="test" style="width: 200px; height: 100px; font-size: 30px;">
</div>
</body>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="layui/layui.js"></script>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
});
var test = new Vue({
el: "#test",
data: {
"message": "test"
},
methods:{
test:function(){
that = this;
axios.post("test.py", {params:{ID:123, NAME:"test"}}).then(function(response){
console.log(response);
that.message = response.data;
layui.use(["layer"], function(){
var layer = layui.layer;
layer.alert(that.message)
})
})
.catch(function(error){
that.message = "try again";
layui.use(["layer"], function(){
var layer = layui.layer;
layer.alert(that.message)
})
})
}
}
})
</script>
python
#!/usr/bin/python
# _*_ coding:utf-8 _*_
import cgi
import cgitb
import json
import sys
cgitb.enable()
form = cgi.FieldStorage()
ID = form.getvalue("ID")
NAME = form.getvalue("NAME")
result = {"ID":ID, "NAME":NAME}
# todo something
print 'Content-Type: application/json\n\n'
print(json.dumps(result))
2, post 方法
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8"/>
<title>jokes</title>
</head>
<style>
#login_background{
background-image: url("img.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;};
</style>
<body id="login_background">
<div id="test" style="text-align:center; margin-top: 100px;">
<input type="button" value="test" class="layui-btn layui-btn-radius" @click="test" style="width: 200px; height: 100px; font-size: 30px;">
</div>
</body>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="layui/layui.js"></script>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
});
var test = new Vue({
el: "#test",
data: {
"message": "test"
},
methods:{
test:function(){
that = this;
axios.post("test.py", {ID:123, NAME:"test"}).then(function(response){
console.log(response);
that.message = response.data;
layui.use(["layer"], function(){
var layer = layui.layer;
layer.alert(that.message)
})
})
.catch(function(error){
that.message = "try again";
layui.use(["layer"], function(){
var layer = layui.layer;
layer.alert(that.message)
})
})
}
}
})
</script>
python
import cgi
import cgitb
import json
import sys
cgitb.enable()
result= json.loads(sys.stdin.read())
# todo something
print 'Content-Type: application/json\n\n'
print(json.dumps(result))
网友评论