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

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

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

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

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

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

# -*- coding:utf-8 -*- import flaskapp = flask.Flask(__name__)# 通過(guò)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" # 端口號(hào) host_port = 15004 app.run(host = host_ip, port = host_port)

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

啟動(dòng)后樣式，下面的兩行 200 是 2 個(gè)請(qǐng)求記錄。

通過(guò) http://127.0.0.1:15004/get_data 訪(fǎng)問(wèn)瀏覽器看看后臺(tái)是否成功啟用。

第二章：前臺(tái)實(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)證的話(huà)可以把里面更新表格數(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;},// 向后臺(tái)發(fā)送請(qǐng)求得到數(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);})// 請(qǐng)求失敗拋出異常在控制臺(tái).catch(function (error) {console.log(error);});}} }

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

這是演示的效果圖，可以看到我們?cè)黾拥陌粹o還有個(gè)預(yù)置的表格，點(diǎn)擊一下按鈕。

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

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

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

總結(jié)

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

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