CN109101225A - Component building method and device, Component Gallery framework and computer readable storage medium - Google Patents
Component building method and device, Component Gallery framework and computer readable storage medium Download PDFInfo
- Publication number
- CN109101225A CN109101225A CN201710467879.4A CN201710467879A CN109101225A CN 109101225 A CN109101225 A CN 109101225A CN 201710467879 A CN201710467879 A CN 201710467879A CN 109101225 A CN109101225 A CN 109101225A
- Authority
- CN
- China
- Prior art keywords
- file
- component
- source code
- vue
- test
- 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.)
- Granted
Links
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
Abstract
The invention discloses a kind of component building method and devices, Component Gallery framework and computer readable storage medium, the component building method includes: the assembly container for increasing preset name under specified first code catalogue, increase salt file in the assembly container, it include the file based on VUE frame in the salt file, and preset source code is written in salt file, to complete the construction of component.Compared with the existing technology, due to when constructing the salt file of component, in the presence of the file based on VUE frame, make it possible to construct component using VUE frame as low level development frame, and construct due to carrying out component according to the method described above using VUE frame and have the advantages that size of code is few, it can effectively improve the encapsulation of the component of construction, maloperation is reduced, system performance is improved.
Description
Technical field
The present invention relates to computer application field more particularly to a kind of component building method and device, Component Gallery framework and
Computer readable storage medium.
Background technique
AngularJS is built upon a structuring front end MVVM (Model View View on light weight jQuery
Model) frame, for constructing single-page WEB application.AngularJS is large and complete frame, is used to developer component learning cost
Greatly, performance suddenly declines when bi-directional data is bundled under complicated interaction scenario.
Currently, realize that the mode of front end page includes: file required for introducing jQuery frame based on jQuery frame,
Page elements are initialized using the file of introducing, by DOM Document Object Model (Document Object Model,
DOM) structure is operated the construction to realize component (component), enables side of the external system by invocation component
The displaying of formula realization front end page.
However, the existing component obtained based on jQuery frame is had the following problems: using jQuery frame the bottom of as
Layer Development Framework, encapsulation is poor, is easy to appear maloperation, reduces the overall performance of system.
Summary of the invention
The main purpose of the present invention is to provide a kind of component building method and devices, Component Gallery framework and computer-readable
Storage medium, it is intended to solve in the prior art using JQuery frame as low level development frame, encapsulation is poor, is easy to appear mistake
Operate the technical problem for causing the overall performance of system low.
To achieve the above object, first aspect present invention provides a kind of component building method, this method comprises:
Increase the assembly container of preset name under specified first code catalogue；
Increase salt file in the assembly container, includes the file based on VUE frame in the salt file；
Preset source code is written in the salt file, to complete the construction of component.
To achieve the above object, second aspect of the present invention provides a kind of component constructing apparatus, which includes:
Catalogue increases module, for increasing the assembly container of preset name under specified first code catalogue；
File increases module, includes to be based in the salt file for increasing salt file in the assembly container
The file of VUE frame；
Writing module, for preset source code to be written in the salt file, to complete the construction of component.
To achieve the above object, third aspect present invention provides a kind of Component Gallery framework, which includes: output
Port, source code library, supporting system and VUE frame；
The output port and the source code library are connect with the supporting system, and the VUE frame is described group
The low level development frame of part library framework；
The component constructing apparatus provided in the supporting system comprising second aspect, the component constructing apparatus construction
Component be stored in the source code library.
Fourth aspect present invention provides a kind of computer readable storage medium, is stored thereon with computer-readable instruction, institute
State the component construction realized in any one feasible implementation of first aspect when computer-readable instruction is executed by processor
Each step in method.
The present invention provides a kind of component building method, in the method, increases under specified first code catalogue default
The assembly container of title increases salt file in the assembly container, includes the file based on VUE frame in the salt file,
And preset source code is written in salt file, to complete the construction of component.Compared with the existing technology, due in construction component
Salt file when, there is the file based on VUE frame, make it possible to using VUE frame as low level development frame construction group
Part, and construct due to carrying out component according to the method described above using VUE frame and have the advantages that size of code is few, it can be effective
Raising construction component encapsulation, reduce maloperation, improve system performance.
Detailed description of the invention
In order to more clearly explain the embodiment of the invention or the technical proposal in the existing technology, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
Some embodiments of invention for those skilled in the art without creative efforts, can also basis
These attached drawings obtain other attached drawings.
Fig. 1 is the schematic diagram of internal structure of electronic equipment in the embodiment of the present invention；
Fig. 2 is the schematic diagram of Component Gallery framework in the embodiment of the present invention；
Fig. 3 is a flow diagram of component building method in the embodiment of the present invention；
Fig. 4 is another flow diagram of component building method in the embodiment of the present invention；
Fig. 5 is another flow diagram of component building method in the embodiment of the present invention；
Fig. 6 is a schematic diagram of component constructing apparatus in the embodiment of the present invention；
Fig. 7 is another schematic diagram of component constructing apparatus in the embodiment of the present invention；
Fig. 8 is another schematic diagram of component constructing apparatus in the embodiment of the present invention.
Specific embodiment
In order to make the invention's purpose, features and advantages of the invention more obvious and easy to understand, below in conjunction with the present invention
Attached drawing in embodiment, technical scheme in the embodiment of the invention is clearly and completely described, it is clear that described reality
Applying example is only a part of the embodiment of the present invention, and not all embodiments.Based on the embodiments of the present invention, those skilled in the art
Member's every other embodiment obtained without making creative work, shall fall within the protection scope of the present invention.
Use JQuery frame as low level development frame due to existing in the prior art, encapsulation is poor, is easy to appear mistake
The technical issues of operating, system performance brought integrally to reduce.
In order to solve the above-mentioned technical problem, the present invention proposes a kind of component building method, due to the element in construction component
When file, there is the file based on VUE frame, makes it possible to using VUE frame as low level development frame construction component, and by
Have the advantages that size of code is few in constructing using VUE frame according to the method progress component in the present invention, it therefore, can be effective
The encapsulation of the component of construction is improved, maloperation is reduced, improves system performance.
Referring to Fig. 1, for the schematic diagram of internal structure of electronic equipment in the embodiment of the present invention, as shown in Figure 1, the electronics is set
Standby includes the processor connected by system bus, non-volatile memory medium, built-in storage, network interface, display screen and defeated
Enter device.Wherein, the non-volatile memory medium of electronic equipment is stored with operating system, further includes a kind of Component Gallery framework, should
Component constructing apparatus is included at least in Component Gallery framework, the component constructing apparatus is for realizing a kind of component building method, at this
Device is managed for providing calculating and control ability, supports the operation of entire electronic equipment.Built-in storage in electronic equipment is non-easy
The operation of component constructing apparatus in the property lost storage medium (alternatively referred to as computer readable storage medium) provides environment, the memory
It can be stored with computer-readable instruction in reservoir, when which is executed by processor, processor may make to execute
A kind of component building method.Network interface is used to carry out network communication with other equipment.The display screen of electronic equipment can be liquid
Crystal display screen or electric ink display screen etc., input unit can be the touch layer covered on display screen, be also possible to electronics
Key, trace ball or the touch-control version being arranged on device housings, are also possible to external keyboard, Trackpad or mouse etc..The electronics
Equipment can be mobile phone, personal computer, tablet computer or server etc..It will be understood by those skilled in the art that being shown in Fig. 1
Structure, only the block diagram of part-structure relevant to application scheme, does not constitute and is applied to it to application scheme
The restriction of his electronic equipment, specific electronic equipment may include than more or fewer components as shown in the figure, or combination
Certain components, or with different component layouts.
Technical solution in embodiment in order to better understand the present invention is explained below Component Gallery framework, please refers to figure
2, it is the schematic diagram of Component Gallery framework in the embodiment of the present invention, which includes output port, source code library, service branch
Support system and VUE frame.Wherein, output port and source code library are connect with supporting system, and VUE frame is the Component Gallery frame
The low level development frame of structure.
Wherein, the source code of multiple components is contained in source code library, and the source code of each component includes template source
Code, logic source code and pattern source code.
Wherein, VUE frame is the gradual frame of a set of building user interface, unlike other heavyweight frames,
VUE frame uses the design of bottom-up incremental development.And VUE frame focuses on view layer, relative to jQuery frame, uses
VUE skeleton code amount will greatly reduce (as reduced 57%), be capable of the validity and stalwartness of the source code of effective lifting assembly
Property, and the performance of front end page will also have greatly improved (as promoted 2~3 times).
Said modules constructing apparatus is included at least in supporting system, can be realized and is based on by the component constructing apparatus
The component of VUE frame constructs, and can also further realize it is more multi-functional, for example, being asked in the calling for receiving external system
The file reverse that when asking, the source code of multiple components in source code library is packaged, and is obtained packing by output port
It feeds the external system.Wherein, the common code logic in supporting system can be abstracted and is standardized, enhancing
Reusability.
The embodiment of said modules constructing apparatus construction component is described in detail below.
Referring to Fig. 3, for a flow diagram of component building method in the embodiment of the present invention, the component building method
Include:
Step 301, the assembly container for increasing preset name under specified first code catalogue；
In embodiments of the present invention, above-mentioned component building method be by component constructing apparatus (hereinafter referred to as are as follows: construction dress
Set) realize, which is a part of the supporting system in Component Gallery framework shown in Fig. 2.
Wherein, component can with extensible hypertext markup language (Hyper Text Markup Language, HTML) element,
Reusable code is encapsulated, component can be customized element, be also possible to the form of primary HTML element, and with is
Characteristic extension, for example, the input frame, button etc. on the page can be realized by component.Wherein, assembly container is for storing
The file of component.
Wherein, when needing to construct component, which will increase preset name under specified first code catalogue
Assembly container, wherein the first code catalogue specifically can be src/component, and the first code catalogue is to be located at
In source code library in Component Gallery framework.Wherein, which is referred to as component file folder or component catalog.
Wherein, the title of assembly container can be realized by preset mode, such as: the component for first constructing needs
The title of container is stored under specified path, when executing the embodiment of the present invention, obtains the assembly container according to the specified path
Title, alternatively, the title of the assembly container can be the input for realizing title by way of interacting with administrative staff, example
Such as, administrative staff are operated by executing the input of title on a display screen, and constructing apparatus is operated in response to the input of the title,
Increase assembly container according to the title of input under specified first code catalogue.
Step 302 increases salt file in the assembly container, includes based on VUE frame in the salt file
File；
In embodiments of the present invention, constructing apparatus will also increase salt file in increased assembly container, wherein should
It include the file based on VUE frame in salt file.
Wherein, by increasing the file based on VUE frame in assembly container, so that the component of the construction is based on VUE
What frame was realized.
Wherein, element typically refers to the Action logic and pattern of component, wherein Action logic is the content of finger assembly aobvious
After showing screen display, the function that the behavior of the content of the user's operation component can trigger, for example, if the component be by
Button, then the Action logic of the component may is that when detecting the clicking operation to the button, generate touching relevant to the button
Send instructions, so as to the realization of Trigger Function.In another example the Action logic of the component can if the component is account login component
To be: when detecting that user clicks ACK button, obtaining in the corresponding input frame of user name and the corresponding input frame of password
Data, and the data that will acquire are packaged, and generate log-in instruction.Wherein, pattern is face when finger assembly is shown on a display screen
Color, size and shape etc..For example, the pattern of the component may is that color is red, size is if component is button
1cm*1cm, shape are square.
Preset source code is written in the salt file step 303, to complete the construction of component.
In embodiments of the present invention, after increasing salt file, it is also necessary to which element text is written in preset source code
In part, to complete the write-in of the code of component, the construction of component is completed.
Wherein, the source code in the salt file and salt file under assembly container, assembly container constitutes one completely
Component.
In embodiments of the present invention, the assembly container for increasing preset name under specified first code catalogue, in the group
Increase salt file in part container, includes the file based on VUE frame in the salt file, and the write-in of preset source code is wanted
In plain file, to complete the construction of component.Compared with the existing technology, due to existing and being based on when constructing the salt file of component
The file of VUE frame makes it possible to construct component using VUE frame as low level development frame, and due to being pressed using VUE frame
Constructing according to above method progress component has the advantages that size of code is few, therefore, can effectively improve the encapsulation of the component of construction
Property, maloperation is reduced, system performance is improved.
Referring to Fig. 4, for another flow diagram of component building method in the embodiment of the present invention, the component building method
Include:
Step 401, the assembly container for increasing preset name under specified first code catalogue；
The title of step 402, the title for determining Action logic file to be increased and pattern file；
Step 403, according to the title of the Action logic file, increase in the assembly container based on VUE frame
Action logic file, and increase pattern file according to the title of the pattern file；
The Action logic file is written in the preset template source code and the logic source code by step 404, will
The pattern file is written in the pattern source code.
In embodiments of the present invention, step 401 is similar to the content that step 301 in embodiment illustrated in fig. 3 describes, herein not
It repeats.
In embodiments of the present invention, constructing apparatus will increase element in the assembly container after increasing assembly container
File, wherein in salt file include the file based on VUE frame, further, salt file include Action logic file and
Pattern file, wherein Action logic file is specifically to may is that index.vue based on VUE frame, and pattern file then can be with
It is obtained by pre-compilation system, the specific can be that: style.scss.
Wherein, in assembly container increase salt file when, it is thus necessary to determine that the title of Action logic file to be increased and
The title of pattern file, and according to the title of determining Action logic file, increase the row based on VUE frame in assembly container
For logical file, and the title increase pattern file according to determining pattern file.
Wherein it is determined that there are many modes of the title of the title and pattern file of Action logic file to be increased, such as: will
The title of Action logic file to be increased and the title of pattern file are stored under specified path, and when needed, according to this
Specified path obtains the title of Action logic file to be increased and the title of pattern file；Alternatively, can by with administrator
The mode of member's interaction realizes the input of title, for example, if administrative staff's title of process performing logical file on a display screen
Input operation, then constructing apparatus will respond input operation, and the title for obtaining the Action logic file of input is further pressed
Increase Action logic file in assembly container according to the title, and if administrative staff execute the title of pattern file on a display screen
Input operation, then constructing apparatus will be responsive to input operation, and the title for obtaining the pattern file of input further presses
Increase pattern file in assembly container according to the title.
In embodiments of the present invention, after increasing Action logic file and pattern file in assembly container, also by source generation
Code write-in behavior logical file and pattern file.
Wherein, source code includes style source code, the template source code based on VUE frame and the logic based on VUE frame
Source code, the logic source code specifically can be JavaScript (JS) source code, and template source code specifically can be hypertext
Markup language (Hyper Text Markup Language, HTML) template source code.
Wherein, the template source code and logic source code are written in Action logic file by constructing apparatus, by style source
Code is written in pattern file, to complete the construction of component.
It is understood that may include multiple components in Component Gallery, such as 35, each component can be according to this
Component building method in inventive embodiments realizes construction, and can according to need the component of exploitation different function, so that component
Component in library can satisfy the exploitation demand of the front end page of background management system.
In embodiments of the present invention, after the assembly container for increasing preset name under specified first code catalogue, really
The title of fixed Action logic file to be increased and the title of pattern file, and according to the title of behavior logical file in component
Increase the Action logic file based on VUE frame in container, increases pattern file according to the title of pattern file, and will be preset
Behavior logical file is written in template source code and logic source code based on VUE frame, by pattern source code write-in pattern text
Part.Component is constructed by using VUE frame, is made it possible to using VUE frame as low level development frame, and due to utilizing VUE
Frame constructs component in the manner described above has the advantages that size of code is few, therefore, can effectively improve the envelope of the component of construction
Dress property reduces maloperation, improves systematic entirety energy.
Referring to Fig. 5, for another flow diagram of component building method in the embodiment of the present invention, the component building method
Include:
Step 501, the assembly container for increasing preset name under specified first code catalogue；
The title of step 502, the title for determining Action logic file to be increased and pattern file；
Step 503, according to the title of the Action logic file, increase in the assembly container based on VUE frame
Action logic file, and increase pattern file according to the title of the pattern file.
The Action logic file is written in the preset template source code and the logic source code by step 504, will
The pattern file is written in the pattern source code；
Step 505, after constructing the component, increase under specified second code catalogue identical as the assembly container
The test suite container of title；
Step 506 increases in the test suite container with the Action logic file same names and based on VUE frame
The behavioral test logical file of frame；
Step 507, starting test macro, by the test macro using the behavioral test logical file to described group
Part is tested.
In embodiments of the present invention, step 501 is similar to the content that embodiment illustrated in fig. 4 describes to step 504, herein not
It repeats.
In embodiments of the present invention, constructing apparatus can also test the component of construction after constructing component, with
Verify the display effect of the component of construction.
Wherein, constructing apparatus will increase and the assembly container phase under first code catalogue under specified second code catalogue
With the test suite container of title.
Wherein, which specifically can be demo.
Constructing apparatus will also increase in test suite container with assembly container under Action logic file same names and
Behavioral test logical file based on VUE frame, that is, if increased assembly container is A, and the component under src/component
Increased Action logic file is that B.vue needs to increase at demo entitled A's then when being tested under container A
Test suite container, and increase in the test suite container behavioral test logical file of entitled B.vue.
Further, constructing apparatus will start test macro, utilize behavioral test logical file pair by the test macro
The component constructed under first code catalogue is tested.Wherein, which belongs to the system in Component Gallery framework, specifically may be used
To be dev-serve.
Specific: constructing apparatus has constructed the group of component by the test macro according to behavioral test logical file reference
Action logic file under part container generates VUE example；And the VUE example is called by the test macro, so as on webpage
It shows the VUE example, enables administrative staff intuitively to observe the VUE example of the component of construction from display screen, and really
It is fixed whether to meet demand.
Wherein, the Action logic file under references component container can specifically include: constructing apparatus is in the component to construction
When being tested, searched according under the title to first code catalogue of test suite container with same names by test macro
Assembly container determine the Action logic text under the assembly container and after finding with the assembly container of same names
Whether the title of part is consistent with the title of behavioral test logical file, if unanimously, quoting the row under the assembly container found
For logical file, and generate VUE example.
It is understood that being tool between Action logic file and pattern file under first code catalogue lower component container
Relevant, and the incidence relation is embodied by the source code in Action logic file, in behavior logical file
Therefore the code that reference pattern file is contained in source code when quoting Action logic file generated VUE, will utilize the row
Pattern file is quoted for the source code in logical file, and utilizes behavior logical file and the pattern file generated UVE of reference
Example.
In embodiments of the present invention, after constructing component, increase under specified second code catalogue and constructed component
Assembly container same names test suite container, increase in the test suite container and patrolled with the behavior under the assembly container
File same names and based on UVE frame behavioral test logical files are collected, and start test macro, pass through the test macro
The test to component has been constructed is realized using test suite container and behavioral test logical file, makes it possible to the net in display screen
It is shown on page, to be tested.
Technical solution in embodiment in order to better understand the present invention is explained below in systems using by above-mentioned
The method for the Component Gallery that mode obtains, the specific method is as follows:
1) if desired mounting assembly library, then can be introduced by npm, can specifically execute following code:
npm install‘tbd-design'；
Alternatively, dependencies is configured in package.json, " vucc ": " ∧ 1.2.0 "
2) if desired whole to use Component Gallery, it supports ccmd&&amd introducing method, it is as follows to execute code:
Let components=require (' vucc ')；
Alternatively,
Import components from"vucc'；
In addition, also supporting the method being introduced directly into, the code of execution is as follows:
Require(‘vucc/style.css')；
Import components from‘vucc/spilt'；
After introducing Component Gallery, it can be added in VUE frame and be used by mode below
Or；
By the above-mentioned means, easily the component in Component Gallery can be introduced into the page, and show the VUE of the component
Example.
Referring to Fig. 6, for the schematic diagram of component constructing apparatus in the embodiment of the present invention, which includes:
Catalogue increases module 601, for increasing the assembly container of preset name under specified first code catalogue；
File increases module 602, includes base in the salt file for increasing salt file in the assembly container
In the file of VUE frame；
Writing module 603, for preset source code to be written in the salt file, to complete the construction of component.
In embodiments of the present invention, which specifically can be src/component, and the first code mesh
Record is in the source code library in Component Gallery framework.
Wherein, by increasing the file based on VUE frame in assembly container, so that the component of the construction is based on VUE
What frame was realized.
Wherein, element typically refers to the Action logic and pattern of component, wherein Action logic is the content of finger assembly aobvious
After showing screen display, the function that the behavior of the content of the user's operation component can trigger, for example, if the component be by
Button, then the Action logic of the component may is that when detecting the clicking operation to the button, generate touching relevant to the button
Send instructions, so as to the realization of Trigger Function.In another example the Action logic of the component can if the component is account login component
To be: when detecting that user clicks ACK button, obtaining in the corresponding input frame of user name and the corresponding input frame of password
Data, and the data that will acquire are packaged, and generate log-in instruction.Wherein, pattern is face when finger assembly is shown on a display screen
Color, size and shape etc..For example, the pattern of the component may is that color is red, size is if component is button
1cm*1cm, shape are square.
In embodiments of the present invention, the assembly container for increasing preset name under specified first code catalogue, in the group
Increase salt file in part container, includes the file based on VUE frame in the salt file, and the write-in of preset source code is wanted
In plain file, to complete the construction of component.Compared with the existing technology, due to existing and being based on when constructing the salt file of component
The file of VUE frame makes it possible to construct component using VUE frame as low level development frame, and due to being pressed using VUE frame
Constructing according to above method progress component has the advantages that size of code is few, therefore, can effectively improve the encapsulation of the component of construction
Property, maloperation is reduced, system performance is improved.
Referring to Fig. 7, the constructing apparatus includes as schemed for another schematic diagram of component constructing apparatus in the embodiment of the present invention
Catalogue in 6 illustrated embodiments increases module 601, file increases module 602 and writing module 603, and and embodiment illustrated in fig. 6
Described in content it is similar, be not repeated herein.
In embodiments of the present invention, file increase module 602 includes:
Title determining module 701, for determining the title of Action logic file to be increased and the title of pattern file；
First increase module 702 increases base in the assembly container for the title according to the Action logic file
Increase pattern file in the Action logic file of VUE frame, and according to the title of the pattern file.
Further, source code includes: pattern source code, the template source code based on VUE frame and based on VUE frame
Logic source code；
Then writing module 603 is specifically used for: will be described in the preset template source code and logic source code write-in
The pattern file is written in the pattern source code by Action logic file.
It in embodiments of the present invention, include the file based on VUE frame, further, salt file in salt file
Include Action logic file and pattern file, wherein Action logic file is specifically may is that based on VUE frame
Index.vue, pattern file can then be obtained by pre-compilation system, the specific can be that: style.scss.
Wherein, source code includes style source code, the template source code based on VUE frame and the logic based on VUE frame
Source code, the logic source code specifically can be JavaScript (JS) source code, and template source code specifically can be hypertext
Markup language (Hyper Text Markup Language, HTML) template source code.
It is understood that may include multiple components in Component Gallery, such as 35, each component can be according to this
Component building method in inventive embodiments realizes construction, and can according to need the component of exploitation different function, so that component
Component in library can satisfy the exploitation demand of the front end page of background management system.
In embodiments of the present invention, after the assembly container for increasing preset name under specified first code catalogue, really
The title of fixed Action logic file to be increased and the title of pattern file, and according to the title of behavior logical file in component
Increase the Action logic file based on VUE frame in container, increases pattern file according to the title of pattern file, and will be preset
Behavior logical file is written in template source code and logic source code based on VUE frame, by pattern source code write-in pattern text
Part.Component is constructed by using VUE frame, is made it possible to using VUE frame as low level development frame, and due to utilizing VUE
Frame constructs component in the manner described above has the advantages that size of code is few, therefore, can effectively improve the envelope of the component of construction
Dress property reduces maloperation, improves systematic entirety energy.
Referring to Fig. 8, the constructing apparatus includes as schemed for another schematic diagram of component constructing apparatus in the embodiment of the present invention
Catalogue in 7 illustrated embodiments increases module 601, file increases module 602 and writing module 603, and this document increases module
602 include title determining module 701 and the first increase module 702, and similar to content described in embodiment illustrated in fig. 7, this
Place does not repeat them here.
In embodiments of the present invention, constructing apparatus further include:
Second increases module 801, for after constructing the component, increase under specified second code catalogue with it is described
The test suite container of assembly container same names；
Third increases module 802, mutually of the same name with the Action logic file for increasing in the test suite container
Title and the behavioral test logical file based on VUE frame；
Test module 803 utilizes the test suite container and institute by the test macro for starting test macro
Behavioral test logical file is stated to test the component.
Further, test module 803 includes:
Example generation module 804, for being gone by the test macro according to the test suite container and the test
For logical file, the Action logic file under the assembly container is quoted, generates VUE example；
Display module 805 is called, for calling the VUE example by the test macro, and shows institute on webpage
State VUE example.
In embodiments of the present invention, second code catalogue specifically can be demo.
Wherein, third increases module 802 and will increase and the Action logic file phase under assembly container in test suite container
With title and based on the behavioral test logical file of VUE frame, that is, if increased assembly container is A under src/component,
And increased Action logic file is that B.vue needs to increase at demo then when being tested under assembly container A
The test suite container of entitled A, and increase in the test suite container behavioral test logical file of entitled B.vue.
Wherein, the test macro that test module 803 starts belongs to the system in Component Gallery framework, specifically can be dev-
serve。
It is understood that being tool between Action logic file and pattern file under first code catalogue lower component container
Relevant, and the incidence relation is embodied by the source code in Action logic file, in behavior logical file
Therefore the code that reference pattern file is contained in source code when quoting Action logic file generated VUE, will utilize the row
Pattern file is quoted for the source code in logical file, and utilizes behavior logical file and the pattern file generated UVE of reference
Example.
In embodiments of the present invention, after constructing component, increase under specified second code catalogue and constructed component
Assembly container same names test suite container, increase in the test suite container and patrolled with the behavior under the assembly container
File same names and based on UVE frame behavioral test logical files are collected, and start test macro, pass through the test macro
The test to component has been constructed is realized using test suite container and behavioral test logical file, makes it possible to the net in display screen
It is shown on page, to be tested.
It is understood that the component constructing apparatus of any one embodiment of Fig. 6 to 8 description is involved in Fig. 1 and Fig. 2
Component constructing apparatus.
A kind of computer readable storage medium is also provided in embodiments of the present invention, is deposited on the computer readable storage medium
Computer-readable instruction is contained, which realizes when being executed by processor in any one embodiment of Fig. 3 to Fig. 5
Component building method in step.
In several embodiments provided herein, it should be understood that disclosed device and method can pass through it
Its mode is realized.For example, the apparatus embodiments described above are merely exemplary, for example, the division of the module, only
Only a kind of logical function partition, there may be another division manner in actual implementation, such as multiple module or components can be tied
Another system is closed or is desirably integrated into, or some features can be ignored or not executed.Another point, it is shown or discussed
Mutual coupling, direct-coupling or communication connection can be through some interfaces, the INDIRECT COUPLING or logical of device or module
Letter connection can be electrical property, mechanical or other forms.
The module as illustrated by the separation member may or may not be physically separated, aobvious as module
The component shown may or may not be physical module, it can and it is in one place, or may be distributed over multiple
On network module.Some or all of the modules therein can be selected to realize the mesh of this embodiment scheme according to the actual needs
's.
It, can also be in addition, each functional module in each embodiment of the present invention can integrate in a processing module
It is that modules physically exist alone, can also be integrated in two or more modules in a module.Above-mentioned integrated mould
Block both can take the form of hardware realization, can also be realized in the form of software function module.
If the integrated module is realized in the form of software function module and sells or use as independent product
When, it can store in a computer readable storage medium.Based on this understanding, technical solution of the present invention is substantially
The all or part of the part that contributes to existing technology or the technical solution can be in the form of software products in other words
It embodies, which is stored in a storage medium, including some instructions are used so that a computer
Equipment (can be personal computer, server or the network equipment etc.) executes the complete of each embodiment the method for the present invention
Portion or part steps.And storage medium above-mentioned includes: USB flash disk, mobile hard disk, read-only memory (ROM, Read-Only
Memory), random access memory (RAM, Random Access Memory), magnetic or disk etc. are various can store journey
The medium of sequence code.
It should be noted that for the various method embodiments described above, describing for simplicity, therefore, it is stated as a series of
Combination of actions, but those skilled in the art should understand that, the present invention is not limited by the sequence of acts described because
According to the present invention, certain steps can use other sequences or carry out simultaneously.Secondly, those skilled in the art should also know
It knows, the embodiments described in the specification are all preferred embodiments, and related actions and modules might not all be this hair
Necessary to bright.
In the above-described embodiments, it all emphasizes particularly on different fields to the description of each embodiment, there is no the portion being described in detail in some embodiment
Point, it may refer to the associated description of other embodiments.
The above are to a kind of component building method provided by the present invention and device, Component Gallery framework and computer-readable deposit
The description of storage media, for those skilled in the art, thought according to an embodiment of the present invention, in specific embodiment and application
There will be changes in range, and to sum up, the contents of this specification are not to be construed as limiting the invention.
Claims (12)
1. a kind of component building method, which is characterized in that the described method includes:
Increase the assembly container of preset name under specified first code catalogue；
Increase salt file in the assembly container, includes the file based on VUE frame in the salt file；
Preset source code is written in the salt file, to complete the construction of component.
2. building method according to claim 1, which is characterized in that the salt file includes: Action logic file and
Pattern file；
Then the salt file that increases in the assembly container includes:
Determine the title of Action logic file to be increased and the title of pattern file；
According to the title of the Action logic file, increase the Action logic file based on VUE frame in the assembly container,
And increase pattern file according to the title of the pattern file.
3. building method according to claim 2, which is characterized in that the source code includes: pattern source code, is based on
The template source code of VUE frame and logic source code based on VUE frame；
It is then described that preset source code is written in the salt file, comprising:
The Action logic file is written into the preset template source code and the logic source code, by the style source generation
The pattern file is written in code.
4. building method according to claim 2, which is characterized in that the method also includes:
After constructing the component, increase the test group with the assembly container same names under specified second code catalogue
Part container；
Increase and the Action logic file same names and the behavioral test based on VUE frame in the test suite container
Logical file；
Start test macro, the test suite container and the behavioral test logical file pair are utilized by the test macro
The component is tested.
5. building method according to claim 4, which is characterized in that described to utilize the test by the test macro
Assembly container and the behavioral test logical file test the component, comprising:
By the test macro according to the test suite container and the behavioral test logical file, quotes the component and hold
The Action logic file under device generates VUE example；
The VUE example is called by the test macro, and shows the VUE example on webpage.
6. a kind of component constructing apparatus, which is characterized in that described device includes:
Catalogue increases module, for increasing the assembly container of preset name under specified first code catalogue；
File increases module, includes to be based on VUE frame in the salt file for increasing salt file in the assembly container
The file of frame；
Writing module, for preset source code to be written in the salt file, to complete the construction of component.
7. constructing apparatus according to claim 6, which is characterized in that the salt file includes: Action logic file and
Pattern file；
Then file increase module includes:
Title determining module, for determining the title of Action logic file to be increased and the title of pattern file；
First increases module, for the title according to the Action logic file, increases in the assembly container and is based on VUE frame
The Action logic file of frame, and increase pattern file according to the title of the pattern file.
8. constructing apparatus according to claim 7, which is characterized in that the source code includes: pattern source code, is based on
The template source code of VUE frame and logic source code based on VUE frame；
Then the write module is specifically used for: the behavior is written in the preset template source code and the logic source code
The pattern file is written in the pattern source code by logical file.
9. constructing apparatus according to claim 7, which is characterized in that described device further include:
Second increases module, for increasing under specified second code catalogue and holding with the component after constructing the component
The test suite container of device same names；
Third increases module, for increasing in the test suite container and the Action logic file same names and being based on
The behavioral test logical file of VUE frame；
Test module utilizes the test suite container and the test by the test macro for starting test macro
Action logic file tests the component.
10. constructing apparatus according to claim 9, which is characterized in that the test module includes:
Example generation module, for literary according to the test suite container and the behavioral test logic by the test macro
Part quotes the Action logic file under the assembly container, generates VUE example；
Display module is called, shows that the VUE is real for calling the VUE example by the test macro, and on webpage
Example.
11. a kind of Component Gallery framework, which is characterized in that the Component Gallery framework includes: output port, source code library, service branch
Support system and VUE frame；
The output port and the source code library are connect with the supporting system, and the VUE frame is the Component Gallery
The low level development frame of framework；
Include the component constructing apparatus as described in claim 6 to 10 any one, the component in the supporting system
The component of constructing apparatus construction is stored in the source code library.
12. a kind of computer readable storage medium, is stored thereon with computer-readable instruction, which is characterized in that the computer
Each step in component building method described in claim 1 to 5 any one is realized when readable instruction is executed by processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710467879.4A CN109101225B (en) | 2017-06-20 | 2017-06-20 | Component construction method and device, component library architecture and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710467879.4A CN109101225B (en) | 2017-06-20 | 2017-06-20 | Component construction method and device, component library architecture and computer readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109101225A true CN109101225A (en) | 2018-12-28 |
| CN109101225B CN109101225B (en) | 2021-08-06 |
Family
ID=64795620
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710467879.4A Active CN109101225B (en) | 2017-06-20 | 2017-06-20 | Component construction method and device, component library architecture and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109101225B (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111158684A (en) * | 2019-12-30 | 2020-05-15 | 北京天融信网络安全技术有限公司 | System creation method, device, electronic equipment and readable storage medium |
| CN111324347A (en) * | 2020-02-06 | 2020-06-23 | 北京字节跳动网络技术有限公司 | Component construction method, device and system, page generation method, equipment and medium |
| CN113190299A (en) * | 2020-01-14 | 2021-07-30 | 成都鼎桥通信技术有限公司 | Method and equipment for displaying custom layer on map based on VUE |
| CN113626067A (en) * | 2020-05-08 | 2021-11-09 | 腾讯科技（深圳）有限公司 | Component publishing method and device |
| CN113918257A (en) * | 2021-09-30 | 2022-01-11 | 百融至信(北京)征信有限公司 | Vue-based echarts performance optimization method and system |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040031018A1 (en) * | 2000-06-16 | 2004-02-12 | Emmanuel Marty | Modular computer system and related method |
| CN1956445A (en) * | 2005-10-28 | 2007-05-02 | 北京航空航天大学 | Implementing method faced to gate package of web service |
| CN104020990A (en) * | 2014-05-12 | 2014-09-03 | 小米科技有限责任公司 | Date selection control displaying method and device |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN106302008A (en) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| CN106560787A (en) * | 2016-12-29 | 2017-04-12 | 武汉斗鱼网络科技有限公司 | MVVM-framework-based view page displaying method and apparatus |
| CN106569900A (en) * | 2016-10-28 | 2017-04-19 | 腾讯科技（深圳）有限公司 | Application processing method and device |
| CN106709288A (en) * | 2016-12-22 | 2017-05-24 | 腾讯科技（深圳）有限公司 | Application program review operating authorization processing method and application program review operating authorization processing device |
| CN106815016A (en) * | 2016-12-23 | 2017-06-09 | 四川大学 | A kind of MVVM based on Domain Driven Design designs a model |
-
2017
- 2017-06-20 CN CN201710467879.4A patent/CN109101225B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040031018A1 (en) * | 2000-06-16 | 2004-02-12 | Emmanuel Marty | Modular computer system and related method |
| EP1429245A2 (en) * | 2000-06-16 | 2004-06-16 | Nexwave Solutions | Modular computing system and method |
| CN1956445A (en) * | 2005-10-28 | 2007-05-02 | 北京航空航天大学 | Implementing method faced to gate package of web service |
| CN104020990A (en) * | 2014-05-12 | 2014-09-03 | 小米科技有限责任公司 | Date selection control displaying method and device |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN106302008A (en) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| CN106569900A (en) * | 2016-10-28 | 2017-04-19 | 腾讯科技（深圳）有限公司 | Application processing method and device |
| CN106709288A (en) * | 2016-12-22 | 2017-05-24 | 腾讯科技（深圳）有限公司 | Application program review operating authorization processing method and application program review operating authorization processing device |
| CN106815016A (en) * | 2016-12-23 | 2017-06-09 | 四川大学 | A kind of MVVM based on Domain Driven Design designs a model |
| CN106560787A (en) * | 2016-12-29 | 2017-04-12 | 武汉斗鱼网络科技有限公司 | MVVM-framework-based view page displaying method and apparatus |
Non-Patent Citations (2)
| Title |
|---|
| RAYNOR CHAN: "MVVM，WPF，Vue.js，以及如何在企业中使用Vue.js", 《HTTPS://WWW.JIANSHU.COM/P/561389867260》 * |
| 江庆 等: "Vue+Webpack框架在银行App前端开发的应用", 《金融科技时代》 * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111158684A (en) * | 2019-12-30 | 2020-05-15 | 北京天融信网络安全技术有限公司 | System creation method, device, electronic equipment and readable storage medium |
| CN111158684B (en) * | 2019-12-30 | 2023-07-04 | 北京天融信网络安全技术有限公司 | System creation method, device, electronic equipment and readable storage medium |
| CN113190299A (en) * | 2020-01-14 | 2021-07-30 | 成都鼎桥通信技术有限公司 | Method and equipment for displaying custom layer on map based on VUE |
| CN113190299B (en) * | 2020-01-14 | 2022-08-09 | 成都鼎桥通信技术有限公司 | Method and equipment for displaying custom layer on map based on VUE |
| CN111324347A (en) * | 2020-02-06 | 2020-06-23 | 北京字节跳动网络技术有限公司 | Component construction method, device and system, page generation method, equipment and medium |
| CN111324347B (en) * | 2020-02-06 | 2023-08-18 | 北京字节跳动网络技术有限公司 | Component construction method, device and system, page generation method, device and medium |
| CN113626067A (en) * | 2020-05-08 | 2021-11-09 | 腾讯科技（深圳）有限公司 | Component publishing method and device |
| CN113918257A (en) * | 2021-09-30 | 2022-01-11 | 百融至信(北京)征信有限公司 | Vue-based echarts performance optimization method and system |
| CN113918257B (en) * | 2021-09-30 | 2024-04-26 | 百融至信(北京)科技有限公司 | Method and system for optimizing echarts performance based on Vue |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109101225B (en) | 2021-08-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109101225A (en) | Component building method and device, Component Gallery framework and computer readable storage medium | |
| CN107239318B (en) | Using conversion method, device and equipment | |
| CN111443908B (en) | Method, device, equipment and medium for realizing route interaction of vue multiple independent pages | |
| RU2595524C2 (en) | Device and method for processing content of web resource in browser | |
| CN108023918A (en) | A kind of information on services acquisition methods, apparatus and system | |
| CN109960491A (en) | Application program generation method, generating means, electronic equipment and storage medium | |
| US20170212964A1 (en) | System and method for dynamic content rendering | |
| CN106126197A (en) | Make the method and device of the mobile terminal application page and PC end application page synchronization | |
| CN109634579A (en) | Code generating method, device, computer installation and storage medium | |
| US10289388B2 (en) | Process visualization toolkit | |
| US9104573B1 (en) | Providing relevant diagnostic information using ontology rules | |
| Göth | Testing techniques for mobile device applications | |
| Liu et al. | MUIT: a middleware for adaptive mobile web-based user interfaces in WS-BPEL | |
| Yeh | Designing interactions that combine pen, paper, and computer | |
| KR20150099345A (en) | A recording media recognized by computer for providing an application developing environment program | |
| Beranek et al. | A component-based method for developing cross-platform user interfaces for mobile applications | |
| Irwin | The homegrown mobile catalog: A quick, inexpensive approach to expanding access | |
| Karlsson et al. | Design & build a web interface for a quantum computer | |
| Verzani | gWidgetsWWW: Creating Interactive Web Pages within R | |
| TWM511643U (en) | A data centralized management system base on AJAX website | |
| CN116720494A (en) | Table generation method, system, electronic equipment and storage medium | |
| Fröhling | Development of a Framework for a Java-based Signal Processing E-Learning Platform | |
| KR20150099261A (en) | A recording media recognized by computer for providing an application developing environment program | |
| KR20150099279A (en) | A system for providing an application developing environment | |
| CN117762519A (en) | Component management method, device, computer equipment and storage medium |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |