vue + ts 前端模板如何对接后台接口,通用接口，不确定元素个数

Vue + TypeScript 前端项目可以通过以下步骤来对接后台接口：

事先定义了元素个数，如：

interface Operation{

id:number；

name:string；

action:string；

status:boolean；

}

const dataList = ref<Operation[]>([]);

需要在后台写好对应的接口，不如写个通用的，当然效率未必高，省事而已。

已经有环境者请忽略。

1.首先，在项目中安装 axios 库。可以使用以下命令来安装：

npm install axios

2.在项目中创建一个 utils 目录，用于存放与后台接口相关的代码。

3.在 utils 目录中创建一个 api.ts 文件，用于定义后台接口的 URL 和请求方式等信息。例如：

import axios from 'axios';

const baseURL = 'http://localhost:8080/api';

export const getUserList = () => axios.get(`${baseURL}/user/list`);
export const deleteUser = (id: number) => axios.delete(`${baseURL}/user/${id}`);
export const updateUser = (id: number, data: any) => axios.put(`${baseURL}/user/${id}`, data);

在这个文件中，我们使用 axios 库来定义了三个方法，分别是获取用户列表、删除用户和更新用户信息。这些方法的 URL 都是以 baseURL 开头的，可以根据自己的需要进行修改。

4.在组件中引入定义好的接口方法，以及使用它们来获取或修改后台数据。例如：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button @click="deleteUser(user.id)">Delete</button>
            <button @click="updateUser(user.id, { name: 'New Name', age: 20 })">Update</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { getUserList, deleteUser, updateUser } from '@/utils/api';

export default defineComponent({
  setup() {
    const userList = ref([]);

    const fetchUserList = async () => {
      const res = await getUserList();
      userList.value = res.data;
    };

    const deleteUser = async (id: number) => {
      await deleteUser(id);
      await fetchUserList();
    };

    const updateUser = async (id: number, data: any) => {
      await updateUser(id, data);
      await fetchUserList();
    };

    onMounted(() => {
      fetchUserList();
    });

    return {
      userList,
      deleteUser,
      updateUser,
    };
  },
});
</script>

在这个示例中，我们使用 defineComponent 函数来创建一个 Vue 组件，并在 setup 函数中定义了三个方法：fetchUserList、deleteUser 和 updateUser。其中，fetchUserList 方法用于获取用户列表，并将获取到的数据赋值给 userList 变量；deleteUser 和 updateUser 方法则分别用于删除和更新用户信息，并在操作完成后重新获取用户列表。

最后，在组件的 template 中，我们使用 userList 变量来渲染用户列表，并给删除和更新按钮添加对应的点击事件。当点击按钮时，对应的方法将被调用