項(xiàng)目練手過程中，本想通過vue+flask搭建，但是后來感覺還是使用koa2更方便，所以本章是記錄了原來flask和vue的傳輸過程，留個(gè)痕跡，以便以后需要的時(shí)候使用。
項(xiàng)目目錄下安裝vue項(xiàng)目
vue init webpack
npm run dev
項(xiàng)目目錄下安裝arixs
npm install axios
項(xiàng)目目錄下新建后臺文件夾，并設(shè)置后臺啟動文件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;
// 對應(yīng) Python 提供的接口，這里的地址填寫下面服務(wù)器運(yùn)行的地址，本地則為127.0.0.1，外網(wǎng)則為 your_ip_address
const path = 'http://127.0.0.1:5000/getMsg';
axios.get(path).then(function (response) {
// 這里服務(wù)器返回的 response 為一個(gè) json object，可通過如下方法需要轉(zhuǎn)成 json 字符串
// 可以直接通過 response.data 取key-value
// 坑一：這里不能直接使用 this 指針，不然找不到對象
var msg = response.data.msg;
// 坑二：這里直接按類型解析，若再通過 JSON.stringify(msg) 轉(zhuǎn)，會得到帶雙引號的字串
that.serverResponse = msg;
alert('Success ' + response.status + ', ' + response.data + ', ' + msg);
? ? ? ? ? }).catch(function (error) {
alert('Error ' + error);
? ? ? ? ? })
? ? ? ? }
? }
}
</script>
