chenjingyong
/
DSWMS
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
NET31
FEST
NET8
dev
WUTONG
master
djz_new
djz
temp
sdgslk
test
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
DSWMS/开发版dev/Vue.NetCore/Vol.Vue/html/cnblogs.html

630 lines
22 KiB
HTML
Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body id="cnblogs_post_body">
<h2>
这是一个可支持对前端、后台基础业务代码扩展的快速发开框架，现框架可直上手开发这些功能
</h2>
<blockquote>
<ul>
<li>Vol.WebApi类库可独立用于restful api服务单独部署,用于其他系统单独提供接口,直接上手编写业务代码即可。
</li>
<li>Vue+Vol.WebApi 可用于现有框架前后端分离进行开发
</li>
<li>Vol.Web类库可用于传统MVC+Razor方式进行项目开发
</li>
<li>Vol.Builder类库可作为一个独立的代码生成器,可生成cshtml页面、Vue页面、Model文件、Service与Repository.cs业务处理代码类
</li>
<li>可作为一个独立站点来发布静态html网页.
</li>
<li>可直接用于H5移动App开发<a title="H5开发看这里" href="http://132.232.2.109/app/guide" target="_blank">H5开发看这里</a>
</li>
</ul>
</blockquote>
<h2>
框架特点
</h2>
<blockquote>
<ul>
<li>支持前端、后台基础业务代码动态扩展，可在现有框架增、删、改、查、导入、导出、审核基础业务上扩展复杂的业务代码
</li>
<li>基本业务全部由框架完成，上手即可对基础业务以外的代码进行扩展
</li>
<li>上手简单，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可选) 及以上版本的开发环境
</li>
<li>学习成本低，封装了常用可扩展组件及Demo(前端基于Iview/Element-UI组件进行了二次封装、后台提供了大量的扩展方法)
</li>
<li>开发效率高,内定制开发的代码生成器,生成前端(Vue、后台代码),代码生成器已完成90%以上的重复工作，只需要在提供的扩展类型中实现其他业务
</li>
<li>前端vue页面表单下拉/多选框完成自动绑定数据源，不需要写任何代码,并支持扩展自定开发绑定。
</li>
<li>后台已完成权限、菜单、JWT等内部功能
</li>
</ul>
</blockquote>
<p class="desc" style="color:white; background: #009688;">
如果你没有做过webpack+vue工程化开发项目，可能会刚开始相当不适应，或者安装环境总是出问题，但只要你熟悉开发流程后，你会发现采用Vue开发比Jquery爽太多了。上手项目需重点了解基础Vue语法，特别是了解组件、路由及import的使用
</p>
<h2>
开发及依赖环境
</h2>
<p class="desc">
VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可选，没有redis的在appsetting.json中不用配置，默认使用内置IMemory)、<br>VsCode、Vue2.0（webpack、node.js,如果没有此环境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui
</p>
<h2>
项目运行
</h2>
<p class="desc">
如果你没有前端环境，请先安装node<br>
前端开发使用VsCode
</p>
<blockquote>
<ul>
<li>1、使用cmd命令切换至前端Vue项目.../VOL.Vue路径下,执行npm install命令(只有从来没执行过此命令的才执行npm install)
</li>
<li>2、运行后端项目：在后端项目路径.../VOL.WebApi/运行builder_run.bat<span>端口设置的是9991,运行前先看appsettings.josn配置属性说明</span>
</li>
<li>3、运行前端项目：在前端Vue项目路径.../VOL.Vue/运行run.bat（每次启动会进行编译，这个时间可能会有点长）
</li>
<li>4、输入http://localhost:8080访问
</li>
</ul>
</blockquote>
<h2>
功能介绍
</h2>
<table>
<tr>
<td style=" min-width: 140px;">
功能
</td>
<td>
描述
</td>
<td>
完成情况
</td>
</tr>
<tr>
<td>
用户管理(登陆、密码修改)
</td>
<td>
登陆、密码修改
</td>
<td>
√
</td>
</tr>
<tr>
<td>
角色管理
</td>
<td>
角色管理
</td>
<td>
√
</td>
</tr>
<tr>
<td>
权限分配
</td>
<td>
用户基础权限分配，后台支持多种权限控制方式,也可自行定义
</td>
<td>
√
</td>
</tr>
<tr>
<td>
用户权限/菜单静态化处理
</td>
<td>
为减少Redis读取数据传输量,对用户权限/菜单在本地服务器作静态化处理,只有在用户权限/菜单变化时才刷新redis缓存
</td>
<td>
√
</td>
</tr>
<tr>
<td>
JWT认证
</td>
<td>
采用前台端分离JWT认证，并且支持JWT过期动态刷新
</td>
<td>
√
</td>
</tr>
<tr>
<td>
异步队列批量写日志
</td>
<td>
框架封装了一个异步队列写日志,此前项目每天PV约150W左右，采用异步队列的方式批量写入日志非常顺畅
</td>
<td>
√
</td>
</tr>
<tr>
<td>
Repository
</td>
<td>
Repository作为数据提供，提供了常用EF方法封装
</td>
<td>
√
</td>
</tr>
<tr>
<td>
前端常用组件封装
</td>
<td>
此框架主要围绕表单组件进行开发，并且封装的组件都支持扩展
</td>
<td>
√
</td>
</tr>
<tr>
<td>
基础业务实现
</td>
<td>
已实现(表/主从表)的增、删、改、查、导入、导出、审核基础功能(前提建一张带主键的mysql/sqlserver表),这些基础业务不要写任何代码，直接用代码生成器生成即可，并且生成的代码支持其他业务代码扩展
</td>
<td>
√
</td>
</tr>
<tr>
<td>
代码生成器
</td>
<td>
代码生成器为可视化配置，提供了可配置属性的20多种，所有基础功能只需要勾选确认，生成的代码包括Vue/Vue扩展文件/路由,后台表相关的类(控制器/扩展控制器,业务接口/扩展业务接口,接口实现/扩展接口实现类)，支持单表表单、主从表单的代码生成
</td>
<td>
√
</td>
</tr>
<tr>
<td>
数据源预先配置
</td>
<td>
数据源作为前端下拉框/多选框的字典项源，支持key/value配置及sql从数据源加载配置
</td>
<td>
√
</td>
</tr>
<tr>
<td>
表单数据源自动绑定
</td>
<td>
如果一个表单带有多个下拉框，这里只需要配置数据源编号即可自动绑定
</td>
<td>
√
</td>
</tr>
<tr>
<td>
Redis/Memory缓存
</td>
<td>
已对Redis/Memory封装直接使用即可
</td>
<td>
√
</td>
</tr>
<tr>
<td>
Dapper
</td>
<td>
已对Dapper封装直接使用即可
</td>
<td>
√
</td>
</tr>
<tr>
<td>
扩展方法
</td>
<td>
框架封装了大量的扩展方法,如：通用实体校验(框架所有实现校验全部依赖于此扩展)扩展、string扩展、object扩展、表达式生成/解析扩展、文件操作扩展等
</td>
<td>
√
</td>
</tr>
<tr>
<td>
H5开发
</td>
<td>
可支持直接开发并部署H5页面 <a title="H5开发看这里" href="http://132.232.2.109/app/guide" target="_blank">H5开发看这里</a>
</td>
<td>
√
</td>
</tr>
<tr>
<td>
分库分表
</td>
<td>
分库分表操作
</td>
<td>
x
</td>
</tr>
<tr>
<td>
静态页面发布
</td>
<td></td>
<td>
x
</td>
</tr>
<tr>
<td>
消息推送
</td>
<td></td>
<td>
x
</td>
</tr>
</table>
<div style=" line-height: 40px; background: #e71616; margin-top: 20px; padding: 0px 30px; border-radius: 4px; color: white;">
<a style=" color: white;" href="http://132.232.2.109" target="_blank">框架文档、代码生成器、Demo看这里</a>
</div>
<div>
<img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/home.png">
</div>
<h2>
1、只读基础表单
</h2>
<div>
<p class="desc">
整个只读的基础表单的所有前后端代码，全部由代码生成器生成，代码生成器中几乎不需要配置，并支持并后端业务代码扩展，直接生成代码后，配置菜单权限即可
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/table1.png">
</div>
<h2>
2、自动绑定下拉框数据表单
</h2>
<div>
<p class="desc">
整个自动绑定下拉框数据表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，在代码生成器中只需要指定数据源编号，页面加载时会根据编号自动加载数据源并绑定
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/table2.png">
</div>
<h2>
3、启用图片支持、审核表单
</h2>
<div>
<p class="desc">
整个启用图片支持、审核表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，审核功能需要在菜单配置权限、代码生成器中勾选启用图片支持
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/table3.png">
</div>
<h2>
4、高级查询
</h2>
<div>
<p class="desc">
整个表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，查询字段、类型(下拉框、日期、TextArea等)、所在行与列都由代码生成器完成，不需要写任何代码
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/tablesearch4.png">
</div>
<h2>
5、单表新建、编辑
</h2>
<div>
<p class="desc">
单表新建、编辑所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，新建、编辑字段、类型(下拉框、日期、TextArea等)、所在行与列、字段是否只读、标签显示的长度等都由代码生成器完成，不需要写任何代码
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/editTbale1.png">
</div>
<h2>
6、主从表新建、编辑
</h2>
<div>
<p class="desc">
主从表新建、编辑所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，新建、编辑从表配置、字段、类型(下拉框、日期、TextArea等)、所在行与列、字段是否只读、标签显示的长度等都由代码生成器完成，不需要写任何代码
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/editTbale2.png">
</div>
<h2>
7、单列、多列Form表单
</h2>
<div>
<p class="desc">
单列、多列Form表单，已封装成组件，并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型(日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等)， 这些只需要配置JSON格式即可使用
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/form2.png">
</div>
<h2>
8、可配置的Table(自动/手动加载table数据、自动绑定数据源、编辑功能)
</h2>
<div>
<p class="desc">
单列、多列Form表单，已封装成组件，并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型(日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等)， 这些只需要配置JSON格式即可使用
</p>
<p class="desc">
从后台加载数据、自动绑定数据
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/loadtable.png">
<p class="desc">
可编辑的table，手动绑定数据、自动绑定数据源
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/form3.png">
</div>
<p class="desc">
表单与table混合使用
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/table+form.png">
<h2>
9、excel导入
</h2>
<div>
<p class="desc">
excel导入整个页面都由代码生成器生成，导入的字段、字段是否必填，下载模板也由代码生成器上配置(自己根据实际需要决定是否采用此方法)，导入时会验证是否为空与数据的合法性，逻辑校验自己实现扩展方法即可
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/importTable1.png">
</div>
<h2>
10、H5开发
</h2>
<div>
<p class="desc">
H5只是做了一个简单的Demo,如果你有H5开发经验，请忽略，如果你没有H5开发经验，<a title="H5开发看这里" href="http://132.232.2.109/app/guide" target="_blank">可看看这里</a>
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/h5.jpg">
</div>
<h2>
11、权限分配
</h2>
<div>
<p class="desc">
目前只实现了对用户的角色的Action进行权限分配
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/auth.png">
</div>
<h2>
12、菜单管理
</h2>
<div>
<p class="desc">
默认8种权限，可自行定义其他权限(代码生成器完后，直接在菜单上配置url(url路径为自动生成前端的router-&gt;path,从此处复制过过即可))
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/menu.png">
</div>
<h2>
13、个人中心
</h2>
<div>
<p class="desc">
个人中心目前只开发了页面与修改密码，其他功能自行根据需要实现
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/user.png">
</div>
<h2>
14、前端、后台业务代码动态扩展
</h2>
<div>
<p class="desc">
框架提供了前台后端扩展方法与属性,只需要根据自己的业务实现扩展业务。后台大部分都采用的委托扩展方法，这里只截了一张图前端数据加载事件的扩展方法，前后台完整扩展参考Demo：<a href="http://132.232.2.109/SellOrder">http://132.232.2.109/SellOrder</a>
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/extend.png">
</div>
<h2>
15、代码生成器
</h2>
<div>
<p class="desc">
代码生成器提供了20多种可配置的属性，可灵活配置显示、查询、编辑、导入、导出、主从关系等功能<a href="http://132.232.2.109/document/coder">点击看代码生成器文档</a>
</p><img src="https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/github/coder.png">
</div><br>
<p class="desc">
还有角色管理、日志管理、数据源管理、其他组件、后台代码等功能就不再介绍了,<a href="http://132.232.2.109">点这里看看就知道了</a>
</p><br>
<div class="desc desc-to">
<div>
此框架由代码生成器完成了大部分工作能极大减少代码量,并支持前台端代码的扩展。如果你对前后端分离开发的方式或H5开发有兴趣,那么希望此框架对能你有所帮助！
</div>
<div>
如果你觉得框架对你有用，帮忙点个星，非常感谢!
</div>
<div>
Demo地址：<a href="http://132.232.2.109">http://132.232.2.109</a> 帐号：admin666密码：123456（本地超级管理员帐号：admin密码123456）
</div>
<div>
GitHub地址：<a href="https://github.com/cq-panda/Vue.NetCore.git">https://github.com/cq-panda/Vue.NetCore.git</a>
</div>
<div>
如果你需要Quartz.Net做定时任务管理，你可以试试这个：<a href="https://github.com/cq-panda/Vue.NetCore.git">https://github.com/cq-panda/Quartz.NetUI</a>
</div>
<div>
(站点与MySql部署在同一个1G1核1M带宽的服务Centos服务上,访问可能会出现延迟现象)
</div>
<br>
<br>
</div>
</body>
</html>
<style>
#cnblogs_post_body
{
color: black;
font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
font-size: 15px;
}
#各个等级标题的颜色样式
#cnblogs_post_body h1 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 23px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2 {
background: #00BCD4;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #a3a3a3, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 20px;
font-weight: bold;
/* height: 25px; */
line-height: 37px;
margin: 18px 0 !important;
/* padding: 8px 0 5px 5px; */
padding: 2px 20px;
text-shadow: 2px 2px 3px #635555;
}
#cnblogs_post_body h3 {
background: #399ab2;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
background: #2B6600;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 16px;
font-weight: bold;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body table {
border-collapse: collapse;
}
#cnblogs_post_body table td{
color: rgba(111, 93, 93, 0.87);
font-size: 13px;
border-collapse: collapse;
padding: 7px;
min-width: 60px;
border: 1px solid #607d8b;
text-align: left;
}
#cnblogs_post_body img{
width: 100%;
margin-bottom: 30px;
margin-top: 10px;
}
#页面中a标签鼠标位置
#cnblogs_post_body h2:a{
color: rgb(235, 235, 235);
}
#cnblogs_post_body h2 a:hover{
color: rgb(255, 102, 0);
}
#页面中标题位置
#cnblogs_post_body h1{
color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
color: rgb(255, 102, 0);
}
#cnblogs_post_body h2{
color: rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
color: rgb(255, 102, 0);
}
#cnblogs_post_body h3{
color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
color: rgb(255, 102, 0);
}
#cnblogs_post_body h4{
color: rgb(235, 235, 235);
}
#cnblogs_post_body h4:hover{
color: rgb(255, 102, 0);
}
#cnblogs_post_body blockquote {
margin: 20px 0;
padding: 15px 20px 15px 60px;
font-size: 15px;
background: #f7ed91;
font-family: 'Microsoft Yahei';
box-shadow: 0 0 8px #AAA;
clear: both;
line-height: 1.6em;
color: #333;
}
#cnblogs_post_body blockquote li{
padding: 15px 2px 5px 5px;
/* line-height: 1.5; */
/* color: #000; */
border-bottom: 1px solid #ccc;
/* list-style-type: disc; */
margin-bottom: 0.5em;
}
#cnblogs_post_body .desc{
background: rgb(230, 250, 250);
padding: 10px 10px 10px 10px;
border: 1px dashed rgb(224, 224, 224);
font-family: 微软雅黑;
font-size: 13px;
}
#cnblogs_post_body .desc-to{
background: #4CAF50;
color: white;
}
#cnblogs_post_body .desc-to > div{
padding: 10px 16px;
}
#cnblogs_post_body .desc-to a{
color: yellow;
font-weight: bold;
margin-right: 25px;
}
</style>
<style>
body{
width: 1200px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;}
</style>
Reference in New Issue View Git Blame Copy Permalink