VUE+Ant Design Vue+.Net Core搭建后台框架-(1)效果展示

最新推荐文章于 2024-05-01 07:54:26 发布
最新推荐文章于 2024-05-01 07:54:26 发布
阅读量1.2k 收藏 6
点赞数 1
分类专栏： .net vue ant design vue 文章标签： vue.js .netcore 前端 ant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichao19897314/article/details/123145750
版权
.net 同时被 3 个专栏收录
37 篇文章 9 订阅
订阅专栏
vue
10 篇文章 0 订阅
订阅专栏
ant design vue
10 篇文章 1 订阅
订阅专栏

本专栏内容将一步一步带大家使用VUE+Ant Design Vue+.Net Core技术搭建一套后台框架

该框架具备以下功能:

后台

  (1)集成JWT。

（2)自定义用户认证

  (3)自定义用户授权

  (4)接口自定义授权访问 

前端

  (1)系统登录+用户Token鉴权

  (2)顶部导航栏

  (3)左侧二级菜单导航模块

  (4)使用tab标签实现多页面

  (5)路由导航守卫,axios导航守卫,vuex存储

  (6)动态路由构建，动态顶部菜单和导航菜单

  (7)组件缓存

  (8)全局数据加载效果

部署

  (1)开发环境部署

  (2)生产环境部署(配置IIS反向代理)

该专栏将一步步剥析以上具体的实现

我们展示以下系统效果

系统动态效果

主框架页面

多标签页面

 登录页面

接下来我们开启学习之旅

(下一篇)VUE+Ant Design Vue+.Net Core搭建后台框架-(2)搭建VUE项目

小耕家的喵大仙
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE3.0+Antdv+Asp.net webapi学生信息管理系统
08-30
VUE3.0+Antdv+Asp.net webapi开发的学生信息管理系统，主要包括学生管理，班级管理，成绩管理，课程管理，以及个人信息，用户管理，角色管理，菜单管理等组成部分，SQL Server 2012数据库，具体详细内容可参考本人的相关系列文章。
c# .net core 3.1 好用的通用后台管理 前后端分离框架
06-26
前后端分离框架，基于.NET5/.NET6实现的通用权限管理平台。整合最新技术高效快速开发，前后端分离模式，开箱即用。 代码量少、学习简单、通俗易懂、功能强大、易扩展、轻量级，让web开发更快速、简单高效（从此告别996），解决70%的重复工作，专注您的业务，轻松开发从现在开始！
ASP.NET Core Web + Bootstrap企业级快速后台开发框架：内置模块、数据库支持，员工管理、部门管理、定时任务配置、系统日志等
最新发布
QDAtpoyX的博客
05-01 1379
总结来说，ASP.NET Core Web + Bootstrap的企业级快速后台开发框架提供了丰富的内置模块和功能，包括用户管理、部门管理、菜单管理、角色权限设置、日志管理、新闻管理等。本文将介绍一个基于ASP.NET Core Web和Bootstrap的企业级快速后台开发框架，该框架具有内置的模块如用户管理、部门管理、菜单管理、角色权限设置、日志管理、新闻管理等。内置模块如：用户管理、部门管理、菜单管理、角色权限设置、日志管理、新闻管理等。角色管理：角色菜单权限分配，角色对应权限，员工属于某个角色。
.net core开源项目记录
moon的博客
03-29 1363
本项目适合有一定NetCore和 vue基础的开发人员基于.NET5/.NET7实现的通用权限管理平台（RBAC模式）。整合最新技术高效快速开发，前后端分离模式，开箱即用。代码量少、学习简单、通俗易懂、功能强大、易扩展、轻量级，让web开发更快速、简单高效（从此告别996），解决70%的重复工作，专注您的业务，轻松开发从现在开始！
Blazor + Ant Design + .NET 5快速开发框架（6）AntDesignAdmin登录界面
qq_32174441的博客
02-07 5956
登录界面 登录界面设计时候想用一个背景图然后加一个登录框即可，简单大气，所以我们先设计一个登录框，用到了AntDesign的卡片，然后上面加入用户名和密码的输入框，加一个按钮即可，我们来看下效果。 <div style="padding:30px"> <Card Bordered="true" Title=@("用户登录") Style="width:400px" Hoverable="true"> <Body>
.NET Core前后端分离快速开发框架(Core.3.0+AntdVue)
xgc862520575的博客
11-18 3872
.NET Core前后端分离快速开发框架(Core.3.0+AntdVue) 目录 引言 简介 环境搭建 开发环境要求 基础数据库构建 数据库设计规范 运行 使用教程 全局配置 快速开发 管理员登录 系统用户管理 系统角色管理 权限管理 接口秘钥管理 系统日志 单库事务 跨库事务 读写分离分库分表 常见疑问 如何进行联表查询 如何切换数据库类型 如何使用多个数据库 引言 时间...
Net和Vue的结合
net511的专栏
08-24 837
要将Net与Vue集成在一起，最简单的方法是使用Net Web API来作为后端，然后使用Vue作为前端。Net是一种用于构建Web应用程序和服务的技术框架，而Vue则是一种用于构建用户界面的渐进式JavaScript框架。是一个非常复杂的构成，全栈工程师的价值是非常大的，创业公司不可能像大公司一样，各方面的人才都有。为此，鄙人不才，把多年来的工作成果，整理成一个通用的后台框架。Net与Vue是两个广受欢迎的技术框架，它们各自解决了不同的问题。所以需要一个多面手，各种活都能一肩挑，独挡多面的万金油。
vue-flow-topology:Flow Topology 是基于Vue-cli3.0 + Ant Design Vue + JSPlumb开发的一个大数据流水线拓展流程工作台，该项目可以看做是一个独立的 Vue 项目，也可以嵌入到其他vue项目中使用，新版会作为优先版本持续迭代
05-07
版本二：基于 Vue-cli3.0 + Ant Design Vue + JSPlumb 开发（ simple 分支 ）。 特性 :check_mark_button: 支持画布重绘、拖拽、放大、缩小功能 :check_mark_button: 支持鼠标滚轮缩放画布功能 :check_mark_button: ...
my-vue-home-design:商店的Vue页面设计
04-07
可视化页面装修基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能操作指引：左侧组件区域拖拽至中间布局区域中间区域的组件支持上下拖拽排序，删除组件点击中间区域的组件，右侧会打开组件支持的配置...
Blog.Core 开箱即用的企业级前后端分离【 .NET Core6.0 Api + Vue 2.x + RBAC】权限框架
05-29
Blog.Core 开箱即用的企业级前后端分离【 .NET Core6.0 Api + Vue 2.x ... 前端Blog.Admin.Pro使用AntDesignVue框架（设计中，未完全实现）； 铁粉奖励：如果参与上述功能和其他付费功能开发，可半价获取商业授权；）。
MF00639-.NET Core前后端分离快速开发框架.zip
08-13
本框架为.NET Core3.1+Ant Design Vue版 本框架旨在极大的提高开发效率 使用技术栈： 后端：采用.NET Core平台，ASP.NET Core3.1，C#语言（使用反射等高级技术），Entity FrameworkCore（数据库ORM框架）。 使用...
基于vue3的电子病历编辑器源码.zip
11-30
- Vue3 常见的UI组件库如Element Plus、Ant Design Vue等，用于快速构建用户界面。 7. **部署和打包**： - 使用Vue CLI的构建工具进行项目打包，生成可供Electron使用的静态资源，通过Electron-builder进行打包...
一个基于.Net+Vue开发的开源权限工作流系统
成长的足迹
10-29 1919
今天给大家推荐一个开源权限工作流系统，一个快速开发框架。
Vue + .NetCore前后端分离，不一样的快速发开框架(提供Vue2/Vue3版本)
weixin_48449171的博客
07-14 1651
框架内置了大量的通用组件可直接使用,并内置了基于本框架定制开发的代码生成器，尽量避免重复性代码编写。帐号：admin666密码：123456（本地超级管理员帐号：admin密码123456)框架不仅仅是快速开发，更多的是倾向于业务代码扩展的编写与代码规范。
Asp.net+Vue+EmelentUI的实现(一)框架搭建
热门推荐
学而时习之
05-06 3万+
vue对于web端的开发优势是很明显的，特别是单页应用，响应、数据等都很明显，而且开发效率也高，又有很多资料可查、有社区的支持。但vue对于开发较大的项目时，则会显得笨重，因为编译成了单页应用，非常臃肿，首次加载变的很慢。而且在使用VS来开发时，虽然VS可以创建vue的项目，但是基于node.js来编译的，不好操作，而且经常出现卡死现象，于是就考虑有没有其他的方式来应用vue。 vue本质上是一...
快速搭建Vue框架
Geosen_Jira的博客
04-21 2386
Vue框架搭建教程
前端Vue框架面试题大全
青梅煮码
05-19 2362
谈一下你对 MVVM 的认识 mvvm ：Model-View-ViewModel的缩写，model数据层，数据模型，仅仅关注数据本身View视图层是用户操作界面 也可称为，当ViewModel对Model进行更新的时候，会通过数据绑定更新到view viewmodel 业务逻辑层 view需要什么数据 ViewModel要提供这个数据，view有哪些操作，...
.NET 7+Vue 前后端分离框架Admin.Core
weixin_68436326的博客
02-21 186
前言中台admin是前后端分离权限管理系统，Admin.Core为后端项目，基于.NET 7.0开发。支持多租户、数据权限、动态 Api、任务调度、OSS 文件上传、滑块拼图验证、多数据库，分布式缓存、分布式事务等接口文档一览项目地址Github https://github.com/zhontai/Admin.Core技术栈dotnet7FreeSqlAutofacCAPMapster特点快速启...
5个值得推荐的Vue后台管理框架
sdasdas12的博客
12-14 6275
介绍几个优秀好看的 Vue 后台管理框架，每个框架都有自己的特点和优势，开发者可以根据项目需求选择适合的框架。无论是国内还是国外的框架，都有完善的文档和社区支持，可以帮助开发者快速上手并解决问题。希望以上推荐对您有帮助！
ant design vue src/core/icons.js 引入svg 不显示
05-28
如果您在使用 Ant Design Vue 时，引入 SVG 图标后发现无法显示，可能是以下原因导致的： 1. 检查 SVG 图标路径是否正确，路径错误可能导致无法正确加载图标。 2. 确保您的 SVG 图标文件内容正确，可以尝试使用其他 SVG 图标文件进行测试。 3. 确认您的 Vue 项目是否正确设置了 SVG Loader。可以在 webpack 配置文件中添加如下代码： ``` { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } } ``` 其中，`resolve('src/icons')` 是您存放 SVG 图标的目录，`symbolId` 是指定 SVG Sprite 的 ID。 4. 检查您的 ant design vue 配置文件是否正确设置，可以在 `vue.config.js` 文件中添加如下代码： ``` const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } } ``` 其中，`resolve('src/icons')` 是您存放 SVG 图标的目录，`symbolId` 是指定 SVG Sprite 的 ID。 希望这些信息能够帮助您解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小耕家的喵大仙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值