bootstrapblazor数据库生成动态菜单的实现
文章标签:
bootstrap 菜单树
通过数据库中的表实现动态菜单,可以分为以下几种
1、通过数据库菜单表直接生成菜单
2、通过数据库菜单表和用户权限表,按权限生成不同的菜单
为了简化,实体类直接用于查询数据,不作数据写入,MID是权限ID,菜单表如下
public class MyMenu
{
[Key]
public int ID { get; set; }
public string? 菜单ID { get; set; }
public string? 名称 { get; set; }
public string? 图标 { get; set; }
public string? url { get; set; }
public string? 父菜单ID { get; set; }
}
CREATE TABLE [dbo].[系统菜单](
[ID] [int] IDENTITY(1,1) NOT NULL,
[菜单ID] [nvarchar](50) NULL,
[名称] [nvarchar](50) NULL,
[图标] [nvarchar](50) NULL,
[URL] [nvarchar](50) NULL,
[父菜单ID] [nvarchar](50) NULL,
[MID] [nvarchar](50) NULL,
CONSTRAINT [PK_系统菜单] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
查询菜单表如下,是一个视图,通过关联用户权限来实现不同权限生成不同的菜单
public class QMenu
{
[Key]
public int ID { get; set; }
public string? 菜单ID { get; set; }
public string? 名称 { get; set; }
public string? 图标 { get; set; }
public string? url { get; set; }
public string? 父菜单ID { get; set; }
public string? 用户名 { get; set; }
}
CREATE VIEW [dbo].[查询_菜单]
AS
SELECT dbo.系统菜单.*, dbo.用户_权限.用户名
FROM dbo.系统菜单 RIGHT OUTER JOIN
dbo.用户_权限 ON dbo.系统菜单.MID = dbo.用户_权限.权限id
GO
在登录后加载菜单的地方,先读取顶级菜单,再遍历子菜单,isAdmin用来判断是否具有管理员权限,如果是管理员权限,则加载所有的菜单,否则只加载用户权限所具有的菜单。
public List<MenuItem> GetTopMenu()
{
var menus = new List<MenuItem>();
List<MyMenu> M1;
using (var context = new MyContext())
{
M1 = context.MyMenus
.Where(i=>i.父菜单ID==null)
.ToList();
}
//获取所有的顶级菜单
foreach (var m in M1)
{
var m_1 = new MenuItem();
m_1.Text = m.名称;
m_1.Icon = m.图标;
m_1.Url = m.url;
m_1.Id = m.菜单ID;
menus.Add(m_1);
}
//遍历子菜单
if (isAdmin == true)
{
foreach (var menuItem in menus)
{
menuItem.Items = GetSubMenu(menuItem.Id,true);
}
}
if (isAdmin == false)
{
foreach (var menuItem in menus)
{
menuItem.Items = GetSubMenu(menuItem.Id);
}
}
//清理掉没有子菜单的顶级菜单
for (var i = menus.Count - 1; i >= 1; i--)
{
var num=menus[i].Items.Count();
if (num <= 0)
{
menus.RemoveAt(i);
}
}
//增加退出菜单,因为退出菜单是顶级菜单,上边被清理掉了
menus.Add(new() { Text = "退出登录", Icon = "fas fa-display", Url = "/api/Account/Logout" });
return menus;
}
遍历子菜单
private List<MenuItem> GetSubMenu(string parentID)
{
var menu = new List<MenuItem>();
List<QMenu> M1;
using (var context = new MyContext())
{
M1 = context.QMenus
.Where(p => p.父菜单ID == parentID)
.Where(p => p.用户名 == UserName)
.ToList();
}
foreach (var m in M1)
{
var p = new MenuItem();
p.Text=m.名称;
p.Icon = m.图标;
p.Url = m.url;
p.Id = m.菜单ID;
p.Items = GetSubMenu(m.菜单ID);
menu.Add(p);
}
return menu;
}
private List<MenuItem> GetSubMenu(string parentID,bool admin)
{
var menu = new List<MenuItem>();
List<MyMenu> M1;
using (var context = new MyContext())
{
M1 = context.MyMenus
.Where(p => p.父菜单ID == parentID)
.ToList();
}
foreach (var m in M1)
{
var p = new MenuItem();
p.Text = m.名称;
p.Icon = m.图标;
p.Url = m.url;
p.Id = m.菜单ID;
p.Items = GetSubMenu(m.菜单ID,admin);
menu.Add(p);
}
return menu;
}
好了,把返回值赋给菜单就可以使用了。
private List<MenuItem>? Menus { get; set; }
protected override async void OnInitialized()
{
base.OnInitialized();
var user = (await Auth.GetAuthenticationStateAsync()).User;
UserName = user.Identity.Name;
string qx ="有";
if (qx == "有")
{
isAdmin = true;
}
Menus = GetTopMenu();
}
最后的效果如下,还是挺好用的