Vue3、TS、Node.js后端管理系统：打造菜单管理功能

前言

在上一篇文章中，我们已经完成了用户管理功能。现在，我们将继续构建菜单管理功能。菜单管理主要是要获取到用户权限的树状结构并展示出来。本篇文章将带领您一步步实现这个功能。

搭建菜单管理功能

1. 创建菜单管理页面

首先，我们需要创建一个菜单管理页面。在src/views目录下创建一个名为MenuManagement.vue的文件。

<template>
  <div>
    <h1>菜单管理</h1>
    <el-tree :data="menuList" :props="defaultProps"></el-tree>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue';
import { getMenuList } from '@/api/menu';

export default {
  setup() {
    const menuList = reactive([]);
    const defaultProps = {
      children: 'children',
      label: 'name',
    };

    onMounted(() => {
      getMenuList().then((res) => {
        menuList.value = res.data;
      });
    });

    return {
      menuList,
      defaultProps,
    };
  },
};
</script>

在这个页面中，我们使用了Element UI的树形控件来展示菜单数据。我们通过getMenuList API来获取菜单数据，然后将数据绑定到树形控件。

2. 创建菜单管理 API

接下来，我们需要创建菜单管理 API。在src/api目录下创建一个名为menu.js的文件。

import request from '@/utils/request';

export function getMenuList() {
  return request({
    url: '/menu/list',
    method: 'get',
  });
}

在这个 API 中，我们使用了request函数来发送请求。request函数是一个封装好的函数，它可以自动处理请求头、请求参数等信息。

3. 注册菜单管理路由

最后，我们需要注册菜单管理路由。在src/router/index.js文件中添加如下代码：

{
  path: '/menu',
  component: () => import('@/views/MenuManagement.vue'),
  meta: {
    title: '菜单管理',
    requiresAuth: true,
  },
},

这样，我们就完成了菜单管理功能的搭建。

结语

在本文中，我们学习了如何使用Vue3、TS和Node.js来构建菜单管理功能。我们创建了菜单管理页面、菜单管理 API和注册了菜单管理路由。通过本教程，您已经能够创建功能齐全的菜单管理系统，并为您的项目添加权限控制功能。