CN105574043A - Processing method and apparatus for front-end page of Web application - Google Patents
Processing method and apparatus for front-end page of Web application Download PDFInfo
- Publication number
- CN105574043A CN105574043A CN201410553324.8A CN201410553324A CN105574043A CN 105574043 A CN105574043 A CN 105574043A CN 201410553324 A CN201410553324 A CN 201410553324A CN 105574043 A CN105574043 A CN 105574043A
- Authority
- CN
- China
- Prior art keywords
- route
- data
- document object
- script language
- module
- 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
Landscapes
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention provides a processing method and apparatus for a front-end page of a Web application. The processing method comprises the steps of loading all modules of a webpage file of the Web application; according to a document object model element of a DIV layer bound with a script language file route and two-way data binding established by a preset model as well as a preset permission identifier, obtaining corresponding data of a model corresponding to the document object model element of the DIV layer in each module; and loading the obtained corresponding data into the document object model element of the DIV layer in the module to perform rendering and display. By applying the processing method and apparatus, when business resource data is queried for the first time, all data in a database has been transmitted to a client, so that other requests only need to load the data from the client and the experience closer to a local mobile or desktop application is provided for users.
Description
Technical field
The present invention relates to business support and data service, particularly relate to disposal route and the device of the front end page that a kind of Web applies.
Background technology
The Authority Design method of traditional web application: in backstage configure user, role, tissue, the multiple tables of data of resource, according to role, user, hoc queries service resources data in data-interface, Query Result is mapped to front end page, the page is analysis result collection again, is loaded in DOM Document Object Model element.
The code distribution of whole data query, mapping, parsing, loading is in disorder, authorization policy is heavy dumb, lacks unified rights management and control, maintainable very poor.Especially, when business demand changes, need to revise all data-query interfaces, steering logic and front end page, lack extensibility and portability.
Summary of the invention
In order to overcome data query process privilege strategy on webpage heavy and business demand changes time extensibility and the problem of portability difference, embodiments provide disposal route and the device of the front end page that a kind of Web applies.
In order to solve the problems of the technologies described above, the present invention adopts following technical scheme:
According to one aspect of the present invention, provide the disposal route of the front end page that a kind of Web applies, the treating method comprises: all modules loading the web page files of Web application, wherein module comprises: script language files and DIV layer, and described script language files and DIV layer are provided with route binding relationship; Bind according to the bi-directional data that the DOM Document Object Model element of the DIV layer bound with described script language files route and the model that pre-sets are set up, and the capability identification preset, obtain the corresponding data of the model corresponding with the DOM Document Object Model element of the DIV layer in described module; The corresponding data of acquisition is loaded in the DOM Document Object Model element of the DIV layer in described module and carries out playing up and showing.
Optionally, described disposal route also comprises: set up bi-directional data according to the DOM Document Object Model element of the DIV layer bound with described script language files route and the model that pre-sets and bind.
Optionally, set up bi-directional data according to the DOM Document Object Model element of the DIV layer bound with described script language files route and the model that pre-sets to bind and specifically comprise:
Obtain the memory headroom of the script language files application of described module;
The data from the described model pre-set are loaded by described memory headroom;
Load the data from described memory headroom by the DOM Document Object Model element of the DIV layer bound with described script language files route, the DOM Document Object Model element realizing DIV layer bind with described script language files route is set up bi-directional data with the model pre-set and is bound.
Optionally, described web page files is HTML (Hypertext Markup Language) file.
Optionally, load all modules of the web page files of Web application, be specially: all modules loading the web page files of Electronic Health Record in script storehouse.
Optionally, described disposal route also comprises: the single web page files apply Web and capability identification carry out route binding, and wherein each capability identification corresponds to different modules.
According to another aspect of the present invention, provide the treating apparatus of the front end page that a kind of Web applies, comprising:
Front-end module, for loading all modules of the web page files of Web application, wherein module comprises: script language files and DIV layer, and described script language files and DIV layer are provided with route binding relationship;
Acquisition module, for according to and the DOM Document Object Model element of DIV layer bind of described script language files route bind with the bi-directional data that the model pre-set is set up, and the capability identification preset, obtain the corresponding data of the model corresponding with the DOM Document Object Model element of the DIV layer in described module;
Display module, for the corresponding data of acquisition is loaded into the DIV layer in described module DOM Document Object Model element in carry out playing up and showing.
Optionally, above-mentioned treating apparatus also comprises:
Binding module, for according to and the DOM Document Object Model element of DIV layer bind of described script language files route set up bi-directional data with the model pre-set and bind.
Optionally, above-mentioned binding module comprises:
Application unit, for obtaining the memory headroom of the script language files application of described module;
Loading unit, for loading the data from the described model pre-set by described memory headroom;
Binding unit, DOM Document Object Model element for the DIV layer by binding with described script language files route loads the data from described memory headroom, and the DOM Document Object Model element realizing DIV layer bind with described script language files route is set up bi-directional data with the model pre-set and bound.
Optionally, above-mentioned treating apparatus also comprises:
Mark binding module, carries out route binding for the single web page files apply by Web and capability identification, and wherein each capability identification is corresponding to different modules.
The invention has the beneficial effects as follows:
The disposal route of the application embodiment of the present invention and device, can when first time inquiry business resource data, all data in database are loaded in the memory headroom that script language files applies for by the model pre-set, the DOM Document Object Model element of the DIV layer bound with described script language files route only need load data from memory headroom, user by browser load page and without the need to leaving this navigation page, for user provides experience that is local mobile closer to one or multipad.
Accompanying drawing explanation
Fig. 1 represents one of process flow diagram of the disposal route of the front end page of Web application in the embodiment of the present invention;
Fig. 2 represents the process flow diagram two of the disposal route of the front end page of Web application in the embodiment of the present invention;
Fig. 3 represents the process flow diagram that embodiment of the present invention bi-directional data is bound;
Fig. 4 represents the process flow diagram three of the disposal route of the front end page of Web application in the embodiment of the present invention;
Fig. 5 represents the process flow diagram of embodiment of the present invention actual queries service resources data;
Fig. 6 represents the schematic diagram of the treating apparatus of the front end page of Web application in the embodiment of the present invention;
Fig. 7 represents the schematic diagram of embodiment of the present invention binding module.
Embodiment
For making the object, technical solutions and advantages of the present invention clearly, describe the present invention below in conjunction with the accompanying drawings and the specific embodiments.
As shown in Figure 1, one of process flow diagram of the disposal route of the front end page of embodiment of the present invention Web application, comprises the following steps:
All modules of the web page files of step S100, loading Web application, wherein module comprises: script language files and DIV layer, and script language files and DIV layer are provided with route binding relationship.
It should be noted that web page files is HTML (Hypertext Markup Language) file, all modules loading the web page files of Web application can be understood as all modules of the web page files loading Electronic Health Record in script storehouse.
Step S200, the bi-directional data set up according to the DOM Document Object Model element of the DIV layer bound with script language files route and the model that pre-sets are bound, and the capability identification preset, obtain the corresponding data of the model corresponding with the DOM Document Object Model element of the DIV layer in module.
Should be noted that, user can be divided into different ranks by the capability identification according to presetting, different user classs can check different data messages, such as user is divided into domestic consumer and keeper, domestic consumer is only to obtain the data message of oneself, and keeper can obtain proprietary data message; Embody authorization policy, avoid the cost of Data Analysis and conversion, for user provides the experience closer to a local movement or multipad.
Step S300, the corresponding data of acquisition is loaded into the DIV layer in module DOM Document Object Model element in carry out playing up and showing.
As shown in Figure 2, be that, before step S100, the method is further comprising the steps of with Fig. 1 difference in the embodiment of the present invention:
Step S500, set up bi-directional data according to the DOM Document Object Model element of the DIV layer bound with script language files route and the model that pre-sets and bind.
Fig. 3 is the process flow diagram of the step S500 of Fig. 2, and step S500 comprises the following steps:
The memory headroom of the script language files application of step S501, acquisition module;
Step S502, load from the data of the model pre-set by memory headroom;
Step S503, load the data from memory headroom by the DOM Document Object Model element of the DIV layer bound with script language files route, the DOM Document Object Model element realizing DIV layer bind with script language files route is set up bi-directional data with the model pre-set and is bound.
Should be noted that, script language files with bind with the DIV layer route under module, script language files application obtains memory headroom, memory headroom loads from the data message of the model pre-set that (script language files controls the information of the model loading of databases pre-set, memory headroom loads the information from the database in the model pre-set), the DOM Document Object Model element of DIV layer loads the data message from memory headroom, bi-directional data binding set up by the DOM Document Object Model element achieving DIV layer by memory headroom and the model pre-set.
As shown in Figure 4, the process flow diagram three of the disposal route of the front end page of the middle Web application of the embodiment of the present invention, with the disposal route shown in Fig. 2 unlike, in the disposal route shown in Fig. 4 before step S500, this disposal route also comprises:
Step S800, the single web page files applied by Web and capability identification carry out route binding, and wherein each capability identification corresponds to different modules.
It is appreciated of course that, do not limit the sequencing of step S500 and step S800 in an embodiment of the present invention.
It should be noted that the single web page files route that capability identification and Web apply is bound, such as navigation bar and capability identification route are bound.Different capability identification, corresponding different modules, shows different contents; Such as, can only check data message when domestic consumer logs in and without amendment option, not only check when keeper logs in that option revises option in addition, can check that data message can also be modified to data message.
As shown in Figure 5, the process flow diagram of embodiment of the present invention actual queries service resources data,
The first step, HTML (Hypertext Markup Language) file (main.html) once load all modules, and one of them module comprises a DIV layer of a script language files (such as JS file) and main.html file;
Second step, in script storehouse, load all modules and the script language files of each module and DIV layer are carried out route binding; Particularly, load all modules at APP.JS and JS and the DIV layer of each module is carried out route binding.
The DOM Document Object Model element (DOM element) of this module DIV layer controlled by the JS file of the 3rd step, each module and model carries out bi-directional data binding, and wherein bi-directional data binding is that $ Scope memory headroom by applying in script language files realizes;
4th step, bound hypertext markup language document obtain data from memory headroom, and are loaded in the DOM Document Object Model element of oneself DIV layer and carry out playing up and showing.
In the present embodiment, the route technology can applied by single page, realizes the route binding of navigation bar and capability identification in front-end A PP.JS file.Particularly: navigation bar method of operating: navbar:[{name: ' columns management ', url: '/versionManage ', authority: ' admin ' } ...Background service mode of operation is: the authority being obtained role by checkAuthority.
It should be noted that when carrying out rights management, user can be divided into domestic consumer and keeper; When common user query service resources data, bound hypertext markup language document can only obtain the service resources data of active user oneself from memory headroom, then carried out playing up and showing by the service resources Data import of active user oneself in the DOM Document Object Model element of oneself DIV layer; When keeper's inquiry business resource data, bound hypertext markup language document obtains proprietary service resources data from memory headroom, the service resources Data import of the domestic consumer then will inquired about carries out playing up and showing in the DOM Document Object Model element of oneself DIV layer, needs the service resources data of inquiring about other domestic consumers only need from memory headroom loaded with traffic resource data.
As shown in Figure 6, be the schematic diagram of the treating apparatus of the front end page of Web application in embodiments of the invention, treating apparatus comprises:
Front-end module 610, acquisition module 620, display module 630, binding module 640 and mark binding module 650; Wherein, front-end module 610 is for loading all modules of the web page files of Web application, and wherein module comprises: script language files and DIV layer, and script language files and DIV layer are provided with route binding relationship; The DOM Document Object Model element of the DIV layer that acquisition module 620 is bound for basis and script language files route is bound with the bi-directional data that the model pre-set is set up, and the capability identification preset, obtain the corresponding data of the model corresponding with the DOM Document Object Model element of the DIV layer in module; Display module 630 for the corresponding data of acquisition is loaded into the DIV layer in module DOM Document Object Model element in carry out playing up and showing; The DOM Document Object Model element of the DIV layer that binding module 640 is bound for basis and script language files route is set up bi-directional data with the model pre-set and is bound; Mark binding module 650 carries out route binding for the single web page files apply by Web and capability identification, and wherein each capability identification is corresponding to different modules.
Should be noted that, by rights management techniques of the prior art, change the point of penetration of rights management, user can be divided into different ranks by the capability identification according to presetting, different user classs can check different data messages, such as user is divided into domestic consumer and keeper, and domestic consumer is only to obtain the data message of oneself, and keeper can obtain proprietary data message; Embody authorization policy, avoid the cost of Data Analysis and conversion, for user provides the experience closer to a local movement or multipad.
As shown in Figure 7, binding module 640 comprises: application unit 641, loading unit 642 and binding unit 643; Wherein, application unit 641 is for obtaining the memory headroom of the script language files application of module; Loading unit 642 is for loading the data from the model pre-set by memory headroom; Binding unit 643 loads the data from described memory headroom for the DOM Document Object Model element of the DIV layer by bind with script language files route, realizes and the DOM Document Object Model element of DIV layer that script language files route is bound is set up bi-directional data with the model pre-set and bound.
Should be noted that, script language files with bind with the DIV layer route under module, application unit 641 obtains memory headroom by script language files application, loading unit 642 loads from the data message of the model pre-set by memory headroom that (script language files controls the information of the model loading of databases pre-set, memory headroom loads the information from the database in the model pre-set), the DOM Document Object Model element of DIV layer loads the data message from memory headroom, bi-directional data binding set up by the DOM Document Object Model element achieving DIV layer by memory headroom and the model pre-set.
Above is the preferred embodiment of the present invention, should be understood that the ordinary person for the art, and can also make some improvements and modifications not departing under principle prerequisite of the present invention, these improvements and modifications are also in protection scope of the present invention.
Claims (10)
1. a disposal route for the front end page of Web application, is characterized in that, the treating method comprises:
Load all modules of the web page files of Web application, wherein module comprises: script language files and DIV layer, and described script language files and DIV layer are provided with route binding relationship;
Bind according to the bi-directional data that the DOM Document Object Model element of the DIV layer bound with described script language files route and the model that pre-sets are set up, and the capability identification preset, obtain the corresponding data of the model corresponding with the DOM Document Object Model element of the DIV layer in described module;
The corresponding data of acquisition is loaded in the DOM Document Object Model element of the DIV layer in described module and carries out playing up and showing.
2. disposal route as claimed in claim 1, it is characterized in that, described disposal route also comprises:
Set up bi-directional data according to the DOM Document Object Model element of the DIV layer bound with described script language files route and the model that pre-sets to bind.
3. disposal route as claimed in claim 2, is characterized in that, sets up bi-directional data bind and specifically comprise according to DOM Document Object Model element and the model pre-set of DIV layer bind with described script language files route:
Obtain the memory headroom of the script language files application of described module;
The data from the described model pre-set are loaded by described memory headroom;
Load the data from described memory headroom by the DOM Document Object Model element of the DIV layer bound with described script language files route, the DOM Document Object Model element realizing DIV layer bind with described script language files route is set up bi-directional data with the model pre-set and is bound.
4. disposal route as claimed in claim 1, it is characterized in that, described web page files is HTML (Hypertext Markup Language) file.
5. disposal route as claimed in claim 1, is characterized in that, loads all modules of the web page files of Web application, is specially: all modules loading the web page files of Electronic Health Record in script storehouse.
6. the disposal route as described in any one of Claims 1 to 5, is characterized in that, described disposal route also comprises:
The single web page files apply Web and capability identification carry out route binding, and wherein each capability identification corresponds to different modules.
7. a treating apparatus for the front end page of Web application, described treating apparatus comprises:
Front-end module, for loading all modules of the web page files of Web application, wherein module comprises: script language files and DIV layer, and described script language files and DIV layer are provided with route binding relationship;
Acquisition module, for according to and the DOM Document Object Model element of DIV layer bind of described script language files route bind with the bi-directional data that the model pre-set is set up, and the capability identification preset, obtain the corresponding data of the model corresponding with the DOM Document Object Model element of the DIV layer in described module;
Display module, for the corresponding data of acquisition is loaded into the DIV layer in described module DOM Document Object Model element in carry out playing up and showing.
8. treating apparatus as claimed in claim 7, it is characterized in that, described treating apparatus also comprises:
Binding module, for according to and the DOM Document Object Model element of DIV layer bind of described script language files route set up bi-directional data with the model pre-set and bind.
9. treating apparatus as claimed in claim 8, it is characterized in that, described binding module comprises:
Application unit, for obtaining the memory headroom of the script language files application of described module;
Loading unit, for loading the data from the described model pre-set by described memory headroom;
Binding unit, DOM Document Object Model element for the DIV layer by binding with described script language files route loads the data from described memory headroom, and the DOM Document Object Model element realizing DIV layer bind with described script language files route is set up bi-directional data with the model pre-set and bound.
10. the treating apparatus as described in any one of claim 7 ~ 9, is characterized in that, described treating apparatus also comprises:
Mark binding module, carries out route binding for the single web page files apply by Web and capability identification, and wherein each capability identification is corresponding to different modules.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410553324.8A CN105574043B (en) | 2014-10-17 | 2014-10-17 | A kind of processing method and processing device of the front end page of Web application |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410553324.8A CN105574043B (en) | 2014-10-17 | 2014-10-17 | A kind of processing method and processing device of the front end page of Web application |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105574043A true CN105574043A (en) | 2016-05-11 |
| CN105574043B CN105574043B (en) | 2019-10-25 |
Family
ID=55884185
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410553324.8A Active CN105574043B (en) | 2014-10-17 | 2014-10-17 | A kind of processing method and processing device of the front end page of Web application |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105574043B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108776609A (en) * | 2018-06-27 | 2018-11-09 | 郑州云海信息技术有限公司 | A kind of method, apparatus, computer storage media and the terminal of management navigation menu |
| CN112395101A (en) * | 2020-10-12 | 2021-02-23 | 天津航天中为数据系统科技有限公司 | Big data fast rendering method based on bidirectional data processing mechanism |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101627607A (en) * | 2007-02-26 | 2010-01-13 | 诺基亚公司 | Script-based system to perform dynamic updates to rich media content and services |
| CN102135990A (en) * | 2011-03-11 | 2011-07-27 | 北京神舟航天软件技术有限公司 | Java server page (JSP) template-based intelligent table system capable of being defined freely and generating method |
| CN102637128A (en) * | 2012-03-14 | 2012-08-15 | 北京神州数码思特奇信息技术股份有限公司 | Method for generating selection controls of general levels |
| CN102637194A (en) * | 2012-02-27 | 2012-08-15 | 长春吉大正元信息技术股份有限公司 | Trigger method for late binding event of Web page element in BHO (browser helper object) |
| US8484465B1 (en) * | 2010-12-08 | 2013-07-09 | Google Inc. | Heterogeneous virtual machines sharing a security model |
-
2014
- 2014-10-17 CN CN201410553324.8A patent/CN105574043B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101627607A (en) * | 2007-02-26 | 2010-01-13 | 诺基亚公司 | Script-based system to perform dynamic updates to rich media content and services |
| US8484465B1 (en) * | 2010-12-08 | 2013-07-09 | Google Inc. | Heterogeneous virtual machines sharing a security model |
| CN102135990A (en) * | 2011-03-11 | 2011-07-27 | 北京神舟航天软件技术有限公司 | Java server page (JSP) template-based intelligent table system capable of being defined freely and generating method |
| CN102637194A (en) * | 2012-02-27 | 2012-08-15 | 长春吉大正元信息技术股份有限公司 | Trigger method for late binding event of Web page element in BHO (browser helper object) |
| CN102637128A (en) * | 2012-03-14 | 2012-08-15 | 北京神州数码思特奇信息技术股份有限公司 | Method for generating selection controls of general levels |
Non-Patent Citations (1)
| Title |
|---|
| ARI LERNER: "《AngularJS权威教程》", 31 August 2014, 人民邮电出版社 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108776609A (en) * | 2018-06-27 | 2018-11-09 | 郑州云海信息技术有限公司 | A kind of method, apparatus, computer storage media and the terminal of management navigation menu |
| CN112395101A (en) * | 2020-10-12 | 2021-02-23 | 天津航天中为数据系统科技有限公司 | Big data fast rendering method based on bidirectional data processing mechanism |
| CN112395101B (en) * | 2020-10-12 | 2021-07-20 | 天津航天中为数据系统科技有限公司 | Big data fast rendering method based on bidirectional data processing mechanism |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105574043B (en) | 2019-10-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102184266B (en) | Method for automatically generating dynamic wireless application protocol (WAP) website for separation of page from data | |
| CN102662993A (en) | A method for providing page data | |
| WO2008137117A3 (en) | Method and system for extending the capabilities of embedded devices through network clients | |
| CN104504160B (en) | The online batch wiring method of Excel document based on SSH frames | |
| CN104915454A (en) | File preview system and method | |
| CN105574043A (en) | Processing method and apparatus for front-end page of Web application | |
| CN102685195B (en) | Application service combined method, Apparatus and system | |
| EP2874071A1 (en) | Method of implementing structured and non-structured data in xml document | |
| CN106126683A (en) | Page display method and terminal unit | |
| CN103034496A (en) | Locally-static portal generation method based on template | |
| CN102456004A (en) | Query control method and system of page data | |
| CN103347069A (en) | Method and device for realizing network access | |
| Li et al. | Office Automation Sub-Summary of the Work and the Project Management System | |
| CN103309954A (en) | Html webpage based data extracting system | |
| WO2005008518A3 (en) | System and method for generating html based on common xslt | |
| CN101587475A (en) | File sharing method and file sharing system for acquiring network access address through redirection server | |
| Tzimas et al. | „Generationenkonflikte “in Instituten für Rechtsmedizin? | |
| CN101588382A (en) | Method for submitting attachment in Web pages | |
| Anderson-Rowland | Thinking about graduate school | |
| CN103136304A (en) | Article processing method and device | |
| Yang et al. | Study on urban its architecture based on the internet of things | |
| CN104504528A (en) | Internet of things based intellectual property service system | |
| Bales et al. | Oracle Application Server 10g Essentials | |
| Gaedke et al. | The Web as an application platform | |
| CN201072553Y (en) | Device for web page dynamically non-refreshing displaying large exterior data |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |