Vue+Flask实现前后端分离并交互

• 一个前后端分离的demo

• 前端使用Vue框架
• 后端使用Python的Flask
• Vue通过使用axios获取到后端数据
• Flask使用CORS实现跨域

完整代码

Vue代码

方法一

• index.vue

<template>
  <el-form>
    <el-form-item>
      <el-button @click="test()">登录el-button>
      <div>信息：{{ demo.msg }}div>
      <div>状态码：{{ demo.status }}div>
    el-form-item>
  el-form>
template>

<script>
  import axios from 'axios'
  export default {
    name: 'Index.vue',
    data(){
      return{
        demo: ''
      }
    },
    methods: {
      test(){
        axios.post('http://127.0.0.1:5000/index')
          .then(res=>{
            // 将返回的数据显示到demo中
            this.demo = res.data;
            // 向控制台打印获取到的数据
            console.log(res.data);
          })
      },
    }
  }
script>

<style scoped>

style>

方法二

• index.vue

<template>
  <el-form>
    <el-form-item>
      <el-button @click="test()">点击el-button>
      <div>信息：{{ demo.msg }}div>
      <div>状态码：{{ demo.status }}div>
    el-form-item>
  el-form>
template>

<script>
  export default {
    name: 'Index.vue',
    data(){
      return{
        demo: ''
      }
    },
    methods: {
      test(){
        this.$http.post('http://127.0.0.1:5000/index')
          .then(res=>{
            // 将返回的数据显示到demo中
            this.demo = res.data;
            // 向控制台打印获取到的数据
            console.log(res.data);
          })
      },
    }
  }
script>

<style scoped>

style>

• main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
//导入字体图标
import './assets/font/iconfont.css'
// 组织显示生产模式的消息
Vue.config.productionTip = false

//==主要是这里==
import axios from 'axios'
// 挂载到vue的原型对象中
Vue.prototype.$http = axios

// 创建实例
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Flask代码

from flask import Flask, request# 跨域
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)


@app.route('/index', methods=['GET', 'POST'])
def index():
    success = {
        "status": 200,
        "msg": "连接成功！"
    }
    return success

if __name__ == '__main__':
    print(app.url_map)
    app.run(debug=True)

讲解

前端Vue代码

通过点击按钮运行test()方法，将后端返回的数据显示到demo中

<template>
  <el-form>
    <el-form-item>
      <el-button @click="test()">点击el-button>
      <div>信息：{{ demo.msg }}div>
      <div>状态码：{{ demo.status }}div>
    el-form-item>
  el-form>
template>

使用axios方法获取后端返回数据

• 返回数据为res.data
• 后端端口为：http://127.0.0.1:5000/index

test(){
 	this.$http.post('http://127.0.0.1:5000/index')
	    .then(res=>{
			// 将返回的数据显示到demo中
			this.demo = res.data;
			// 向控制台打印获取到的数据
			console.log(res.data);
    })
},

特别说明

• 在上述的test()方法中，由于已经提前在main.js中导入了axios和将axios挂载到vue的原型对象中，才能使用this.$http来发送请求**（本次示例使用的发送请求方式）**。如下(main.js)：

...
import axios from 'axios'
// 挂载到vue的原型对象中
Vue.prototype.$http = axios

...

• 如果没有在main.js中导入axios，则可以直接在.vue文件中的标签中导入，以下为直接在文件中导入axios并发送请求

<script>
	import axios from 'axios'
	...
	
	  test(){
        axios.post('http://127.0.0.1:5000/index')
          .then(res=>{
            // 将返回的数据显示到demo中
            this.demo = res.data;
            // 向控制台打印获取到的数据
            console.log(res.data);
          })
      },
script>

---

后端Flask代码

• 创建好一个flask项目
• 在app.py中，先导入跨域用的CORS库

# 跨域
from flask_cors import CORS

• 配置跨域

CORS(app, supports_credentials=True)

• 编写路由视图

@app.route('/index', methods=['GET', 'POST'])
def index():
    success = {
        "status": 200,
        "msg": "连接成功！"
    }
    return success

扩展

关于CORS跨域，有两种方式：全局跨域、指定跨域接口

（1）全局跨域

• 即上述中使用到的跨域方式

from flask import Flask, request
# 跨域
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

• supports_credentials是一个布尔值类型，作用：是否允许请求发送cookie，false是不允许

（2）指定跨域接口

• 在需要进行跨域的路由视图中添加@cross_origin装饰器

from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
 
# 只允许路径为'/index'跨域
@app.route('/index', methods=['GET', 'POST'])
def index():
    success = {
        "status": 200,
        "msg": "连接成功！"
    }
    return success

• 参考：http://t.csdn.cn/vgl7w