1200字范文 > Vue前后台数据交互实例演示使用axios传递json字符串数组

Vue前后台数据交互实例演示使用axios传递json字符串数组

时间：2024-08-12 00:34:29

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;# 后端iphost_ip = "127.0.0.1"# 端口号host_port = 15004app.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);});}}}