.netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架
框架采用.NetCore + Vue前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增、删、改、查、导入、导出、上传、审核基础功能。只需要简单了解即可上手开发
框架基础功能已构建完成,可直接上手开发功能
- Vol.WebApi类库可独立用于restful api服务单独部署,用于其他系统单独提供接口,直接上手编写业务代码即可。
- Vue+Vol.WebApi 可用于现有框架前后端分离进行开发
- Vol.Web类库可用于传统MVC+Razor方式进行项目开发
- Vol.Builder类库可作为一个独立的代码生成器,可生成cshtml页面、Vue页面、Model文件、Service与Repository.cs业务处理代码类
- 可作为一个独立站点来发布静态html网页.
- 可直接用于H5移动App开发H5开发看这里
框架特点
- 支持前端、后台基础业务代码动态扩展,可在现有框架增、删、改、查、导入、导出、审核基础业务上扩展复杂的业务代码
- 基本业务全部由框架完成,上手即可对基础业务以外的代码进行扩展
- 上手简单,需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可选) 及以上版本的开发环境
- 学习成本低,封装了常用可扩展组件及Demo(前端基于Iview/Element-UI组件进行了二次封装、后台提供了大量的扩展方法)
- 开发效率高,内定制开发的代码生成器,生成前端(Vue、后台代码),代码生成器已完成90%以上的重复工作,只需要在提供的扩展类型中实现其他业务
- 前端vue页面表单下拉/多选框完成自动绑定数据源,不需要写任何代码,并支持扩展自定开发绑定。
- 后台已完成权限、菜单、JWT等内部功能
如果你没有做过webpack+vue工程化开发项目,可能会刚开始相当不适应,或者安装环境总是出问题,但只要你熟悉开发流程后,你会发现采用Vue开发比Jquery爽太多了。上手项目需重点了解基础Vue语法,特别是了解组件、路由及import的使用
开发及依赖环境
VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可选,没有redis的在appsetting.json中不用配置,默认使用内置IMemory)、
VsCode、Vue2.0(webpack、node.js,如果没有此环境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui
项目运行
如果你没有前端环境,请先安装node
前端开发使用VsCode
- 1、使用cmd命令切换至前端Vue项目.../VOL.Vue路径下,执行npm install命令(只有从来没执行过此命令的才执行npm install)
- 2、运行后端项目:在后端项目路径.../VOL.WebApi/运行builder_run.bat端口设置的是9991,运行前先看appsettings.josn配置属性说明
- 3、运行前端项目:在前端Vue项目路径.../VOL.Vue/运行run.bat(每次启动会进行编译,这个时间可能会有点长)
- 4、输入http://localhost:8080访问
功能介绍
| 功能 | 描述 | 完成情况 |
| 用户管理(登陆、密码修改) | 登陆、密码修改 | √ |
| 角色管理 | 角色管理 | √ |
| 权限分配 | 用户基础权限分配,后台支持多种权限控制方式,也可自行定义 | √ |
| 用户权限/菜单静态化处理 | 为减少Redis读取数据传输量,对用户权限/菜单在本地服务器作静态化处理,只有在用户权限/菜单变化时才刷新redis缓存 | √ |
| JWT认证 | 采用前台端分离JWT认证,并且支持JWT过期动态刷新 | √ |
| 异步队列批量写日志 | 框架封装了一个异步队列写日志,此前项目每天PV约150W左右,采用异步队列的方式批量写入日志非常顺畅 | √ |
| Repository | Repository作为数据提供,提供了常用EF方法封装 | √ |
| 前端常用组件封装 | 此框架主要围绕表单组件进行开发,并且封装的组件都支持扩展 | √ |
| 基础业务实现 | 已实现(表/主从表)的增、删、改、查、导入、导出、审核基础功能(前提建一张带主键的mysql/sqlserver表),这些基础业务不要写任何代码,直接用代码生成器生成即可,并且生成的代码支持其他业务代码扩展 | √ |
| 代码生成器 | 代码生成器为可视化配置,提供了可配置属性的20多种,所有基础功能只需要勾选确认,生成的代码包括Vue/Vue扩展文件/路由,后台表相关的类(控制器/扩展控制器,业务接口/扩展业务接口,接口实现/扩展接口实现类),支持单表表单、主从表单的代码生成 | √ |
| 数据源预先配置 | 数据源作为前端下拉框/多选框的字典项源,支持key/value配置及sql从数据源加载配置 | √ |
| 表单数据源自动绑定 | 如果一个表单带有多个下拉框,这里只需要配置数据源编号即可自动绑定 | √ |
| Redis/Memory缓存 | 已对Redis/Memory封装直接使用即可 | √ |
| Dapper | 已对Dapper封装直接使用即可 | √ |
| 扩展方法 | 框架封装了大量的扩展方法,如:通用实体校验(框架所有实现校验全部依赖于此扩展)扩展、string扩展、object扩展、表达式生成/解析扩展、文件操作扩展等 | √ |
| H5开发 | 可支持直接开发并部署H5页面 H5开发看这里 | √ |
| 分库分表 | 分库分表操作 | x |
| 静态页面发布 | x | |
| 消息推送 | x |
1、只读基础表单
整个只读的基础表单的所有前后端代码,全部由代码生成器生成,代码生成器中几乎不需要配置,并支持并后端业务代码扩展,直接生成代码后,配置菜单权限即可
2、自动绑定下拉框数据表单
整个自动绑定下拉框数据表单的所有前后端代码,全部由代码生成器生成,并支持并后端业务代码扩展,在代码生成器中只需要指定数据源编号,页面加载时会根据编号自动加载数据源并绑定
3、启用图片支持、审核表单
整个启用图片支持、审核表单的所有前后端代码,全部由代码生成器生成,并支持并后端业务代码扩展,审核功能需要在菜单配置权限、代码生成器中勾选启用图片支持
4、高级查询
整个表单的所有前后端代码,全部由代码生成器生成,并支持并后端业务代码扩展,查询字段、类型(下拉框、日期、TextArea等)、所在行与列都由代码生成器完成,不需要写任何代码
5、单表新建、编辑
单表新建、编辑所有前后端代码,全部由代码生成器生成,并支持并后端业务代码扩展,新建、编辑字段、类型(下拉框、日期、TextArea等)、所在行与列、字段是否只读、标签显示的长度等都由代码生成器完成,不需要写任何代码
6、主从表新建、编辑
主从表新建、编辑所有前后端代码,全部由代码生成器生成,并支持并后端业务代码扩展,新建、编辑从表配置、字段、类型(下拉框、日期、TextArea等)、所在行与列、字段是否只读、标签显示的长度等都由代码生成器完成,不需要写任何代码
7、单列、多列Form表单
单列、多列Form表单,已封装成组件,并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型(日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等), 这些只需要配置JSON格式即可使用
8、可配置的Table(自动/手动加载table数据、自动绑定数据源、编辑功能)
单列、多列Form表单,已封装成组件,并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型(日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等), 这些只需要配置JSON格式即可使用
从后台加载数据、自动绑定数据

可编辑的table,手动绑定数据、自动绑定数据源
表单与table混合使用

9、excel导入
excel导入整个页面都由代码生成器生成,导入的字段、字段是否必填,下载模板也由代码生成器上配置(自己根据实际需要决定是否采用此方法),导入时会验证是否为空与数据的合法性,逻辑校验自己实现扩展方法即可
10、H5开发
H5只是做了一个简单的Demo,如果你有H5开发经验,请忽略,如果你没有H5开发经验,可看看这里
11、权限分配
目前只实现了对用户的角色的Action进行权限分配
12、菜单管理
默认8种权限,可自行定义其他权限(代码生成器完后,直接在菜单上配置url(url路径为自动生成前端的router->path,从此处复制过过即可))
13、个人中心
个人中心目前只开发了页面与修改密码,其他功能自行根据需要实现
14、前端、后台业务代码动态扩展
框架提供了前台后端扩展方法与属性,只需要根据自己的业务实现扩展业务。后台大部分都采用的委托扩展方法,这里只截了一张图前端数据加载事件的扩展方法,前后台完整扩展参考Demo:http://132.232.2.109/SellOrder
15、代码生成器
代码生成器提供了20多种可配置的属性,可灵活配置显示、查询、编辑、导入、导出、主从关系等功能点击看代码生成器文档
还有角色管理、日志管理、数据源管理、其他组件、后台代码等功能就不再介绍了,点这里看看就知道了
.netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架的更多相关文章
- dotnetcore vue+elementUI 前后端分离架二(后端篇)
前言 最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍 前后端分离架构实战. 涉及的技术栈 服务端技术 mysql 本项目使用mysql 作为持 ...
- dotnetcore+vue+elementUI 前后端分离 三(前端篇)
说明: 本项目使用了 mysql employees数据库,使用了vue + axois + element UI 2.0 ,演示了 单页程序 架构 ,vue router 的使用,axois 使用, ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- Vue .Net 前后端分离框架搭建
[参考]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 一.前端开发环境搭建 1.零基础 Vue 开发环境搭建 打开运行Vue项目 2.nodejs http-proxy-middle ...
- 一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器
一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
- SpringBoot+Jpa+SpringSecurity+Redis+Vue的前后端分离开源系统
项目简介: eladmin基于 Spring Boot 2.1.0 . Jpa. Spring Security.redis.Vue的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 ...
- vue+springboot前后端分离实现单点登录跨域问题处理
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登 ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- gin+vue的前后端分离开源项目
该项目是gin+vue的前后端分离项目,使用gorm访问MySQL,其中vue前端是使用vue-element-admin框架简单实现的: go后台使用jwt,对API接口进行权限控制.此外,Web页 ...
随机推荐
- 【selenium】-自动化测试的前提
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.为什么要做自动化? 2.是否适合做自动化? 时间:时间如果很紧,连做功能测试的时间都很紧张,是没有时间做自动化的. 人员:如果都是初级的测 ...
- CCPC 网络赛
array 做法 比赛中的表现..... 已经无法言语形容了. 题意是,查询前缀中大于某个数字的 mex,在线. 一下把问题转化为偏序问题.... 带修主席树?????这下好,直接一箭穿心,武将被移除 ...
- POJ-1984-Navigation Nightmare+带权并查集(中级
传送门:Navigation Nightmare 参考:1:https://www.cnblogs.com/huangfeihome/archive/2012/09/07/2675123.html 参 ...
- Codeforces Round #381 (Div. 2) C. Alyona and mex(无语)
题目链接 http://codeforces.com/contest/740/problem/C 题意:有一串数字,给你m个区间求每一个区间内不含有的最小的数,输出全部中最小的那个尽量使得这个最小值最 ...
- 不要小看小小的 emoji 表情
前言 好久没更新了,最近事比较多,或许下个月就会恢复到正常的发文频次. 这篇文章得从一个 emoji 表情开始,我之前开源的一个 IM 项目中有朋友提到希望可以支持 emoji 表情传输. https ...
- Netty源码分析 (五)----- 数据如何在 pipeline 中流动
在上一篇文章中,我们已经了解了pipeline在netty中所处的角色,像是一条流水线,控制着字节流的读写,本文,我们在这个基础上继续深挖pipeline在事件传播 Unsafe 顾名思义,unsaf ...
- 【LeetCode】105#从前序与中序遍历序列构造二叉树
题目描述 根据一棵树的前序遍历与中序遍历构造二叉树. 注意: 你可以假设树中没有重复的元素. 例如,给出 前序遍历 preorder = [3,9,20,15,7] 中序遍历 inorder = [9 ...
- JSP四大作用域属性范围
JSP四大作用域分别为:page, request ,session, application . 第一个作用域是page,他只在当前页面有效,也就是用户请求的页面有效,当当前页面关闭或转到其他页面时 ...
- 关于volatile关键字的最佳解释
直接放原博主链接,真的写得非常好,看懂这个面试官问再多也不怕了: https://www.cnblogs.com/dolphin0520/p/3920373.html Java并发编程:volatil ...
- ASP.NET Core SignalR:集线器Hubs
一.什么是集线器hubs 通过SignalR的集线器hubs中定义的方法,服务器可以调用连接中的客户端定义的方法,而客户端也可以调用服务器端集线器中定义的方法.SignalR负责实现了客户端和服务器之 ...