VUE(20) : vue-element-admin[10] : 菜单权限分配

1.建表语句(mysql)

menu

CREATE TABLE `menu` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键(自增id)',
  `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新时间',
  `name` varchar(125) DEFAULT NULL COMMENT '路径名称',
  `path` varchar(125) DEFAULT NULL COMMENT '路径',
  `parent_id` bigint(20) DEFAULT NULL COMMENT '父节点id',
  `sort` int(11) DEFAULT NULL COMMENT '排序(从小到大)',
  `icon` varchar(55) DEFAULT NULL COMMENT '菜单图标',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=60 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='菜单'
;

menu_group

CREATE TABLE `menu_group` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键(自增id)',
  `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
  `gmt_modify` datetime DEFAULT NULL COMMENT '更新时间',
  `name` varchar(125) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '菜单组名称',
  `menu_ids` varchar(555) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '菜单id',
  PRIMARY KEY (`id`),
  UNIQUE KEY `u_name` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='菜单组'
;

2.菜单列表(前端)

vue

api

import request from '@/utils/request'

export function listParent(id) {
  return request({
    url: '/qjjk-api/v1/menu/list-parent?id=' + id,
    method: 'get'
  })
}

export function pages(data) {
  return request({
    url: '/qjjk-api/v1/menu/pages',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function add(data) {
  return request({
    url: '/qjjk-api/v1/menu',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function update(data) {
  return request({
    url: '/qjjk-api/v1/menu',
    headers: { 'Content-Type': 'application/json' },
    method: 'put',
    data
  })
}

export function del(data) {
  return request({
    url: '/qjjk-api/v1/menu',
    method: 'delete',
    params: data
  })
}

3.菜单组列表        

vue

api

import request from '@/utils/request'

export function listMenuGroups() {
  return request({
    url: '/qjjk-api/v1/menu_group/list-all',
    method: 'get'
  })
}

export function pages(data) {
  return request({
    url: '/qjjk-api/v1/menu_group/pages',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function add(data) {
  return request({
    url: '/qjjk-api/v1/menu_group',
    headers: { 'Content-Type': 'application/json' },
    method: 'post',
    data
  })
}

export function update(data) {
  return request({
    url: '/qjjk-api/v1/menu_group',
    headers: { 'Content-Type': 'application/json' },
    method: 'put',
    data
  })
}

export function del(data) {
  return request({
    url: '/qjjk-api/v1/menu_group',
    method: 'delete',
    params: data
  })
}