首页 > 其他分享 >使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理

时间:2023-12-26 14:37:09浏览次数:51  
标签:Web 代码生成 界面 编码 代码 接口 生成 API


在前面随笔《在Winform应用中增加通用的业务编码规则生成》,我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能,本篇随笔介绍基于后端Web API接口,实现快速的Vue3+ElementPlus前端界面的开发整合,同样是基于代码生成工具实现快速的前端代码的生成处理。

1、通用的业务编码规则的管理功能

在前面随笔我们介绍了一个通用的业务编码规则的管理功能,通过代码生成工具Database2Sharp一步步的生成相关的后端和Winform、WPF的界面,进行了整合,通过利用代码生成工具Database2sharp生成节省了常规功能的开发时间,并且实现的界面整体一致的风格。

通用的业务编码规则的用途

在我们很多应用系统中,往往都需要根据实际情况生成一些编码规则,如订单号、入库单号、出库单号、退货单号等等,我们有时候根据规则自行增加一个函数来生成处理,不过我们仔细观察后,发现它们的编码规则有很大的共通性,因此可以考虑使用一些通用的业务编码规则生成,从而在系统中统一维护即可。

数据库设计信息:

设计一个通用的编码规则,对这些元素进行组合配置,数据库设计如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF

利用代码生成工具Database2sharp生成基于《SqlSugar开发框架》的后端接口:

首先我们通过上面PowerDesigner工具生成SQL脚本后,创建对应的数据库表,从代码生成工具中展开数据库信息。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_02


先展开数据库和表的列表信息,然后选择《SqlSugar框架代码生成》,选择刚才创建的表信息,生成SqlSugar框架代码,如下界面所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_03

生成的代码整合到基础框架上,实现我们业务代码的增量开发。同理对于Winform的代码和WPF的代码,选择相关的功能入口,生成相关的界面代码整合到对应的项目上即可,这里不再赘述。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_04

最终Winform和WPF管理界面如下所示。

其中Winform端的业务编码的管理界面和查看的对应编码的界面如下所示,供参考设计界面处理。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_代码生成_05

Winform端的编辑单个业务编码规则的界面如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_06

 

同样,WPF管理端的界面也可以重用具体的业务编码规则处理,WPF应用端的界面如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_07

 WPF应用端的通用业务编码规则的编辑界面如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_08

 因此,不管对于Winform还是WPF的界面,他们的展示方式都是类似的,我们可以重用业务层对通用编码规则的定义。

 

2、使用代码生成工具快速开发Vue3+ElementPlus前端应用

我们在开始Vue3的前端界面生成之前,我们先来看看WebAPI的控制器代码,由于使用代码生成工具生成的控制器,具有标准的CRUD等常规的接口,因此我们只需要实现一些自定义的接口即可,由于自定义的接口也在Service层实现了,如下代码所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_代码生成_09

这个Service层的接口里面的一些函数代码,我们是根据数据库表的信息一一生成,基本不需要过多改动,只需要增加一个自定义的测试生成业务编码的接口即可。 

而由于Service层的实现了逻辑处理的接口,因此Web API的控制器代码也是比较简单,只是需要继承一下基类即可,如下代码所示。

namespace WebApi.Controllers
{
    /// <summary>
    /// 业务表编码规则 业务控制器
    /// </summary>
    public class TableNumberController : BusinessController<TableNumberInfo, string, TableNumberPagedDto>
    {       
        private ITableNumberService _tablenumberService;

        /// <summary>
        /// 构造函数,并注入基础接口对象
        /// </summary>
        /// <param name="tablenumberService">服务接口对象</param>
        public TableNumberController(ITableNumberService tablenumberService) :base(tablenumberService)
        {
            this._tablenumberService = tablenumberService;
        }

        /// <summary>
        /// 根据定义表名、单据头、分割符1、分割符2,生成业务编码。如果生成错误,返回空字符串
        /// </summary>
        /// <param name="tableNameOrCode">表名或代码</param>
        /// <returns></returns>
        /// <returns></returns>
        [HttpGet]
        [Route("GenerateNumber/{tableNameOrCode}")]
        public async Task<string> GenerateNumber(string tableNameOrCode)
        {
            return await _tablenumberService.GenerateNumber(tableNameOrCode);
        }
    }
}

自定义的接口实现,也只需简单的调用一下接口即可。

有了前面这些准备,我们来看看如何实现快速的Vue3+ElementPlus前端界面的开发整合。

在代码生成工具的数据库列表右键上找到上面的功能入口(或者在工具栏的Web界面代码生成中选择)

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_10

或者从工具栏中选择【Vue3+Element界面代码生成】

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_11

最后选择该业务处理的表,生成相关的界面代码,其中包括了对WebAPI 的远程调用封装的API客户端类,以及View视图界面。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_12

其中Vue3+Element前端的API类如下位置复制过去,放在Src/api目录下,这个是统一放置相关Web API调用的JS的ES6类。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_13

其中这个tablenumber的类也是有基类的,我们基于基类的基础上添加我们的自定义接口调用接口,如下是实际的代码。

// 导入API基类对象,默认具有Get/GetAll/Create/Update/Delete/BatchDelete/SaveImport/Count等接口
import BaseApi from './base-api';
// 业务类自定义接口实现, 通用的接口已经在BaseApi中定义
class Api extends BaseApi {
  // 参考下面案例,增加自定义函数
  // GET 方法例子
  // 根据条件计算记录数量
  // async GetCount(params: object) {
  //   return await this.HttpGet<number>(this.baseurl + "count", params);
  // }
  // POST 方法例子
  // 创建对象
  // async Create(data: object) {
  //   return await this.HttpPost<boolean>(this.baseurl + `create`, data);
  // }
  // PUT 方法例子
  // 更新对象
  // async Update(data: object) {
  //   return await this.HttpPut<boolean>(this.baseurl + `update`, data);
  // }
  // DELETE 方法例子
  // 删除指定ID的对象
  // async Delete(id: number | string) {
  //   return await this.HttpDelete<boolean>(this.baseurl + `${id}`);
  // }

  // 根据定义表名、单据头、分割符1、分割符2,生成业务编码。如果生成错误,返回空字符串
  async GenerateNumber(tableNameOrCode: string) {
    return await this.HttpGet<string>(this.baseurl + `GenerateNumber/${tableNameOrCode}`);
  }
}

// 构造业务表编码规则 Api实例,并传递业务类接口地址
export default new Api('/api/tablenumber/');

我们注释掉的代码,是统一生成,供参考生成自定义的接口调用代码的,其中GenerateNumber 是我们手工添加的一个自定义Web API的封装调用,对应着Web API的接口规则。

而视图代码,我们复制到对应的views目录上即可,具体位置可以根据实际的需要移动目录处理,由于是一些通用的功能,我们把它放到了Security权限的视图目录中。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_14

 使用代码生成工具,直接生成的视图包含了几个文件,这些文件就是各个模块的组件定义,如下视图代码所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_代码生成_15

它们最终是整合呈现在index.vue的视图入口中,我们可以适当的调整一下相关的界面代码。

在我们测试界面前,我们需要把静态路由添加到系统中去,我们找到对应模块的路由定义信息,如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_16

 添加上刚才的页面路由地址,如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_17

 至此,我们构建了一个完整的界面和入口了,可以在VSCode的控制台中运行前端界面测试了,测试需要结合其中Web API的后端。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_API_18

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_WPF_19

我们可以根据实际的效果进行界面的微调处理和完善即可,主要是排版布局的一些微调。

运行界面,登录后进入界面,可以查看相关的菜单,然后查看《业务编码规则》界面信息了。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_代码生成_20

查看界面和编辑界面分属不同的视图界面,查看界面效果如下所示。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_代码生成_21

 编辑界面效果如下所示,微调了界面效果,并增加了一个测试生成的按钮。

使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理_代码生成_22

结合前面的WInform和WPF管理端的界面,达到了三者前端共同管理的效果了。

 

标签:Web,代码生成,界面,编码,代码,接口,生成,API
From: https://blog.51cto.com/wuhuacong/8983280

相关文章

  • 代码生成器20231218
      生成器 ......
  • 自动化和API接口可以应用在哪些工作场景中?
    随着科技的不断进步和发展,新一代的网络安全技术也在不断涌现。其中,VMLogin指纹浏览器以其独特的自动化和API接口功能,为各行各业的网络安全和数据隐私保护提供了可靠的解决方案。一、自动化功能:任何具有重复性的工作可以在VMLogin通过自动化完成。您可以使用Selenium、Puppeteer、RE......
  • 图扑 Web 组态软件在污水处理系统中的应用
    随着我国对环境保护的日益重视,对环保要求的不断严格,污水处理这一环保项目也越来越被重视。污水处理是使污水达到排入某一水体或再次使用的水质要求对其进行净化的过程。污水处理被广泛应用于建筑、农业、交通、能源、石化、环保、城市景观、医疗、餐饮等各个领域,因此污水处理控制系......
  • #星计划#浅谈ArkUI之Web组件的基础用法
    最近研究了ArkUI中的一些常用组件,其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数,以及基本用法。先来一个AI画的Web组件助助兴(好吧,不能说毫无关系,只能说一点也不像):在ArkUI中,Web组件用于显示Web网页,可以理解为一个嵌入式的小型浏览器,用于展示Web内容,实现We......
  • 静态HTTP与HTTP/2:提升Web性能的新途径
    你是否曾经遇到过这样的场景:你迫不及待地点击一个链接,然后开始等待,等待,再等待。这种等待的痛苦,我们称之为“Web慢病”。幸运的是,随着技术的进步,我们有了一种新的“药物”来治疗这种病症——HTTP/2。让我们先回顾一下“Web慢病”的病因。其实,大部分的锅要由HTTP协议来背。作为Web的......
  • JavaWeb - Day11 - 案例 - 员工管理、文件上传、修改员工、配置文件
    01.案例-员工管理-新增员工前面我们已经实现了员工信息的条件分页查询以及删除操作。关于员工管理的功能,还有两个需要实现:新增员工修改员工首先我们先完成"新增员工"的功能开发,再完成"修改员工"的功能开发。而在"新增员工"中,需要添加头像,而头像需要用到"文件上传"技......
  • 界面控件DevExpress v23.2全新发布 - 全新升级的UI本地化API
    DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress今年第一个重要版本v23.1正式发布,该版本拥有众多新产品和数十个具有高影响力......
  • 【SpringBootWeb入门-18】案例-准备工作
    1、案例前言在前面的章节中,我们学习完了后端springbootweb开发的基础知识、MySQL数据库以及Mybatis框架,接下来我们来完成一个Web开发的综合案例,通过这个案例我们学习到前端程序、后端程序以及数据库之间是如何交互协作的,同时通过这个案例我们也学习到根据接口文档、开发服务端接......
  • webpack(概念)
    入口(entry)入口起点(entrypoint)指示webpack打包起点。构建依赖图(dependencygraph)的开始。默认值是 ./src/index.js。可以配置,如下:webpack.config.jsmodule.exports={entry:'./path/to/my/entry/file.js',};输出(output)output告诉webpack在哪里输出它所创建的 bu......
  • Ubuntu环境下SomeIP/CommonAPI环境搭建详细步骤
    环境搭建1.Boost安装下载Boost源码:https://www.boost.org/users/download/编译安装首先安装编译所需依赖sudoapt-getinstallbuild-essentialg++sudoapt-getinstallinstallpython-devautotools-devsudoapt-getinstallinstalllibicu-devbuild-essentialsudoapt-......