Vue3+TypeScript构建企业管理后台：快速打造增删改查功能

2023-11-21 03:54:12

在当今数字化的时代，企业管理后台已成为不可或缺的工具，它可以帮助企业高效地管理数据、跟踪任务并做出明智的决策。随着Vue3和TypeScript的兴起，企业管理后台的构建变得更加便捷高效。本文将逐步引导您使用Vue3和TypeScript构建一个功能完备的企业管理后台，帮助您快速实现数据管理和维护需求。

1. 前期准备

在开始构建管理后台之前，您需要准备以下内容：

Node.js和npm ：确保您已安装Node.js和npm。
Vue CLI ：使用Vue CLI可以快速创建Vue项目。
Vue3和TypeScript ：确保您已安装Vue3和TypeScript。

2. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create vue3-ts-admin

3. 安装依赖项

在项目目录中，安装必要的依赖项：

npm install vue3-router axios pinia vue-toastification

4. 设置TypeScript

在项目根目录下的tsconfig.json文件中，添加以下配置：

{
  "compilerOptions": {
    "target": "es2019",
    "module": "esnext",
    "strict": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

5. 构建基础架构

5.1 路由

在src/router/index.ts文件中，定义路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Users from '../views/Users.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/users',
      name: 'users',
      component: Users
    }
  ]
});

export default router;

5.2 状态管理

在src/store/index.ts文件中，定义状态管理：

import { createPinia } from 'pinia';

const store = createPinia();

export default store;

6. 构建用户管理页面

6.1 用户列表

在src/views/Users.vue文件中，定义用户列表页面：

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

<script>
import { onMounted, ref } from 'vue';
import { useUsersStore } from '../stores/users';

export default {
  setup() {
    const users = ref([]);
    const usersStore = useUsersStore();

    onMounted(() => {
      usersStore.fetchUsers().then(res => {
        users.value = res.data;
      });
    });

    return {
      users
    };
  }
};
</script>

6.2 用户表单

在src/components/UserForm.vue文件中，定义用户表单：

<template>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="user.name">

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="user.email">

    <button type="submit" @click.prevent="submit">提交</button>
  </form>
</template>

<script>
import { ref } from 'vue';
import { useUsersStore } from '../stores/users';

export default {
  props: ['user'],
  setup(props) {
    const usersStore = useUsersStore();

    const submit = () => {
      if (props.user.id) {
        usersStore.updateUser(props.user).then(() => {
          // 更新成功后的操作
        });
      } else {
        usersStore.createUser(props.user).then(() => {
          // 创建成功后的操作
        });
      }
    };

    return {
      submit
    };
  }
};
</script>

6.3 添加/编辑用户页面

在src/views/UserEdit.vue文件中，定义添加/编辑用户页面：

<template>
  <div>
    <h1>{{ isEdit ? '编辑用户' : '添加用户' }}</h1>
    <user-form :user="user" />
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUsersStore } from '../stores/users';
import UserForm from '../components/UserForm.vue';

export default {
  components: {
    UserForm
  },
  setup() {
    const router = useRouter();
    const usersStore = useUsersStore();

    const user = ref({});
    const isEdit = ref(false);

    watch(() => router.currentRoute.value.params.id, (id) => {
      if (id) {
        isEdit.value = true;
        usersStore.fetchUser(id).then(res => {
          user.value = res.data;
        });
      } else {
        isEdit.value = false;
        user.value = {};
      }
    });

    return {
      user,
      isEdit
    };
  }
};
</script>

7. 构建API接口

在src/api/index.ts文件中，定义API接口：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000/api'
});

export default api;

在src/stores/users.ts文件中，定义用户相关API接口：

import { defineStore } from 'pinia';
import api from '../api';

export const useUsersStore = defineStore('users', {
  state: () => ({
    users: []
  }),
  actions: {
    fetchUsers() {
      return api.get('/users');
    },
    fetchUser(id) {
      return api.get(`/users/${id}`);
    },
    createUser(user) {
      return api.post('/users', user);
    },
    updateUser(user) {
      return api.put(`/users/${user.id}`, user);
    },
    deleteUser(id) {
      return api.delete(`/users/${id}`);
    }
  }
});