查询页面elementui-.NETCore+Vue+ElementUI前后端分离框架

2023-08-29 0 1,024 百度已收录

cnblogs.com/-clouds/p/11633786.html

框架采用.NETCore+Vue实现前后端分离,支持后端及后台代码业务的动态扩展。 框架拥有一套20多种属性配置的代码生成器,可以灵活配置生成的代码和代码生成器接口配置。 完成后即可生成单表(主表)的增、删、改、查、导入、导出、上传、审计等基本功能。您只需要简单了解即可开始开发

1、框架基本功能已经建立,功能可直接开发

2. 框架特点

如果你从来没有做过webpack+vue工程开发项目,刚开始的时候可能会比较不适应,或者安装环境总是出现问题查询页面elementui,但是只要熟悉了开发流程,你就会发现使用Vue开发比Jquery好很多。项目上手需要重点了解Vue基本句型,尤其是组件、路由和导入的使用

3、开发及依赖环境

VS2017、.NetCore2.1、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可选,如果没有redis则appsetting.json中无需配置,默认使用外部IMemory),

VsCode、Vue2.0(webpack、node.js,如果没有该环境请自行搜索:vuewebpacknpm)、Vuex、axios、promise、IView、Element-ui

四、项目运作

如果没有后端环境,请先安装node

使用VsCode进行后端开发

1、使用cmd命令切换到后端Vue项目.../VOL.Vue路径,执行npminstall命令(只有从未执行过该命令的情况下才执行npminstall)

2.运行前端项目:在前端项目路径.../VOL.WebApi/run builder_run.bat 端口设置为9991,运行前查看appsettings.josn配置属性说明

3、运行后端项目:在后端Vue项目路径.../VOL.Vue/中运行run.bat(每次启动都会编译,这个时间可能有点长)

4.输入:8080接入

5. 功能介绍

6. 框架文档、代码生成器

圆顶:

1. 只读基本表单

整个只读基本形态的所有前端和后端代码都是由代码生成器生成的。 代码生成器几乎不需要配置,并且支持和前端业务代码扩展。 直接生成代码后查询页面elementui,配置菜单权限。

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

手动绑定下拉框数据表单的所有前后端代码均由代码生成器生成,并支持和前端业务代码扩展。 在代码生成器中,只需要指定数据源编号,页面加载时就会根据编号手动加载数据。 源和绑定

3.启用图像支持和评论表单

启用图片支持以及审核表单的所有前后端代码全部由代码生成器生成,并支持和前端业务代码扩展。 初审功能需要在菜单配置权限和代码生成器中勾选Enable image support

4.高级查询

整个表单的所有前后端代码全部由代码生成器生成,并支持和前端业务代码扩展。 查询数组、类型(下拉框、日期、TextArea等)、行、列全部由代码生成器完成,无需编写任何代码

5. 创建和编辑单个表

创建和编辑单表的所有前后端代码,全部由代码生成器生成,并支持和扩展前端业务代码,创建和编辑数组、类型(下拉框、日期、TextArea、等)、行列以及字段是否只读、标签显示的粗细等全部由代码生成器完成,无需编写任何代码

6.创建并编辑主从表

创建和编辑主从表的所有前后端代码,全部由代码生成器生成,并支持和扩展前端业务代码,创建和编辑从表配置、字段、类型(drop-下框、日期、TextArea等)、行列、字段是否只读、标签显示的粗细等全部由代码生成器完成,无需编写任何代码

7. 单列和多列Form表单

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

8.可配置表格(手动/自动加载表格数据、自动绑定数据源、编辑功能)

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

从后台加载数据,自动绑定数据

可编辑表格、自动绑定数据、自动绑定数据源

表格和表格混合使用

9.Excel导出

excel导出的整个页面是由代码生成器生成的。 导出的数组和字段是否为必填项,代码生成器上也配置了下载模板(您可以根据实际需要决定是否使用该方法)。 导出时会验证是否为空以及数据的合法性,可以通过扩展的方式实现逻辑校准

10.H5开发

H5只是做了一个简单的demo,如果您有H5开发经验请忽略,如果您没有H5开发经验,

11.权限分配

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

12.菜单管理

默认有8种权限,其他权限可以自己定义(代码生成完成后,直接在菜单上配置url(url路径为手动生成的后端的router->路径,复制即可)从这里开始))

13.个人中心

个人中心目前只开发了页面和修改密码,其他功能根据需要实现

14、前后端业务代码动态扩展

框架提供了前端及前端扩展方法和属性,只需要根据自身业务实现业务的扩展即可。 后端大部分采用委托扩展的方式。 这里仅给出后端数据加载风暴的扩展方法截图。 前后端的完整扩展请参考Demo:

15. 代码生成器

代码生成器提供了20多个可配置属性,可以灵活配置显示、查询、编辑、导入、导出、主从关系等功能。点击查看代码生成器文档

还有角色管理、日志管理、数据源管理等功能,其他组件以及后台代码就不介绍了。

七、总结

在这个框架中,大部分工作都是由代码生成器完成,可以大大减少代码量,并且支持前端代码的扩展。

如果你对前后端分离开发或者H5开发的方法感兴趣,希望这个框架可以帮助到你!

如果您觉得该框架对您有用,请给我一个star,非常感谢!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 elementui 查询页面elementui-.NETCore+Vue+ElementUI前后端分离框架 https://www.wkzy.net/game/178582.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务