Web 构建主菜单页面

我们在spring boot + vue前后端分离项目 的开发前期，总会遇到主菜单页面的构建问题，如果子菜单一个一个创建，显然速度又慢，代码复用性又差。

本文作为一个开发笔记，帮助开发者缩短在此过程中消耗的时间。
此笔记会用到

Python：快速创建相应目录，并创建对应.vue组件。(用到了mysql.connector第三方库)
MySQL：用于存储菜单数据，方便后期修改菜单数据。(截图演示时用的navicat)
Spring Boot：写出接口，从MySQL取出菜单数据并发给前端。(用到了mybatis-plus)
vue：绑定每一个子菜单对应的.vue组件。(用到了element-UI和Font Awesome)

创建MySQL数据库表

这个表并不只是作为演示用，后面的配置会完全按照此表作为基准。

DROP TABLE IF EXISTS `menu`;
CREATE TABLE `menu` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜单名称',
  `path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '菜单url',
  `icon` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '菜单图标',
  `parent_id` int DEFAULT NULL COMMENT '父菜单id',
  PRIMARY KEY (`id`),
  KEY `parent_id` (`parent_id`),
  CONSTRAINT `menu_ibfk_1` FOREIGN KEY (`parent_id`) REFERENCES `menu` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=65 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- ----------------------------
-- Records of menu
-- ----------------------------
INSERT INTO `menu` VALUES ('1', '员工管理', '/home', 'fa fa-address-card-o', null);
INSERT INTO `menu` VALUES ('2', '人事管理', '/home', 'fa fa-users', null);
INSERT INTO `menu` VALUES ('3', '薪资管理', '/home', 'fa fa-money', null);
INSERT INTO `menu` VALUES ('4', '统计管理', '/home', 'fa fa-bar-chart', null);
INSERT INTO `menu` VALUES ('5', '系统管理', '/home', 'fa fa-cogs', null);
INSERT INTO `menu` VALUES ('6', '客户管理', '/home', 'fa fa-address-book-o', null);
INSERT INTO `menu` VALUES ('7', '产品管理', '/home', 'fa fa-cube', null);
INSERT INTO `menu` VALUES ('8', '营销管理', '/home', 'fa fa-line-chart', null);
INSERT INTO `menu` VALUES ('9', '财务管理', '/home', 'fa fa-file-text', null);
INSERT INTO `menu` VALUES ('10', '物流管理', '/home', 'fa fa-map-marker', null);
INSERT INTO `menu` VALUES ('11', '客户订单', '/customer/order', 'fa fa-file-text-o', '6');
INSERT INTO `menu` VALUES ('12', '客户投诉', '/customer/complaint', 'fa fa-commenting-o', '6');
INSERT INTO `menu` VALUES ('13', '库存管理', '/product/inventory', 'fa fa-archive', '7');
INSERT INTO `menu` VALUES ('14', '采购管理', '/product/purchase', 'fa fa-shopping-cart', '7');
INSERT INTO `menu` VALUES ('15', '销售管理', '/product/sales', 'fa fa-shopping-bag', '7');
INSERT INTO `menu` VALUES ('16', '市场调研', '/marketing/research', 'fa fa-line-chart', '8');
INSERT INTO `menu` VALUES ('17', '广告宣传', '/marketing/advertising', 'fa fa-bullhorn', '8');
INSERT INTO `menu` VALUES ('18', '促销活动', '/marketing/promotion', 'fa fa-gift', '8');
INSERT INTO `menu` VALUES ('19', '财务报表', '/finance/report', 'fa fa-file-text', '9');
INSERT INTO `menu` VALUES ('20', '账户管理', '/finance/account', 'fa fa-credit-card', '9');
INSERT INTO `menu` VALUES ('21', '收支管理', '/finance/payment', 'fa fa-money', '9');
INSERT INTO `menu` VALUES ('22', '物流跟踪', '/logistics/track', 'fa fa-map-marker', '10');
INSERT INTO `menu` VALUES ('23', '仓库管理', '/logistics/warehouse', 'fa fa-building-o', '10');
INSERT INTO `menu` VALUES ('24',<