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

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

第一章:后台实现

① Python 启用 Flask 服务器

后端使用 python 启用一个 flask 服务器。

将数组封装在 json 字符串里进行发送,前台直接在 json 字符串里读数据就行。

# -*- coding:utf-8 -*-
import flask
app = 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)

② 后台启用成功验证

启动后样式,下面的两行 2002 个请求记录。

2da54eda8695476281511aef6db8ba73.png


通过 http://127.0.0.1:15004/get_data 访问浏览器看看后台是否成功启用。


c1aea16e3161495aaaff06ff51a476e6.png

第二章:前台实现

① 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);
      });
    }
  }
}

② 前台接收数据演示

这是演示的效果图,可以看到我们增加的按钮还有个预置的表格,点击一下按钮。

b45b2bbeecf6434c970754c11e4e9204.png

可以看到提示框展示的就是我们后台发送的数据。


442d5b0c5c614b778847f0d5a34c38a3.png

提示框关掉后,可以看到表格里的数据也同步过来了。

6a02b4e6b1434d959189a32ab0dfbb93.png

喜欢的点个赞❤吧!

目录
相关文章
|
29天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
22天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
35 12
|
3月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
3月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
|
3月前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
141 1
|
4天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
52 12
|
21天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
48 8
|
22天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
60 1