vue+flask搭建web框架简易上手

项目练手过程中，本想通过vue+flask搭建，但是后来感觉还是使用koa2更方便，所以本章是记录了原来flask和vue的传输过程，留个痕迹，以便以后需要的时候使用。

项目目录下安装vue项目

vue init webpack

npm run dev

项目目录下安装arixs

npm install axios

项目目录下新建后台文件夹，并设置后台启动文件run.py

from flask import Flask

from flask import request

from flask import jsonify

from flask_cors import CORS

app = Flask(__name__)

cors = CORS(app, resources={r"/getMsg": {"origins": "*"}})

@app.route('/', methods=['GET', 'POST'])

def home():

    return '<h1>Home</h1>'

@app.route('/getMsg', methods=['GET', 'POST'])

def get_Msg():

    response = {

        'msg': 'Hello, Python !'

    }

    return jsonify(response)

if __name__ == '__main__':

    app.run()

app.vue修改

<template>

<div id="app">

<span>{{ serverResponse }} </span>

<button @click="getData">GET DATA</button>

</div>

</template>

<script>

import axios from 'axios'

export default {

name: 'App',

data: function() {

return {

serverResponse: '你好'

          }

      },

methods: {

getData() {

var that = this;

// 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address

const path = 'http://127.0.0.1:5000/getMsg';

axios.get(path).then(function (response) {

// 这里服务器返回的 response 为一个 json object，可通过如下方法需要转成 json 字符串

// 可以直接通过 response.data 取key-value

// 坑一：这里不能直接使用 this 指针，不然找不到对象

var msg = response.data.msg;

// 坑二：这里直接按类型解析，若再通过 JSON.stringify(msg) 转，会得到带双引号的字串

that.serverResponse = msg;

alert('Success ' + response.status + ', ' + response.data + ', ' + msg);

          }).catch(function (error) {

alert('Error ' + error);

          })

        }

  }

}

</script>