.NET 8 + Vue/UniApp 高性能前后端分离框架

美丽的小岛艾莉婕 發表於 2024-9-24 10:57:00

.NET 8 + Vue/UniApp 高性能前后端分离框架

<h2 class="md-end-block md-heading">前言</h2>
作为一名开发者，我们知道能够简化开发流程、提升工作效率的工具是至关重要的。
推荐一款前后端分离框架 Admin.NET（ZRAdmin），它不仅可以满足项目开发的需求，还应用了一些新的特性，如RBAC权限管理、SqlSugar ORM、以及Vue3的动态国际化支持，代码简洁易用。
接下来，让我们一起深入了解和学习这个项目的主要特点和优势。
<h2 class="md-end-block md-heading">项目介绍</h2>
基于 .NET5/.NET7/.NET8 实现的通用权限管理平台（采用 RBAC 模式），后端使用 SqlSugar 作为 ORM；前端则利用 Vue2.x/Vue3.x 进行开发。通过整合最新技术，本框架支持高效的前后端分离模式，真正做到开箱即用。
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918171635681-40146796.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
该项目具有代码量少、依赖关系简单的特点，易于学习与理解。其强大的功能和优秀的可扩展性，加之轻量级的设计理念，使得 Web 开发变得更加迅速高效，可以帮助大家告别加班，专注于业务逻辑的开发，轻松应对 80% 的重复工作，开启高效开发节奏。
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918171748048-1726312953.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<h2 class="md-end-block md-heading">项目特征</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
轻量级设计，代码简洁明了，依赖项极少，仅需少量配置即可启动运行；
</li>
<li class="md-list-item">
完全响应式布局，无缝适应包括电脑、平板、手机在内的各种主流设备；
</li>
<li class="md-list-item">
高效开发模式，配置好表格信息后即可一键生成前后端数据库相关代码（包括控制器、模型、视图、菜单、Vue 组件、API 等），并支持自动生成国际化翻译文件；
</li>
<li class="md-list-item">
支持多数据源及自动分表，简易配置即可完成数据源的切换；
</li>
<li class="md-list-item">
提供细致入微的权限管理，涵盖页面级、按钮级乃至具体操作权限及数据权限；
</li>
<li class="md-list-item">
配备完善的日志记录体系，通过简单的注解即可轻松实现；
</li>
<li class="md-list-item">
内置多语言支持，包括简体中文、繁体中文及英文，扩展其他语言十分便捷；
</li>
<li class="md-list-item">
支持多个数据库库，并可通过 CodeFirst 方便地创建数据库表及执行迁移操作。
</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918171829811-2011299062.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<h2 class="md-end-block md-heading">项目技术</h2>
<h3 class="md-end-block md-heading">1、后端技术</h3>
<ul>
<li class="md-end-block md-p">核心框架：采用 .Net5.0/.Net7.0/.Net8.0 结合 Web API、SqlSugar、Swagger、SignalR、IpRateLimit、Quartz.net 和 Redis 技术。</li>
<li class="md-end-block md-p">定时计划任务：使用 Quartz.Net 组件支持执行程序集或 HTTP 请求。</li>
<li class="md-end-block md-p">安全支持：提供数据权限过滤、SQL 注入防护和 CSRF 保护。</li>
<li class="md-end-block md-p">日志管理：集成 NLog，支持登录、操作及定时任务的日志记录。</li>
<li class="md-end-block md-p">工具类：包含验证码生成及其他丰富的公共功能。</li>
<li class="md-end-block md-p">接口限流：支持接口访问速率限制，防止恶意请求影响服务稳定性。</li>
<li class="md-end-block md-p">代码生成：提供一键生成前后端代码的功能，提升开发效率。</li>
<li class="md-end-block md-p">数据字典：支持数据字典管理，便于维护状态信息。</li>
<li class="md-end-block md-p">分库分表：借助 SqlSugar ORM 轻松实现分库分表，优化性能。</li>
<li class="md-end-block md-p">多租户支持：内置多租户功能，适应不同业务场景。</li>
<li class="md-end-block md-p">缓存数据：支持内存缓存及 Redis 缓存方案。</li>
</ul>
<h3 class="md-end-block md-heading">2、前端技术</h3>
<ul>
<li class="md-end-block md-p">Vue 版前端技术栈基于 Vue2.x/Vue3.x，集成 Vuex、Vue-Router、Vue-CLI、Axios、Element-UI、Echarts、i18n，并支持 Vite 和 Webpack 国际化配置。前端开发采用 Visual Studio Code（VSCode）工具进行。</li>
</ul>
<h2 class="md-end-block md-heading">项目功能</h2>
1、用户管理：管理系统的操作员账户，包括用户的配置与权限设置。
2、部门管理：构建和维护系统的组织结构（如公司、部门、小组），以树形结构展示。
3、岗位管理：定义和配置用户的职位信息。
4、菜单管理：配置系统菜单及其相关的操作权限和按钮权限标识。
5、角色管理：分配角色并设置角色的菜单权限。
6、字典管理：维护系统中常用的固定数据，支持 SQL 字典、字典翻译和字典样式定制。
7、操作日志：记录并查询系统正常操作及异常信息的日志。
8、登录日志：记录并查询系统登录活动，包括登录失败的情况。
9、系统接口：使用 Swagger 自动生成 API 文档。
10、服务监控：监控系统的 CPU、内存、磁盘、堆栈等关键指标。
11、在线构建器：通过拖拽表单元素生成对应的 Vue 代码。
12、任务系统：基于 Quartz.NET 实现的任务调度，支持在线管理任务（如添加、修改、删除、手动执行）及查看执行结果日志。
13、文章管理：支持撰写和管理文章记录。
14、代码生成：一键生成前后端代码（包括 .cs、.vue、.js、SQL、UniApp 等），内置三种模板（单表、树表、主子表），并允许自定义前端展示组件。
15、参数管理：动态配置系统常用的参数。
16、邮件管理：支持给多个用户发送邮件、查询邮件状态及选择邮件模板。
17、文件管理：提供文件上传管理功能，支持本地存储及阿里云存储。
18、通知管理：发布系统通知公告，并使用 SignalR 实现实时通知。
19、账号注册：支持账号注册与登录，包括扫码登录及手机号登录（开发中）。
20、多语言管理：支持静态及动态后端配置国际化，目前提供中文、英文及繁体中文支持。
21、在线用户：查看当前在线用户，并可执行踢出或发送私信等操作。
22、DB 审计日志：记录数据库审计信息。
23、第三方登录：提供第三方登录的实现逻辑。
24、导入导出：支持中文表头导入、字典数据转换成文本导出。
25、数据大屏：更直观的展示数据。
<h2 class="md-end-block md-heading">项目展示</h2>
<h3 class="md-end-block md-heading">1、在线体验</h3>
<ul>
<li class="md-end-block md-p">web 端体验：http://demo.izhaorui.cn/vue3</li>
<li class="md-end-block md-p">Uniapp 版本体验(vue2)：http://demo.izhaorui.cn/h5</li>
<li class="md-end-block md-p">Uniapp 版本体验(vue3)：http://demo.izhaorui.cn/uplus</li>
<li class="md-end-block md-p">账号密码：admin/123456 普通用户 user/123456</li>
</ul>
<h3 class="md-end-block md-heading">2、PC端效果</h3>
<ul>
<li class="md-end-block md-p">控制台</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172050739-1341849775.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<ul>
<li class="md-end-block md-p">系统管理</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172137131-90252854.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<ul>
<li class="md-end-block md-p">系统工具</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172219676-1519942238.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<ul>
<li class="md-end-block md-p">系统监控</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172243135-1082173571.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<ul>
<li class="md-end-block md-p">数据大屏</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172339153-721535833.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<h3 class="md-end-block md-heading">3、H5/微信小程序</h3>
<ul>
<li class="md-end-block md-p">菜单功能</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172558638-930199453.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<ul>
<li class="md-end-block md-p">功能演示</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172642848-663698194.jpg" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<h3 class="md-end-block md-heading">4、移动端</h3>
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172739947-1592338569.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<h2 class="md-end-block md-heading">项目源码</h2>
通过项目地址下载源码进行学习，可以深入了解其设计原理和实现细节。
不仅可以提升我们的编程技能，还能为我们提供一个参考案例。
项目结构具体如下：
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918172852855-1841381254.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
 
<img src="https://img2024.cnblogs.com/blog/576536/202409/576536-20240918173039322-1806353458.png" width="700" loading="lazy" style="display: block; margin-left: auto; margin-right: auto">
<ul>
<li class="md-end-block md-p">ZR.Service[你的业务服务层类库]：提供自己业务数据Api接口调用；</li>
<li class="md-end-block md-p">ZR.ServiceCore [系统服务层类库]：提供系统Api接口；</li>
<li class="md-end-block md-p">ZR.Repository[仓库层类库]：方便提供有执行存储过程的操作； ZR.Model[实体层类库]：自己业务库表、数据传输对象；</li>
<li class="md-end-block md-p">ZR.Admin.WebApi：为Vue版或其他三方系统提供接口服务。</li>
<li class="md-end-block md-p">ZR.Tasks[定时任务类库]：提供项目定时任务实现功能；</li>
<li class="md-end-block md-p">ZR.CodeGenerator[代码生成功能]：包含代码生成的模板、方法、代码生成的下载。</li>
<li class="md-end-block md-p">ZR.Vue[前端UI]：vue2.0版本UI层(已经不再更新推荐使用vue3)。</li>
<li class="md-end-block md-p">document[文档]：数据库脚本(弃用)</li>
</ul>
<h2 class="md-end-block md-heading">项目优势</h2>
<ul>
<li class="md-end-block md-p">前端简化：无需编写登录、授权、认证模块，仅需专注于业务模块的开发。</li>
<li class="md-end-block md-p">后端即用：后台系统无需额外的二次开发，部署后即可直接使用。</li>
<li class="md-end-block md-p">前后端分离：前端与后端完全分离，支持独立的域名配置。</li>
<li class="md-end-block md-p">统一异常处理：实现全局异常的集中管理与处理。</li>
<li class="md-end-block md-p">代码生成：提供自定义的代码生成功能，提升开发效率。</li>
<li class="md-end-block md-p">轻量级依赖：系统依赖极少，仅需数据库支持即可运行，易于上手。</li>
<li class="md-end-block md-p">详尽文档：提供全面的文档支持，助力快速开发与部署。</li>
</ul>
<h2 class="md-end-block md-heading">项目地址</h2>
Github：https://github.com/izhaorui/Zr.Admin.NET
Gitee：https://gitee.com/izory/ZrAdminNetCore
文档地址：https://www.izhaorui.cn/doc/
<h2>最后</h2>
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。
也可以加入微信公众号 社区，与其他热爱技术的同行一起交流心得，共同成长！优秀是一种习惯，欢迎大家留言学习！
<img src="https://img2024.cnblogs.com/blog/576536/202408/576536-20240814113403514-910171896.png" alt="" style="display: block; margin-left: auto; margin-right: auto"> 
来源：https://www.cnblogs.com/1312mn/p/18418452

頁: [1]

琼殿技术论坛's Archiver

.NET 8 + Vue/UniApp 高性能前后端分离框架