CN111381899A - 用于开发目标系统的方法和装置 - Google Patents
用于开发目标系统的方法和装置 Download PDFInfo
- Publication number
- CN111381899A CN111381899A CN202010108937.6A CN202010108937A CN111381899A CN 111381899 A CN111381899 A CN 111381899A CN 202010108937 A CN202010108937 A CN 202010108937A CN 111381899 A CN111381899 A CN 111381899A
- Authority
- CN
- China
- Prior art keywords
- target system
- component
- party
- plug
- components
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 77
- 230000003993 interaction Effects 0.000 claims abstract description 75
- 238000011161 development Methods 0.000 claims abstract description 44
- 238000004806 packaging method and process Methods 0.000 claims abstract description 40
- 230000002452 interceptive effect Effects 0.000 claims description 23
- 238000004590 computer program Methods 0.000 claims description 9
- 238000010276 construction Methods 0.000 claims description 3
- 238000012423 maintenance Methods 0.000 abstract description 14
- 230000010354 integration Effects 0.000 abstract description 8
- 230000018109 developmental process Effects 0.000 description 43
- 230000006870 function Effects 0.000 description 24
- 238000010586 diagram Methods 0.000 description 15
- 238000004891 communication Methods 0.000 description 7
- 230000003287 optical effect Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000007429 general method Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000033772 system development Effects 0.000 description 3
- 238000012795 verification Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
本发明公开了一种用于开发目标系统的方法和装置,涉及计算机技术领域。其中,该方法包括:基于第三方展示类插件构建目标系统的展示类组件;其中,所述目标系统的展示类组件包括:通用组件、以及定制组件;基于第三方交互类插件构建目标系统的交互类组件;对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库。通过以上步骤,构建符合目标系统业务需求的公共组件库,进而基于该公共组件库进行软件开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种用于开发目标系统的方法和装置。
背景技术
在养老和医疗系统中,有很多功能模块在多个系统中会重复用到,比如居民列表、客户信息完善模块等。
在实现本发明过程中,发明人发现现有技术中至少存在如下问题:在现有的养老和医疗系统开发中,往往是由每个项目团队基于诸如Element组件库或MUI组件库等提供的基础组件独自开发各个功能模块,不仅会造成大量的重复开发工作、而且会导致具备相同功能的组件的风格不统一,不仅降低了开发效率,而且提高了将医疗和养老的众多项目整合为一个项目时的整合难度、且不便于后期的维护管理。
发明内容
有鉴于此,本发明提供一种用于开发目标系统的方法和装置,能够构建符合目标系统业务需求的公共组件库,进而基于该公共组件库进行软件开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
为实现上述目的,根据本发明的一个方面,提供了一种用于开发目标系统的方法。
本发明的用于开发目标系统的方法包括:基于第三方展示类插件构建目标系统的展示类组件;其中,所述目标系统的展示类组件包括:通用组件、以及定制组件;基于第三方交互类插件构建目标系统的交互类组件;对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库;其中,所述基于第三方展示类插件构建目标系统的展示类组件包括:遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,基于所述目标系统的用户界面规范开发目标系统的通用组件。
可选地,所述基于第三方展示类插件构建目标系统的展示类组件的步骤包括:获取多个所述目标系统的通用组件,对所述多个所述目标系统的通用组件进行组合、排版,以得到所述定制组件。
可选地,所述第三方交互类插件包括:第三方HTTP请求库、以及第三方前端公共方法库;所述基于第三方交互类插件开发目标系统的交互类组件的步骤包括:引入第三方HTTP请求库,对所述HTTP请求库进行封装,以得到目标系统的第一类交互组件;引入第三方前端公共方法库,对所述第三方前端公共方法库进行封装,以得到目标系统的第二类交互组件。
可选地,所述方法还包括:在执行所述基于第三方展示类插件构建目标系统的展示类组件的步骤之前,基于代码打包工具搭建公共组件库的目录结构,并安装第三方展示类插件以及第三方交互类插件。
可选地,所述公共组件库还包括:页面开发工具;所述方法还包括:在得到目标系统的公共组件库之后,通过所述页面开发工具对所述目标系统的公共组件库的多个组件进行拖拽、组合,以生成目标系统的页面。
可选地,所述目标系统的展示类组件包括:适用于客户端的展示类组件、适用于网页端的展示类组件;所述目标系统的交互类组件包括:适用于客户端的交互类组件、适用于网页端的交互类组件。
可选地,所述第三方展示类组件包括:Element组件库或者MUI组件库。
为实现上述目的,根据本发明的另一方面,提供了一种用于开发目标系统的装置。
本发明的用于开发目标系统的装置包括:第一构建模块,用于基于第三方展示类插件构建目标系统的展示类组件;其中,所述目标系统的展示类组件包括:通用组件、以及定制组件;第二构建模块,用于基于第三方交互类插件构建目标系统的交互类组件;打包模块,用于对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库;其中,第一构建模块基于第三方展示类插件构建目标系统的展示类组件包括:第一构建模块遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,第一构建模块将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,第一构建模块基于所述目标系统的用户界面规范开发目标系统的通用组件。
为实现上述目的,根据本发明的再一个方面,提供了一种电子设备。
本发明的电子设备,包括:一个或多个处理器;以及,存储装置,用于存储一个或多个程序;当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明的用于开发目标系统的方法。
为实现上述目的,根据本发明的又一个方面,提供了一种计算机可读介质。
本发明的计算机可读介质,其上存储有计算机程序,所述程序被处理器执行时实现本发明的用于开发目标系统的方法。
上述发明中的一个实施例具有如下优点或有益效果:通过基于第三方展示类插件构建目标系统的展示类组件,基于第三方交互类插件构建目标系统的交互类组件,对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包以得到目标系统的公共组件库这些步骤,能够构建符合目标系统业务需求的公共组件库,进而基于该公共组件库进行软件开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明,不构成对本发明的不当限定。其中:
图1是根据本发明第一实施例的用于开发目标系统的方法的主要流程的示意图;
图2是根据本发明第二实施例的用于开发目标系统的方法的主要流程的示意图;
图3是根据本发明实施例的目标系统的公共组件库的组成示意图;
图4是根据本发明第三实施例的用于开发目标系统的装置的主要模块示意图;
图5是本发明实施例可以应用于其中的示例性系统架构图;
图6是适于用来实现本发明实施例的电子设备的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明,其中包括本发明实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本发明的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
需要指出的是,在不冲突的情况下,本发明中的实施例以及实施例中的特征可以相互组合。
图1是根据本发明第一实施例的用于开发目标系统的方法的主要流程的示意图。如图1所示,本发明实施例的用于开发目标系统的方法包括:
步骤S101、基于第三方展示类插件构建目标系统的展示类组件。
示例性地,所述目标系统可以为养老和医疗系统,也可以为其他系统。其中,所述目标系统的展示类组件包括:通用组件、以及定制组件。
在一个可选实施方式中,基于第三方展示类插件构建目标系统的通用组件具体包括:遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,基于所述目标系统的用户界面规范开发目标系统的通用组件。
其中,所述第三方展示类组件可以为Element组件库、MUI组件库或者其他第三方UI组件库中的一种或多种。其中,所述目标系统的用户界面规范(也可称为“目标系统的UI规范”)可包括:规定的字体颜色、字号、间距、布局以及交互样式等。在该步骤中,通过基于目标系统的用户界面规范开发公共组件库,使得开发人员在以后的系统开发时可直接使用公共组件库中的组件,无需基于诸如Element组件库或MUI组件库等提供的基础组件重新进行组件开发,大大提高了开发效率。
进一步,在基于上述可选实施方式得到目标系统的通用组件之后,可基于如下方式构建定制组件:获取多个所述目标系统的通用组件,对所述多个所述目标系统的通用组件进行组合、排版,以得到所述定制组件。
例如,在基于Element组件库开发目标系统的展示类组件时,遍历Element中的基础组件,判断该基础组件是否满足目标系统的UI规范;对于满足该UI规范的基础组件,可将其作为目标系统的通用组件,并将该基础组件的标识(比如标签名)修改为“以hc开发的名称”;对于不满足该UI规范的基础组件,可按照该UI规范重新开发通用组件,并将该通用组件的标识设置成以hc开头的名称。在基于Element组件库得到目标系统的通用组件后,可依据目标系统的业务需求,将多个通用组件引入,并对其进行组合、排版,以得到目标系统的定制组件,并且,将定制组件的标识设置成以hc开头的名称。
步骤S102、基于第三方交互类插件构建目标系统的交互类组件。
示例性地,所述第三方交互类插件包括:第三方HTTP请求库(或者称为“第三方HTTP库)。其中,所述第三方HTTP请求库可以为Axios或者其他HTTP请求库。Axios是一个基于promise的HTTP请求库,Axios的主要功能是实现Ajax功能。在该示例中,步骤S102包括:引入第三方HTTP请求库,对所述HTTP请求库进行封装,以得到目标系统的第一类交互组件。
在现有技术中,往往是由每个项目组单独安装axios插件,并基于axios插件各自实现前后端交互功能,造成很多重复工作,且各自实现的交互功能不规范。在本发明实施例中,通过对axios插件进行封装,并将封装得到的目标系统的交互类组件打包至公共组件库中,不仅能减少重复开发工作,而且能在交互功能更加统一、规范,便于后期维护管理。
进一步,在上述示例中,所述第三方交互类插件还可包括:第三方前端公共方法库。其中,所述第三方前端公共方法库(其可表示为一个tool.js文件)包括一些前端常用的方法,比如截取URL参数方法、时间格式化方法、验证文本字符串长度方法等。进而,步骤S102还可包括:引入第三方前端公共方法库,对所述第三方前端公共方法库进行封装,以得到目标系统的第二类交互组件。
在现有技术中,往往是由每个项目组单独安装tool.js文件,并基于该tool.js文件进行页面开发,如果有新的通用的方法需要添加,则需要每个项目组都要对tool.js文件进行修改,造成很多重复工作。在本发明实施例中,通过对第三方前端公共方法库进行封装,并将封装得到的目标系统的交互类组件打包至公共组件库中,不仅能减少重复开发工作,而且便于后期维护管理。
步骤S103、对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库。
示例性地,在通过步骤S101和步骤S102得到目标系统的展示类组件、交互类组件后,可将这些组件导入到Webpack(是一种代码打包工具)的入口文件(比如index.js文件)中,并在入口文件中添加各个组件的全局变量名,然后通过Webpack进行打包,以得到目标系统的公共组件库。
在本发明实施例中,通过以上步骤能够构建符合目标系统业务需求的公共组件库,进而基于该公共组件库进行软件开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
图2是根据本发明第二实施例的用于开发目标系统的方法的主要流程的示意图。如图2所示,本发明实施例的用于开发目标系统的方法包括:
步骤S201、基于Webpack搭建公共组件库的目录结构。
具体实施时,可先通过npm方式安装Webpack(一种代码打包工具)。其中,npm是JavaScript的包管理工具,并且是Node.js平台的默认包管理工具。通过npm可以安装、共享、分发代码,管理项目依赖关系。在安装Webpack之后,可使用Webpack搭建公共组件库的目录结构。比如,可在项目的目录结构上添加src目录项(用于放置所有组件源代码的文件夹)、dist目录项(用于放置打包后的代码的文件夹),在src目录项下新建index.js(用于导入所有组件的入口文件)、components(用于放置封装后的展示类组件的文件夹)、js(用于放置所有封装后的交互类组件的文件夹)、style(用于放置所有封装后的换肤相关样式组件的文件夹)。并且,在项目根目录下添加webpack.config.js配置文件,并对配置文件中关于入口文件、出口文件的配置项进行修改等。
步骤S202、安装第三方展示类插件以及第三方交互类插件。
示例性地,所述第三方展示类组件可以为Element组件库、MUI组件库或者其他第三方UI组件库中的一种或多种。所述第三方交互类插件可以为Axios或者其他HTTP请求库。Axios是一个基于promise的HTTP请求库,Axios的主要功能是实现Ajax功能。另外,具体实施时,还需安装Vue等前端框架。
步骤S203、基于第三方展示类插件构建目标系统的展示类组件。
其中,所述目标系统的展示类组件包括:适用于客户端的展示类组件,和/或,适用于网页端的展示类组件。进一步,所述适用于客户端的展示类组件、以及所述适用于网页端的展示类组件又可进一步包括:通用组件、以及定制组件。
在一个可选实施方式中,基于第三方展示类插件构建目标系统的通用组件具体包括:遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,基于所述目标系统的用户界面规范开发目标系统的通用组件。
其中,所述第三方展示类组件可以为Element组件库、MUI组件库或者其他第三方UI组件库中的一种或多种。其中,所述目标系统的用户界面规范(也可称为“目标系统的UI规范”)可包括:规定的字体颜色、字号、间距、布局以及交互样式等。在该步骤中,通过基于目标系统的用户界面规范开发公共组件库,使得开发人员在以后的系统开发时可直接使用公共组件库中的组件,无需基于诸如Element组件库或MUI组件库等提供的基础组件重新进行组件开发,大大提高了开发效率。
进一步,在基于上述可选实施方式得到目标系统的通用组件之后,可基于如下方式构建定制组件:获取多个所述目标系统的通用组件,对所述多个所述目标系统的通用组件进行组合、排版,以得到所述定制组件。
例如,在基于Element组件库开发目标系统的展示类组件时,遍历Element中的基础组件,判断该基础组件是否满足目标系统的UI规范;对于满足该UI规范的基础组件,可将其作为目标系统的通用组件,并将该基础组件的标识(比如标签名)修改为“以hc开发的名称”;对于不满足该UI规范的基础组件,可按照该UI规范重新开发通用组件,并将该通用组件的标识设置成以hc开头的名称。在基于Element组件库得到目标系统的通用组件后,可依据目标系统的业务需求,将多个通用组件引入,并对其进行组合、排版,以得到目标系统的定制组件,并且,将定制组件的标识设置成以hc开头的名称。
以目标系统中的常用的居民列表模块为例,在现有技术中,需要每个项目组单独基于基础组件开发通用组件,然后通过对若干通用组件进行组合、排版以得到居民列表模块,进而导致大量重复工作。在本发明实施例中,通过封装得到居民列表等定制组件,并将其打包至公共组件库中,使得后续开发人员可以直接通过引入一个标签并传入简单参数即可使用封装好的定制组件,像使用通用组件一样容易,减少了重复开发工作,提高了目标系统的开发效率。
步骤S204、基于第三方交互类插件构建目标系统的交互类组件。
示例性地,所述第三方交互类插件包括:第三方HTTP请求库(或者称为“第三方HTTP库)。其中,所述第三方HTTP请求库可以为Axios或者其他HTTP请求库。Axios是一个基于promise的HTTP请求库,Axios的主要功能是实现Ajax功能。在该示例中,步骤S102包括:引入第三方HTTP请求库,对所述HTTP请求库进行封装,以得到目标系统的第一类交互组件。
在现有技术中,往往是由每个项目组单独安装axios插件,并基于axios插件各自实现前后端交互功能,造成很多重复工作,且各自实现的交互功能不规范。在本发明实施例中,通过对axios插件进行封装,并将封装得到的目标系统的交互类组件打包至公共组件库中,不仅能减少重复开发工作,而且能在交互功能更加统一、规范,便于后期维护管理。
进一步,在上述示例中,所述第三方交互类插件还可包括:第三方前端公共方法库。其中,所述第三方前端公共方法库(其可表示为一个tool.js文件)包括一些前端常用的方法,比如截取URL参数方法、时间格式化方法、验证文本字符串长度方法等。进而,步骤S102还可包括:引入第三方前端公共方法库,对所述第三方前端公共方法库进行封装,以得到目标系统的第二类交互组件。其中,所述目标系统的交互类组件包括:适用于客户端的交互类组件,和/或,适用于网页端的交互类组件。
在现有技术中,往往是由每个项目组单独安装tool.js文件,并基于该tool.js文件进行页面开发,如果有新的通用的方法需要添加,则需要每个项目组都要对tool.js文件进行修改,造成很多重复工作。在本发明实施例中,通过对第三方前端公共方法库进行封装,并将封装得到的目标系统的交互类组件打包至公共组件库中,不仅能减少重复开发工作,而且便于后期维护管理。另外,在具体实施时,所述第三方交互类插件还可包括其他交互类组件、比如一键换肤组件、统计功能组件等等。
步骤S205、对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库。
示例性地,在通过前述步骤得到目标系统的展示类组件、交互类组件后,可将这些组件导入到Webpack(是一种代码打包工具)的入口文件(比如index.js文件)中,并在入口文件中添加各个组件的全局变量名,然后通过Webpack进行打包,以得到目标系统的公共组件库。
步骤S206、通过页面开发工具对所述目标系统的公共组件库的多个组件进行拖拽、组合,以生成目标系统的页面。
示例性地,在步骤S206之前,可将页面开发工具打包至目标系统的公共组件库中。进而,在进行页面开发时,可直接通过页面开发工具对公共组件库的多个组件进行拖拽、组合,以得到所需的目标系统的页面。
在本发明实施例中,通过以上步骤能够构建符合养老医疗业务需求的公共组件库,进而基于该公共组件库进行目标系统的页面开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
图3是根据本发明实施例的目标系统的公共组件库的组成示意图。如图3所示,本发明实施例的目标系统的公共组件库可包括如下文件:指南、桌面组件、移动组件、API库、开发工具(即页面开发工具)。
其中,所述指南为关于前、后端开发规范的文件;桌面组件为适用于PC(个人电脑)端的组件;移动组件为适用于移动端的组件;API库为前后端常用方法、接口库;开发工具为业务层对象(即PO对象)提供原型工具,可用于基于组件的页面可视化开发中。进一步,桌面组件包括适用于PC端的展示类组件和交互类组件;移动组件包括适用于移动端的展示类组件和交互类组件。其中,适用于PC端的展示类组件包括通用组件和定制组件;适用于PC端的交互类组件包括Ajax组件(即第一类型的交互类组件,用于调取后端接口)、Tool组件(即第二类型的交互类组件,为前端常用方法库)。其中,通用组件进一步包括:基础组件、表单组件、数据组件、消息组件、导航组件等;定制组件进一步包括:布局、数据元素、组合组件、模板组件等。
在本发明实施例中,通过构建图3所示目标系统的公共组件库,并基于该公共组件库进行目标系统的页面开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
图4是根据本发明第三实施例的用于开发目标系统的装置的主要模块示意图。如图4所示,本发明实施例的用于开发目标系统的装置400包括:第一构建模块401、第二构建模块402、打包模块403。
第一构建模块401,用于基于第三方展示类插件构建目标系统的展示类组件。
示例性地,所述目标系统可以为养老和医疗系统,也可以为其他系统。其中,所述目标系统的展示类组件包括:通用组件、以及定制组件。
在一个可选实施方式中,第一构建模块401基于第三方展示类插件构建目标系统的通用组件具体包括:第一构建模块401遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,第一构建模块401将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,第一构建模块401基于所述目标系统的用户界面规范开发目标系统的通用组件。
其中,所述第三方展示类组件可以为Element组件库、MUI组件库或者其他第三方UI组件库中的一种或多种。其中,所述目标系统的用户界面规范(也可称为“目标系统的UI规范”)可包括:规定的字体颜色、字号、间距、布局以及交互样式等。在该步骤中,通过基于目标系统的用户界面规范开发公共组件库,使得开发人员在以后的系统开发时可直接使用公共组件库中的组件,无需基于诸如Element组件库或MUI组件库等提供的基础组件重新进行组件开发,大大提高了开发效率。
进一步,在基于上述可选实施方式得到目标系统的通用组件之后,第一构建模块401可基于如下方式构建定制组件:第一构建模块401获取多个所述目标系统的通用组件,对所述多个所述目标系统的通用组件进行组合、排版,以得到所述定制组件。
例如,在基于Element组件库开发目标系统的展示类组件时,遍历Element中的基础组件,判断该基础组件是否满足目标系统的UI规范;对于满足该UI规范的基础组件,可将其作为目标系统的通用组件,并将该基础组件的标识(比如标签名)修改为“以hc开发的名称”;对于不满足该UI规范的基础组件,可按照该UI规范重新开发通用组件,并将该通用组件的标识设置成以hc开头的名称。在基于Element组件库得到目标系统的通用组件后,可依据目标系统的业务需求,将多个通用组件引入,并对其进行组合、排版,以得到目标系统的定制组件,并且,将定制组件的标识设置成以hc开头的名称。
第二构建模块402,用于基于第三方交互类插件构建目标系统的交互类组件。
示例性地,所述第三方交互类插件包括:第三方HTTP请求库(或者称为“第三方HTTP库)。其中,所述第三方HTTP请求库可以为Axios或者其他HTTP请求库。Axios是一个基于promise的HTTP请求库,Axios的主要功能是实现Ajax功能。在该示例中,第二构建模块402基于第三方交互类插件构建目标系统的交互类组件包括:第二构建模块402引入第三方HTTP请求库,对所述HTTP请求库进行封装,以得到目标系统的第一类交互组件。
在现有技术中,往往是由每个项目组单独安装axios插件,并基于axios插件各自实现前后端交互功能,造成很多重复工作,且各自实现的交互功能不规范。在本发明实施例中,通过对axios插件进行封装,并将封装得到的目标系统的交互类组件打包至公共组件库中,不仅能减少重复开发工作,而且能在交互功能更加统一、规范,便于后期维护管理。
进一步,在上述示例中,所述第三方交互类插件还可包括:第三方前端公共方法库。其中,所述第三方前端公共方法库(其可表示为一个tool.js文件)包括一些前端常用的方法,比如截取URL参数方法、时间格式化方法、验证文本字符串长度方法等。进而,第二构建模块402基于第三方交互类插件构建目标系统的交互类组件还可包括:引入第三方前端公共方法库,对所述第三方前端公共方法库进行封装,以得到目标系统的第二类交互组件。
在现有技术中,往往是由每个项目组单独安装tool.js文件,并基于该tool.js文件进行页面开发,如果有新的通用的方法需要添加,则需要每个项目组都要对tool.js文件进行修改,造成很多重复工作。在本发明实施例中,通过对第三方前端公共方法库进行封装,并将封装得到的目标系统的交互类组件打包至公共组件库中,不仅能减少重复开发工作,而且便于后期维护管理。
打包模块403,用于对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库。
示例性地,在通过第一构建模块401、第二构建模块402得到目标系统的展示类组件、交互类组件后,可将这些组件导入到Webpack(是一种代码打包工具)的入口文件(比如index.js文件)中,并在入口文件中添加各个组件的全局变量名,然后通过Webpack进行打包,以得到目标系统的公共组件库。
在本发明实施例中,通过以上装置能够构建符合目标系统业务需求的公共组件库,进而基于该公共组件库进行目标系统的页面开发能够提高开发效率,降低项目整合难度,便于后续维护管理。
图5示出了可以应用本发明实施例的用于开发目标系统的方法或用于开发目标系统的装置的示例性系统架构500。
如图5所示,系统架构500可以包括终端设备501、502、503,网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备501、502、503通过网络504与服务器505交互,以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用,例如养老医疗类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备501、502、503可以是具有显示屏并且支持网页浏览的各种电子设备,包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器505可以是提供各种服务的服务器,例如对用户利用终端设备501、502、503所发出的公共组件库开发请求提供支持的后台管理服务器。后台管理服务器可以对接收到的公共组件库开发请求等数据进行分析等处理,并将处理结果(例如用于表明公共组件库开发完成的通知消息)反馈给终端设备。
需要说明的是,本发明实施例所提供的用于开发目标系统的方法一般由服务器505执行,相应地,用于开发目标系统的装置一般设置于服务器505中。
应该理解,图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
下面参考图6,其示出了适于用来实现本发明实施例的电子设备的计算机系统600的结构示意图。图6示出的计算机系统仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图6所示,计算机系统600包括中央处理单元(CPU)601,其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中,还存储有系统600操作所需的各种程序和数据。CPU 601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
以下部件连接至I/O接口605:包括键盘、鼠标等的输入部分606;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607;包括硬盘等的存储部分608;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器610上,以便于从其上读出的计算机程序根据需要被安装入存储部分608。
特别地,根据本发明公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本发明公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分609从网络上被下载和安装,和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时,执行本发明的系统中限定的上述功能。
需要说明的是,本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中,例如,可以描述为:一种处理器包括第一构建模块、第二构建模块、打包模块。其中,这些模块的名称在某种情况下并不构成对该模块本身的限定,例如,第一构建模块还可以被描述为“构建目标系统的展示类组件的模块。
作为另一方面,本发明还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的设备中所包含的;也可以是单独存在,而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该设备执行时,使得该设备执行以下流程:基于第三方展示类插件构建目标系统的展示类组件;其中,所述目标系统的展示类组件包括:通用组件、以及定制组件;基于第三方交互类插件构建目标系统的交互类组件;对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库;其中,所述基于第三方展示类插件构建目标系统的展示类组件包括:遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,基于所述目标系统的用户界面规范开发目标系统的通用组件。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,取决于设计要求和其他因素,可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。
Claims (10)
1.一种用于开发目标系统的方法,其特征在于,所述方法包括:
基于第三方展示类插件构建目标系统的展示类组件;其中,所述目标系统的展示类组件包括:通用组件、以及定制组件;
基于第三方交互类插件构建目标系统的交互类组件;
对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库;
其中,所述基于第三方展示类插件构建目标系统的展示类组件包括:遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,基于所述目标系统的用户界面规范开发目标系统的通用组件。
2.根据权利要求1所述的方法,其特征在于,所述基于第三方展示类插件构建目标系统的展示类组件的步骤包括:
获取多个所述目标系统的通用组件,对所述多个所述目标系统的通用组件进行组合、排版,以得到所述定制组件。
3.根据权利要求1所述的方法,其特征在于,所述第三方交互类插件包括:第三方HTTP请求库、以及第三方前端公共方法库;所述基于第三方交互类插件开发目标系统的交互类组件的步骤包括:
引入第三方HTTP请求库,对所述HTTP请求库进行封装,以得到目标系统的第一类交互组件;引入第三方前端公共方法库,对所述第三方前端公共方法库进行封装,以得到目标系统的第二类交互组件。
4.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在执行所述基于第三方展示类插件构建目标系统的展示类组件的步骤之前,基于代码打包工具搭建公共组件库的目录结构,并安装第三方展示类插件以及第三方交互类插件。
5.根据权利要求1所述的方法,其特征在于,所述公共组件库还包括:页面开发工具;所述方法还包括:
在得到目标系统的公共组件库之后,通过所述页面开发工具对所述目标系统的公共组件库的多个组件进行拖拽、组合,以生成目标系统的页面。
6.根据权利要求1所述的方法,其特征在于,所述目标系统的展示类组件包括:适用于客户端的展示类组件、适用于网页端的展示类组件;所述目标系统的交互类组件包括:适用于客户端的交互类组件、适用于网页端的交互类组件。
7.根据权利要求1所述的方法,其特征在于,所述第三方展示类组件包括:Element组件库或者MUI组件库。
8.一种用于开发目标系统的装置,其特征在于,所述装置包括:
第一构建模块,用于基于第三方展示类插件构建目标系统的展示类组件;其中,所述目标系统的展示类组件包括:通用组件、以及定制组件;
第二构建模块,用于基于第三方交互类插件构建目标系统的交互类组件;
打包模块,用于对所述目标系统的展示类组件和所述目标系统的交互类组件进行打包,以得到目标系统的公共组件库;
其中,第一构建模块基于第三方展示类插件构建目标系统的展示类组件包括:第一构建模块遍历第三方展示类插件中的组件,判断所述第三方展示类插件中的组件是否满足目标系统的用户界面规范;在所述第三方展示类插件中的组件满足目标系统的用户界面规范的情况下,第一构建模块将所述第三方展示类插件中的组件作为目标系统的通用组件,并对所述第三方展示类插件中的组件的标识进行修改;在所述第三方展示类插件中的组件不满足目标系统的用户界面规范的情况下,第一构建模块基于所述目标系统的用户界面规范开发目标系统的通用组件。
9.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1至7中任一所述的方法。
10.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1至7中任一所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010108937.6A CN111381899A (zh) | 2020-02-21 | 2020-02-21 | 用于开发目标系统的方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010108937.6A CN111381899A (zh) | 2020-02-21 | 2020-02-21 | 用于开发目标系统的方法和装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN111381899A true CN111381899A (zh) | 2020-07-07 |
Family
ID=71218592
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010108937.6A Pending CN111381899A (zh) | 2020-02-21 | 2020-02-21 | 用于开发目标系统的方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111381899A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112817591A (zh) * | 2021-01-26 | 2021-05-18 | 山东浪潮通软信息科技有限公司 | 前端页面的构建方法和装置 |
CN113282508A (zh) * | 2021-06-11 | 2021-08-20 | 杭州安恒信息安全技术有限公司 | 一种基于npm的工具类集成方法、装置、设备和介质 |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101243439A (zh) * | 2005-08-30 | 2008-08-13 | 微软公司 | 用于用户界面的基于标记的可扩展性 |
CN102135885A (zh) * | 2011-03-22 | 2011-07-27 | 曙光信息产业(北京)有限公司 | 一种模块化的软件开发架构 |
CN102314346A (zh) * | 2011-07-15 | 2012-01-11 | 杭州典能科技有限公司 | 一种用户界面产品的开发方法 |
CN105446740A (zh) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | 一种基于MVVM架构的Web前端展现系统 |
CN106909385A (zh) * | 2017-02-27 | 2017-06-30 | 百度在线网络技术(北京)有限公司 | 可视化页面编辑器及可视化页面编辑器的操作方法 |
CN106951236A (zh) * | 2017-03-07 | 2017-07-14 | 东软集团股份有限公司 | 插件的开发方法及装置 |
CN107704243A (zh) * | 2017-10-19 | 2018-02-16 | 用友网络科技股份有限公司 | 前端界面的构建方法及装置、计算机设备和存储介质 |
CN108197257A (zh) * | 2017-12-29 | 2018-06-22 | 深圳乐信软件技术有限公司 | Html页面生成方法、装置、设备及存储介质 |
CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
CN108733375A (zh) * | 2018-05-29 | 2018-11-02 | 厦门白山耘科技有限公司 | web前端配置化开发方法、装置、存储介质及计算机设备 |
-
2020
- 2020-02-21 CN CN202010108937.6A patent/CN111381899A/zh active Pending
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101243439A (zh) * | 2005-08-30 | 2008-08-13 | 微软公司 | 用于用户界面的基于标记的可扩展性 |
CN102135885A (zh) * | 2011-03-22 | 2011-07-27 | 曙光信息产业(北京)有限公司 | 一种模块化的软件开发架构 |
CN102314346A (zh) * | 2011-07-15 | 2012-01-11 | 杭州典能科技有限公司 | 一种用户界面产品的开发方法 |
CN105446740A (zh) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | 一种基于MVVM架构的Web前端展现系统 |
CN106909385A (zh) * | 2017-02-27 | 2017-06-30 | 百度在线网络技术(北京)有限公司 | 可视化页面编辑器及可视化页面编辑器的操作方法 |
CN106951236A (zh) * | 2017-03-07 | 2017-07-14 | 东软集团股份有限公司 | 插件的开发方法及装置 |
CN107704243A (zh) * | 2017-10-19 | 2018-02-16 | 用友网络科技股份有限公司 | 前端界面的构建方法及装置、计算机设备和存储介质 |
CN108197257A (zh) * | 2017-12-29 | 2018-06-22 | 深圳乐信软件技术有限公司 | Html页面生成方法、装置、设备及存储介质 |
CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
CN108733375A (zh) * | 2018-05-29 | 2018-11-02 | 厦门白山耘科技有限公司 | web前端配置化开发方法、装置、存储介质及计算机设备 |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112817591A (zh) * | 2021-01-26 | 2021-05-18 | 山东浪潮通软信息科技有限公司 | 前端页面的构建方法和装置 |
CN113282508A (zh) * | 2021-06-11 | 2021-08-20 | 杭州安恒信息安全技术有限公司 | 一种基于npm的工具类集成方法、装置、设备和介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107832045B (zh) | 跨编程语言接口转换的方法和装置 | |
CN107302597B (zh) | 消息文案推送方法和装置 | |
CN107491382B (zh) | 日志输出方法和装置 | |
CN110895471A (zh) | 安装包生成方法、装置、介质及电子设备 | |
CN112631590B (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
CN110780874B (zh) | 用于生成信息的方法和装置 | |
CN109002282B (zh) | 一种在web页面开发中实现动画效果的方法和装置 | |
CN110928571A (zh) | 业务程序开发方法和装置 | |
CN110888639A (zh) | 一种业务代码编译打包方法和装置 | |
CN113076294A (zh) | 一种信息分享方法和装置 | |
CN111381899A (zh) | 用于开发目标系统的方法和装置 | |
CN111309304A (zh) | 一种生成idl文件的方法、装置、介质和电子设备 | |
CN113760264A (zh) | 多应用之间组件复用的方法和装置 | |
CN110928594A (zh) | 服务开发方法和平台 | |
CN112347383A (zh) | 分享链接生成方法、装置及电子设备 | |
CN109901934B (zh) | 生成接口帮助文档的方法和装置 | |
CN115617420A (zh) | 应用程序的生成方法、装置、设备以及存储介质 | |
CN113760279A (zh) | 一种生成页面的方法和装置 | |
CN113553123A (zh) | 数据处理方法、装置、电子设备及存储介质 | |
CN112131287A (zh) | 一种读取数据的方法和装置 | |
CN112445517B (zh) | 入口文件生成方法、装置、电子设备和计算机可读介质 | |
CN112925573B (zh) | 网页加载的方法、装置、设备和计算机可读介质 | |
CN114089996A (zh) | 一种页面渲染方法、装置及系统 | |
CN114331497A (zh) | 问卷信息管理方法、系统、电子设备及存储介质 | |
CN117708460A (zh) | 一种页面处理的方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |