前端Vue和Element-UI配合后端接口进行数据交互

news2024/12/24 8:36:03

前言

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

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

静态页面

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

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

在这里插入图片描述

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

在这里插入图片描述

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

动态页面

接口支持

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

在这里插入图片描述

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

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

在这里插入图片描述

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

调用接口

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

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

在这里插入图片描述

下面是相关的代码:

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

<template>
  <el-table :data="tableData"  highlight-current-row  border stripe style="width: 100%" class="userTable">
    <!-- <el-table-column prop="id" label="id" width="90" align="center"></el-table-column> -->
    <el-table-column
      prop="userName"
      label="姓名"
      width="90"
      align="center"
    ></el-table-column>
  <el-table-column
      prop="sex"
      label="性别"
      width="90"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="account"
      label="账号"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="imnage"
      label="头像"
      width="90"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="phone"
      label="手机号"
      width="130"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="remark"
      label="备注"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="90"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="updateTime"
      label="修改时间"
      width="180"
    ></el-table-column>
  </el-table>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    queryUserList() {
      axios.get("http://localhost:9090/user/queryList").then(
        // 成功回调
        (success) => {
          console.log("请求成功!");
          // 请求成功后的数据
          console.log(success);
          this.tableData = success.data.data;
        },
        // 失败回调
        (error) => {
          console.log("请求失败!");
          // 请求失败原因
          console.log(error.message);
        }
      );
    },
  },
  mounted() {
    this.queryUserList();
  },
};
</script>

<style  scoped>

</style>



总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/154874.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Linux运维实战:Centos7.6基于ansible一键离线部署redis6.2.8容器版之cluster集群》

一、部署背景 由于业务系统的特殊性&#xff0c;我们需要针对不同的客户环境部署redis cluster集群&#xff0c;由于大都数用户都是专网环境&#xff0c;无法使用外网&#xff0c;为了更便捷&#xff0c;高效的部署&#xff0c;针对业务系统的特性&#xff0c;我这边编写了基于…

采用模块化设计的轮腿式六足机器人

原创作者&#xff1a;王菡琪1、前言 1.1 背景及意义 近两个世纪以来&#xff0c;人类生产技术水平不断飞跃&#xff0c;人口数量也大幅增长&#xff0c;这是人类史上不曾有的盛景&#xff0c;但是这也同时对我们提出了全新的挑战&#xff0c;于是我们研发了各类机器&#xff…

ECS简单介绍

ECS 云服务器ECS (Elastic Compute Service)是一种可弹性伸缩的计算服务&#xff0c;降低IT成本&#xff0c;提升运维效率&#xff0c;更专注于核心业务创新。 定位&#xff1a;最基础的计算服务&#xff0c;ECS及其上装载的操作系统&#xff0c;通常用作应用程序的运行环境。…

聚类--常见的K-MEANS聚类,DBSCAN聚类方法介绍

聚类 1. 什么是聚类⁉️ ➡️ 聚类就是把相似的物品分到一组。例如苹果&#xff0c;橙子属于水果类&#xff0c;猫&#xff0c;狗属于动物类&#xff0c;聚类把具有相似属性的物品分到同一组。 ☕常见的两种监督问题 有监督问题&#xff1a;有标签学习&#xff0c;通过已知…

过线检测判断方向

过线检测时需要判断目标是从哪个方向经过的 L1向量&#xff1a;&#xff08;-1&#xff0c;-7&#xff09; L2向量&#xff1a;&#xff08;-5&#xff0c;0&#xff09; 叉乘&#xff1a;L1 X L2 (-1x0 - (-5 x -7)) 0 - 35 -35 点乘&#xff1a;L1 L2 -1 x -5 -7 x 0…

管道设计软件:PIPEDATA-PRO

PIPEDATA-PROPipedata-Pro 提高了管道设计的效率&#xff0c;减轻了查找管道信息的负担。它可以直观、轻松地检索最新的管道和设计数据。尺寸和重量单位可以设置为公制或美国惯用单位。 Pipedata-Pro 于 1996 年由 Zeataline Projects 推出&#xff0c;现在已遍布全球&#xff…

靶机测试DomDom笔记

靶机描述Back to the TopHow well do you understand PHP programs? How familiar are you with Linux misconfigurations? This image will cover advanced Web attacks, out of the box thinking and the latest security vulnerabilities.Please note that this is captur…

阿里云中MindOpt优化器在python中如何安装

文章目录1 背景2 目的3 Bug4 安装教程6 小丑竟是我自己1 背景 我需要本地下载安装使用阿里元的MindOpt&#xff0c;安装教程可以看官网说明文档&#xff08;方方面面都有&#xff0c;不过细节部分有点欠缺&#xff0c;可能会踩一些坑&#xff0c;但总体问题不大&#xff09;。…

盘点 | CES2023落幕!新能源车、显示技术、AI/元宇宙、芯片…百花齐放百家争鸣中……

美国时间1月8日&#xff0c;全球规模最大、水平最高、影响力最广泛的国际消费电子展&#xff08;CES 2023&#xff09;在美国拉斯维加斯闭幕。这场堪比科技“春晚”的消费电子盛宴以“技术如何应对世界上最大的挑战”为主题&#xff0c;来自全球170多个国家与地区的3200余家科技…

OpenResty(Nginx+Redis+Lua)实现缓存限流

OpenResty介绍 OpenResty(又称&#xff1a;ngx_openresty) 是一个基于 nginx的可伸缩的 Web 平台&#xff0c;由中国人章亦春发起&#xff0c;提供了很多高质量的第三方模块。 OpenResty 是一个强大的 Web 应用服务器&#xff0c;Web 开发人员可以使用 Lua 脚本语言调动 Ngin…

2013-2021年核心城市空气质量日度数据

2013-2021年核心城市空气质量日度数据 1、时间&#xff1a;2013年12月-2021年4月13日 2、城市包括&#xff1a;北京 上海 广州 深圳 杭州 天津 成都 南京 西安 武汉 3、指标&#xff1a;日期、AQI、范围、质量等级、PM2.5、PM10、SO2、CO、NO2、O3、城市 4、来源&#xff1…

MYSQL基础——DML语句

DML语句 DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据进行增(INSERT)、删(DELETE)、改(UPDATE)操作。 接下来代码演示所用的数据表如下&#xff1a; desc employee; 添加 添加数据语法格式如下&#xff1a; # 给指定字段添加…

IEEE | DSConv: Efficient Convolution Operator

论文标题 &#xff1a;DSConv: Efficient Convolution Operator 论文链接 &#xff1a;https://arxiv.org/abs/1901.01928v2 发表时间 &#xff1a;2019年11月 创新点 实现更低的内存使用&#xff0c;并且加快了计算速度 概要 引入了一种称为 DSConv&#xff08;分布移位卷…

【服务器数据恢复】服务器卷被误删除的raid5数据恢复案例

服务器数据恢复环境&故障&#xff1a; 某品牌服务器&#xff0c;搭建raid5磁盘阵列。 用户误操作删除服务器上的卷。 经过检测发现服务器不存在物理故障&#xff0c;可以从raid5磁盘阵列层面进行数据恢复。 服务器数据恢复过程&#xff1a; 1、对故障服务器所有硬盘以只读…

Chromedriver安装教程【无需翻墙】

第一步 查看你当前Chrome浏览器的版本&#xff0c;如下图所示&#xff1a; 第二步 查看当前Chrome浏览器的版本号&#xff0c;如下图所示,版本 108.0.5359.125&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09;中的&#xff0c;108就是我们的版本号。 第三…

第47讲:SQL优化之主键优化

文章目录1.主键优化方面的概念1.1.数据的组织方式1.2.主键顺序写入的过程1.3.主键乱序写入引发页分裂的现象1.4.页合并的概念2.主键的设计原则1.主键优化方面的概念 1.1.数据的组织方式 在InnoDB存储引擎中&#xff0c;表的数据都是根据主键顺序组织然后存放的&#xff0c;这…

集成开发工具IDEA导入新项目,update index时间过长

集成开发工具IDEA导入新项目&#xff0c;update index时间过长&#xff0c;一般这种场景出现在&#xff1a; 1.继承开发工具比较新&#xff08;使用了优化的索引算法&#xff0c;这种算法一般是前期编译比较慢&#xff0c;一旦编译完&#xff0c;存入缓存&#xff0c;后期搜索就…

为何国家应该大力推行IPV9而不是IPv6.md

不得不说,中国的发展突飞猛进,你看连神舟16号都已经提升了日程。 我们见证了中国的崛起,更见证了中国的力量,集中力量办大事的决心。 当然计算机网络体系也发生了很大的改变,从之前的IPv4到20年前的IPv6的提出,再到现在的IPV9技术的商业实施。 为何IPv6提出了20多年了,普及还是…

11点还不睡会错过肝脏排毒吗?

人体脏器有排毒时间这个说法由来已久&#xff0c;肝经循行时间为晚上11点-1点&#xff0c;这让很多人害怕自己在11点还没睡就会错过肝脏排毒的时间。这个说法是真的吗&#xff1f;肝脏作为人体的“生物加工厂”&#xff0c;24小时都在工作。工作内容包括调节代谢、合成、调节免…

JSONArray.parseArray

1. 需求 最近有个需求&#xff1a; 要接收某个接口的 JSON 数据&#xff0c;而这个JSON数据有可能是一个 JSON 对象&#xff0c;也有可能是一个 JSON数组。 "{name,王五,age:10}""[{name:张三,age:12},{name:李四,age:11}]"现在呢&#xff0c;我需要根据…