首页 > 其他分享 >.NET 7 + Vue 权限管理系统 小白快速上手

.NET 7 + Vue 权限管理系统 小白快速上手

时间:2024-08-15 10:38:58浏览次数:10  
标签:Vue DncZeus 项目 前端 管理系统 js NET

前言

今天给大家推荐一个超实用的开源项目《.NET 7 + Vue 权限管理系统 小白快速上手》,DncZeus的愿景就是做一个.NET 领域小白也能上手的简易、通用的后台权限管理模板系统基础框架。

不管你是技术小白还是技术大佬或者是不懂前端Vue 的新手,这个项目可以快速上手让我们从0到1,搭建自己的通用后台权限管理系统,掌握后台权限管理系统的搭建技巧以及系统基础框架。

它不仅涵盖了从环境搭建到核心功能实现的全过程,而且特别注重让初学者也能轻松上手。 无论你是希望通过实战来加深对新技术的理解,还是想要为自己的项目升级权限管理功能,让这个项目成为大家的好帮手。期待我们都能够从小白变大佬!

项目介绍

DncZeus 是一个基于 .NET 7 和 Vue.js 的前后端分离的通用后台管理系统框架。

后端使用 .NET 7 和 Entity Framework Core 构建,前端则采用了流行的 iView UI 框架配合 Vue.js。

该项目实现了前后端的动态权限管理和控制以及基于 JWT 的用户令牌认证机制,从而确保前后端交互流畅。

请注意:DncZeus 不是一个完整的业务系统,但它提供了大多数业务系统所需的开发场景,帮助 .NET 开发者快速构建出交互良好、体验优秀且功能丰富的单页应用程序 (SPA)。

项目特点

  • 技术栈:后端使用 .NET 7 + EF Core 构建,前端采用基于 Vue.js 的 iView (iview-admin) 进行前后端分离开发。
  • 新手友好:设计考虑新手上手简易,代码逻辑清晰。
  • 权限管理:实现通用后台权限管理,精确到页面访问和操作按钮的控制。

项目技术

  • .NET 7
  • ASP.NET Core WebAPI
  • JWT 令牌认证
  • AutoMapper
  • Entity Framework Core 7
  • .NET 7 依赖注入
  • Swagger UI
  • Vue.js (ES6 语法)
  • iView (基于 Vue.js 的 UI 框架)

环境工具

1、Node.js (同时安装 npm 前端包管理工具)

2、Visual Studio 2022

3、VS Code 或者其他前端开发工具

4、git 管理工具

5、MySQL、PostgreSQL 或 SQL Server (SQL Server 2012+)

适合人群

了解 DncZeus 所需的知识DncZeus 让初级 .NET 开发者也能轻松上手,因此后端项目并未涉及复杂的架构和封装,代码逻辑直观易懂。

为了更好地熟悉和运用 DncZeus,你需要了解以下技术:

  • .NET 7:确保你能看懂并理解后端的实现和工作方式。
  • Vue.js:前端实现的基础。
  • iView:基于 Vue.js 的 UI 框架,DncZeus 的前端 UI 交互正是基于此框架实现。

如果你对这些技术还不熟悉,建议先学习一些基础知识再使用 DncZeus

以下是学习这些技术的官方资源:

下载项目

1、Git工具下载

首先请确保本地开发环境已安装了Git管理工具,然后在需要存放本项目的目录

打开Git 命令行工具Git Bash Here,在命令行中输入如下命令:

git clone https://github.com/lampo1024/DncZeus.git

以上命令就把 DncZeus 的源代码拉取到你的本地开发机上。

2、手动下载

如果你不愿意使用Git管理工具下载 DncZeus 的源代码,也可以在 Github 手动下载。

打开地址 https://github.com/lampo1024/DncZeus,找到页面中"Code" 的按钮点击,然后在弹出的对话框中点击"Download ZIP" 按钮,即可下载 DncZeus 的源代码,具体如下图所示:

安装依赖

1、前端项目

安装前端依赖

1、使用 Git 管理工具,无需退出当前工具,进入DncZeus 的前端项目目录:

cd DncZeus/DncZeus.App

2、如果你是手动下载的源代码,请在该目录下打开命令行工具。

3、在命令行中输入以下命令来安装前端依赖包:

npm install

或者使用简写命令:

npm i

2、后端项目

配置数据库连接

1、在 Visual Studio 中打开解决方案 DncZeus.sln

2、根据你的开发环境(默认示例为 SQL Server Localdb),修改配置文件 appsettings.json 中的数据库连接字符串。

示例默认连接字符串为:

"ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=DncZeus;Trusted_Connection=True;MultipleActiveResultSets=true"
  }

初始化系统数据

1、打开项目根目录中的 Scripts 文件夹。

2、执行与你的数据库类型对应的脚本文件以初始化系统数据。

从 v2.1.0 版本开始,DncZeus 支持 MySQL、PostgreSQL 和 MSSQL 三种数据库类型!

你可以根据需求选择适合自己的数据库。

至此,所有的准备工作已经完成。

现在,你可以开始体验 DncZeus 框架了!

启动项目

1、启动后端服务

使用 Visual Studio 打开 DncZeus 根目录中的解决方案文件 DncZeus.sln。(也可以使用 VS Code 进行 .NET 7 的开发。)

设置 DncZeus.API 项目为默认启动项并运行此项目。

浏览器中打开地址: http://localhost:xxxx/swagger ,即可查看已实现的后端 API 接口服务。

2、启动前端服务

在命令行中进入到 DncZeus 的前端项目目录 DncZeus.App

运行如下命令以启动前端项目服务:

npm run dev

成功运行后,前端项目服务会在浏览器中自动打开地址 http://localhost:xxxx

项目演示

1、登录信息

  • 超级管理员用户名administrator
  • 普通管理员用户名admin
  • 密码111111
  • 体验地址:https://dnczeus.codedefault.com

尝试使用不同的用户名登录系统,体验不同角色的菜单权限差异。

注意:这是一个个人项目,体验服务器配置较低,请轻度使用,感谢您的理解和支持!

国内镜像地址:https://gitee.com/rector/DncZeus

2、项目效果

登录页面

系统首页

用户权限

 

消息中心

项目地址

Gitee:https://gitee.com/rector/DncZeus

Github:https://github.com/lampo1024/DncZeus

总结

如果你觉得这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助,欢迎随时留言。也可以加入微信公众号[DotNet技术匠] 社区,与其他热爱技术的同行一起交流心得,共同成长!

标签:Vue,DncZeus,项目,前端,管理系统,js,NET
From: https://www.cnblogs.com/1312mn/p/18358437

相关文章

  • vue表单输入绑定
    使用v-model指令实现双向数据绑定的集合v-model是v-on和v-bind指令的语法糖(指令集合)可以使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定,他会根据控件类型自动选取正确的方法来更新元素。加上v-model后,只要视图的数据发生了改变,那么vm中的model层的......
  • Kubernetes(k8s)基础及原理
    什么是Kubernetes(k8s)Kubernetes是一个开源的容器编排系统,用于自动化地部署、扩展和管理容器化应用程序。Kubernetes源自谷歌内部的Borg系统,旨在实现容器化应用的高效管理。它提供了服务发现、负载均衡、自动扩缩容等功能,并支持跨主机的容器管理。Kubernetes的设计以“一切......
  • 基于SpringBoot+MySQL+SSM+Vue.js的药房药品采购系统(附论文)
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的药房药品采购系统(附论文......
  • 基于SpringBoot+MySQL+SSM+Vue.js的旅游咨询系统
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的旅游咨询系统,用户,管理......
  • 在K8S中,Kubernets资源限制是如何配置的,是否根据Qos?
    在Kubernetes中,资源限制是通过Pod的配置来设置的,它们定义了Pod可以请求和使用的最大资源量。资源限制分为两类:CPU和内存。这些限制不仅帮助系统管理员控制资源使用,还对Pod的服务质量(QoS)有重要影响。1.资源限制的配置CPU限制:CPU限制是通过spec.containers[].resources.lim......
  • 如何在实验室信息管理系统实现不定行,不定列检测?
    前言实验室信息管理系统,即LIMS(LaboratoryInformationManagementSystem),它是由计算机和应用软件组成,能够完成实验室数据和信息的收集、分析、报告和管理。早期的LIMS系统大多基于计算机局域网,专门针对一个实验室的整体环境而设计,是一个包括了信号采集设备、数据通讯软件、数......
  • 还没用过这款微信管理系统的抓紧了!!!
      已经是2024年了,自动化一词相信大家早已不在陌生。他渗透在各行各业,为人类生活提供了便捷,那微信也可以实现自动化管理了你知道吗?接下来我给大家分享一下。   个微管理系统是网页版登录的,不需要下载就可使用。   它可以批量自定义时间段自定义时间间隔多微......
  • vue按键修饰符
    事件的类型有以下四类:js事件分为四类:鼠标事件:click、mouseover、dbclick、mousedown、mouseout...键盘事件:keydown、keypress、keyup..窗体事件:load、reseize、scroll...表单事件:blur、focus、input、change、select传统方式的弊端:需要了解每个数值的键码为了在必要的......
  • [开题报告]FLASK框架实验室数据集管理系统3g944(源码+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在科研领域,实验室数据是推动科学进步与创新的重要基石。随着实验技术的不断进步和科研项目的日益增多,实验室产生的数据量呈爆炸式增长。然......
  • 040.Vue3入门,在Vue3中引入ElementUI
    1、npminstallelement-plus--save,安装UI 2、main.js代码如下://import'./assets/main.css'//引入下面这两行importElementPlusfrom'element-plus'import'element-plus/dist/index.css'import{createApp}from'vue'importApp......