Vue 前后臺數據交互實例演示

• 第一章：后臺實現
• ① Python 啟用 Flask 服務器
• ② 后臺啟用成功驗證
• 第二章：前臺實現
• ① Vue 使用 Axios 實現接收 json 字符串、數組數據
• ② 前臺接收數據演示

[ 推薦文章 ]
Python 地圖篇 - 使用 pyecharts 繪制世界地圖、中國地圖、省級地圖、市級地圖實例詳解

第一章：后臺實現

① Python 啟用 Flask 服務器

后端使用 python 啟用一個 flask 服務器。
將數組封裝在 json 字符串里進行發送，前臺直接在 json 字符串里讀數據就行。

# -*- coding:utf-8 -*- import flaskapp = flask.Flask(__name__)# 通過json傳輸數組數據 @app.route('/get_data') def get_data():json_data = {"data1":[48, 57, 55, 80, 67, 67, 29, 19,20,15,5,11,3,100,190],"data2":[1, 57, 55, 300, 67, 67, 29, 19,20,15,5,11,3,10,190]}return json_data;# 后端ip host_ip = "127.0.0.1" # 端口號 host_port = 15004 app.run(host = host_ip, port = host_port)

② 后臺啟用成功驗證

啟動后樣式，下面的兩行 200 是 2 個請求記錄。

通過 http://127.0.0.1:15004/get_data 訪問瀏覽器看看后臺是否成功啟用。

第二章：前臺實現

① Vue 使用 Axios 實現接收 json 字符串、數組數據

我們首先 npm install axios 安裝 axios。
其中的 response.data 就是后端發送的 json 字符串數據，response.data.data1 就是數組 1。
注意 axios 使用前需要 import axios from 'axios' 導入下。
想自己驗證的話可以把里面更新表格數據的內容注釋掉，看看提示框能不能顯示出數據。

<input type="button" @click="get_data()" value="點擊同步數據" /><script> import axios from 'axios';export default {methods:{// 將數據同步到表格中set_charts(data){// 提示框顯示數據alert("數組1："+data.data1+"\n"+"數組2："+data.data2);// 更新表格數據let lineData = { ...this.lineChartData };lineData.datasets.forEach(dataset => {dataset.data = data.data1;})this.lineChartData = lineData;},// 向后臺發送請求得到數據get_data(){axios.get('http://127.0.0.1:15004/get_data').then(response => {// 調用表格數據同步方法this.set_charts(response.data);})// 請求失敗拋出異常在控制臺.catch(function (error) {console.log(error);});}} }

② 前臺接收數據演示

這是演示的效果圖，可以看到我們增加的按鈕還有個預置的表格，點擊一下按鈕。

可以看到提示框展示的就是我們后臺發送的數據。

提示框關掉后，可以看到表格里的數據也同步過來了。

喜歡的點個贊?吧！

總結

以上是生活随笔為你收集整理的Vue前后台数据交互实例演示，使用axios传递json字符串、数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。