Vue3 + TS 后台管理：玩转用户列表，满足多元化需求

2023-11-06 04:30:58

使用 Vue3 + TypeScript 构建用户管理系统的用户列表页面

在构建用户管理系统时，我们需要一个美观且高效的用户列表页面来管理大量用户数据。而 Vue3 + TypeScript 组合无疑是这一任务的最佳选择。本文将详细介绍如何使用 Vue3 + TypeScript 来构建一个功能齐全的用户列表页面，涵盖从获取用户数据到编辑用户数据的各个方面。

获取用户数据

首先，我们需要获取用户数据。我们可以使用 axios 库来轻松地向服务器发出 HTTP 请求并获取用户数据。Vue3 中的 get 方法可以实现这一目的：

import axios from 'axios';

export const getUserList = () => {
  return axios.get('/api/users');
};

规范用户数据

获取用户数据后，需要对其进行规范化处理，以确保数据符合我们期望的类型和格式。例如，我们可以将数据类型转换为我们期望的类型，并对数据进行一些格式化处理：

export const normalizeUserData = (data) => {
  return data.map((user) => {
    return {
      id: user.id,
      name: user.name,
      email: user.email,
      createdAt: new Date(user.createdAt),
      updatedAt: new Date(user.updatedAt),
    };
  });
};

页面展示用户数据

现在，我们可以使用 Vue3 的 v-for 指令和 v-text 指令在页面上展示用户数据：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getUserList, normalizeUserData } from './api';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    getUserList().then((res) => {
      this.users = normalizeUserData(res.data);
    });
  },
};
</script>

用户列表查询

为了提升用户体验，我们可以添加查询功能，允许用户根据某些条件来查询用户数据。我们可以使用 v-model 指令绑定查询条件，并使用 axios 库发送查询请求：

<template>
  <div>
    <input type="text" v-model="query">
    <button @click="searchUsers">查询</button>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getUserList, normalizeUserData } from './api';

export default {
  data() {
    return {
      users: [],
      query: '',
    };
  },
  mounted() {
    getUserList().then((res) => {
      this.users = normalizeUserData(res.data);
    });
  },
  methods: {
    searchUsers() {
      axios.get('/api/users', {
        params: {
          query: this.query,
        },
      }).then((res) => {
        this.users = normalizeUserData(res.data);
      });
    },
  },
};
</script>

用户列表编辑

最后，我们可以添加编辑功能，允许用户编辑用户数据。同样，我们可以使用 v-model 指令绑定用户数据，并使用 axios 库发送编辑请求：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <input type="text" v-model="user.name">
        <button @click="saveUser(user)">保存</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { getUserList, normalizeUserData, saveUser } from './api';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    getUserList().then((res) => {
      this.users = normalizeUserData(res.data);
    });
  },
  methods: {
    saveUser(user) {
      axios.put(`/api/users/${user.id}`, user).then((res) => {
        this.$message.success('保存成功');
      });
    },
  },
};
</script>