Vue和Flask通信的實(shí)現(xiàn)

更新時(shí)間：2021年05月19日 17:01:00 作者：StriveZs

最近新做了個(gè)項(xiàng)目，前端使用的是目前很流行的前端框架，對(duì)于后端，本項(xiàng)目選擇的是比較好上手、輕量級(jí)的python后臺(tái)框架：Flask。感興趣的可以了解一下

安裝axios和實(shí)現(xiàn)通信

這里我們通過(guò)axios來(lái)連接Vue前端和Flask后端，使用AJAX請(qǐng)求進(jìn)行通信。使用如下命令安裝

npm install axios

axios的使用格式:

import axios from 'axios';
  export default {
    data: function () {
      return {
        serverResponse: 'res_test'
      };
    },
    methods: {
      getData() {
        // 設(shè)置對(duì)應(yīng)python的接口，這里使用的是localhost:5000
        const path = 'http://127.0.0.1:5000/getMsg';
        // 這里要使用 res =>表示返回的數(shù)據(jù)
        axios.get(path).then(res => {
          // 這里服務(wù)器返回response為一個(gè)json對(duì)象
          // 通過(guò).data來(lái)訪返回的數(shù)據(jù)，然后在通過(guò).變量名進(jìn)行訪問(wèn)
          // 可以直接通過(guò)response.data取得key-value
          var msg = res.data.msg;
          this.serverResponse = msg; // 因?yàn)椴荒苤苯邮褂胻his作為指針，因此在這之前將this賦給了then指針
          alter('Success' + response.status + ',' + response.data + ',' + msg); // 成功后顯示提示
        }).catch(error => {
          console.error(error);
        });
      }
    },
  }

代碼及演示

前端代碼

對(duì)./components/HelloWorld.vue文件進(jìn)行改寫。代碼如下:

<!-- html部分 -->
<template>
  <div>
    <span>{{ serverResponse }}</span>
    <!--這里使用{{}}來(lái)引用JavaScript中賦給this的值-->
    <button @click="getData">get data</button>
  </div>
</template>
<!-- js部分 -->
<script>
  import axios from 'axios';
  export default {
    data: function () {
      return {
        serverResponse: 'res_test'
      };
    },
    methods: {
      getData() {
        // 設(shè)置對(duì)應(yīng)python的接口，這里使用的是localhost:5000
        const path = 'http://127.0.0.1:5000/getMsg';
        axios.get(path).then(res => {
          // 這里服務(wù)器返回response為一個(gè)json對(duì)象
          // 通過(guò).data來(lái)訪返回的數(shù)據(jù)，然后在通過(guò).變量名進(jìn)行訪問(wèn)
          // 可以直接通過(guò)response.data取得key-value
          var msg = res.data.msg;
          this.serverResponse = msg; // 因?yàn)椴荒苤苯邮褂胻his作為指針，因此在這之前將this賦給了then指針
          alter('Success' + response.status + ',' + response.data + ',' + msg); // 成功后顯示提示
        }).catch(error => {
          console.error(error);
        });
      }
    },
  }
</script>
<!-- css部分 -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

這里主要實(shí)現(xiàn)了通過(guò)單擊按鈕來(lái)和服務(wù)器端進(jìn)行交互獲得數(shù)據(jù)并傳回前端，將得到的數(shù)據(jù)重新來(lái)對(duì)前端進(jìn)行渲染。

figure.1

得到如上頁(yè)面之后，我們單擊get date按鈕，就會(huì)像后端發(fā)送GET請(qǐng)求，后端服務(wù)器監(jiān)聽到請(qǐng)求之后就會(huì)返回對(duì)應(yīng)的數(shù)據(jù)。

figure.2

客戶端代碼

from flask import Flask
from flask import jsonify
from flask_cors import CORS

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


@app.route('/')
def hello_world():
    return 'test!'

# 監(jiān)聽127.0.0.1:5000/getMsg請(qǐng)求
@app.route('/getMsg', methods=['GET', 'POST'])
def home():
    response = {
        'msg': 'Hello, Python !'
    }
    return response


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

到此這篇關(guān)于Vue和Flask通信的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue和Flask通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: