前端与后端联调接口之----获取数据

最新推荐文章于 2025-06-05 16:04:16 发布

_chang.

最新推荐文章于 2025-06-05 16:04:16 发布

阅读量199

点赞数

文章标签：前端 java javascript

本文链接：https://blog.youkuaiyun.com/m0_66226018/article/details/131973400

版权

该文章展示了如何在Vue项目中通过封装的axios（api.js）调用接口获取数据，并将数据绑定到表格组件（el-table）上展示。同时，实现了分页功能，通过接口获取到的count字段更新总条数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

api.js

import request from "../http";//引的是axios的二次封装

export function getList(data) {
    return request({
        url:"/api/getList",
        method:"post",
        data:data
    })
}

拿接口的vue文件

<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getList } from "./api"
export default {
    data() {
        return {
            tableData: [],
            count: 0,
        }
    },
    methods: {
        getList() {
            const params = {
                传参: 传参
            }
            getList(params).then((res) => {
                if (res.code === 200) {
                    this.tableData = res.data;
                    //在加就是count获取分页的总条数
                    this.count = res.count;
                }
            })
        }
    }
}
</script>

<style></style>

这样我们的获取数据和后端对接的接口就可以实现了