flask+vue模型部署学习笔记（1）整体架构梳理

flask+vue模型部署学习笔记（1）整体架构梳理

0.准备工作

​ 在模型部署之前，预先安装好vue和flask所需要的环境。

（1）首先前端vue需要安装：1.安装node.js软件 2.安装cnpm（解决npm下载慢的问题，利用淘宝镜像源下载） 3. 安装vue-cli脚手架 4.安装webpack打包 5. 安装axios模块

（2）后端flask需要安装：1. 安装 flask模块 2. 安装flask_cors模块

参考博客：1.https://segmentfault.com/a/1190000009871504

​ 2. https://blog.csdn.net/coralline_xss/article/details/80117194

1.vue结构

这里需要明确一个概念，vue和flask文件项目是分开的，两个文件都可以相互独立运行，并且各自出现相应的效果。两者实现通信是通过axios，类似java中的Ajax原理。

第一步，先在cmd命令行终端 输入命令vue init webpack firstVue ，创建一个firstVue的项目（默认全部回车）

第二步，cd进入到firstVue文件夹中,执行npm install命令，安装各种依赖

第三步，执行npm run dev命令，运行vue项目，最后会出现一个 http://localhost:8080的网址，ctrl+单击左键即可进入网页，看相应效果。

第四步，可执行可不执行，主要看自己项目最终定型没，如果无需修改可以运行命令npm run build，会出现一个dist文件夹，里面会有一个html文件，直接点击即可和npm run dev相同的效果。

2.flask架构

在vscode上建立flask项目步骤，参考博客：https://code.visualstudio.com/docs/python/tutorial-flask

主要步骤：1.建立一个虚拟环境 python -m venv env （此处env为虚拟环境名，以后部署什么模型，直接在这个环境安装相应的模块即可）

​ 2.在虚拟环境下安装flask模块 python -m pip install flask

​ 3. 安装flask_cors模块 pip install flask_cors

​ 4. 配置vs的python的编译环境，选择./env开头的

5. 新建一个app.py文件，导入flask模块

6. 在vs终端中使用python -m flask run 运行

   3.flask与vue通信，相互传输数据

​ 在前后端建立没有出错的情况下，两者可以进行数据的传输。具体代码为：

#前端代码 主要是修改app.vue文件代码，代码如下
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input type= 'text' v-model="message" placeholder="edit me">  
    <button v-on:click="postdd()">提交</button>
    
    <router-view/>
    <h1>{{ress}}</h1>   
  </div>
</template>

<script>
export default {
  name: 'App',
   data() {
     return {
       description: '接口自动化',
       ress:'', 
       message:''
    }
   },

  methods:{
     postdd:function() {    
  this.$axios.get('http://127.0.0.1:5000/login',{params:{"name":this.message}}).then(red=>{
    console.log(red.data);
     this.ress=red.data;  
    });

  } 
  
}

}
</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>

运行流程：通过在前端设置一个input框，在其中输入字符， 其数据根据v-model="message"与message变量绑定，然后点击提交按钮，通过postdd函数传递message传递给name这个变量，然后将name传递到flask端的/login，而后flask端通过/login将数据采集下。而vue端通过red收集flask返回的数据。

#flask端代码 app.py中
from flask import Flask,request,jsonify 
from flask import render_template
from datetime import datetime
from flask_cors import *

app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route("/")
def home():
    return "Hello, Flask!"

@app.route('/login', methods=['POST', 'GET'])
def returns():
     
     if request.method=='GET':
            val=request.args.get('name')   
            print(val)
            datas={'name':'张','age':18}
            return jsonify(datas)

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

运行流程：flask通过路由/login来访问vue传递过来的数据，同时指定方法为methods=[‘POST’, ‘GET’]，前者post为后面给vue传递数据用，而get是用来接收数据，通过vue传递数据指定的name变量来接收数据，这里也可以改为其他名字，但必须前后端名字需要相同，不然无法访问。

4.数据通信效果