Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)

左手的ㄟ右手 2023-09-23 21:55 75阅读 0赞

## 前言 ##

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

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

## 静态页面 ##

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

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

![在这里插入图片描述][5a7933b4f347414ca48392ade9d93785.png]

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

![在这里插入图片描述][31bb37c49a7147c3b773594114710058.png]

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

## 动态页面 ##

### 接口支持 ###

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

![在这里插入图片描述][f43918534ad04c0bb780ad46f91af30b.png]

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

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

![在这里插入图片描述][038f15cd6bfa456dbe8b516cf321e649.png]

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

### 调用接口 ###

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

![在这里插入图片描述][7b2de92c901c4868a265f18112d59aae.png]

这样一个动态的table就出来了：

![在这里插入图片描述][f6bc46ed7f4a426ca12e15099de60d44.png]

下面是相关的代码：

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

<template>
      <el-table :data="tableData"  highlight-current-row  border stripe style="width: 100%" class="userTable">
        
        <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', 
              // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
              }).then(res =>{
        
                // 请求成功后的数据返回给用户列表用于展示
                 this.userTableData = res.data.data;
              }).catch(error =>{
        
                 console.log(error)
              })
        },
      },
      mounted() {
        
      	// 页面加载就渲染用户列表
        this.queryUserList();
      },
    };
    </script>
    
    <style  scoped>
    
    </style>

## 总结 ##

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

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

[Vue_Element-UI]: https://blog.csdn.net/weixin_46713508/article/details/128636599?spm=1001.2014.3001.5502
[5a7933b4f347414ca48392ade9d93785.png]: https://img-blog.csdnimg.cn/5a7933b4f347414ca48392ade9d93785.png
[31bb37c49a7147c3b773594114710058.png]: https://img-blog.csdnimg.cn/31bb37c49a7147c3b773594114710058.png
[f43918534ad04c0bb780ad46f91af30b.png]: https://img-blog.csdnimg.cn/f43918534ad04c0bb780ad46f91af30b.png
[038f15cd6bfa456dbe8b516cf321e649.png]: https://img-blog.csdnimg.cn/038f15cd6bfa456dbe8b516cf321e649.png
[Vue_axios]: https://blog.csdn.net/weixin_46713508/article/details/127952455?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167335936116800188597584%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167335936116800188597584&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127952455-null-null.blog_rank_default&utm_term=axios&spm=1018.2226.3001.4450
[7b2de92c901c4868a265f18112d59aae.png]: https://img-blog.csdnimg.cn/7b2de92c901c4868a265f18112d59aae.png
[f6bc46ed7f4a426ca12e15099de60d44.png]: https://img-blog.csdnimg.cn/f6bc46ed7f4a426ca12e15099de60d44.png