在随笔《基于SqlSugar的开发框架循序渐进介绍(28)-- 快速构建系统参数管理界面》中介绍了基于SqlSugar开发框架,构建系统参数管理的后端API部分,以及WInform界面部分内容,本篇随笔介绍基于Vue3+ElementPlus的前端界面开发过程。

1、Winform端界面的回顾

系统参数的信息,设计为包含一个大类参数目录和一个具体的参数项目,如下基于SQLServer的数据库表设计所示(基于PoweDesigner设计,便于生成Sql执行)。

利用现有表结构信息,基于代码生成工具快是生成相关的业务类文件,合并到系统框架中就可以了。

一般的业务代码都需要有CRUD等常规操作的代码,不过基于框架的基础上,我们只需要生成一个简单的类,继承自基类就默认具有了这些操作,不需要重复编写代码,简化了代码的处理并提高开发效率。

我们利用现有表结构信息,基于代码生成工具快是生成相关的业务类文件, 直接复制Core目录到解决方案项目上就可以了,如下所示。

Winform部分的界面,选择对应的界面生成【SqlSugar框架Winform界面生成】生成。

在弹出的【常规Winform界面生成】面板中,勾选相关的设置信息,定制UI界面,如下界面效果所示。

生成基础界面后,进行一定的微调处理,增加左侧树列表展示,最终编辑明细部分的界面效果如下所示。

2、Vue3+ElementPlus的前端界面开发

参考以上Winform界面的设计思路,我们也可以在Vue3+ElementPlus的前端界面上做类似的布局处理即可。

通用为了提高开发效率,Vue3+ElementPlus前端界面和前端的API访问类,我们同样通过配套的代码生成工具进行生成。

为了更好的进行相关界面的开发,我们设计了两套布局方式,一个是查询条件+列表展示,一个是树+查询条件+列表展示的布局,方便实际使用。

最终生成api访问得Typescript类和Vue3的视图文件,如下界面所示。

把视图文件和Api访问类文件,合并到项目目录中去,然后对视图文件适当进行一定的查询条件调整处理。

API类由于继承了基础BaseApi类,因此不需要额外的处理常规的CRUD操作方法,类似下面的关系处理。

BaseApi的ES6类里面定义了对应Web API基类里面的操作方法,如下所示。

因此生成的API类直接复制过去就可以了,如下代码所示。

而对于视图代码的处理,我们已经生成了相关的视图文件代码,因此进行一定的微调,把多余的条件放到折叠栏目里面即可,如下代码所示。

同时我们在树列表中,增加一些操作参数目录的处理操作。

基本上界面部分就差不多了。

另外,和其他常规开发一样,我们需要在路由器中增加新增的视图路由信息,以便前端能够进行访问,如下所示。

默认的入口为目录的index.vue的文件

最终界面效果如下所示。

编辑系统参数的界面效果如下所示

查看详细的界面效果类似

因此两种(Winform CS前端和BS的Vue3+Element前端)不同前端界面的效果类似,达到了多端统一效果,快速开发的目的。

结合框架的开发,可以让我们事半功倍,大多数的时间,可以专注在自定义UI的改进,以及业务逻辑的处理上,常规的界面开发,会变得容易简单化。

基于SqlSugar的开发框架循序渐进介绍(29)-- 快速构建系统参数管理界面-Vue3+ElementPlus的更多相关文章

  1. 基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

    随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...

  2. 基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用

    在我们实际项目开发过程中,往往需要根据实际情况,对组件进行封装,以更简便的在界面代码中使用,在实际的前端应用中,适当的组件封装,可以减少很多重复的界面代码,并且能够非常简便的使用,本篇随笔介绍基于El ...

  3. 基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理

    在做一些常规应用的时候,我们往往需要确定条件的内容,以便在后台进行区分的进行精确查询,在移动端,由于受限于屏幕界面的情况,一般会对多个指定的条件进行模糊的搜索,而这个搜索的处理,也是和前者强类型的条件 ...

  4. 基于SqlSugar的开发框架循序渐进介绍(21)-- 在工作流列表页面中增加一些转义信息的输出,在后端进行内容转换

    有时候,为了给前端页面输出内容,有时候我们需要准备和数据库不一样的实体信息,因为数据库可能记录的是一些引用的ID或者特殊字符,那么我们为了避免前端单独的进行转义处理,我们可以在后端进行统一的格式化后再 ...

  5. 基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

    在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+El ...

  6. 基于SqlSugar的开发框架循序渐进介绍(26)-- 实现本地上传、FTP上传、阿里云OSS上传三者合一处理

    在前面介绍的随笔<基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式[Options]处理常规上传和FTP文件上传>中介绍过在文件上传处理的过程中,整合了本 ...

  7. 基于SqlSugar的开发框架循序渐进介绍(12)-- 拆分页面模块内容为组件,实现分而治之的处理

    在早期的随笔就介绍过,把常规页面的内容拆分为几个不同的组件,如普通的页面,包括列表查询.详细资料查看.新增资料.编辑资料.导入资料等页面场景,这些内容相对比较独立,而有一定的代码量,本篇随笔介绍基于V ...

  8. 基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用

    刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和 ...

  9. 基于SqlSugar的开发框架循序渐进介绍(17)-- 基于CSRedis实现缓存的处理

    在一个应用系统的开发框架中,往往很多地方需要用到缓存的处理,有些地方是为了便于记录用户的数据,有些地方是为了提高系统的响应速度,如有时候我们在发送一个短信验证码的时候,可以在缓存中设置几分钟的过期时间 ...

  10. 基于SqlSugar的开发框架循序渐进介绍(28)-- 快速构建系统参数管理界面

    在参照一些行业系统软件的时候,发现一个做的挺不错的系统功能-系统参数管理,相当于把任何一个基础的系统参数碎片化进行管理,每次可以读取一个值进行管理,这样有利于我们快速的处理业务需求,是一个挺好的功能. ...

随机推荐

  1. k8s ingress

    ingress   ingress为k8s集群中的服务提供了入口,可以提供复制均衡,ssl终止和基于名称的虚拟主机,再生产环境中,常用的ingress有Treafik,Nginx,HAProxy,Is ...

  2. vue3.0知识整理与总结

    在性能方面,对比Vue2.x,性能提升了1.3~2倍左右:打包后的体积也更小了. 非兼容的功能 一些和Vue2.x版本改动较大的语法,在Vue3存在兼容问题 v-modal   组件通信  v-for ...

  3. [复现]DASCTF Sept X 浙江工业大学秋季挑战赛-PWN

    hehepwn 一开始泄露stack地址,然后写入shellcode返回到shellcode执行 from pwn import * context.os = 'linux' context.log_ ...

  4. SpringBoot——实现WebService接口服务端以及客户端开发

    参考:https://blog.csdn.net/qq_43842093/article/details/123076587 https://www.cnblogs.com/yinyl/p/14197 ...

  5. 在app中如何使weib-view不铺满全屏,自适应页面

    // #ifdef APP-PLUS //自建webview var currentWebview = this.$scope.$getAppWebview(); var height = this. ...

  6. Spring boot 入门-从idea 创建一个Spring boot应用!

    1.File->New Project. http://start.springboot.io 2.下一步. 3.选择依赖. 4.生成项目. 5.运行. 6.设置Tomcat端口 src\mai ...

  7. ububtu20.04下MySQL的安装及使用Navicat连接数据库

    ububtu20.04下最新版本MySQL的安装及使用Navicat连接数据库 一.MySQL的安装 先通过如下命令更新软件包: sudo apt-get update 再通过如下命令安装MySQL: ...

  8. 同步协程的必备工具: WaitGroup

    1. 简介 本文将介绍 Go 语言中的 WaitGroup 并发原语,包括 WaitGroup 的基本使用方法.实现原理.使用注意事项以及常见的使用方式.能够更好地理解和应用 WaitGroup 来协 ...

  9. CentOS Docker安装、镜像加速

    CentOS Docker安装 方法一:使用官方安装脚本自动安装 # 安装命令: curl -fsSL https://get.docker.com | bash -s docker --mirror ...

  10. swagger-ui 导出离线文档md格式

    <dependency> <groupId>io.github.swagger2markup</groupId> <artifactId>swagger ...