之前想着用flask-reseful，结果感觉不好用，百度一下，发现小项目完全没必要用框架，可以直接写api。

简单的API

app.py文件如下：

from flask import Flask, jsonify, request #新增jsonify处理json格式数据，request获取ajax前端发送来的参数。
from flask import render_template

app = Flask(__name__,
static_folder='./vue/dist/static',
template_folder = "./vue/dist")

@app.route('/')
def index():
  return render_template('index.html',name='index')

#定义api接口地址，和请求类型
@app.route('/api/login', methods=('GET', 'POST'))
def login():
  if request.method == 'POST':
    username = request.get_json().get('username') #获取ajax的参数
    password = request.get_json().get('password')
    return jsonify({'username': username,'password': password,'state':'success'}) #返回一个json格式的数据

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

然后前端部分使用vue的axios发送请求，代码如下：（html的部分直接绑定data，我就不写了）

export default {
  name: 'Register',
  data () {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    onSubmit () {
      axios.get('http://localhost:5000/api/login', {
        params: {
          'username': this.form.username,
          'password': this.form.password
        }
      }).then(function (response) {
        console.log(response.data)
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}

这样就简单的完成了前端到后端的数据发送。
如果Vue build后，在flask运行没啥问题，但是在vue编译模式下，ajax会报错，提示跨域无法完成数据发送。

Vue-cli3跨域

使用的是vue-cli3，所以找到Vue根目录vue.config.js文件（如果没有，自己创建一个），修改如下：

module.exports = {
  assetsDir: 'static',
  #以下为新增内容
  devServer: {
    proxy: 'http://localhost:5000/'
  }
}

然后再ajax的地方修改url：

axios.get('api/login', { #修改此处的url
  params: {
    'username': this.form.username,
    'password': this.form.password
  }
}).then(function (response) {
  console.log(response.data)
}).catch(function (error) {
  console.log(error)
})

在编译环境测试，跨域问题解决。

在这里推荐一个工具，postman用来验证接口非常方便。验证完成的接口还能整理保存，方便下次使用。