1、后端服務器環境說明
[root@openshift flask]# python -V
Python 3.6.3 :: Anaconda, Inc.
[root@openshift flask]# cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)
[root@openshift flask]#
2、Flask服務
2.1安裝Flask服務，請自行安裝。
2.2配置flask服務
[root@openshift flask]# more app.py
#coding:utf8
from flask import Flask,jsonify
from flask import abort
from flask import make_response
from flask import request
from flask_cors import cross_origin
app = Flask(__name__)
jobs = [
{
'id': 1,
'post': u'運維工程師',
'level':'professor'
},
{
'id': 2,
'post': '產品經理',
'level':'primary'
}
]
@app.route('/todo/api/v1.0/tasks', methods=['GET'])
@cross_origin()
def get_tasks():
return jsonify({'jobs':jobs})
@app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
@cross_origin()
def get_task(task_id):
task = filter(lambda t: t['id'] == task_id, jobs)
#print (list(task))
task = list(task)
if len(task) == 0:
abort(404)
return jsonify({'task': task})
if __name__ == '__main__':
app.run(debug=True,host='172.16.16.71',port=5000)
2.3啟動Flask服務
[root@openshift flask]# python app.py
* Running on http://172.16.16.71:5000/ (Press CTRL+C to quit)
* Restarting with sta
2.4文件內容闡述
這里主要闡述vue2.0通過axios調用接口出現跨越問題。
pip install flask-cors 安裝
from flask_cors import cross_origin 導入
@cross_origin() 引用使用
3、測試接口
3.1瀏覽器測試，正常訪問
3.2 vue2.0通過axios調用接口，無跨越問題
3.2.1 Vue項目文件配置，App.vue配置
<template>
<div>
<div v-if="!post">loading</div>
<div v-else>
<B>工作崗位：</B><br/>
級別： {{ level }} <br/>
崗位： {{ post }}
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
level: '',
post: '',
}
},
mounted () {
const url = `http://172.16.16.71:5000/todo/api/v1.0/tasks`
axios.get(url).then(response => {
const result = response.data
const repoRepo = result.jobs[0]
this.post = repoRepo.post
this.level = repoRepo.level
}).catch(error => {
alert('請求失敗了')
})
}
}
</script>
<style>
</style>
3.2.2 Vue測試結果
如下，正常調用Flask后端數據。
$ npm run dev 啟動vue服務
自此，vue2.0通過axios實現了對Flask restful的數據調用。