AI专业者开发社区 1 号成员
  •  0 回帖  •  33 浏览  •  4 个月前
   

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document

框架采用 dotnetcore+vue+elementUI 前后端分离，并且支持前端、后台代码业务动态扩展，框架内置了一套有着 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 core3.1、VsCode mysql/sqlservcer 2012、redis(可选) 及以上版本的开发环境
  • 学习成本低，封装了常用可扩展组件及 Demo(前端基于 Iview/Element-UI 组件进行了二次封装、后台提供了大量的扩展方法)
  • 开发效率高, 内定制开发的代码生成器, 生成前端 (Vue、后台代码), 代码生成器已完成 90% 以上的重复工作，只需要在提供的扩展类型中实现其他业务
  • 前端 vue 页面表单下拉 / 多选框完成自动绑定数据源，不需要写任何代码, 并支持扩展自定开发绑定。
  • 后台已完成权限、菜单、JWT 等内部功能

如果你没有做过 webpack+vue 工程化开发项目，可能会刚开始相当不适应，或者安装环境总是出问题，但只要你熟悉开发流程后，你会发现采用 Vue 开发比 Jquery 爽太多了。上手项目需重点了解基础 Vue 语法，特别是了解组件、路由及 import 的使用

开发及依赖环境

VS2019 、.NetCore3.1 、EFCore3.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可选，没有 redis 的在 appsetting.json 中不用配置，默认使用内置 IMemory)、
VsCode、Vue2.0/3.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/ 运行 dev_run.bat端口设置的是 9991, 运行前先看 appsettings.josn 配置属性说明
  • 3、运行前端项目：在前端 Vue 项目路径.../VOL.Vue/ 运行 run.bat（每次启动会进行编译，这个时间可能会有点长）
  • 4、输入 http://localhost:8080 访问 
    •         </ul>



































    </blockquote>

    功能介绍 

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>

            </tr>



































    </tbody>


































</table></div>

    1、只读基础表单

    整个只读的基础表单的所有前后端代码，全部由代码生成器生成，代码生成器中几乎不需要配置，并支持并后端业务代码扩展，直接生成代码后，配置菜单权限即可 

    <img src="http://masterfile.aigcbbs.cn/Fh0MPW4PUWbM8D6zk7DBX8pGrjAb" alt="" class="medium-zoom-image">
    </div>

    2、自动绑定下拉框数据表单

    整个自动绑定下拉框数据表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，在代码生成器中只需要指定数据源编号，页面加载时会根据编号自动加载数据源并绑定 

    <img src="http://masterfile.aigcbbs.cn/FidW2gywa0mKPhH0qMc-IfXKk0ac" alt="" class="medium-zoom-image">
    </div>

    3、启用图片支持、审核表单

    整个启用图片支持、审核表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，审核功能需要在菜单配置权限、代码生成器中勾选启用图片支持 

    <img src="http://masterfile.aigcbbs.cn/FnLGw4XdSeI6xl8EBk5GVS1K9DdW" alt="" class="medium-zoom-image">
    </div>

    4、高级查询

    整个表单的所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，查询字段、类型 (下拉框、日期、TextArea 等)、所在行与列都由代码生成器完成，不需要写任何代码 

    <img src="http://masterfile.aigcbbs.cn/FiQNd08W0nCwo7q8ExpxFBTVirbE" alt="" class="medium-zoom-image">
    </div>

    5、主从表新建、编辑

    主从表新建、编辑所有前后端代码，全部由代码生成器生成，并支持并后端业务代码扩展，新建、编辑从表配置、字段、类型 (下拉框、日期、TextArea 等)、所在行与列、字段是否只读、标签显示的长度等都由代码生成器完成，不需要写任何代码 

    <img src="http://masterfile.aigcbbs.cn/FvfNGP6EiJc6tysD5l_9xDyq2WoV" alt="" class="medium-zoom-image">
    </div>

    6、单列、多列 Form 表单

    单列、多列 Form 表单，已封装成组件，并且支持组件扩展。可配置显示的列的数量、是否只读、列的数据类型 (日期、下拉框、TextArea、列宽、自动绑定数据源、图片上传等)， 这些只需要配置 JSON 格式即可使用 

    <img src="http://masterfile.aigcbbs.cn/Fp1azDssXufHhz11jwCJVSGa5BBp" alt="" class="medium-zoom-image">
    </div>

    7、excel 导入

    excel 导入整个页面都由代码生成器生成，导入的字段、字段是否必填，下载模板也由代码生成器上配置 (自己根据实际需要决定是否采用此方法)，导入时会验证是否为空与数据的合法性，逻辑校验自己实现扩展方法即可 

    <img src="http://masterfile.aigcbbs.cn/FuzIoGZ05XakrJo1lRqLR1F0SALI" alt="" class="medium-zoom-image">
    </div>

    8、H5 开发

    H5 只是做了一个简单的 Demo, 如果你有 H5 开发经验，请忽略，如果你没有 H5 开发经验，可看看这里 

    <img src="http://masterfile.aigcbbs.cn/FqdXC3PfbOy38NYk2bkaL7sJs01a" alt="" class="medium-zoom-image">
    </div>

    11、权限分配

    目前只实现了对用户的角色的 Action 进行权限分配 

    <img src="http://masterfile.aigcbbs.cn/FhKxxwlYkNh7qKDi0z3_AkJikUbn" alt="" class="medium-zoom-image">
    </div>
    此框架由代码生成器完成了大部分工作能极大减少代码量, 并支持前台端代码的扩展。如果你对前后端分离开发的方式或 H5 开发有兴趣, 那么希望此框架对能你有所帮助！
    如果你觉得框架对你有用，帮忙点个星，非常感谢!
    如果有什么问题或建议，提 issue 或加 QQ283591387
     
    QQ 群：913189178
    Demo 地址：http://www.volcore.xyz/ 帐号：admin666 密码：123456（本地超级管理员帐号：admin 密码 123456）
    如果你需要 Quartz.Net 做定时任务管理，你可以试试这个：https://github.com/cq-panda/Quartz.NetUI
    (站点与 MySql 部署在同一个 1G1 核 1M 带宽的 Centos 服务器上, 访问可能会出现延迟现象)
    如果打不开页面，请使用谷歌或火狐浏览器，如果是 360 切换至极速模式或者尝试刷新下页面 
            <br>
        <br>
    </div>

     

    功能 描述 完成情况
    用户管理 (登陆、密码修改) 登陆、密码修改 √
    角色管理 角色管理 √
    权限分配 用户基础权限分配，后台支持多种权限控制方式, 也可自行定义 √
    用户权限 / 菜单静态化处理 为减少 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