CN104731594A - Method for displaying runtime customized page based on Bootstrap - Google Patents
Method for displaying runtime customized page based on Bootstrap Download PDFInfo
- Publication number
- CN104731594A CN104731594A CN201510135254.9A CN201510135254A CN104731594A CN 104731594 A CN104731594 A CN 104731594A CN 201510135254 A CN201510135254 A CN 201510135254A CN 104731594 A CN104731594 A CN 104731594A
- Authority
- CN
- China
- Prior art keywords
- page
- data
- client
- json
- customized web
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Abstract
The invention discloses a method for displaying a runtime customized page based on Bootstrap. The method specifically comprises the steps that page initialization is conducted firstly, wherein a user on the client side sends a page browsing request to the server side, and the server side acquires a page description file according to the ID of the requested page and analyzes the page description file, so that JSON-format data are formed and fed back to the client side; page linkage operation is conducted; a client script calls the JSON data which are fed back to describe a UI page, generates a data Model example, and binds the acquired data to the page, so that linkage between the UI page and the data is achieved. Compared with the prior art, the method has the advantages that after iteration is conducted multiple times with the AdaBoost algorithm, various elements, overall arrangement and functions of the page can be defined according to service requirements, final content display is conducted according to a designed style, practicality is high, and popularization is easy.
Description
Technical field
The present invention relates to field of computer technology, specifically a kind of practical, based on Bootstrap display run time customized web page method.
Background technology
Bootstrap is a front end frame for fast Development Web application program and website.Bootstrap is based on HTML, CSS, JAVASCRIPT.It provides a succinct unified solution for developer creates interface, contains powerful installed with built-in component, is easy to customization, it provides the customization of sing on web, and increase income.
MVVM is writing a Chinese character in simplified form of Model-View-ViewModel, it is three-tier architecture, M layer (Model physical layer), V layer (View presentation layer, it has DataContext attribute, the data that this attribute can use DataTemplate template to bind VM layer are used for showing), VM layer (ViewModel layer, carry out CRUD to Model layer to operate, there is provided data binding to V layer) simultaneously, the benefit of such layering is that all departments can work completely independently, in specific implementation, adopt KnockOut support, only need the access of focused data, do not need again refresh whole control fragment or oneself write JS additions and deletions node.
In prior art, when customizing the UI page of HTML, after various element in the page and layout change, data cannot upgrade in time, whole procedure for displaying is delayed, if Bootstrap can be adopted to carry out the customization UI page, then can effectively solve this problem, in actual applications, Bootstrap is responsible for UI, and Knockout.js is responsible for data binding, can according to the list description document formed, succinctly fast show required UI interface, and carry out the operation of data Binding Update, do not need in theory to write unnecessary JavaScript code and CSS describes.Based on this, now provide a kind of method based on customized web page during Bootstrap display operation.
Summary of the invention
Technical assignment of the present invention is for above weak point, provide a kind of practical, based on Bootstrap display run time customized web page method.
A method for customized web page when running based on Bootstrap display, its specific implementation process is:
First carry out page initialization, namely user sends page browsing request in client, and server end obtains page-describing document according to the page ID of request and resolves, and forms JSON formatted data and returns client;
Page combined operation: client script calls the JSON data that return and describes the UI page, generates data Model example and obtains data and be tied to the page, realizes the interlock of the UI page and data.
Before described page initialization, create page basic description document, the content that this page basic description document package contains comprises: the corresponding field of page elements type, binding data object, page elements binding, and the filtration providing row authority to carry out display field and editability.
The initialized detailed process of the described page is:
Server end, according to the page ID that will obtain, obtains the design documentation ID of customized web page when running, and obtains the description XML document of the document from database;
The corresponding page XML document that server end analysis obtains, converts the attribute of each project obtained to JSON form, turns back to client.
The UI page that described JSON data are described comprises following element: text, numeral, drop-down, date, time, intelligence help control.
The detailed process of described page combined operation is: when opening the UI page, the page ID that input will load, client reads the description definition of the server end UI page, parsing and the secondary description of interface element and data binding is carried out by this definition, and turning back to client by the data of JSON form, client carries out layout and the restructuring of page elements according to the JSON data returned.
The detailed process of described page combined operation is: client processes the JSON data obtained from server end, converts corresponding HTML Tag to and adds in a blank page, form Persistent Object;
Client script generates a Model according to the Persistent Object that the page is bound and is tied on the page;
After page elements loaded, the data object according to binding initiates server request, carries out Data import work, and is shown to the page, realize the interlock of the UI page and data.
Above-mentioned each element all has corresponding JavaScript to carry out packaging process to it when being generated to html page.
The described UI page is when combined operation, according to the value of corresponding field in the value change real-time update Model in page elements, and return data storehouse is preserved: when namely server end detects that the data that change exist, the data of this changing unit are by two-way binding, the change of the value of the page is reflected in the Model of binding, and is updated to database by request and preserves.
A kind of method based on customized web page during Bootstrap display operation of the present invention, has the following advantages:
A kind of method based on customized web page during Bootstrap display operation that the present invention proposes, various elements, layout, the function of the page can be defined according to business need, final display page carries out content displaying according to the pattern of design, and have employed MVVM framework, when page coherent element value changes, the data that can upgrade in time in internal memory, thus the two-way binding completing page data, practical, be easy to promote.
Accompanying drawing explanation
Accompanying drawing 1 is page initialization schematic diagram of the present invention.
Accompanying drawing 2 is page operation schematic diagram of the present invention.
Embodiment
Below in conjunction with the drawings and specific embodiments, the invention will be further described.
The invention discloses a kind of method based on customized web page during Bootstrap display operation, the process of the method is as shown in accompanying drawing 1, Fig. 2, and its specific implementation process is:
First carry out page initialization, namely user sends page browsing request in client, and server end obtains page-describing document according to the page ID of request and resolves, and forms JSON formatted data and returns client;
Page combined operation: client script calls the JSON data that return and describes the UI page, generates data Model example and obtains data and be tied to the page, realizes the interlock of the UI page and data.
Before described page initialization, create page basic description document, design when supporting to run, the content wherein comprised comprises page elements type, binding data object, and the corresponding field of page elements binding, and the filtration providing row authority to carry out display field and editability.
The initialized detailed process of the described page is:
Server end, according to the page ID that will obtain, obtains the design documentation ID of customized web page when running, and obtains the description XML document of the document from database;
The corresponding page XML document that server end analysis obtains, converts the attribute of each project obtained to JSON form, turns back to client.
The UI page that described JSON data are described comprises following element: text, numeral, drop-down, date, time, intelligence help control, provide a series of secondary encapsulation, realize the extension process for the display of self-defining term object, operation, data binding.
The detailed process of described page combined operation is: when opening the UI page, the page ID that input will load, client reads the description definition of the server end UI page, parsing and the secondary description of interface element and data binding is carried out by this definition, and turn back to client by the data of JSON form, client carries out layout and the restructuring of page elements according to the JSON data returned, this interlock refers to the binding Model example generating page data according to the JSON returned, carry out data query and binding by Ajax, and realize the business logic processing of form data.
The detailed process of described page combined operation is: client processes the JSON data obtained from server end, converts corresponding HTML Tag to and adds in a blank page, form Persistent Object;
Client script generates a Model according to the Persistent Object that the page is bound and is tied on the page;
After page elements loaded, the data object according to binding initiates server request, carries out Data import work, and is shown to the page, realize the interlock of the UI page and data.
Above-mentioned each element all has corresponding JavaScript to carry out packaging process to it when being generated to html page.
The described UI page is when combined operation, according to the value of corresponding field in the value change real-time update Model in page elements, and return data storehouse is preserved: when namely server end detects that the data that change exist, the data of this changing unit are by two-way binding, the change of the value of the page is reflected in the Model of binding, and is updated to database by request and preserves.
In the above-mentioned methods, for each page when page presentation, different Model objects can be generated according to different binding data objects, be tied on the page.
When server end carries out data preservation work, can upgrade in conjunction with authority according to amended content, prevent amendment page properties from carrying out unauthorized operation.
Embodiment:
In GSPStudio, add new business object, and in business object, add the list definition of Web type.
Row authority is specified to the list of specifying.
Open chaining of the page, specify subFrame.html Transfer Parameters opens the page.
By adopting said method, can define various elements, layout, the function of the page according to business need, final display page carries out content displaying according to the pattern of design, practical.
Above-mentioned embodiment is only concrete case of the present invention; scope of patent protection of the present invention includes but not limited to above-mentioned embodiment; any according to the invention a kind of based on Bootstrap display run time customized web page method claims and the those of ordinary skill of any described technical field to its suitable change done or replacement, all should fall into scope of patent protection of the present invention.
Claims (8)
1. the method based on customized web page during Bootstrap display operation, it is characterized in that, its specific implementation process is: first carry out page initialization, namely user sends page browsing request in client, server end obtains page-describing document according to the page ID of request and resolves, and forms JSON formatted data and returns client;
Page combined operation: client script calls the JSON data that return and describes the UI page, generates data Model example and obtains data and be tied to the page, realizes the interlock of the UI page and data.
2. a kind of method based on customized web page during Bootstrap display operation according to claim 1, it is characterized in that, before described page initialization, create page basic description document, the content that this page basic description document package contains comprises: the corresponding field of page elements type, binding data object, page elements binding, and the filtration providing row authority to carry out display field and editability.
3. a kind of method based on customized web page during Bootstrap display operation according to claim 2, it is characterized in that, the initialized detailed process of the described page is:
Server end, according to the page ID that will obtain, obtains the design documentation ID of customized web page when running, and obtains the description XML document of the document from database;
The corresponding page XML document that server end analysis obtains, converts the attribute of each project obtained to JSON form, turns back to client.
4. the method for a kind of customized web page when running based on Bootstrap display according to claim 1, it is characterized in that, the UI page that described JSON data are described comprises following element: text, numeral, drop-down, date, time, intelligence help control.
5. a kind of method based on customized web page during Bootstrap display operation according to claim 4, it is characterized in that, the detailed process of described page combined operation is: when opening the UI page, the page ID that input will load, client reads the description definition of the server end UI page, parsing and the secondary description of interface element and data binding is carried out by this definition, and turning back to client by the data of JSON form, client carries out layout and the restructuring of page elements according to the JSON data returned.
6. a kind of method based on customized web page during Bootstrap display operation according to claim 5, it is characterized in that, the detailed process of described page combined operation is:
Client processes the JSON data obtained from server end, converts corresponding HTML Tag to and adds in a blank page, form Persistent Object;
Client script generates a Model according to the Persistent Object that the page is bound and is tied on the page;
After page elements loaded, the data object according to binding initiates server request, carries out Data import work, and is shown to the page, realize the interlock of the UI page and data.
7. a kind of method based on customized web page during Bootstrap display operation according to claim 6, it is characterized in that, above-mentioned each element all has corresponding JavaScript to carry out packaging process to it when being generated to html page.
8. according to the arbitrary a kind of described method based on customized web page during Bootstrap display operation of claim 4-7, it is characterized in that, the described UI page is when combined operation, according to the value of corresponding field in the value change real-time update Model in page elements, and return data storehouse is preserved: when namely server end detects that the data that change exist, the change of the value of the page, by two-way binding, is reflected in the Model of binding, and is updated to database by request and preserves by the data of this changing unit.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510135254.9A CN104731594A (en) | 2015-03-26 | 2015-03-26 | Method for displaying runtime customized page based on Bootstrap |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510135254.9A CN104731594A (en) | 2015-03-26 | 2015-03-26 | Method for displaying runtime customized page based on Bootstrap |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104731594A true CN104731594A (en) | 2015-06-24 |
Family
ID=53455513
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510135254.9A Pending CN104731594A (en) | 2015-03-26 | 2015-03-26 | Method for displaying runtime customized page based on Bootstrap |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104731594A (en) |
Cited By (22)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105447198A (en) * | 2015-12-30 | 2016-03-30 | 深圳市瑞铭无限科技有限公司 | Convenient page script importing method and device |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN105490842A (en) * | 2015-11-30 | 2016-04-13 | 用友网络科技股份有限公司 | Method for managing dialogue in online service system based on MVVM (model-view-viewmodel) model |
| CN105677390A (en) * | 2015-12-28 | 2016-06-15 | 国云科技股份有限公司 | Method for recording and maintaining for large form |
| CN105760159A (en) * | 2016-02-01 | 2016-07-13 | 四川长虹电器股份有限公司 | Website developing method and system |
| CN105824787A (en) * | 2016-03-15 | 2016-08-03 | 江苏中威科技软件系统有限公司 | Control method and system for dynamic configuration of HTML template |
| CN105867919A (en) * | 2016-03-28 | 2016-08-17 | 浙江大学 | Front end data bidirectional binding realization method based on accessor hijack |
| CN106126249A (en) * | 2016-06-29 | 2016-11-16 | 武汉斗鱼网络科技有限公司 | A kind of method and system realizing behavior, data, view linkage in front end |
| CN106686037A (en) * | 2015-11-09 | 2017-05-17 | 广州市动景计算机科技有限公司 | Page detecting method, device, equipment and system |
| CN106933613A (en) * | 2015-12-31 | 2017-07-07 | 北京五八信息技术有限公司 | APP pages loading method and device |
| CN107102859A (en) * | 2017-04-20 | 2017-08-29 | 千寻位置网络有限公司 | The method of automatic filling Web lists |
| CN107193887A (en) * | 2017-04-28 | 2017-09-22 | 武汉斗鱼网络科技有限公司 | A kind of method and device for the resource that Loads Image |
| CN107273113A (en) * | 2017-05-05 | 2017-10-20 | 广东网金控股股份有限公司 | The binding of page control and entity, to entity assignment and the method for page control assignment |
| CN107424033A (en) * | 2016-03-29 | 2017-12-01 | 阿里巴巴集团控股有限公司 | A kind of component rendering method, page display method, client, server and storage medium |
| CN107526755A (en) * | 2016-09-27 | 2017-12-29 | 腾讯科技（深圳）有限公司 | The processing method and processing device of data |
| CN109032917A (en) * | 2017-06-09 | 2018-12-18 | 北京金山云网络技术有限公司 | Page adjustment method and system, mobile terminal and computer end |
| CN109213956A (en) * | 2018-09-18 | 2019-01-15 | 成都知道创宇信息技术有限公司 | A method of generating online product introduction single page |
| CN109471627A (en) * | 2018-10-22 | 2019-03-15 | 大唐网络有限公司 | Page presentation control method, system and device |
| CN109814843A (en) * | 2018-12-27 | 2019-05-28 | 中链科技有限公司 | A kind of object-based page assignment method and system |
| CN110427233A (en) * | 2019-06-26 | 2019-11-08 | 北京三快在线科技有限公司 | Back-end data binding method, device, electronic equipment and storage medium |
| CN112686731A (en) * | 2021-01-04 | 2021-04-20 | 浪潮云信息技术股份公司 | Service product shopping cart implementation method applied to government affair cloud scene |
| CN113626901A (en) * | 2021-08-13 | 2021-11-09 | 北京南凯自动化系统工程有限公司 | Rail transit customized workflow flow designer based on Bootstrap |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102737128A (en) * | 2012-06-20 | 2012-10-17 | 深圳市远行科技有限公司 | Dynamic webpage processing method and device based on browser |
| CN102779164A (en) * | 2012-06-20 | 2012-11-14 | 深圳市远行科技有限公司 | Business system and rendering method of dynamic pages of same |
| CN104158836A (en) * | 2014-06-23 | 2014-11-19 | 浙江大学城市学院 | Method for rendering mobile application interface through data |
-
2015
- 2015-03-26 CN CN201510135254.9A patent/CN104731594A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102737128A (en) * | 2012-06-20 | 2012-10-17 | 深圳市远行科技有限公司 | Dynamic webpage processing method and device based on browser |
| CN102779164A (en) * | 2012-06-20 | 2012-11-14 | 深圳市远行科技有限公司 | Business system and rendering method of dynamic pages of same |
| CN104158836A (en) * | 2014-06-23 | 2014-11-19 | 浙江大学城市学院 | Method for rendering mobile application interface through data |
Cited By (28)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106686037A (en) * | 2015-11-09 | 2017-05-17 | 广州市动景计算机科技有限公司 | Page detecting method, device, equipment and system |
| CN105446740A (en) * | 2015-11-27 | 2016-03-30 | 国网信息通信产业集团有限公司 | MVVM (Model-View-View Model) architecture based Web front-end presentation system |
| CN105490842A (en) * | 2015-11-30 | 2016-04-13 | 用友网络科技股份有限公司 | Method for managing dialogue in online service system based on MVVM (model-view-viewmodel) model |
| CN105490842B (en) * | 2015-11-30 | 2018-12-18 | 用友网络科技股份有限公司 | A kind of method based on the dialogue of MVVM model management in online service system |
| CN105677390A (en) * | 2015-12-28 | 2016-06-15 | 国云科技股份有限公司 | Method for recording and maintaining for large form |
| CN105447198A (en) * | 2015-12-30 | 2016-03-30 | 深圳市瑞铭无限科技有限公司 | Convenient page script importing method and device |
| CN106933613B (en) * | 2015-12-31 | 2021-06-01 | 北京五八信息技术有限公司 | APP page loading method and device |
| CN106933613A (en) * | 2015-12-31 | 2017-07-07 | 北京五八信息技术有限公司 | APP pages loading method and device |
| CN105760159A (en) * | 2016-02-01 | 2016-07-13 | 四川长虹电器股份有限公司 | Website developing method and system |
| CN105824787A (en) * | 2016-03-15 | 2016-08-03 | 江苏中威科技软件系统有限公司 | Control method and system for dynamic configuration of HTML template |
| CN105824787B (en) * | 2016-03-15 | 2018-03-02 | 江苏中威科技软件系统有限公司 | A kind of control method and system of html template dynamic configuration |
| CN105867919A (en) * | 2016-03-28 | 2016-08-17 | 浙江大学 | Front end data bidirectional binding realization method based on accessor hijack |
| CN107424033B (en) * | 2016-03-29 | 2021-06-18 | 阿里巴巴集团控股有限公司 | Component rendering method, page display method, client, server and storage medium |
| CN107424033A (en) * | 2016-03-29 | 2017-12-01 | 阿里巴巴集团控股有限公司 | A kind of component rendering method, page display method, client, server and storage medium |
| CN106126249A (en) * | 2016-06-29 | 2016-11-16 | 武汉斗鱼网络科技有限公司 | A kind of method and system realizing behavior, data, view linkage in front end |
| CN106126249B (en) * | 2016-06-29 | 2019-06-04 | 武汉斗鱼网络科技有限公司 | It is a kind of to realize behavior, data, the method and system of view linkage in front end |
| CN107526755A (en) * | 2016-09-27 | 2017-12-29 | 腾讯科技（深圳）有限公司 | The processing method and processing device of data |
| CN107102859A (en) * | 2017-04-20 | 2017-08-29 | 千寻位置网络有限公司 | The method of automatic filling Web lists |
| CN107193887B (en) * | 2017-04-28 | 2019-01-29 | 武汉斗鱼网络科技有限公司 | A kind of method and device for the resource that Loads Image |
| CN107193887A (en) * | 2017-04-28 | 2017-09-22 | 武汉斗鱼网络科技有限公司 | A kind of method and device for the resource that Loads Image |
| CN107273113A (en) * | 2017-05-05 | 2017-10-20 | 广东网金控股股份有限公司 | The binding of page control and entity, to entity assignment and the method for page control assignment |
| CN109032917A (en) * | 2017-06-09 | 2018-12-18 | 北京金山云网络技术有限公司 | Page adjustment method and system, mobile terminal and computer end |
| CN109213956A (en) * | 2018-09-18 | 2019-01-15 | 成都知道创宇信息技术有限公司 | A method of generating online product introduction single page |
| CN109471627A (en) * | 2018-10-22 | 2019-03-15 | 大唐网络有限公司 | Page presentation control method, system and device |
| CN109814843A (en) * | 2018-12-27 | 2019-05-28 | 中链科技有限公司 | A kind of object-based page assignment method and system |
| CN110427233A (en) * | 2019-06-26 | 2019-11-08 | 北京三快在线科技有限公司 | Back-end data binding method, device, electronic equipment and storage medium |
| CN112686731A (en) * | 2021-01-04 | 2021-04-20 | 浪潮云信息技术股份公司 | Service product shopping cart implementation method applied to government affair cloud scene |
| CN113626901A (en) * | 2021-08-13 | 2021-11-09 | 北京南凯自动化系统工程有限公司 | Rail transit customized workflow flow designer based on Bootstrap |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104731594A (en) | Method for displaying runtime customized page based on Bootstrap | |
| US20190146760A1 (en) | Declarative software application meta-model and system for self modification | |
| US9870203B2 (en) | Consumption layer for business entities | |
| US11087074B2 (en) | Hybrid web publishing system | |
| CN103136201A (en) | Page information display method and page information display device | |
| CN105630522A (en) | Web application updating method, apparatus and system | |
| Cervantes et al. | A principled way to use frameworks in architecture design | |
| Oak et al. | Dynamic Forms UI: Flexible and Portable Tool for easy UI Design | |
| US20170031877A1 (en) | Web Page Design System | |
| CN108595697B (en) | Webpage integration method, device and system | |
| US10742764B2 (en) | Web page generation system | |
| CN108664242B (en) | Method and device for generating visual interface, electronic equipment and readable storage medium | |
| Sanchez et al. | An approach of a framework to create web applications | |
| US20150067157A1 (en) | Optimize data exchange for mvc-based web applications | |
| Daniel | Live, personal data integration through UI-oriented computing | |
| US10255564B2 (en) | Context specific resource editors | |
| CN106055342A (en) | Method for using third-party Form extension component under dojango | |
| US20150370460A1 (en) | Business-to-business document user interface and integration design | |
| CN102662668B (en) | Method and device for optimizing application by utilizing webpage life cycle | |
| Wolf et al. | Make Web Pages Do Something Using JavaScript | |
| ARDITO | User Interface Development of a Modern Web Application | |
| Somi | User Interface Development of a Modern Web Application | |
| Gündoğan | Automation of Artwork Processes | |
| Heimler | Development of a Modular JavaScript Data Display Framework | |
| Cashmore | Creating the Application |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20150624 |
|
| WD01 | Invention patent application deemed withdrawn after publication |