vue-element-admin

dynamic-router 项目地址 gitee 前端： 基于 vue-element-admin 延用公司 【用户中心】那一套自己魔改的版本，在此基础之上重构。 后端： Go 的语法简洁，开发速度快，所以后端使用了 Go 结合 Gin 框架，做了一个简单的 CURD 服务。（主要是因为没人手协助，也只好自己写一个了。）这里不过多介绍后端。 前言 动态路由 由于公司业务需要，在权限验证与安全方面，要求是菜单根据权限动态控制。 在现有的项目当中，通过基于 vue-element-admin 项目提供的菜单权限控制，无法满足公司的具体业务需要。 实际上主要的目的是通过后端控制菜单权限。 因此也迭代出了两个版本， 版本二 也只是提供一个设计思路，具体复杂实现基于此套是是可以满足的。这里只做简单的阐述，具体实现可以结合源码。 版本一 在公司项目 【用户中心】 中，我采用的是通过后端菜单列表以及权限标识，做深度递归和匹配。这么写一部分原因是因为是在现有的接口文档基础之上做 魔改 ，第二点也是因为代码耦合度比较高，重构的话周期长（前后端都需要改，前端工作量会很大）。 Interceptor router.beforeEach(async (to, from, next) => { NProgress.start(); if (getToken()) { if (to.path ===

1、背景 　　最近，打算新开个项目，鉴于团队技术栈，选型.net core + vue，前后端分离。本打算捡现成的轮子的，github上大致逛了逛，总发现这样那样的不太适合心中那些“完美实践”，例如：Abp vnext好是好，但重度封装，且前端是基于jQuery，后续业务开发估计要大批量操作DOM，写大量JS；WTM虽然简单强大，但也不容易定制化。总之，各式各样的快速开发框架，尤其是后端，总有些不方便扩展或定制化的地方。于是，自己花了差不多半个月业余时间，手撸了一个具有系统管理基础功能的后台管理框架。 2、技术栈 前端：Vue + Vue-Router + Vuex + Axios 后端：.NET CORE + EF Core 数据库：MySQL 3、系统概览 4、github https://github.com/KINGGUOKUN/SystemManagement 5、系列文章 后续系列文章将会从如下几个方面进行讲解： 1）运行系统 2）系统认证——JWT 3 ）系统授权——后端 4）系统授权——前端 5）系统审计 6）业务日志 7）APM——EFK 8）Swagger文档 6、鸣谢 　　特别感谢vue-element-admin（ https://github.com/PanJiaChen/vue-element-admin 和 web-flash（ https:/

简介 在 《Abp vNext微服务实践》 系列文章中笔者逐一介绍了ABP微服务架构实践应用的过程，但是由于微服务架构过于复杂且配置十分繁琐，读者在亲自体验中往往不太顺利。在本章系列中我将基于ABP微服务架构重新整理构建更轻量实用的微服务，此外我还会会搭配多种微服务组合方式以提高大家对ABP微服务的理解，构建过程中我会将代码发布至GitHub。 本章系列只是将ABP微服务架构进行重新组合搭建，并不会修改ABP任何应用模块代码，也不会违背ABP设计原则，重构的目的只是为了让大家更好的理解微服务拆分，重构后微服务会更加轻量化可以开箱即用。 架构方案 ABP架构是基于DDD设计，基于模块化实现，所以使用ABP搭建微服务是十分灵活的，目前我会介绍两种架构方案。这两种方案均是基于ABP设计原理，大家可以根据喜好选择一种架构尝试，也可以根据本系列文章的分析和自己理解自主搭建。 基于ABP应用模块的服务和若干个基于ABP的微服务 这种模式实际上和ABP微服务架构是一致的，在这种模式中我会对ABP应用层逐一构建成微服务发布，并且这些微服务将有独立的解决方案。架构图如下： 架构分析 网关服务：基于Ocelot提供所有微服务API接口聚合、限流、熔断等功能，此外网关还提供权限聚合服务。 授权服务：为所有客户端(client)提供身份授权，给所有微服务包括网关提供身份认证。 ABP用户服务

前几篇分别介绍了abp vNext微服务框架、开发环境搭建和vue element admin前端框架接入，在vue element admin中实现用户角色管理基本功能后就可以开始进行业务开发了，本篇会详细的介绍如何在abp vNext中开发业务接口和前端页面实现。 业务接口开发 业务接口就是针对业务api接口，通过abp vNext微服务中实现并发布业务接口后，前端获取接口并进行界面开发，如此就实现了abp vNext微服务的前后端分离开发。 step1：创建实体（model） abp vNext微服务框架中的业务开发同样采用了经典的ddd架构风格和ef core 的code first模式，所以一切的业务都从领域模型(domain)开始。创建数据字典模型如下： public class DataDictionary : AuditedAggregateRoot<Guid> ,ISoftDelete { [NotNull] public string Name { get ; set ; } public string Code { get ; set ; } [NotNull] public string FullName { get ; set ; } public Guid? CategoryID { get ; set ; } public string Notes {

最近因为因为项目的原因，一直在寻找一款合适的前端模版，之前的 Vue 前端页面都是自己写的，写多了就烦了，因为功能都差不多，写来写去就没意思了。 所以在新项目中想看看市面上的 Vue 后台管理模版，找个现成的，改一改基本就 OK 了，团队也省事一些。 老实说，Vue 的生态还是相当丰富的，经典的、新生的后台管理框架都有，我这里和大家分享我们这次重点比较的三个。 vue-element-admin GitHub 地址： https://github.com/PanJiaChen/vue-element-admin 演示地址： https://panjiachen.github.io/vue-element-admin 这个项目名气还是挺大的，在我刚开始做 vhr 的时候，就有了解过这个项目，那个时候这个项目才刚刚开发没多久，star 都没几个，现在已然混成一方霸主了。 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 可以说，这个项目的功能还是比较全的，它里边将一些常见的功能模块如权限管理等都做好了，有的时候，你甚至会觉得这个项目有些臃肿。 我们来看一张效果图：

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。Vue Element Admin作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm)

前几篇分别介绍了abp vNext微服务框架、开发环境搭建和vue element admin前端框架接入，在vue element admin中实现用户角色管理基本功能后就可以开始进行业务开发了，本篇会详细的介绍如何在abp vNext中开发业务接口和前端页面实现。 业务接口开发 业务接口就是针对业务api接口，通过abp vNext微服务中实现并发布业务接口后，前端获取接口并进行界面开发，如此就实现了abp vNext微服务的前后端分离开发。 step1：创建实体（model） abp vNext微服务框架中的业务开发同样采用了经典的ddd架构风格和ef core 的code first模式，所以一切的业务都从领域模型(domain)开始。创建数据字典模型如下： public class DataDictionary : AuditedAggregateRoot<Guid> ,ISoftDelete { [NotNull] public string Name { get ; set ; } public string Code { get ; set ; } [NotNull] public string FullName { get ; set ; } public Guid? CategoryID { get ; set ; } public string Notes {

简介 之前的技术路线本来是angular的，后来经过一段时间的开发还是打算选择vue，原因是vue简单丰富，尽管angular规范强大，但是组件库都不太符合国人风格。看到GitHub上Vue Element Admin这么高的人气后就毫不犹豫的选择了这个后台管理框架。作为一个后端开发，刚刚下载Vue Element Admin框架时确实无从下手，但是一番研究之后也就适应了，今天就介绍下改造Vue Element Admin登录并对接vNext授权服务。vNext授权服务使用的是ids4框架，所以使用ids4框架授权的服务都可以参考该登录。 代码分析 根据Vue Element Admin作者的介绍，该框架登录需要两步，获取token和获取userinfo（用户信息）。Vue Element Admin作者公司的后端设计应该是用户信息中包括用户权限，所以Vue Element Admin（后称Admin）登录只需调两次接口。 在view路径的login中可以看到login的click事件： handleLogin() { this .$refs.loginForm.validate(valid => { if (valid) { this .loading = true this .$store.dispatch("user/userLogin", this .loginForm)

【今日推荐】：为什么一到面试就懵逼！>>> 文章目录 一、项目初始化 二、项目精简 三、项目配置 源码调试 四、项目结构 前端框架搭建 | 「小慕读书」管理后台 一、项目初始化 vue-element-admin mkdir aimooc-book-admin-dev cd aimooc-book-admin-dev git clone https://github.com/PanJiaChen/vue-element-admin cd vue-element-admin cnpm i npm run dev 报错：Cannot find module ‘core-js/modules/es6.regexp.constructor’ 解决：cnpm i -D core-js@2 二、项目精简 删除 src/views 下的源码，保留： dashboard：首页 error-page：异常页面 login：登录 redirect：重定向 对 src/router/index 进行相应修改 删除 /* Router Modules */ 下面的4条import 删除如下相关路由： documentation guide profile permission page directive role icon componentsRouter,chartsRouter

近日发现了一个非常优秀的后台管理系统，界面美观简洁，非常好看，使用Springboot,vue,element技术栈，项目地址 若依管理后台 ,所以，就先从GitHub上拉下来在本地跑起来看看效果。 一、管理系统界面 二、本地部署 1. 克隆项目到本地 #进入项目目录 cd /Users/kaiyiwang/Code/java/ git clone git@gitee.com:y_project/RuoYi-Vue.git 2. 前端项目 #进入前端项目 cd /Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi-ui # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 安装依赖 npm install # 构建生产环境 npm run build:prod 注：执行完成后在ruoyi-ui文件夹下面会生成一个dist文件夹 3. 后端项目 #进入后端项目目录 cd /Users/kaiyiwang/Code/java/RuoYi-Vue/ruoyi #maven编译打包 #source ~/.bash_profile (重新加载mvn) mvn clean install