基于Vue和Flask 的前后端开发的例子

简介

前端框架为Vue-cli 4和vuetify 组件搭建；
后端用Flask搭建；
前后端通信采用Axios；
前端输入两个数字，发送到后端python 求和后返回数值到前端。

相关技术和问题

1. Axios 使用
   网上有比较详细的说明，可参阅网上的说明 安装和调用。
2. vue.config.js 的配置

module.exports = {
    // webpack-dev-server 相关配置
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:5000', // Flask的端口
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''  //通过pathRewrite重写地址，将前缀/api转为/
                }
            }
        }
    },
}

网上也有详细的说明。

3. 前端代码

<template>
  <v-form>
    <v-container>
      <v-row>

        <v-col cols="12" sm="6" md="3">
          <v-text-field v-model="a"
            label="Regular"
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6" md="3">
          <v-text-field v-model= "b"
            label="Regular"
            placeholder="Placeholder"
          ></v-text-field>
        </v-col>

      <div class="my-2">
        <v-btn small color="primary" @click.native="onadd()">Primary</v-btn>
		<h2>sum:{{sum}}</h2>

      </div>


      </v-row>
    </v-container>
  </v-form>
</template>

<script>
import axios from "axios";
export default {

   data() {
       return {
        sum:'',          //声明变量 sum
       };
     },

    methods:{
     onadd() {
        axios
       .get("/api/addnumber",{  //发送到后端获取结果，其中/api对应vue.config.js 中的api
            params:{
                a:this.a,
                b:this.b
            }
})
      .then(res =>{console.log(res.data)
            this.sum = res.data.result   //获取后端计算结果   
       })
       }
  }

};
</script>

注意 v-model=“a” 和 this.a是关联的，

4. 后端代码

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


@app.route('/')
# @app.route('/index.html')
# def index():
    # return render_template('index.html')


@app.route('/addnumber')
def add():
    a = request.args.get('a', 0, type=float)
    b = request.args.get('b', 0, type=float)
    return jsonify(result=a + b)    # 返回json 形式的结果

if __name__ == "__main__":
    app.run()

可能遇到的错误

1. methods或属性 未找到
   注意拼写错误
2. 跨域问题
   target 要为后端服务器的ip和端口号。