鼎泰生活网
前端Vue和Element-UI配合后端接口进行数据交互
创始人
2024-05-10 09:43:25
0次

前言

本次用element-ui的table组件，简单案例演示下前后端数据交互。

前提声明：如果不知道如何在vue中引入element-ui，可以先看下这篇文章:Vue引入并使用Element-UI组件库的两种方式

静态页面

首先先写一个静态页面吧，数据都是死的，这也是element-ui的table组件demo:

直接把代码复制到组件里面即可。

在这里插入图片描述

这样一个静态组件就写好了

在这里插入图片描述

但是这样只是一个静态的，我们开发中往往需要通过接口进行数据交互的。所以需要调用接口把数据改成动态的

动态页面

接口支持

前提是必须有后端服务器的接口支持，我在本地简单的编写了一个用户列表接口。

在这里插入图片描述

为了保证接口正常，使用调用测试一下，就是这样的一个返回结果

注意返回结果格式，前端需要根据接口的返回格式获取内容或数据的

在这里插入图片描述

前端我使用的是axios发送请求的，如果不知道怎么引用和使用axios，可以参考这篇文章：Vue安装并使用axios发送请求

调用接口

使用axios发送请求接口数据，使用函数封装，并且在挂载钩子调用函数，这样就能在页面加载的时候展示数据了：

在这里插入图片描述
这样一个动态的table就出来了：

在这里插入图片描述

下面是相关的代码：

由于我自己封装的接口返回信息里面有一个data，所以这里需要取两层data才能得到数据！

总结

这就是一个基本的前端调用后端查询，因为我是后端开发，对前端不是很专业，这是我做个人项目中遇到的一个问题。分享给你，希望对你有用

后续的话也会分享vue增删改查基本的代码。

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：世嘉飒美据悉拟向堡垒投资集团出售日本凤凰喜凯亚度假村

下一篇：ElementUI源码系列一-完整引入和按需引入

相关内容

热门资讯

​资本公积与盈余公积的区别是什... 资本公积与盈余公积的区别是什么资本公积是企业收到投资者的超出其在企业注册资本(或股本)中所占份额的投...
​研发费用资本化与费用化的界限 研发费用资本化与费用化的界限研发支出资本化和费用化的区别是符合资本化条件的开发费用在无形资产达到预定...
​现金流量表净额与净利润差异原... 现金流量表净额与净利润差异原因当现金流量净额低于净利润时，可能是由于以下几个原因：一、应收账款增加当...
“鱼米之乡”万象新 　　在中国壮阔的山河画卷中，滚滚长江，奔腾不息。水过三峡，便是长江中下游平原，这里鱼欢稻丰，滋养出万...
​资产数字化改造税额抵免怎么申... 资产数字化改造税额抵免怎么申报纳税人可在企业所得税预缴环节自主选择享受税额抵免优惠，无需等到汇算清缴...
​印花税智能对比差颜超标怎么办 印花税智能对比差颜超标怎么办在企业财务管理中，遇到印花税票金额显著高于预期的情况时，需要进行详细地分...
民生一件事｜校车、“陪读公寓”... 　　央视网消息：民生一件事，关注百姓身边的事。天冷路远不用愁，校车开到家门口。在江西赣州市于都县，当...
视频丨从发现险情到“换乘”返回... 　　2026年1月16日，中国航天员科研训练中心在北京航天城举行神舟二十号乘组与记者见面会。这是神舟...
2025年全国纪检监察机关立案... 　　2025年，全国纪检监察机关共接收信访举报416.8万件次，其中检举控告类信访举报128.2万件...
总台记者观察丨米价居高不下 日... 　　根据日本农林水产省16日发布的数据显示，日本全国超市大米的平均价格达到每5公斤4267日元（约合...