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配置

 

 

3.2.2  Vue测试结果

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

$ npm run dev    启动vue服务

 

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

转载于:https://www.cnblogs.com/sunnyyangwang/p/10389506.html