返回

如何在 Express-Mysql-Vue3-TS-Pinia 项目中处理菜单表

前端

前言

通过之前一段时间 Express 和 Mysql 的学习,这里尝试来搭建一个后台系统来巩固一下之前所学习的知识。

Express-Mysql-Vue3-TS-Pinia 简介

Express-Mysql-Vue3-TS-Pinia 是一个使用 Express、Mysql、Vue3、TypeScript 和 Pinia 构建的后台管理系统。Express-Mysql-Vue3-TS-Pinia 集成了许多常用的功能,如用户管理、角色管理、权限管理、菜单管理、日志管理等。Express-Mysql-Vue3-TS-Pinia 是一款功能强大、易于使用的后台管理系统,非常适合中小型企业的后台管理需求。

菜单表

菜单表是 Express-Mysql-Vue3-TS-Pinia 中的一个重要表,用于存储菜单信息。菜单表包含以下字段:

  • id:菜单ID,主键,自增
  • name:菜单名称
  • path:菜单路径
  • icon:菜单图标
  • parent_id:父菜单ID
  • sort:菜单排序
  • status:菜单状态,0表示禁用,1表示启用

如何创建菜单表

可以使用以下 SQL 语句来创建菜单表:

CREATE TABLE `menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL COMMENT '菜单名称',
  `path` varchar(255) NOT NULL COMMENT '菜单路径',
  `icon` varchar(255) DEFAULT NULL COMMENT '菜单图标',
  `parent_id` int(11) DEFAULT NULL COMMENT '父菜单ID',
  `sort` int(11) DEFAULT NULL COMMENT '菜单排序',
  `status` tinyint(4) DEFAULT NULL COMMENT '菜单状态,0表示禁用,1表示启用',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

如何向菜单表中插入数据

可以使用以下 SQL 语句向菜单表中插入数据:

INSERT INTO `menu` (`name`, `path`, `icon`, `parent_id`, `sort`, `status`) VALUES
('系统管理', '/system', 'fa fa-cog', 0, 1, 1),
('用户管理', '/system/user', 'fa fa-user', 1, 1, 1),
('角色管理', '/system/role', 'fa fa-shield', 1, 2, 1),
('权限管理', '/system/permission', 'fa fa-key', 1, 3, 1),
('菜单管理', '/system/menu', 'fa fa-bars', 1, 4, 1),
('日志管理', '/system/log', 'fa fa-file-text', 1, 5, 1),
('内容管理', '/content', 'fa fa-file', 0, 2, 1),
('文章管理', '/content/article', 'fa fa-file-text', 2, 1, 1),
('分类管理', '/content/category', 'fa fa-folder', 2, 2, 1),
('标签管理', '/content/tag', 'fa fa-tags', 2, 3, 1);

如何从菜单表中查询数据

可以使用以下 SQL 语句从菜单表中查询数据:

SELECT * FROM `menu`;

如何更新菜单表中的数据

可以使用以下 SQL 语句更新菜单表中的数据:

UPDATE `menu` SET `name` = '新的菜单名称' WHERE `id` = 1;

如何删除菜单表中的数据

可以使用以下 SQL 语句删除菜单表中的数据:

DELETE FROM `menu` WHERE `id` = 1;

结语

本文介绍了如何在 Express-Mysql-Vue3-TS-Pinia 项目中处理菜单表,包括如何创建菜单表、如何向菜单表中插入数据、如何从菜单表中查询数据以及如何更新和删除菜单表中的数据。通过学习本文,读者可以掌握在 Express-Mysql-Vue3-TS-Pinia 项目中处理菜单表的方法,并能够在实际项目中应用这些方法。