超简单_前端demo+使用Flask调用写好的算法

一. 简介

        最近在公司实习，写一个数据清洗加大模型模式识别的算法，本来以为算法写完就万事大吉了，可天有不测风云，没想到写完以后领导居然让我用Flask封装个接口，不是，我寻思着咱也没写过前后端啊，你这不是纯纯为难我胖虎吗？？

        可惜，吃人嘴短，拿人手短，拿钱干事，只能边查边干了

二. 主要思想

        其实领导的意思就是，你这个算法写完是写完了，你肯定不能直接甩给后端啊，那后端大哥也不懂你这算法哪些参数，具体该咋用啊？所以让我们封装接口，实际上就是用flask做一个简单的调用算法的demo罢了。

        所以我想着反正顺手，干脆顺手做个简陋的前端示意一下吧。

        这里假设我们的算法需要3个参数，alpha，beta，和一个待处理的xlsx文件。

        下面依次介绍前端和后端demo咋写（超简单，但肯定不是规范的）

三. 前端demo

        前端我是用vue写的，具体思想就是我需要一个能够提交的表单，里面包含两个参数的填写和一个文件的上传，做出来大概就是这样

        因为就示意一下嘛，我就直接在app.vue里边写了，具体代码如下

<template>
  <div id="app">
    <form @submit.prevent="postData">
      alpha:<input type="text" v-model="alpha">
      beta:<input type="text" v-model="beta">
      <input type="file" @change="getFile($event)">
      <button>提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  name: 'App',
  components: {
  },
  data(){
    return{
      alpha: 0.1,
      beta: 0.2,
      file:null
    }
  },
  methods:{
    postData(){
      let formData = new FormData()       //以form-data的格式传给后端
      formData.append('alpha',this.alpha)
      formData.append('beta',this.beta)
      formData.append('file',this.file)
      axios({
        method: 'post',
        url: 'http://localhost:5000/upload',//这里是后端的接收接口
        headers:{
          "Content-Type":"multipart/form-data"
        },
        data:formData
      }).then(res=>{
        console.log(formData);
        console.log(res);
      })
    },
    getFile(event){
      let file = event.target.files[0]
      this.file = file
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

        这样的话，一个超级简陋的前端就做好了啦！撒花！！

        直接npm run serve运行起来

 三. 后端Flask接口demo

        那么这里后端的接口主要起一个接收前端参数并调用算法的作用，创建一个flask_start.py放到我的算法的启动文件main.py相同目录下边（图个引入的时候方便而已），在flask_start里边import main一下，然后在接收到前端参数以后就可以愉快的启动啦~

        由于公司数据比较敏感，这里只能打码了，其实主要就是这里可以看到从flask里边引入了request对吧，那我前端传过来的参数比如是alpha，那么alpha = request.form ['alpha']就能取到啦

        文件的话则是在file = request.files['file']里边就能取到了

        那么参数和文件都取到了，后面直接run(alpha,beta,file)就可以了

        还可以使用swagger把这个接口做成文档，直接perfect结尾。