easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方“前端教程”,选择“星标”
每天前端开发干货第一时间送达!
转自:我心依旧。cnblogs.com/-clouds/p/11633786.html
框架采用.NET Core + 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开发:http://132.232.2.109/app/guide
二、框架特点
支持前端、后台基础业务代码动态扩展,可在现有框架增、删、改、查、导入、导出、审核基础业务上扩展复杂的业务代码
基本业务全部由框架完成,上手即可对基础业务以外的代码进行扩展
上手简单,需要.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访问
五、功能介绍
六、框架文档、代码生成器
Dome:http://132.232.2.109/
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开发经验,http://132.232.2.109/app/guide
11、权限分配
目前只实现了对用户的角色的Action进行权限分配
12、菜单管理
默认8种权限,可自行定义其他权限(代码生成器完后,直接在菜单上配置url(url路径为自动生成前端的router->path,从此处复制过过即可))
13、个人中心
个人中心目前只开发了页面与修改密码,其他功能自行根据需要实现
14、前端、后台业务代码动态扩展
框架提供了前台后端扩展方法与属性,只需要根据自己的业务实现扩展业务。后台大部分都采用的委托扩展方法,这里只截了一张图前端数据加载事件的扩展方法,前后台完整扩展参考Demo:http://132.232.2.109/SellOrder
15、代码生成器
代码生成器提供了20多种可配置的属性,可灵活配置显示、查询、编辑、导入、导出、主从关系等功能点击看代码生成器文档
还有角色管理、日志管理、数据源管理、其他组件、后台代码等功能就不再介绍了。
七、总结
此框架由代码生成器完成了大部分工作能极大减少代码量,并支持前台端代码的扩展。
如果你对前后端分离开发的方式或H5开发有兴趣,那么希望此框架对能你有所帮助!
如果你觉得框架对你有用,帮忙点个星,非常感谢!
Demo地址:http://132.232.2.109 帐号:admin666密码:123456(本地超级管理员帐号:admin密码123456)
GitHub地址:https://github.com/cq-panda/Vue.NetCore.git
如果你需要Quartz.Net做定时任务管理,你可以试试这个:https://github.com/cq-panda/Quartz.NetUI
(站点与MySql部署在同一个1G1核1M带宽的服务Centos服务上,访问可能会出现延迟现象)
觉得本文对你有帮助?请分享给更多人
关注「前端教程」,一起提升前端技能!
好文章,我在看❤️
easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战相关推荐
- vue后端框架mysql_vue框架之前后台交互、element-ui
vue框架之前后台交互.element-ui vuex(了解) 注:可以完成任意间组件信息交互(移动端) vuex是实现任何组件间的信息交互,可以理解为全局的一个单例,为任何一个组件共享vue仓库里的 ...
- 视频教程-SpringBoot2+Vue+AntV前后端分离开发项目实战-Java
SpringBoot2+Vue+AntV前后端分离开发项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思 ...
- Vue+ElementUI+.netcore前后端分离框架开发项目实战
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Smile and stop complaining about th ...
- js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言 本篇将基于Python 3. ...
- html 和jsp 引入jquery_不用jsp怎么实现前后端交互?给萌新后端的ajax教程(1)
众所周知jsp是已经入土的技术,虽然仍有不少老项目在用,但已经不值得花时间学习了,当然了解一下也是可以的.如果你是一位萌新后端,不想了解jsp,或者想做一个前后端分离的项目,想在纯html网页上实现前 ...
- vue怎么和python后端交互_Vue - 与后端交互
零:与后端交互 - ajax 版本1 - 出现了跨域问题 前端:index.htmlhtml> Vue与后端交互 - 出现了跨域问题 加载数据 复制代码 后端:main.pyfrom flask ...
- JavaScript 学习笔记(八)前后端交互;Ajax进行前后端交互
目录 一.前后端 二.前后端接口 三.Ajax 1. ajax接口步骤 2. 返回为json格式 四.请求方式 五.案例:登录 一.前后端 前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
- python如何实现前后端交互_笔记 | 实现前后端交互的方法
前端工程师的职责:1.UI重构 2.在正确的区域渲染出服务端的数据. 毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列前端工程师应该必备的同后端打交道的常用技能. 1. ...
- Nodeway--基于node.js的轻量级前后端分离框架
一. 背景 1.什么是前后端分离? 目前,大家一致认同的前后端分离的例子就是SPA(Single-pageapplication),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式 ...
最新文章
- 浏览器获取浏览历史_浏览器历史的未来
- Transformer哪家强?Google爸爸辨优良!
- 这是自动驾驶的战国时期,也是技术发展的黄金时期
- 余承东:华为 P50 系列无 5G 版本,但依然流畅
- 多个微服务控制台的多窗口展示
- Ramdisk文件系统的制作与调试运行
- 深度学习笔记一:稀疏自编码器
- 【转】从源码分析PreparedStatement是如何防止SQL注入的?
- 哪些情况不适合建索引
- nlv sqlserver_SQLServer数据类型
- 用python提取图片主要颜色_用Python提取图片主要颜色
- 17、小写数字转大写数字
- Sentinel2 哨兵2数据下载方法(USGS)-史上最全讲解
- java计算机毕业设计青岛地区常见昆虫图鉴与论坛源码+数据库+lw文档+系统
- 语句摘抄——第19周
- springboot闲置衣物捐赠系统毕业设计源码021009
- java获取北京时间系统时间全球各地时间。
- Windows Server 2012 R2 Datacenter ms17-010漏洞出现此更新不适用于你的计算机
- 【蓝桥杯每日一练:木头加工】
- python语法--循环语句(10)
热门文章
- LeetCode ZigZag Conversion
- 身份证校验原理和PHP实现
- list在codeblocks和vs2013中编译提示不同
- Table——高淇JAVA300讲笔记之Guava
- [Grid Layout] Specify a grid gutter size with grid-gap
- xpath的数据和节点类型以及XPath中节点匹配的基本方法
- Trie的C++实现及HDU1251,hdu1671
- UNIX网络编程——客户/服务器程序设计示范(一)
- 用OpenCV实现图像的水平镜像(翻转)变换和竖直镜像(翻转)变换(垂直镜像变换)的源码
- Hibernate validation annonation