安装：
1.下载PyCharm
2.在PyCharm中下载Flask的包
Flask安装.jpg
入门程序（官方文档中）
from flask import Flask
app = Flask(__name__)
# 定义一个返回数据的方法
@app.route('/')
def hello():
return 'hello'
if __name__ == '__main__':
# 指定路径和端口
app.run(host='127.0.0.1', port=8000)
json数据传输
server.py
from flask import Flask
import test_json
app = Flask(__name__)
app.register_blueprint(test_json.json)
# 定义一个返回数据的方法
@app.route('/')
def hello():
return 'hello'
if __name__ == '__main__':
# 指定路径和端口
app.run(host='127.0.0.1', port=8000)
test_json.py
from flask import Blueprint
json = Blueprint('json', __name__)
@json.route('/data')
def get():
return {
'success': True,
'message': '',
'data': {
'name': 'wang',
'age': 18
}
}
Vue+Flask
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>info</title>
</head>
<body>
<table id="get">
<tr>
<td>
name:
</td>
<td>
{{info.name}}
</td>
</tr>
</table>
<script>
var vm = new Vue({
el:'#get',
data:{
info:{}
},
mounted(){
axios
.get('http://127.0.0.1:8000/data')
.then(response => {
if(response.data.success === false) alter(response.data.message);
this.info = response.data.data;
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
});
</script>
</body>
</html>
server.py和test_json.py参考上面，打开index.html，即可获取到name的json格式数据。
js.jpg
网友评论