基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台、多租户、支持MySQL/SQLServer/Oracle多数据库,模块化设计,高性能,高颜值,不管是个人学习还是企业做项目都非常适合!
最近在捣鼓后台管理系统开发,发现有个基于Vue和.NET Core的框架挺有意思。前后端分离玩得溜,前端Vue2.6配着ElementUI,后端.NET Core3.1火力全开,最关键是这框架能轻松应对多租户场景,数据库还能在MySQL、SQLServer之间无缝切换,简直是中小项目的神器。
前端路由玩出花
看看这个动态路由配置,权限控制直接写在路由meta里。开发者只要在用户登录时拉取权限列表,自动过滤出可访问的路由:
// 动态路由注入示例 const asyncRoutes = [ { path: '/sys', component: Layout, meta: { title: '系统管理', permission: ['admin'] }, children: [{ path: 'user', component: () => import('@/views/sys/user'), meta: { title: '用户管理', permission: ['admin'] } }] } ] // 权限过滤逻辑 function filterRoutes(routes, permissions) { return routes.filter(route => { if (route.meta?.permission) { return route.meta.permission.some(p => permissions.includes(p)) } return true }) }这里用了Webpack的动态import实现路由懒加载,配合后端返回的权限码做过滤。特别要注意的是permission数组配置,既支持角色也支持具体操作权限,这种设计给权限粒度控制留足了空间。
后端多租户怎么搞
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台、多租户、支持MySQL/SQLServer/Oracle多数据库,模块化设计,高性能,高颜值,不管是个人学习还是企业做项目都非常适合!
看这段租户解析中间件,直接从请求头里抓取租户标识:
// 租户中间件 public class TenantMiddleware { public async Task InvokeAsync(HttpContext context, ITenantService tenantService) { var tenantId = context.Request.Headers["X-Tenant-Id"].FirstOrDefault(); if (!string.IsNullOrEmpty(tenantId) && tenantService.TryGetTenant(tenantId, out var tenant)) { context.Items["CurrentTenant"] = tenant; } await _next(context); } } // 数据访问时自动过滤 public class Repository<T> where T : class, ITenantEntity { public IQueryable<T> Entities => _dbSet.Where(x => x.TenantId == _currentTenant.Id); }妙就妙在通过仓储基类自动注入租户过滤条件,业务代码根本不用操心数据隔离的问题。想切独立数据库?改改连接字符串配置就行,框架已经封装好了多数据库支持。
数据库切换黑魔法
看这个DBProvider工厂类,配置文件切数据库类型时自动换驱动:
// appsettings.json { "ConnectionStrings": { "Default": "Server=.;Database=MyApp;User=sa;Password=123456;", "DbType": "SqlServer" // 可切换MySQL/Oracle } } // 数据访问工厂 public static IDbConnection CreateConnection(IConfiguration config) { var dbType = config["DbType"]; var connectionString = config.GetConnectionString("Default"); return dbType switch { "MySQL" => new MySqlConnection(connectionString), "Oracle" => new OracleConnection(connectionString), _ => new SqlConnection(connectionString) }; }这种设计让切换数据库的成本几乎为零,不同数据库的方言差异都封装在Dapper扩展里了。实测从SQLServer切到MySQL只需改两行配置,连migration脚本都能自动转换。
框架还藏着不少小心思:ElementUI的二次封装组件自带表单验证联动,axios拦截器自动处理401跳转,后端Audit审计日志自动记录修改记录。特别是那个代码生成器,建个实体模型就能秒出增删改查前后端代码,开发效率直接拉满。
要说不足的话,Vue2.6现在看着有点香草味了,不过好在架构设计清晰,要升级Vue3也不是大工程。最近发现他们的GitHub仓库更新了RBAC权限增强模块,权限控制能细化到按钮级别,准备下次升级试试这个新特性。