第一章：后台实现

① 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字符串、数组相关推荐

实现前后台数据交互（上传/回传单个JSON数据和上传/回传JSON数组）
一.上传单个JSON数据所需jar文件: 创建JSON实体类: package domain;public class Data1 {private String name;private Stri ...
pycharm+python+bootstrap写一个登陆界面_Python--day56（前后台数据交互、bootstrap）
1. 前后台数据交互 1.1 socket搭建后台 [注意点]: 1. 前台发送的数据是用\r\n进行换行 2. 路由:请求的路径,获得路由的途径是通过后台对前台发送的数据进行拆分(split)得到, ...
PHP JSON格式数据交互实例代码详解_php技巧_脚本之家
http://www.jb51.net/article/26007.htm 此前我写了不少在PHP网站开发中应用XML进行数据交互的实例,这两天通过PHP解析JSON并进行交互的实例学习和了解了JSO ...
easy-table-vue+Vue、SpringBoot+Mybatis实现MVVM模型前后台数据交互
原文链接:https://www.cnblogs.com/wlovet/p/10980579.html 根据原贴在搭建过程中出现的问题,我在该博客https://blog.csdn.net/Sun_o ...
easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互
该项目分为前端展示部分和后台服务部分. 前端部分使用的技术是:NodeJs.Webpack.VueJs 使用的组件库是:IVIEW.easy-table-vue 使用的开发工具是:WebStorm ...
如何解决@RequestParam无法接收vue+axios传递json数据
文章目录 axios的post请求无法发送到后端 1.问题 : axios的post的传递的json数据无法接收 2.问题代码 3.问题归因 4.问题解决 5.查漏补缺 axios的post请求无法发 ...
asp.net使用easyUI 前后台数据交互
// 1. asp页面使用EasyUI框架需要的Css样式和JS <script src="../script/jquery-easyui-1.4.5/jquery.min.js&qu ...
web前后台数据交互
1.利用cookie对象 Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置.一般不赞成使用Cookie. (1) ...
springmvc+json 前后台数据交互
1. 配置 (1) 文件配置参考这里 (2) 导入jackson相关包:jackson-annotations-2.9.4.jar,jackson-core-2.9.4.jar,jackson-dat ...

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

Vue 前后台数据交互实例演示