CN113626016A - 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件 - Google Patents

一种基于Vue+Element UI+Koa2的前后端分离的可重用组件 Download PDF

Info

Publication number
CN113626016A
CN113626016A CN202111036732.2A CN202111036732A CN113626016A CN 113626016 A CN113626016 A CN 113626016A CN 202111036732 A CN202111036732 A CN 202111036732A CN 113626016 A CN113626016 A CN 113626016A
Authority
CN
China
Prior art keywords
local
file
vue
project
introducing
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
Application number
CN202111036732.2A
Other languages
English (en)
Inventor
窦金凤
邱扬
曹家宝
曹培才
袁方正
杨涛
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ocean University of China
Original Assignee
Ocean University of China
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Ocean University of China filed Critical Ocean University of China
Priority to CN202111036732.2A priority Critical patent/CN113626016A/zh
Publication of CN113626016A publication Critical patent/CN113626016A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • 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/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/60—Software deployment
    • 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
    • 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/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Computing Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)

Abstract

本发明涉及计算机程序技术领域，具体是一种基于Vue+ElementUI+Koa2的前后端分离的可重用组件，包括在本地项目开发环境中安装node环境以及vue‑cli作为构建本地项目的脚手架工具；在所述本地项目的前端目录中构建npm环境、安装Vue框架环境并下载Element‑UI库等多个步骤。本发明可以使得前端页面和后端API通过Json配置文件的形式实现，告别冗长的代码，减少Web应用程序在开发和维护过程中出现的大量重复代码，将工程造价领域的后台数据管理系统的开发项目中的Web页面功能的实现简易化，提高Web应用程序的开发效率。

Description

一种基于Vue+Element UI+Koa2的前后端分离的可重用组件
技术领域
本发明涉及计算机程序技术领域，具体是一种基于Vue+Element UI+Koa2的前后端分离的可重用组件。
背景技术
Web应用开发就是指开发Web应用程序，就是开发B/S架构的应用，Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可。在Web应用程序的开发过程中，通常从由产品设计人员设计用户界面模型到由程序开发人员构建最终应用程序过程中的转换很费力，涉及配置环境、手动编写代码和单元测试等步骤，各步骤的工作都十分耗时。
在Mobile Trends Report的一项对5700多名开发人员的调查中，有51％的人报告说他们每天都需要完成应用程序UI设计任务，比一般的开发任务都要频繁。另外BradA.Myers的研究还表明，平均软件代码量的48％与用户界面有关。
常用的创建Web用户界面组件的工作流程是基于模型的设计的。在这种方法中，产品设计师通常通过图形设计软件来创建预期的UI界面模型。然后，Web开发人员检查模型并开始为该应用程序构建Web组件。但其实这些组件如今已在Angular或React等流行的前端框架之一中实现。这些组件是由一组API和代码实现，允许在开发过程中重复使用和重复封装，可重用组件有助于提高模块化和可维护性，使代码更易于测试，并有效地消除重复。
最近的调查表明，前端框架在Web开发人员中被广泛使用。因此，创建可重用的组件通常是构建Web应用程序的必要步骤。
由此可见，如何减少Web应用程序在开发和维护过程中出现的大量重复代码，如何尽可能提高Web应用程序的开发效率，成为现有技术亟待解决的问题。
发明内容
针对目前Web应用程序的开发效率低的问题，本发明提出了一种基于Vue+ElementUI+Koa2的前后端分离的可重用组件,实现将工程造价领域的后台数据管理系统的开发项目中的Web页面功能的实现简易化，减少代码量，且保证产品具有高度的可扩展性、可维护性和复用性的目的。
本发明提出的技术方案如下：一种基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于，包括以下步骤：
S1：在本地项目开发环境中安装node环境和vue-cli作为构建本地项目的脚手架工具；
S2：在所述本地项目的前端目录中构建npm环境、安装Vue框架环境并下载Element-UI库；
S3：在所述本地项目的后端目录中构建npm环境、安装Koa2框架环境并引入；
S4：在所述本地项目的前端目录内的main.js文件中引入并注册组件信息；
S5：在所述本地项目的后端目录内的app.js文件中引入并注册组件信息；
S6：在所述本地项目中引入index.js配置文件；
S7：在所述本地项目需要使用可重用组件的页面调用所述index.js配置文件；
S8：对所述本地项目中的所述页面进行渲染页面并联通前后端实现功能。
进一步地，在S4中，在所述本地项目的前端目录中的main.js文件中引入并注册组件信息，包括：引入所述本地项目中前端需要的包，设置所述本地项目前端所需要的全局变量并储存。
所述引入所述本地项目中前端需要的包，包括：在所述本地项目中的main.js文件中引入Element UI界面UI组件库、引入reset.css——CSS重置文件、引入border.css用以解决移动端border异常问题、引入axios用以解决开发中调试跨域问题、引入babel-polyfill包以解决IE不能正常兼容Vue问题。
进一步地，在S5中，在所述本地项目的后端目录内的app.js文件中引入并注册组件信息，包括：引入所述本地项目中后端需要的包；设置所述本地项目后端所需要的全局变量并储存。
引入所述本地项目中后端需要的包指：在所述本地项目中的app.js文件中引入path和fs包用以解决后端处理文件上传下载时的路径问题、引入koa-generic-session和koa-redis包用以结局用户登录过程中的安全性问题。
设置所述本地项目后端所需要的全局变量并储存指：在所述本地项目中的app.js文件中设置maxFileSize定义上传文件大小的上限、设置session.Keys定义session密钥、设置cookie.maxAge配置cookie最大存在时长；在所述本地项目中的app.js文件中引入全局变量配置文件。
在所述本地项目中的app.js文件中引入全局变量配置文件，包括：在所述本地项目中的app.js文件中引入database.js数据库配置文件，所述database.js数据库配置文件内包括：MYSQL_CONF对象用以配置MySQL数据库的host、user、password、port和database，REDIS_CONF对象用以配置Redis缓存数据库的host、port和password；在所述本地项目中的app.js文件中引入FilePath.js路径配置文件，内含：uploadFilesPath变量和exportFilesPath变量。
进一步地，在S6中，在所述本地项目中引入index.js配置文件包括：获取index.js配置文件；在所述配置文件中定义一种JSON对象结构的配置信息；所述JSON对象结构用于多个Web页面以实现功能；将所述JSON对象结构的数据内容按照预设格式存入JSON对象容器中；其中，所述预设格式为：在JSON对象结构的键值对下的各个键名表示该键应填写的数值含义或信息含义。
在所述配置文件中定义一种JSON对象结构的配置信息包括：根据提出的Web应用程序开发需求，确定待开发Web应用程序的功能要求；根据所述功能要求，创建与所述待开发Web应用程序对应的JSON对象结构，其中，所述JSON对象结构中的对象名对作为对应各个所述功能要求的唯一标识，所述JSON对象结构中的键值对作为所述待开发Web应用程序的功能要求的配置信息。将所配置好的JSON对象结构写入到index.js配置文件。然后可以在业务功能模块页面中调用所述index.js配置文件。
其中，一种JSON对象结构是用以配置功能组件，包括普通对象和方法函数对象，所述普通对象主要以数字类型、字符串类型、数组类型、对象类型的形式存在，用以配置功能组件的一般性配置，如按钮功能、按钮大小、表格表头等等；所述方法函数对象以方法函数的形式存在，用以配置功能组件的特殊性配置，如各个页面中独有的一些事件，如点击事件、滑动事件等等。
进一步地，在S8中，对所述本地项目中的所述页面进行渲染页面并联通前后端实现功能，包括：根据所述index.js配置文件中各节点所包含的所述JSON对象结构对应信息，分别确定所述可重用组件的集合中各功能组件对应的信息；所述可重用组件的集合中的各功能组件利用所述信息渲染生成前端页面。即根据所述JSON对象结构中各键值对携带的对应信息和对象名唯一标识确定用于渲染所述待开发Web应用程序的功能要求的可重用组件，利用所述可重用组件渲染生成Web应用程序的各功能页面。
与现有技术相比，本发明的有益效果为：通过本发明可以使得前端页面和后端API通过Json配置文件的形式实现，告别冗长的代码，减少Web应用程序在开发和维护过程中出现的大量重复代码，将工程造价领域的后台数据管理系统的开发项目中的Web页面功能的实现简易化，提高Web应用程序的开发效率。
附图说明
图1是本发明流程结构示意图。
具体实施方式
为了使本领域技术人员更好地理解本技术的技术方案，下面结合附图对本技术进行详细描述，本部分的描述仅是示范性和解释性，不应对本技术的保护范围有任何的限制作用。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，或者是该技术产品使用时惯常摆放的方位或位置关系，仅是为了便于描述本技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本技术的限制。
此外，术语“水平”、“竖直”、“悬垂”等术语并不表示要求部件绝对水平或悬垂，而是可以稍微倾斜。如“水平”仅仅是指其方向相对“竖直”而言更加水平，并不是表示该结构一定要完全水平，而是可以稍微倾斜。
在本技术的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本技术中的具体含义。
需要说明的是，具体实例中所提供的图示仅为本发明的基本构想的示意方式，遂图示中所表现的组件数目、样式并非与本发明中有关的组件的实际情况吻合，其实际实施时各组件数目、样式可以通过配置的方式随意更变，在实际实施组件布局、型态、内容等一般会更加复杂。
本发明的一种实施例里，本发明所提出的基于Vue+Element UI+Koa2的前后端分离的可重用组件可以提供展示页组件、新增页组件、修改页组件、详情页组件四大主要组件。展示页组件中又包含页头组件、操作功能组件、条件选择组件、主表组件、页码切换组件等。修改页组件和新增页组件中又包含文本信息组件、附件上传组件、子表组件等。详情页组件又包含子表显示组件、文本信息展示组件、附件下载组件等。
在技术支持方面，本发明的框架在前端是由Vue.js和ElementUI作为底层框架，抽取和封装相应的UI组件，功能组件等。在后端，使用NodeJs的Koa2框架作为底层框架抽取和封装API接口和一些常用方法。
请参阅图1，图1为根据本申请提供的一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图，包括：步骤S1—在本地项目开发环境中安装node环境以及vue-cli，以作为脚手架工具构建本地项目。具体而言，在本地项目开发环境中，根据实际的用户需求，例如，对于某一名称为Project_Demo的项目，所述node环境为Windows10操作系统下的Node.jsv14.2.0版本环境；所述vue-cli是一个基于Vue.js进行快速开发的完整系统。通过所述node环境以及vue-cli用于构建本地开发项目。
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S2，在所述本地项目前端目录中构建npm环境、安装Vue框架环境并下载Element-UI库。具体而言，在Project_Demo的项目中，所述npm环境是JavaScript软件及其周围的元信息的大型公共数据库，所用版本为6.14.4；所述Vue框架是一套用于构建用户界面的渐进式框架,Vue组件为三大MVVM主流前端框架之一，能够提高开发效率，帮助减少不必要的dom操作，双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染，所用版本为Vue2.x；所述Element-UI库，是一套为开发者、设计师以及产品经理准备的基于Vue2.0的桌面端组件库。
完成步骤S2后，需要在项目中引入Vue2.x和ElementUI的相关依赖。
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S3，在所述本地项目后端目录中构建npm环境、安装Koa2框架环境并引入。具体而言，在Project_Demo的项目中，所述npm环境版本同前端环境一样为6.14.4。所述Koa2框架，是一种新的web框架，Koa2支持async函数，丢弃了回调函数，并有非常强的错误处理能力。
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S4，在所述本地项目前端目录中的main.js文件中引入并注册组件信息。所述main.js文件中引入Element UI界面UI组件库、引入reset.css——CSS重置文件、引入border.css用以解决移动端border异常、引入axios用以解决开发中调试跨域问题、引入babel-polyfill包以解决ie不能正常兼容Vue问题。
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S5，在所述本地项目后端目录中的app.js文件中引入并注册组件信息。所述app.js文件中引入path和fs包用以解决后端处理文件上传下载时的路径问题、引入koa-generic-session和koa-redis包用以结局用户登录过程中的安全性问题。
在所述app.js文件中设置全局变量，包括：maxFileSize定义上传文件大小的上限、设置session.keys定义session密钥、设置cookie.maxAge配置cookie最大存在时长。所述的maxFileSize和session，例如：
1.app.use(koaBody({
2.multipart:true,
3.formidable:{
4.maxFileSize:200*1024*1024//设置上传文件大小最大限制，默认2M
5.},
6.jsonLimit:'5mb',//控制body的parse转换大小default 1mb
7.formLimit:'4096kb'//控制你post的大小default 56kb
8.}))；
所述app.js文件中引入全局变量配置文件，包括：database.js数据库配置文件，内含：MYSQL_CONF对象用以配置MySQL数据库的host、user、password、port和database；REDIS_CONF对象用以配置Redis缓存数据库的host、port和password，所述MYSQL_CONF和REDIS_CONF，例如：
Figure BDA0003247453830000111
在所述本地项目中的app.js文件中引入FilePath.js路径配置文件，内含：uploadFilesPath变量用以定义上传路径；
exportFilesPath变量用以定义下载链接路径。所述FilePath.js，例如：
Figure BDA0003247453830000112
Figure BDA0003247453830000121
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S6，在所述本地项目中引入index.js配置文件，包括：获取index.js配置文件；所述配置文件中定义了一种JSON对象结构的配置信息；所述JSON对象结构用于多个Web页面以实现功能；将所述JSON对象结构的数据内容，按照预设格式，存入所述JSON对象容器中；预设格式为：在JSON对象结构的键值对下的每个键名表示了该键所应填写的数值含义或信息含义。
在所述Project_Demo项目中添加一个名为Demo的模块，并配置其JSON对象结构的数据内容。所述JSON对象结构，例如：
Figure BDA0003247453830000122
Figure BDA0003247453830000131
对于上述的Demo对象，Demo.state.listAjaxData.translation包含了展示页组件中的表格显示内容，这些内容与数据库数据字典中的信息一一对应。Demo.state.listAjaxData.addGroup包含了新增页组件和修改页组件中录入项的名称和所述分组等信息。
Demo.state.listAjaxData.detailGroup包含了详情页组件中展示项的名称和所述分组等信息。
上述数据库数据字典，为数据库中所存的Project_Demo的字段目录，例如：
1.|字段|类型|可为空|默认|注释|
2.|:----|:-------|:---|---|------|
3.|id|int(10)|否|自增主键|ID；|
4.|UniqueNumber|varchar(45)|否||唯一索引；|
5.|name|varchar(20)|否||姓名；|
6.|gender|varchar(20)|否||性别；|
7.|province|varchar(20)|否||省份；|
8.|city|varchar(20)|否||城市；|
9.|deleteStatus|int|否|0|软删除状态；0为未删除，1为删除|
10.|creatorID|int|否||创建人ID；|
11.|creator|varchar(15)|否||创建人；|
12.|CreationTime|varchar(15)|否||创建时间；|
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S7，在所述项目需要使用可重用组件的页面调用所述index.js配置文件。例如，在所述的Project_Demo项目中的功能页面导入所述index.js配置文件中的Demo对象，展示页组件、新增页组件、修改页组件、详情页组件四大主要组件即可以在相应的Web页面中被引入，并通过后面的解析过程将Demo对象多携带的信息渲染成Web页面和功能。
如图1所示，所述基于一种基于Vue+Element UI+Koa2的前后端分离的可重用组件所构建的一款工程造价领域的后台数据管理系统的工作流程图的步骤还包括：步骤S8，所述本地项目的所述页面进行渲染页面操作并联通前后端实现功能。在上一步骤中的四大主要组件被引入成功后，即开始渲染Web页面，与此同时，Demo模块还会去联通后端./Controller/demo.js路径所封装好的功能API，并建立路由，包括：getList(获取展示页表格信息)、getDetail(获取详情页信息)、newItem(添加新的条目)、updateItem(更新已有条目)、deleteItem(删除已有条目)。
上述实施例中涉及的组件，在本地项目中组件是一种UI界面+页面功能+数据传输+数据库操作的抽象数据模型，包含HTML标签、CSS样式、Javascript方法函数、Node。
上述实施例中涉及的数据字典是指对数据的数据项、数据结构、数据流、数据存储、处理逻辑等进行定义和描述。数据字典可以理解为描述数据的信息集合，是对系统中使用的所有数据元素的定义的集合。数据字典对用户来说是一组只读的表，其内容包括数据库中所有模式对象的信息，如表、视图、簇及索引等。
综上所述，本发明公开的一种基于Vue+Element UI+Koa2的前后端分离的可重用组件针对工程造价咨询领域内的特殊需求，如客户管理、合同管理、人力资源管理、材料价格查询等，可以达到加快开发速度，减少手动编写代码所消耗的时间；提高系统模块化程度和可维护性；提高软件测试效率等目的。
以上仅是本技术的优选实施方式，应当指出，由于文字表达的有限性，而客观上存在无限的具体结构，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以做出若干改进、润饰或变化，也可以将上述技术特征以适当的方式进行组合；这些改进润饰、变化或组合，或未经改进将技术的构思和技术方案直接应用于其它场合的，均应视为本技术的保护范围。

Claims (10)

1.一种基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于，包括以下步骤：
S1：在本地项目开发环境中安装node环境和vue-cli作为构建本地项目的脚手架工具；
S2：在所述本地项目的前端目录中构建npm环境、安装Vue框架环境并下载Element-UI库；
S3：在所述本地项目的后端目录中构建npm环境、安装Koa2框架环境并引入；
S4：在所述本地项目的前端目录内的main.js文件中引入并注册组件信息；
S5：在所述本地项目的后端目录内的app.js文件中引入并注册组件信息；
S6：在所述本地项目中引入index.js配置文件；
S7：在所述本地项目需要使用可重用组件的页面调用所述index.js配置文件；
S8：对所述本地项目中的所述页面进行渲染页面并联通前后端实现功能。
2.根据权利要求1所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于：在S4中，在所述本地项目的前端目录中的main.js文件中引入并注册组件信息，包括：引入所述本地项目中前端需要的包，设置所述本地项目前端所需要的全局变量并储存。
3.据权利要求2所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于，所述引入所述本地项目中前端需要的包，包括：在所述本地项目中的main.js文件中引入Element UI界面UI组件库、引入reset.css——CSS重置文件、引入border.css、引入axios和引入babel-polyfill包。
4.据权利要求1所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于：在S5中，在所述本地项目的后端目录内的app.js文件中引入并注册组件信息，包括：引入所述本地项目中后端需要的包；设置所述本地项目后端所需要的全局变量并储存。
5.据权利要求4所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于，引入所述本地项目中后端需要的包指：在所述本地项目中的app.js文件中引入path和fs包、引入koa-generic-session和koa-redis包。
6.据权利要求4所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于：设置所述本地项目后端所需要的全局变量并储存指：在所述本地项目中的app.js文件中设置maxFileSize定义上传文件大小的上限、设置session.Keys定义session密钥、设置cookie.maxAge配置cookie最大存在时长；在所述本地项目中的app.js文件中引入全局变量配置文件。
7.据权利要求6所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于，在所述本地项目中的app.js文件中引入全局变量配置文件，包括：在所述本地项目中的app.js文件中引入database.js数据库配置文件，所述database.js数据库配置文件内包括：MYSQL_CONF对象用以配置MySQL数据库的host、user、password、port和database，REDIS_CONF对象用以配置Redis缓存数据库的host、port和password；在所述本地项目中的app.js文件中引入FilePath.js路径配置文件，内含：uploadFilesPath变量和exportFilesPath变量。
8.据权利要求1所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于：在S6中，在所述本地项目中引入index.js配置文件包括：获取index.js配置文件；在所述index.js配置文件中定义一种JSON对象结构的配置信息；所述JSON对象结构用于Web页面以实现功能；将所述JSON对象结构的数据内容按照预设格式存入JSON对象容器中；其中，所述预设格式为：在JSON对象结构的键值对下的键名表示该键应填写的数值含义或信息含义。
9.据权利要求8所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于：在所述配置文件中定义一种JSON对象结构的配置信息包括：根据提出的Web应用程序的开发需求，确定待开发Web应用程序的功能要求；根据所述功能要求，创建与所述待开发Web应用程序对应的JSON对象结构，其中，所述JSON对象结构中的对象名对作为对应各所述功能要求的唯一标识，所述JSON对中的键值对作为所述待开发Web应用程序的功能要求的配置信息，将配置好的JSON对象结构写入到所述index.js配置文件中。
10.据权利要求1所述的基于Vue+Element UI+Koa2的前后端分离的可重用组件，其特征在于，在S8中，对所述本地项目中的所述页面进行渲染页面并联通前后端实现功能，包括：根据所述index.js配置文件中各节点所包含的所述JSON对象结构对应信息，分别确定所述可重用组件的集合中各功能组件对应的信息；所述可重用组件的集合中的各功能组件利用所述信息渲染生成前端页面。
CN202111036732.2A 2021-09-06 2021-09-06 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件 Pending CN113626016A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111036732.2A CN113626016A (zh) 2021-09-06 2021-09-06 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111036732.2A CN113626016A (zh) 2021-09-06 2021-09-06 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件

Publications (1)

Publication Number Publication Date
CN113626016A true CN113626016A (zh) 2021-11-09

Family

ID=78389216

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111036732.2A Pending CN113626016A (zh) 2021-09-06 2021-09-06 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件

Country Status (1)

Country Link
CN (1) CN113626016A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116048513A (zh) * 2023-01-04 2023-05-02 上海弘积信息科技有限公司 一种构造表单界面方法、系统、电子设备及存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116048513A (zh) * 2023-01-04 2023-05-02 上海弘积信息科技有限公司 一种构造表单界面方法、系统、电子设备及存储介质

Similar Documents

Publication Publication Date Title
US10726195B2 (en) Filtered stylesheets
US10606573B2 (en) System and method for computer language migration using a re-architecture tool for decomposing a legacy system and recomposing a modernized system
US9804837B2 (en) System and method for creating, managing, and reusing schema type definitions in services oriented architecture services, grouped in the form of libraries
US7954107B2 (en) Method and system for integrating the existing web-based system
CN114035773B (zh) 一种基于配置的低代码开发表单方法、系统及装置
US6961750B1 (en) Server-side control objects for processing client-side user interface elements
CA2390440C (en) System and method for multiple level architecture by use of abstract application notation
US20070288853A1 (en) Software, methods and apparatus facilitating presentation of a wireless communication device user interface with multi-language support
US20110023022A1 (en) Method for application authoring employing an application template stored in a database
US8839192B2 (en) System and method for presentation of cross organizational applications
KR20050039551A (ko) 컴퓨터 플랫폼용 프로그래밍 인터페이스
CN101788994A (zh) 一种数据展示模型建立方法、数据展示方法及装置
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
CN105637478A (zh) 原生移动应用代码的计算机辅助开发
EP0756725A1 (en) Interface device and method
JP4136271B2 (ja) アプリケーションサーバシステム
CN113626016A (zh) 一种基于Vue+Element UI+Koa2的前后端分离的可重用组件
US20070094289A1 (en) Dynamic, hierarchical data exchange system
US20050177818A1 (en) Integration of external tools into an existing design environment
JP2001125855A (ja) 動的Ｗｅｂページ生成プログラム
CN112214202B (zh) 一种无须写代码的手机程序开发系统
Frost Learning WML & WMLScript
Sastry Enhanced Position Aware Sampling For The Cloud
WO2000057300A1 (en) Automatic interface generation for an enterprise resource
Jun et al. Computer Data Based on Domino Application System Design and Implementation of Interface Analysis Experiment

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication