CN111367525B - Front end framework system - Google Patents
Front end framework system Download PDFInfo
- Publication number
- CN111367525B CN111367525B CN202010196845.8A CN202010196845A CN111367525B CN 111367525 B CN111367525 B CN 111367525B CN 202010196845 A CN202010196845 A CN 202010196845A CN 111367525 B CN111367525 B CN 111367525B
- Authority
- CN
- China
- Prior art keywords
- component
- layer
- vue
- dynamic
- webpack
- 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.)
- Active
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/38—Creation or generation of source code for implementing user interfaces
-
- 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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a front-end architecture system, which comprises a viewing layer, a Webpack functional layer, a control layer and a model layer, wherein the viewing layer is arranged on the Webpack functional layer; the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links; the Webpack functional layer and the control layer jointly form a Webpack + Vue framework; the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are realized; therefore, the front-end architecture system realizes two different page recording modes through dynamic routing, and can ensure that each page can be independently recorded and processed when a large number of pages exist in the system, so that the problems of one-time loading of excessive resources and the occurrence of a time process of loading the white screen of the first page are prevented.
Description
Technical Field
The invention relates to the technical field of internet service logic processing, in particular to a front-end architecture system.
Background
With the development of internet applications, internet business logic processing becomes correspondingly more complex, which enables internet users to obtain a good experience. In the development process of a large background management system, the framework modes of three frameworks, namely an ext.js, a jquery, a Webpack packaging tool and a read/regular/Vue, appear in sequence, and the structural modes respectively have different advantages in the aspects of componentization, data driving, functional application scope, rendering and the like. Particularly, although the currently mainstream Webpack + read/Angular/Vue framework can improve the user experience to a certain extent, since a system is formed by Webpack packaging, when a large number of pages exist in the system, the problems of loading too many resources at a time and too long time for loading a home page white screen occur, and the problem that a plurality of subsystems cannot be split due to too high coupling among the subsystems also occurs, so that the UI framework related to Vue in the prior art cannot meet the development requirements of large-scale applications at all.
Disclosure of Invention
Aiming at the defects in the prior art, the invention provides a front-end architecture system, which comprises a view layer, a Webpack functional layer, a control layer and a model layer; the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links; the Webpack functional layer and the control layer jointly form a Webpack + Vue framework; the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are realized; therefore, the front-end architecture system realizes two different page recording modes through dynamic routing, and can ensure that each page can be independently recorded and processed when a large number of pages exist in the system, so that the problems of one-time loading of excessive resources and the occurrence of a time process of loading the white screen of the first page are prevented.
The invention provides a front end architecture system, which is characterized in that:
the front-end architecture system comprises a view layer, a Webpack functional layer, a control layer and a model layer; wherein the content of the first and second substances,
the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links;
the view layer is used for providing a visual intermediary interface related to the front-end architecture system;
the model layer is used for providing a method implementation component and/or a virtual tool component for editing the front-end architecture system;
the Webpack functional layer and the control layer jointly form a Webpack + Vue framework;
the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are/is realized;
the view layer and the Webpack + Vue framework perform data interaction of visual images, and the model layer and the Webpack + Vue framework perform data editing-related interaction;
further, the Webpack + Vue framework includes a packaging component, a reconstruction component, a compression component, and a dynamic routing component; wherein the content of the first and second substances,
the packaging component is used for packaging the template language code of the Webpack + Vue framework;
the reconstruction component is used for reconstructing the template language code of the Webpack + Vue framework;
the compression component is used for compressing the template language code of the Webpack + Vue framework;
the dynamic route formation component is configured to form the dynamic route according to the Vue-router;
further, the Webpack + VUE framework forms dynamic routing through Vue-router, so that the page loading mode related to the dynamic global Vue component specifically comprises,
step S1, forming a core DOM by adopting XML description with highest readability;
step S2, transmitting corresponding architecture parameters through the dynamic route, so as to obtain a corresponding core DOM according to the requirement and dynamically form a corresponding global Vue component;
step S3, the global Vue component is loaded on the corresponding HTML page, and each HTML page operates independently relative to the platform;
step S4, deploying the corresponding front-end template and the core DOM on different servers, and performing load balancing processing through Nignx, so as to realize a page recording mode about the dynamic global Vue component;
alternatively, the first and second electrodes may be,
the Webpack + VUE framework forms dynamic routing through Vue-router, so that the page loading mode related to iframe nesting specifically comprises,
nesting different HTML pages by adopting iframe so that each HTML page operates independently relative to the platform;
further, the view layer comprises a resource preloading component, a picture conversion component, an on-demand loading component and a preset picture generation component; wherein the content of the first and second substances,
the resource preloading component is used for preloading resources and/or prefetch resources;
the picture conversion component is used for realizing conversion processing of base64 format pictures into SVG format pictures;
the on-demand loading assembly is used for carrying out adaptive loading processing according to the data requirements of the platform corresponding to the view layer;
the preset picture generating component is used for generating a JS picture and/or a CSS picture according to the results of the preloading processing, the converting processing and the loading processing, so that the JS picture and/or the CSS picture are transmitted to the Webpack functional layer through the data transmission link;
further, the Webpack functional layer comprises a loader assembly component and a Plugin assembly component; wherein the content of the first and second substances,
the loader assembly component at least comprises a cs-loader sub-component, a file-loader sub-component and a band-loader sub-component, and the cs-loader sub-component, the file-loader sub-component or the band-loader sub-component are used for loading different types of files;
the plug assembly component at least comprises an HtmLWebPackplug sub-component, a Prefetchplug sub-component and a CommonsChunkplug sub-component, and the HtmLWebPackplug sub-component, the Prefetchplug sub-component or the CommonsChunkplug sub-component is used for realizing plug-in installation processing of different occasions;
further, the Vue component is used to implement Vue related processing with respect to at least one of Window, Layout, Tab, Grid, and Form;
the page component is used for realizing coherent function configuration processing related to login page, home page panel self-definition, Cron expression visualization and holiday setting;
the third-party plug-in setting component is used for realizing setting processing of at least one plug-in of vue.em.js, vuex, vue scanner, vue-grid-layout and echarts;
further, the model layer comprises a public method implementation component, a resolver component, a tool class component and a page cache mechanism execution component; wherein the content of the first and second substances,
the common method implementation component is used for performing a common method of at least one of string correlation, array correlation and time correlation on data from the control layer;
the analyzer component is used for carrying out adaptive code characteristic analysis processing on the data from the control layer;
the tool type component is used for realizing at least one of an http request tool, a digital format display conversion tool, an addition, subtraction, multiplication and division tool, an encryption tool, a capitalization conversion tool, a Chinese character initial acquisition tool, a random number generation tool, a verification tool and an import/export tool;
the page cache mechanism execution component is used for carrying out cache processing of a corresponding mechanism on the page configuration data and/or the page loading data from the control layer;
further, the front-end architecture system also comprises an access layer and an HTML single-page application layer; the access layer is used for providing an access interface related to a PC end and/or a mobile equipment end;
the HTML single-page application layer is used as a data intermediate layer between the access layer and the view layer, and is used for carrying out application processing on request item recording, js operation and request item feedback of an HTML single-page on access data received by the access interface so as to realize data application connection between the access layer and the view layer;
further, in the step S4, the load balancing by Nignx specifically includes,
performing file reading and configuration, socket establishment/binding/closing, smoothing restart and log file opening through a main process corresponding to the Nignx framework to realize dynamic load balancing processing of access interaction between a plurality of different processes and corresponding clients;
further, in the step S4, the implementing of the dynamic load balancing processing is specifically implemented by any one of a minimum connection number policy, an ipHash policy, a polling policy, and a weighted polling policy;
alternatively, the first and second electrodes may be,
in step S4, the dynamic load balancing process specifically includes the steps of dynamic content analysis, dynamic information collection, algorithm dynamic scheduling, and system false death prevention, wherein,
the dynamic content analysis is used for analyzing the HTTP request so as to determine a corresponding dynamic distribution strategy;
the dynamic information collection is used for collecting respective dynamic load information of all nodes according to a preset time interval so as to obtain the dynamic load condition of the back-end server;
the algorithm dynamic scheduling is used for performing dynamic scheduling according to the dynamic distribution strategy and the dynamic load condition of the back-end server so as to obtain a corresponding balance processing result;
the system anti-false death is used for calculating the real-time residual load of each node according to the balancing processing result so as to generate a new HTTP request strategy, and the calculated real-time residual load of each node is specifically
Determining the residual load of the CPU corresponding to the node according to the following formula (1),
αi＝fmi*(1-cui) (1)
in the above formula (1), αiIs the CPU residual load of the i-th node, fmiIs the product of the CPU dominant frequency and the number of CPUs, cu, of the ith nodeiReal-time CPU utilization rate of the ith node;
determining the residual load of the memory corresponding to the node according to the following formula (2),
in the above formula (2) In, betaiFor the remaining load of the memory of the ith node,
is the memory capacity of the ith node, muiThe real-time memory usage rate of the ith node;
determining the disk residual load of the node according to the following formula (3),
γi＝spei*(1-ioui) (3)
in the above formula (3), γiIs the disk residual load, spe, of the ith nodeiFor the disk write rate of the ith node, iouiThe real-time disk write-in rate of the ith node;
determining the network bandwidth residual load of the node according to the following formula (4),
σi＝ξi*(1-nui) (4)
in the above formula (4), σiIs the network bandwidth residual load of the ith node, xiiNetwork bandwidth of the ith node, nuiReal-time bandwidth usage for the ith node;
determining the real-time residual load of the node according to the following formula (5)
In the above-mentioned formula (5),iis the real-time residual load of the ith node, k1Is the CPU weight coefficient, k, of the ith node2Is the memory weight coefficient, k, of the ith node3Is the disk weight coefficient, k, of the ith node4Is the network bandwidth weight coefficient, fm, of the ith nodeiIs the product of the CPU main frequency of the ith node and the number of CPUs,
is the memory capacity, spe, of the ith nodeiIs the disk write rate, ξ for the ith nodeiIs the network bandwidth of the ith node.
Compared with the prior art, the front-end architecture system comprises a view layer, a Webpack functional layer, a control layer and a model layer; the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links; the Webpack functional layer and the control layer jointly form a Webpack + Vue framework; the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are realized; therefore, the front-end architecture system realizes two different page recording modes through dynamic routing, and can ensure that each page can be independently recorded and processed when a large number of pages exist in the system, so that the problems of one-time loading of excessive resources and the occurrence of a time process of loading the white screen of the first page are prevented.
Additional features and advantages of the invention will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. The objectives and other advantages of the invention will be realized and attained by the structure particularly pointed out in the written description and claims hereof as well as the appended drawings.
The technical solution of the present invention is further described in detail by the accompanying drawings and embodiments.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic structural diagram of a front-end architecture system according to the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Fig. 1 is a schematic structural diagram of a front-end framework system according to an embodiment of the present invention. The front-end architecture system comprises a view layer, a Webpack functional layer, a control layer and a model layer; wherein the content of the first and second substances,
the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links;
the view layer is used for providing a visual intermediate interface related to the front-end architecture system;
the model layer is used for providing a method implementation component and/or a virtual tool component for editing the front-end architecture system;
the Webpack functional layer and the control layer jointly form a Webpack + Vue framework;
the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are realized;
the view layer and the Webpack + Vue framework perform data interaction of visual images, and the model layer and the Webpack + Vue framework perform data editing-related interaction.
Preferably, the Webpack + Vue framework includes a packaging component, a reconstruction component, a compression component, and a dynamic routing component; wherein the content of the first and second substances,
the packaging component is used for packaging the template language code of the Webpack + Vue framework;
the reconstruction component is used for reconstructing the template language code of the Webpack + Vue framework;
the compression component is used for compressing the template language code of the Webpack + Vue framework;
the dynamic route formation component is operable to form the dynamic route based on the Vue-router.
Preferably, the Webpack + VUE framework forms dynamic routing through Vue-router, so as to realize that the page loading mode related to the dynamic global Vue component specifically comprises,
step S1, forming a core DOM by adopting XML description with highest readability;
step S2, transmitting corresponding architecture parameters through the dynamic route, so as to obtain a corresponding core DOM according to the requirement and dynamically form a corresponding global Vue component;
step S3, the global Vue component is loaded on the corresponding HTML page, and each HTML page runs independently relative to the platform;
step S4, deploying the corresponding front-end template and the core DOM on different servers, and performing load balancing processing through Nignx, so as to realize a page description mode about the dynamic global Vue component;
alternatively, the first and second electrodes may be,
the Webpack + VUE framework forms dynamic routing through Vue-router, so that the page loading mode related to iframe nesting specifically comprises,
and nesting different HTML pages by using iframe, so that each HTML page runs independently relative to the platform.
Preferably, the view layer comprises a resource preloading component, a picture conversion component, an on-demand loading component and a predetermined picture generation component; wherein the content of the first and second substances,
the resource preloading component is used for preloading resources and/or prefetch resources;
the picture conversion component is used for realizing conversion processing of base64 format pictures into SVG format pictures;
the on-demand loading assembly is used for carrying out adaptive loading processing according to the data requirements of the platform corresponding to the view layer;
the preset picture generating component is used for generating a JS picture and/or a CSS picture according to the results of the preloading processing, the converting processing and the loading processing, so that the JS picture and/or the CSS picture is transmitted to the Webpack functional layer through the data transmission link.
Preferably, the Webpack functional layer comprises a loader assembly component and a Plugin assembly component; wherein the content of the first and second substances,
the loader assembly component at least comprises a cs-loader sub-component, a file-loader sub-component and a band-loader sub-component, wherein the cs-loader sub-component, the file-loader sub-component or the band-loader sub-component are used for realizing loading processing of different types of files;
the plug assembly component at least comprises an HtmLWebPackplug sub-component, a Prefetchplug sub-component and a CommonsChunkplug sub-component, and the HtmLWebPackplug sub-component, the Prefetchplug sub-component or the CommonsChunkplug sub-component is used for realizing plug-in installation processing of different occasions.
Preferably, the control layer includes an Vue component, a page component, and a third party add-in setting component; wherein the content of the first and second substances,
the Vue component is used to implement Vue related processing with respect to at least one of Window, Layout, Tab, Grid, and Form;
the page component is used for realizing coherent function configuration processing related to login page, home page panel self-definition, Cron expression visualization and holiday setting;
the third-party plug-in setting component is used for realizing setting processing of at least one plug-in of vue.
Preferably, the model layer comprises a common method implementation component, a parser component, a tool class component and a page caching mechanism execution component; wherein the content of the first and second substances,
the common method implementation component is used for performing a common method of at least one of string correlation, array correlation and time correlation on data from the control layer;
the resolver component is used for performing adaptive code feature resolution processing on the data from the control layer;
the tool type component is used for realizing at least one of an http request tool, a digital format display conversion tool, an addition, subtraction, multiplication and division tool, an encryption tool, a capitalization conversion tool, a Chinese character initial acquisition tool, a random number generation tool, a verification tool and an import/export tool;
the page cache mechanism execution component is used for carrying out cache processing of a corresponding mechanism on the page configuration data and/or the page loading data from the control layer.
Preferably, the front-end architecture system further comprises an access layer and an HTML single-page application layer; wherein the content of the first and second substances,
the access layer is used for providing an access interface related to the PC end and/or the mobile equipment end;
the HTML single page application layer is used as a data intermediate layer between the access layer and the view layer, and is used for carrying out application processing on the access data received by the access interface, wherein the application processing is related to the request item description, js operation and request item feedback of the HTML single page, so that data application connection between the access layer and the view layer is realized.
Preferably, in this step S4, the load balancing process by Nignx specifically includes,
and performing file reading and configuration, socket establishment/binding/closing, smoothing restart and log file opening through a main process corresponding to the Nignx framework to realize dynamic load balancing processing of access interaction between a plurality of different processes and corresponding clients.
Preferably, in the step S4, the dynamic load balancing process is implemented by any one of a minimum connection number policy, an iphish policy, a polling policy, and a weighted polling policy.
Preferably, in the step S4, the dynamic load balancing process specifically includes the steps of dynamic content analysis, dynamic information collection, algorithm dynamic scheduling and system false death prevention, wherein,
the dynamic content analysis is used for analyzing the HTTP request so as to determine a corresponding dynamic distribution strategy;
the dynamic information collection is used for collecting respective dynamic load information of all nodes according to a preset time interval so as to obtain the dynamic load condition of the back-end server;
the algorithm dynamic scheduling is used for carrying out dynamic scheduling according to the dynamic distribution strategy and the dynamic load condition of the back-end server so as to obtain a corresponding balance processing result;
the system anti-false death is used for calculating the real-time residual load of each node according to the balancing processing result so as to generate a new HTTP request strategy, and the calculated real-time residual load of each node is specifically
Determining the residual load of the CPU corresponding to the node according to the following formula (1),
αi＝fmi*(1-cui) (1)
in the above formula (1), αiIs the CPU residual load of the i-th node, fmiIs the product of the CPU dominant frequency and the number of CPUs, cu, of the ith nodeiReal-time CPU utilization rate of the ith node;
determining the residual load of the memory corresponding to the node according to the following formula (2),
in the above formula (2), βiFor the remaining load of the memory of the ith node,
is the memory capacity of the ith node, muiThe real-time memory usage rate of the ith node;
determining the disk residual load of the node according to the following formula (3),
γi＝spei*(1-ioui) (3)
in the above formula (3), γiIs the disk residual load, spe, of the ith nodeiFor the disk write rate of the ith node, iouiThe real-time disk write-in rate of the ith node;
determining the network bandwidth residual load of the node according to the following formula (4),
σi＝ξi*(1-nui) (4)
in the above publicationIn the formula (4), σiIs the network bandwidth residual load of the ith node, xiiNetwork bandwidth of the ith node, nuiReal-time bandwidth usage for the ith node;
determining the real-time residual load of the node according to the following formula (5)
In the above-mentioned formula (5),iis the real-time residual load of the ith node, k1Is the CPU weight coefficient, k, of the ith node2Is the memory weight coefficient, k, of the ith node3Is the disk weight coefficient, k, of the ith node4Is the network bandwidth weight coefficient, fm, of the ith nodeiIs the product of the CPU main frequency of the ith node and the number of CPUs,
is the memory capacity, spe, of the ith nodeiIs the disk write rate, ξ for the ith nodeiNetwork bandwidth of the ith node;
the dynamic load balancing processing does not directly process the request sent by the user, but reasonably forwards the request to the back-end server for processing through a corresponding distribution strategy, so that the whole system realizes load balancing, the throughput and the resource utilization rate of the whole system are improved, the response time of the client request is reduced, the aim of reasonably distributing the request is fulfilled, and the false death state of the back-end server due to overload can be effectively avoided.
As can be seen from the content of the above embodiment, the front-end architecture system includes a view layer, a Webpack functional layer, a control layer, and a model layer; the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links; the Webpack functional layer and the control layer jointly form a Webpack + Vue framework; the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are realized; therefore, the front-end architecture system realizes two different page recording modes through dynamic routing, and can ensure that each page can be independently recorded and processed when a large number of pages exist in the system, so that the problems of one-time loading of excessive resources and the occurrence of a time process of loading the white screen of the first page are prevented.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.
Claims (9)
1. A front end architecture system, comprising:
the front-end architecture system comprises a view layer, a Webpack functional layer, a control layer and a model layer; wherein the content of the first and second substances,
the view layer, the Webpack functional layer, the control layer and the model layer are communicated sequentially through corresponding data transmission links;
the view layer is used for providing a visual intermediary interface related to the front-end architecture system;
the model layer is used for providing a method implementation component and/or a virtual tool component for editing the front-end architecture system;
the Webpack functional layer and the control layer jointly form a Webpack + Vue framework;
the Webpack + VUE framework forms a dynamic route through Vue-router, so that a page loading mode related to a dynamic global Vue component and/or a page loading mode related to iframe nesting are/is realized;
the view layer and the Webpack + Vue framework perform data interaction of visual images, and the model layer and the Webpack + Vue framework perform data editing-related interaction;
the Webpack + VUE framework forms dynamic routing through Vue-router, so that the page loading mode of the dynamic global Vue component specifically comprises,
step S1, forming a core DOM by adopting XML description with highest readability;
step S2, transmitting corresponding architecture parameters through the dynamic route, so as to obtain a corresponding core DOM according to the requirement and dynamically form a corresponding global Vue component;
step S3, the global Vue component is loaded on the corresponding HTML page, and each HTML page operates independently relative to the platform;
step S4, deploying the corresponding front-end template and the core DOM on different servers, and performing load balancing processing through Nignx, so as to realize a page recording mode about the dynamic global Vue component;
alternatively, the first and second electrodes may be,
the Webpack + VUE framework forms dynamic routing through Vue-router, so that the page loading mode related to iframe nesting specifically comprises,
and nesting different HTML pages by using iframe, so that each HTML page runs independently relative to the platform.
2. The front end architecture system of claim 1, wherein:
the Webpack + Vue framework comprises a packaging component, a reconstruction component, a compression component and a dynamic routing component; wherein the content of the first and second substances,
the packaging component is used for packaging the template language code of the Webpack + Vue framework;
the reconstruction component is used for reconstructing the template language code of the Webpack + Vue framework;
the compression component is used for compressing the template language code of the Webpack + Vue framework;
the dynamic route formation component is configured to form the dynamic route according to the Vue-router.
3. The front end architecture system of claim 1, wherein:
the view layer comprises a resource preloading component, a picture conversion component, an on-demand loading component and a preset picture generation component; wherein the content of the first and second substances,
the resource preloading component is used for preloading resources and/or prefetch resources;
the picture conversion component is used for realizing conversion processing of base64 format pictures into SVG format pictures;
the on-demand loading assembly is used for carrying out adaptive loading processing according to the data requirements of the platform corresponding to the view layer;
the preset picture generating component is used for generating a JS picture and/or a CSS picture according to the results of the preloading processing, the converting processing and the loading processing, so that the JS picture and/or the CSS picture is transmitted to the Webpack functional layer through the data transmission link.
4. The front end architecture system of claim 1, wherein:
the Webpack functional layer comprises a loader assembly component and a Plugin assembly component; the loader assembly component at least comprises a cs-loader sub-component, a file-loader sub-component and a band-loader sub-component, and the cs-loader sub-component, the file-loader sub-component or the band-loader sub-component are used for loading different types of files;
the plug assembly component at least comprises an HtmLWebPackplug sub-component, a Prefetchplug sub-component and a CommonsChunkplug sub-component, and the HtmLWebPackplug sub-component, the Prefetchplug sub-component or the CommonsChunkplug sub-component is used for realizing plug-in installation processing of different occasions.
5. The front end architecture system of claim 1, wherein:
the control layer comprises Vue components, page components and third-party plug-in setting components; wherein the Vue component is to implement Vue related processing with respect to at least one of Window, Layout, Tab, Grid, and Form;
the page component is used for realizing coherent function configuration processing related to login page, home page panel self-definition, Cron expression visualization and holiday setting;
the third-party plug-in setting component is used for realizing setting processing of at least one plug-in of vue.
6. The front end architecture system of claim 1, wherein:
the model layer comprises a public method implementation component, a resolver component, a tool class component and a page cache mechanism execution component; wherein the content of the first and second substances,
the common method implementation component is used for performing a common method of at least one of string correlation, array correlation and time correlation on data from the control layer;
the analyzer component is used for carrying out adaptive code characteristic analysis processing on the data from the control layer;
the tool type component is used for realizing at least one of an http request tool, a digital format display conversion tool, an addition, subtraction, multiplication and division tool, an encryption tool, a capitalization conversion tool, a Chinese character initial acquisition tool, a random number generation tool, a verification tool and an import/export tool;
the page buffer mechanism execution component is used for setting page configuration data and ≥ from the control layer
Or the page loading data is cached by a corresponding mechanism.
7. The front end architecture system of claim 1, wherein:
the front-end architecture system also comprises an access layer and an HTML single-page application layer; the access layer is used for providing an access interface related to a PC end and/or a mobile equipment end;
the HTML single-page application layer is used as a data intermediate layer between the access layer and the view layer, and is used for carrying out application processing on request item recording, js operation and request item feedback of an HTML single-page on access data received by the access interface, so that data application connection between the access layer and the view layer is realized.
8. The front end architecture system of claim 1, wherein the front end architecture system comprises a plurality of modules, each module comprising a plurality
In step S4, the load balancing process by Nignx specifically includes,
reading and configuring files through a main process corresponding to the Nignx frame, and establishing/binding the socket based on the whether the host process is matched with the socket
And closing, smoothing restart and log file opening to realize dynamic load balancing processing of access interaction between a plurality of different processes and corresponding clients.
9. The front end architecture system of claim 8, wherein:
in step S4, the dynamic load balancing is specifically implemented by any one of a minimum connection number policy, an ip Hash policy, a polling policy, and a weighted polling policy; alternatively, the first and second electrodes may be,
in step S4, the dynamic load balancing process specifically includes the steps of dynamic content analysis, dynamic information collection, algorithm dynamic scheduling, and system false death prevention, wherein,
the dynamic content analysis is used for analyzing the HTTP request so as to determine a corresponding dynamic distribution strategy; the dynamic information collection is used for collecting respective dynamic load information of all nodes according to a preset time interval so as to obtain the dynamic load condition of the back-end server; the algorithm dynamic scheduling is used for performing dynamic scheduling according to the dynamic distribution strategy and the dynamic load condition of the back-end server so as to obtain a corresponding balance processing result;
the system anti-false death is used for calculating the real-time residual load of each node according to the balancing processing result so as to generate a new HTTP request strategy, and the calculation of the real-time residual load of each node is specifically that the CPU residual load corresponding to the node is determined according to the following formula (1),
αi＝fmi*(1-cui) (1)
in the above formula (1), αiIs the CPU residual load of the i-th node, fmiIs the product of the CPU dominant frequency and the number of CPUs, cu, of the ith nodeiReal-time CPU utilization rate of the ith node;
determining the residual load of the memory corresponding to the node according to the following formula (2),
in the above formula (2), βiFor the remaining load of the memory of the ith node,
is the memory capacity of the ith node, muiThe real-time memory usage rate of the ith node;
determining the disk residual load of the node according to the following formula (3),
γi＝spei*(1-ioui) (3)
in the above formula (3), γiIs the disk residual load, spe, of the ith nodeiFor the disk write rate of the ith node, iouiThe real-time disk write-in rate of the ith node;
determining the network bandwidth residual load of the node according to the following formula (4),
σi＝ξi*(1-nui) (4)
in the above formula (4), σiIs the network bandwidth residual load of the ith node, xiiNetwork bandwidth of the ith node, nuiReal-time bandwidth usage for the ith node;
determining the real-time residual load of the node according to the following formula (5)
In the above-mentioned formula (5),iis the real-time residual load of the ith node, k1Is the CPU weight coefficient, k, of the ith node2Is the memory weight coefficient, k, of the ith node3Is the disk weight coefficient, k, of the ith node4Is the network bandwidth weight coefficient, fm, of the ith nodeiIs the product of the CPU main frequency of the ith node and the number of CPUs,
is the memory capacity, spe, of the ith nodeiIs the disk write rate, ξ for the ith nodeiIs the network bandwidth of the ith node.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010196845.8A CN111367525B (en) | 2020-03-19 | 2020-03-19 | Front end framework system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010196845.8A CN111367525B (en) | 2020-03-19 | 2020-03-19 | Front end framework system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111367525A CN111367525A (en) | 2020-07-03 |
| CN111367525B true CN111367525B (en) | 2020-10-23 |
Family
ID=71207635
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010196845.8A Active CN111367525B (en) | 2020-03-19 | 2020-03-19 | Front end framework system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111367525B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114003307A (en) * | 2021-10-28 | 2022-02-01 | 平安普惠企业管理有限公司 | Dynamic component loading registration method, device, equipment and medium based on UMD mode |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108021809A (en) * | 2017-12-19 | 2018-05-11 | 北京明朝万达科技股份有限公司 | A kind of data processing method and system |
| CN109147237A (en) * | 2018-09-11 | 2019-01-04 | 哈尔滨理工大学 | Books Marketing system |
| CN109389458A (en) * | 2018-08-31 | 2019-02-26 | 广州青莲网络科技有限公司 | A kind of subsidy formula Intelligent cargo cabinet management system based on enterprise organization structure |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US11537272B2 (en) * | 2016-12-21 | 2022-12-27 | Aon Global Operations Se, Singapore Branch | Content management system extensions |
| CN109558524A (en) * | 2018-11-14 | 2019-04-02 | 无锡信捷电气股份有限公司 | The internet of things equipment monitoring method and device of configurableization |
-
2020
- 2020-03-19 CN CN202010196845.8A patent/CN111367525B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108021809A (en) * | 2017-12-19 | 2018-05-11 | 北京明朝万达科技股份有限公司 | A kind of data processing method and system |
| CN109389458A (en) * | 2018-08-31 | 2019-02-26 | 广州青莲网络科技有限公司 | A kind of subsidy formula Intelligent cargo cabinet management system based on enterprise organization structure |
| CN109147237A (en) * | 2018-09-11 | 2019-01-04 | 哈尔滨理工大学 | Books Marketing system |
Non-Patent Citations (1)
| Title |
|---|
| 前后端分离架构下vue的使用策略分析;周沭玲;《电脑迷》;20181231(第(2018)30期);36 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111367525A (en) | 2020-07-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6684257B1 (en) | Systems, methods and computer program products for validating web content tailored for display within pervasive computing devices | |
| US10567407B2 (en) | Method and system for detecting malicious web addresses | |
| US9141611B2 (en) | Aggregated web analytics request systems and methods | |
| KR101507629B1 (en) | Browser-based proxy server for customization and distribution of existing applications | |
| US8549395B2 (en) | Method and system for transforming an integrated webpage | |
| US9537926B1 (en) | Network page latency reduction | |
| US9864671B1 (en) | Systems and methods of live experimentation on content provided by a web site | |
| JP2011018314A (en) | Method, system and computer program for sharing web page | |
| US9906626B2 (en) | Resource demand-based network page generation | |
| US20160344832A1 (en) | Dynamic bundling of web components for asynchronous delivery | |
| CN109785939A (en) | Medical image display methods, device, equipment and storage medium based on cloud | |
| CN115225707A (en) | Resource access method and device | |
| CN111367525B (en) | Front end framework system | |
| CN106973081A (en) | A kind of method and apparatus for issuing cloud resource | |
| JP5151696B2 (en) | Program to rewrite uniform resource locator information | |
| CN111431767A (en) | Multi-browser resource synchronization method and device, computer equipment and storage medium | |
| CN114071190A (en) | Cloud application video stream processing method, related device and computer program product | |
| CN117076811A (en) | Webpage export method, device, equipment and storage medium | |
| Noskov | Smart City Webgis Applications: Proof of Work Concept For High-Level Quality-Of-Service Assurance | |
| CN112767225A (en) | Front-end image processing method and device, electronic equipment and readable storage medium | |
| CN113542335A (en) | Information sharing method and device, electronic equipment and storage medium | |
| CN113824756A (en) | File processing method and device, storage medium and electronic equipment | |
| CN117150484B (en) | Page information processing method, device and equipment | |
| CN111090485B (en) | Multi-cluster-oriented help data processing method and device, medium and equipment | |
| CN116257707B (en) | Application release method and device, electronic 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 |