vue和flask的前后端通信

由于项目是前后端分离的，前端用的vue-elemnet框架，后端用的是flask。而项目的最终是要将数据库中的数据通过flask读取然后传给前端进行展示，于是前后端之间的数据传输在所难免。询问朋友后决定使用axios进行数据的传输。

axios

• 安装
  npm install axios
npm install --save axios vue-axios

• 在main.js中导入
  import axios from 'axios'
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios, axios)

• 在组件中进行使用

  mounted() {
    this.axios.get('http://127.0.0.1:5000/abc').then(res =>{
      this.test = res.data
    })
  }

在template中设置进行接收

• 配置后端

  @test.route('/abc',methods=['GET','POST'])
  def test():
      return 'hello world'

• 启动后端，打开前端页面试一下发现没有成功，研究完发现是网上所说的跨域问题

• 安装cors来解决这个问题
  pip install flask-cors

• 在后端的配置文件中导入
  from flask_cors import CORS
CORS(app, supports_credentials=True)

• 再次打开前端页面进行尝试，显示成功~~