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/<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的数据调用。