ios调用restful接口_vue2.0通过axios实现对Flask restful接口数据调用

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/', 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配置

loading

工作岗位：

级别： {{ level }}

岗位： {{ post }}

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('请求失败了')

})

}

}

3.2.2  Vue测试结果

如下，正常调用Flask后端数据。

$ npm run dev    启动vue服务

自此，vue2.0通过axios实现了对Flask restful的数据调用。