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

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

在随笔《基于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的改进,以及业务逻辑的处理上,常规的界面开发,会变得容易简单化。

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com

目录
打赏
0
0
0
0
60
分享
相关文章
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
73 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
71 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
59 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
59 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
3月前
|
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
152 58
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
186 1
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
153 3
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
66 1
Vue框架快速入门
Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国人,中文文档也很完善。当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。
1359 0
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
157 1

热门文章

最新文章