FLASK+VUE+axios前后端交互

概述

1.flask提供接口，axios调用接口得到数据，vue将数据渲染到页面上。
2.存在问题：跨域请求的报错；解析json数据的问题。

vue+axios

首先，创建好一个vue项目。（这个网上资源很多），然后在项目的目录下用命令行导入axios，

npm install axios

然后，在你vue项目下的main.js配置好axios.

import axios from 'axios'
Vue.prototype.$axios = axios

我的src目录是这样的，创建一个class.vue的组件，与flask的交互就是在这里面的。当然，要在router里面配置好路由，在app里面渲染出来。

这是路由，class的路径就是加入进去的class.vue的路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/class',
    name: 'class',
    component: () => import(/* webpackChunkName: "about" */ '../views/class.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

app里随便配置一下。这样你的组件就能渲染出来。

  <div id="app">
    <router-view/>
  </div>

基本配置就算好了，下面就是组件里的实现了。
一个form表单，这是效果图，getdata里的数据是设置好的，等到文件上传后，后台返回的结果会更新这些数据。

<form  enctype=multipart/form-data>
            <p></p>
            <input type="file" @change="getFile($event)">
            <button @click="submitForm($event)">提交</button>
          </form></a-layout-content>
        <a-layout-sider>
          <p></p>
          <span>{{getdata.classify}}</span>
          <p></p>
          <span>{{getdata.state}}</span>
          <p></p>
          <span>{{getdata.type}}</span>

下面是calss.vue的script，data里就是预先随便设置的数据，methods里面用来存放方法。主要看这里，axios.post一个表单数据（里面是图片），到指定的url,这里就是flask提供的接口。我们通过var msg = response.data
that.getdata = msg。将flak返回的json数据绑定到data中，然后就会在页面中渲染出来。

// A code block
 this.$axios.post('http://localhost:8280/upload', formData, config).then(function (response) 

export default {
  name: 'class',
  data: function () {
    return {
      getdata: {
        classify: '**',
        state: '**',
        type: '**'
      }
    }
  },
  methods: {
    getFile (event) {
      this.file = event.target.files[0]
      console.log(this.file)
      console.log(1111)
    },
    submitForm (event) {
      event.preventDefault()
      const formData = new FormData()
      formData.append('file', this.file)
      var that = this
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      this.$axios.post('http://localhost:8280/upload', formData, config).then(function (response) {
        if (response.status === 200) {
          var msg = response.data
          that.getdata = msg
          console.log(response.data.classify)
          console.log(response.data)
          console.log(222)
        }
      })
    }
  }
}

下面是完整代码

<template>
  <div>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-content><h1>下面是测试</h1>
          <form  enctype=multipart/form-data>
            <p></p>
            <input type="file" @change="getFile($event)">
            <button @click="submitForm($event)">提交</button>
          </form></a-layout-content>
        <a-layout-sider>
          <p></p>
          <span>{{getdata.classify}}</span>
          <p></p>
          <span>{{getdata.state}}</span>
          <p></p>
          <span>{{getdata.type}}</span>
        </a-layout-sider>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
    </div>
</template>

<script>
export default {
  name: 'class',
  data: function () {
    return {
      getdata: {
        classify: '**',
        state: '**',
        type: '**'
      }
    }
  },
  methods: {
    getFile (event) {
      this.file = event.target.files[0]
      console.log(this.file)
      console.log(1111)
    },
    submitForm (event) {
      event.preventDefault()
      const formData = new FormData()
      formData.append('file', this.file)
      var that = this
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      this.$axios.post('http://localhost:8280/upload', formData, config).then(function (response) {
        if (response.status === 200) {
          var msg = response.data
          that.getdata = msg
          console.log(response.data.classify)
          console.log(response.data)
          console.log(222)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

flask

下面是flask的代码，from flask_cors import CORS
CORS(app, resources=r’/*')这是解决跨域请求报错的设置。

from flask import Flask
from flask import request, jsonify,render_template
import base64
import cv2
import os
import time
from werkzeug.utils import secure_filename
import detection_mobilenetv2 as test

from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources=r'/*')


@app.route('/')
def hello_world():
    app.logger.error("sss")
    return 'Hello World!'
//这里是主要接口测试路径
@app.route('/upload', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        f = request.files['file']

        basepath = os.path.dirname(__file__)
//把接受的文件报错起来
        upload_path = os.path.join(basepath, 'static\\img', secure_filename(f.filename))
        fname, fename = os.path.split(upload_path)
        f.save(upload_path)
//你的项目对这张图片干的事
        total,nomask=test.pic_show(upload_path)
  //json数据返回
        result_dict = dict()
        result_dict["classify"] = "mask_detect"
        result_dict["state"] = "-1"
        result_dict["type"] = "noFace"

        return jsonify(result_dict)



if __name__ == '__main__':
    app.run(host="0.0.0.0",port=8280,debug=False)

大概就是这样了。