Method for quickly constructing application program through few codes

Abstract

The invention discloses a method for quickly constructing an application program through a small number of codes. The method comprises the following steps: S1, constructing a code construction framework through design; s2, the built code construction framework is rendered through json schema, and a construction rule is generated through X-reaction; s3, abstracting the user operation behavior and generating an action model; s4, packaging a related module and a tool method by adopting the magic-api; and S5, generating a component instance code and adding a plug-in management platform. According to the method, accurate updating is generated through a form linkage mechanism, and the performance is improved; front-end and rear-end expansion capabilities are increased through a js sandbox execution environment and magic-api; user behaviors are abstracted through a complete event system, and program expansibility is achieved; new functions or components are extended by allowing developers or third parties.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a method for quickly constructing an application program through a small amount of code. Background Art

[0002] Traditional application development usually requires writing a lot of code, involving complex programming logic and framework configuration, which is a major obstacle for users with non-technical backgrounds. In recent years, although some low-code / no-code platforms have emerged, these platforms are often limited in functionality and difficult to support the development of complex applications. Currently, most low-code products on the market are zero-code. Without the use of coding, you can build management applications such as sales, OA office, and production, helping companies standardize business processes, promote team collaboration, and achieve data tracking.

[0003] The existing technical solutions mainly adopt the following methods: 1. Increase flexibility in page and component configuration. Users can flexibly configure the layout, style of the page and the properties of the components, such as size, color, border, etc. This flexibility allows users to quickly adjust the appearance and behavior of pages and components according to business needs. 2. Support multiple data sources and API interfaces, which can be easily integrated with external systems. For example, the designer can connect to data sources such as relational databases, NoSQL databases, remote APIs, etc. to implement data reading and writing operations. In addition, the designer also supports communication and interaction with other systems through protocols such as HTTP and WebSocket. This integration capability with external systems enables the designer to build more complete and powerful applications, improving the scalability and practicality of the designer.

[0004] The existing technologies have the following disadvantages: 1. Poor scalability. It is difficult to meet the needs of more complex or professional application scenarios. 2. High customization costs. Although many platforms usually claim to be able to provide highly customized solutions, if the needs of the enterprise exceed the capabilities of the platform, secondary development may face high costs and time investment. Especially for certain specific functions or details, a lot of manual coding and debugging may be required. 3. Limited application areas. Currently, many low-code platforms are mainly concentrated in business process management (BPM), data analysis (BI) and other fields. There are few general and mature low-code platforms. Summary of the invention

[0005] In order to solve the above problems, the present invention provides a method for quickly building an application with a small amount of code, comprising the following steps: S1. Building a code construction framework through designable; S2. Rendering the built code construction framework through json schema, and generating construction rules through X-reaction; S3. Abstracting the user operation behavior and generating an action model; S4. Using magic-api to encapsulate related modules and tool methods; S5. Generate component instance code and add a plug-in management platform.

[0006] Furthermore, the code construction framework constructed in the step S1 specifically includes the following modules: an outline tree module, a code drawing module, a material and attribute module, and an operation module.

[0007] Furthermore, the construction rules generated by X-reaction in step S2 specifically include: component linkage processing, action linkage processing, and expression linkage data processing.

[0008] Furthermore, the action model generated in the S3 step specifically includes: control component, request backend interface, message prompt, open link, open application page, set temporary variables, and other behaviors.

[0009] Furthermore, the relevant modules in the S4 step specifically include: a gateway module, a Redis module, a Mongo module, and an es module.

[0010] Furthermore, the tool method encapsulated in the S4 step specifically includes: obtaining data SQL execution permissions and obtaining the current timestamp.

[0011] Furthermore, the generation of component instance code in step S5 mainly includes: developing a component scaffolding, and generating component instance code by executing the scaffolding.

[0012] The present invention provides a method for quickly building an application program using a small amount of code, which has the following beneficial effects: The present invention uses designable to realize the layout of the designer and the schema products generated by dragging and dropping, generates accurate updates through the linkage mechanism of formily, and improves performance; increases the front-end and back-end expansion capabilities through the js sandbox execution environment and magic-api; abstracts user behavior through a complete event system to achieve program extensibility; and allows developers or third parties to expand new functions or components. Plug-ins can be integrated into the designer through simple configuration or a small amount of code to enhance the functions of the designer. Through the above technical points, users can support the development of complex applications by dragging and dropping. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the structures shown in these drawings without paying creative work.

[0014] Figure 1 The present invention provides a flow chart of the method. DETAILED DESCRIPTION

[0015] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0016] The following is a detailed description of the implementation method of the present invention in conjunction with the accompanying drawings. Only some embodiments are described, not all embodiments. For the purpose of clarity, representations and descriptions that are not related to the present invention are omitted in the drawings and descriptions.

[0017] In order to have a clearer understanding of the technical features, purposes and beneficial effects of the present invention, the technical solution of the present invention is now described in detail below. Obviously, the implementation cases described are part of the embodiments of the present invention, not all of the embodiments, and cannot be understood as limiting the scope of the implementation of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work belong to the protection scope of the present invention.

[0018] The present invention adopts designable+formily parsing engine+publish-subscribe event system+js sandbox extension code+three-party plug-in mechanism+magic-api, which highly enhances the designer's scalability and support for complex businesses from the front-end and back-end capabilities.

[0019] like Figure 1 As shown, the present invention provides a method for quickly building an application with a small amount of code, including the following steps: S1. Building a code construction framework through designable; S2. Rendering the built code construction framework through json schema, and generating construction rules through X-reaction; S3. Abstracting the user operation behavior and generating an action model; S4. Using magic-api to encapsulate related modules and tool methods; S5. Generate component instance code and add a plug-in management platform.

[0020] Among them, the code construction framework constructed in step S1 specifically includes the following modules: outline tree module, code drawing module, material and attribute module, and operation module.

[0021] Formily is introduced in step S2, and the JSON Schema protocol is used to render and control component status. X-reaction is generated during the design phase, and fine-grained 1v1 updates between components are implemented during runtime. The construction rules generated through X-reaction specifically include component linkage processing, action linkage processing, and expression linkage data processing.

[0022] The main execution code for component linkage processing is: for (let attrIndex = 0; attrIndex <linkKeys.length; attrIndex++) { const attrName = linkKeys[attrIndex]; const value = SchemaStateList.find((key) =>key === attrName) ? schema[attrName] : schema?.['x-component-props']?.[attrName]; if (value&&isRealExpress(value)) { const { dependencies: _dependencies = [], reactionSchema: _reactionSchema = {}} = getDependencies(attrName, value, designerSchemas); _dependencies.forEach((dep) =>{ if (!dependencies.find((source) =>source.name === dep.name)){ dependencies.push(dep); } }); reactionSchema = { ...reactionSchema, ..._reactionSchema, }; } }.

[0023] The main execution code for action linkage processing is: / / Parameter dependency parsing params.forEach((param) => { if (param.value&&isRealExpress(param.value)) { const { dependencies: _dependencies = [], reactionSchema: _reactionSchema = {}} = getDependencies('data', param.value); _dependencies.forEach((dep) =>{ if (!dependencies.find((source) =>source.name === dep.name)){ dependencies.push(dep); } }); } });.

[0024] / / Perform dependency analysis on JavaScript content if (type === ActionTypeEnum.JAVASCRIPT) { const { dependencies: _dependencies = [], reactionSchema: _reactionSchema = {}} = getDependencies('data', content); _dependencies.forEach((dep) =>{ if (!dependencies.find((source) =>source.name === dep.name)) { dependencies.push(dep); } }); }.

[0025] The main execution code for expression-linked data processing is: / / Match all expressions const linkArr = searchWatcherKeys(express); / / Regular expression on state of all Fields const fieldAttrReg = new RegExp('^[a-zA-Z0-9_]+\\.' +FieldStateList.join('|'), 'g'); / / Non-Field state, linked with x-component-props const reactionKey = SchemaStateList.includes(attr) ? attr : `x-component-props.${attr}`; for (let index = 0; index <linkArr.length; index++) { const link = linkArr[index]; const [sourceId, ...attrs] = link.split('.'); / / There is no current expression in the dependent field const sourceTreeNode = designerTree.find((node) =>node.props?.name === sourceId); / / The linkage source is the page component if (sourceTreeNode) { const parents = sourceTreeNode.getParents(); parents.pop(); / / Remove the root component / / After the component is nested n layers, you need to find the actual path of the component const nodePathName = parents .map((item) =>item.props?.name ?? item.id) .reverse() .join('.'); const source = nodePathName ? nodePathName + '.' + sourceId : sourceId; let property = attrs[0]; if (!link.match(fieldAttrReg)) { property = 'componentProps.' + attrs.join('.'); } if (!dependencies.find((item) => item.name === link)) { dependencies.push({ property, type: schemaProps?.[attr]?.type, source, name: link, }); } } else { / / The linked source is not a page component action or constant if (!dependencies.find((item) => item.name === link)) { dependencies.push({ property: sourceId.startsWith('state') || sourceId.startsWith('global') ? attrs[0] : 'componentProps.' + attrs.join('.'), source: sourceId, name: link, }); } } }。

[0026] The action model generated in step S3 specifically includes: control components, request backend interface, message prompt, open link, open application page, set temporary variables, and other behaviors. Through the publish-subscribe mechanism, a unified event processing class is implemented, including event initialization subscription, publishing method, unsubscription, and event processing function.

[0027] The Proxy+new Function+with code block technology is used to implement the sandbox environment execution of expression values ​​and js code blocks: export function evalScript( script: string, GlobalData = {}, scriptType: IEvaluationScriptType = EvaluationScriptType.EXPRESSION ): any { return (function () { let result: any const ctxProxy = new Proxy(GlobalData, { has: (target, prop) => { if (typeof prop === "symbol") { return false } if (access_white_list.includes(prop)) { return target.hasOwnProperty(prop) } if (!target.hasOwnProperty(prop)) { throw new Error(`${prop} is not defined`) } return target.hasOwnProperty(prop) }, }).

[0028] The relevant modules in step S4 specifically include: gateway module, Redis module, Mongo module, es module; the tool methods encapsulated in step S4 specifically include: obtaining data SQL execution permissions and obtaining the current timestamp.

[0029] The component instance code is generated in step S5 mainly by developing a component scaffold and generating the component instance code by executing the scaffold.

[0030] The present invention uses designable to realize the layout of the designer and the schema products generated by dragging and dropping, generates accurate updates through the linkage mechanism of formily, and improves performance; increases the front-end and back-end expansion capabilities through the js sandbox execution environment and magic-api; abstracts user behavior through a complete event system to achieve program extensibility; and allows developers or third parties to expand new functions or components. Plug-ins can be integrated into the designer through simple configuration or a small amount of code to enhance the functions of the designer. Through the above technical points, users can support the development of complex applications by dragging and dropping.

[0031] The above is only a preferred embodiment of the present invention. It should be understood that the present invention is not limited to the form disclosed herein, and should not be regarded as excluding other embodiments, but can be used in various other combinations, modifications and environments, and can be modified within the scope of the concept described herein through the above teachings or the technology or knowledge of the relevant field. The changes and modifications made by those skilled in the art shall not deviate from the spirit and scope of the present invention, and shall be within the scope of protection of the claims attached to the present invention.

Claims

1. A method for quickly building an application using a small amount of code, characterized in that: The following steps are involved: S1. Build the code framework through designable; S2. Render the built code construction framework through json schema and generate construction rules through X-reaction; S3. Abstract the user operation behavior and generate an action model; S4. Use magic-api to encapsulate related modules and tool methods; S5. Generate component instance code and add a plug-in management platform.

2. The method for quickly building an application using a small amount of code according to claim 1, characterized in that: The code construction framework constructed in the step S1 specifically includes the following modules: outline tree module, code drawing module, material and attribute module, and operation module.

3. The method for quickly building an application using a small amount of code according to claim 1, characterized in that: The construction rules generated by X-reaction in step S2 specifically include: component linkage processing, action linkage processing, and expression linkage data processing.

4. The method for quickly building an application program using a small amount of code according to claim 1, characterized in that: The action model generated in the S3 step specifically includes: control component, request backend interface, message prompt, open link, open application page, set temporary variables, and other behaviors.

5. The method for quickly building an application program using a small amount of code according to claim 1, characterized in that: The relevant modules in the S4 step specifically include: gateway module, Redis module, Mongo module, and es module.

6. The method for quickly building an application program using a small amount of code according to claim 5, characterized in that: The tool method encapsulated in the S4 step specifically includes: obtaining data SQL execution permissions and obtaining the current timestamp.

7. The method for quickly building an application program by using a small amount of code according to claim 1, characterized in that: The generation of component instance code in step S5 mainly includes: developing a component scaffolding, and generating component instance code by executing the scaffolding.

Images