基于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