Vue 前后臺數(shù)據(jù)交互實(shí)例演示

• 第一章：后臺實(shí)現(xiàn)
• ① Python 啟用 Flask 服務(wù)器
• ② 后臺啟用成功驗(yàn)證
• 第二章：前臺實(shí)現(xiàn)
• ① Vue 使用 Axios 實(shí)現(xiàn)接收 json 字符串、數(shù)組數(shù)據(jù)
• ② 前臺接收數(shù)據(jù)演示

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

第一章：后臺實(shí)現(xiàn)

① Python 啟用 Flask 服務(wù)器

后端使用 python 啟用一個 flask 服務(wù)器。
將數(shù)組封裝在 json 字符串里進(jìn)行發(fā)送，前臺直接在 json 字符串里讀數(shù)據(jù)就行。

# -*- coding:utf-8 -*- import flaskapp = flask.Flask(__name__)# 通過json傳輸數(shù)組數(shù)據(jù) @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)

② 后臺啟用成功驗(yàn)證

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

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

第二章：前臺實(shí)現(xiàn)

① Vue 使用 Axios 實(shí)現(xiàn)接收 json 字符串、數(shù)組數(shù)據(jù)

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

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

② 前臺接收數(shù)據(jù)演示

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

可以看到提示框展示的就是我們后臺發(fā)送的數(shù)據(jù)。

提示框關(guān)掉后，可以看到表格里的數(shù)據(jù)也同步過來了。

喜歡的點(diǎn)個贊?吧！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。