CN104731594A - Method for displaying runtime customized page based on Bootstrap - Google Patents

Method for displaying runtime customized page based on Bootstrap Download PDF

Info

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
bootstrap
json
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
Application number
CN201510135254.9A
Other languages
Chinese (zh)
Inventor
陶德超
贺作华
杜晓东
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Group Co Ltd
Original Assignee
Inspur Group Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Inspur Group Co Ltd filed Critical Inspur Group Co Ltd
Priority to CN201510135254.9A priority Critical patent/CN104731594A/en
Publication of CN104731594A publication Critical patent/CN104731594A/en
Pending legal-status Critical Current

Links

Landscapes

  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a method for displaying a runtime customized page based on Bootstrap, which comprises the following specific implementation processes: firstly, page initialization is carried out, namely a user sends a page browsing request to a server side at a client side, and the server side obtains and analyzes a page description document according to a page ID of the request to form JSON format data to be returned to the client side; page linkage operation: and calling the returned JSON data by the client script to describe the UI page, generating a data Model instance and acquiring data to bind to the page, thereby realizing linkage of the UI page and the data. Compared with the prior art, the method for displaying the runtime customized page based on the Bootstrap has the advantages that after iteration is performed for multiple times by using the AdaBoost algorithm, various elements, layouts and functions of the page can be defined according to business requirements, and finally the displayed page is displayed according to designed styles, so that the method is high in practicability and easy to popularize.

Description

A kind of method based on customized web page during Bootstrap display operation
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.
CN201510135254.9A 2015-03-26 2015-03-26 Method for displaying runtime customized page based on Bootstrap Pending CN104731594A (en)

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 (27)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105446740A (en) * 2015-11-27 2016-03-30 国网信息通信产业集团有限公司 MVVM (Model-View-View Model) architecture based Web front-end presentation system
CN105447198A (en) * 2015-12-30 2016-03-30 深圳市瑞铭无限科技有限公司 Convenient page script importing method and device
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
CN110716718A (en) * 2019-08-30 2020-01-21 深圳壹账通智能科技有限公司 Page generation method, device, equipment and storage medium
CN112686731A (en) * 2021-01-04 2021-04-20 浪潮云信息技术股份公司 Service product shopping cart implementation method applied to government affair cloud scene
CN113312882A (en) * 2021-05-11 2021-08-27 航天信息股份有限公司 Multi-page interaction method and system based on json technology
CN113626901A (en) * 2021-08-13 2021-11-09 北京南凯自动化系统工程有限公司 Rail transit customized workflow flow designer based on Bootstrap
CN117348870A (en) * 2023-09-20 2024-01-05 北京安锐卓越信息技术股份有限公司 Page customization method and device, medium and electronic equipment
CN117827315A (en) * 2023-12-29 2024-04-05 深圳市六度人和科技有限公司 Data binding method and device, electronic equipment and readable storage medium
CN113312882B (en) * 2021-05-11 2024-10-25 航天信息股份有限公司 Multi-page interaction method and system based on json technology

Citations (3)

* Cited by examiner, † Cited by third party
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

Patent Citations (3)

* Cited by examiner, † Cited by third party
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 (34)

* Cited by examiner, † Cited by third party
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
CN105490842B (en) * 2015-11-30 2018-12-18 用友网络科技股份有限公司 A kind of method based on the dialogue of MVVM model management in online service 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
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
CN107424033A (en) * 2016-03-29 2017-12-01 阿里巴巴集团控股有限公司 A kind of component rendering method, page display method, client, server and storage medium
CN107424033B (en) * 2016-03-29 2021-06-18 阿里巴巴集团控股有限公司 Component rendering method, page display method, client, server and storage medium
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
CN106126249A (en) * 2016-06-29 2016-11-16 武汉斗鱼网络科技有限公司 A kind of method and system realizing behavior, data, 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
CN110716718A (en) * 2019-08-30 2020-01-21 深圳壹账通智能科技有限公司 Page generation method, device, equipment and storage medium
CN112686731A (en) * 2021-01-04 2021-04-20 浪潮云信息技术股份公司 Service product shopping cart implementation method applied to government affair cloud scene
CN113312882A (en) * 2021-05-11 2021-08-27 航天信息股份有限公司 Multi-page interaction method and system based on json technology
CN113312882B (en) * 2021-05-11 2024-10-25 航天信息股份有限公司 Multi-page interaction method and system based on json technology
CN113626901A (en) * 2021-08-13 2021-11-09 北京南凯自动化系统工程有限公司 Rail transit customized workflow flow designer based on Bootstrap
CN113626901B (en) * 2021-08-13 2024-04-30 北京南凯自动化系统工程有限公司 Bootstrap-based custom workflow flow designer for rail transit
CN117348870A (en) * 2023-09-20 2024-01-05 北京安锐卓越信息技术股份有限公司 Page customization method and device, medium and electronic equipment
CN117827315A (en) * 2023-12-29 2024-04-05 深圳市六度人和科技有限公司 Data binding method and device, electronic equipment and readable storage medium

Similar Documents

Publication Publication Date Title
CN104731594A (en) Method for displaying runtime customized page based on Bootstrap
WO2021008030A1 (en) Web form configuration method and device, and computer readable storage medium
EP3667520A1 (en) Webpage content extraction method and terminal device
CN105094786A (en) Method and system for customizing page based on JavaScript
AU2004205330A1 (en) Programming interface for a computer platform
CN102073502A (en) Method for rendering page frame by WEB primary layout and device thereof
CN108595697B (en) Webpage integration method, device and system
CN105630522A (en) Web application updating method, apparatus and system
CN108664242B (en) Method and device for generating visual interface, electronic equipment and readable storage medium
Oak et al. Dynamic Forms UI: Flexible and Portable Tool for easy UI Design
CN112825038B (en) Visual page manufacturing method based on general component language specification and related products
US20140281922A1 (en) Application of a system font mapping to a design
Oh et al. Automated transformation of template-based web applications into single-page applications
Daniel Live, personal data integration through UI-oriented computing
US20150067138A1 (en) Optimize data exchange for mvc-based web applications
Somi User Interface Development of a Modern Web Application
US9779387B2 (en) Business-to-business document user interface and integration design
US20160012146A1 (en) Client Web Browser and Method for Constructing a Website DOM Module With Client-Side Functional Code
US11977866B2 (en) Application screen display program installing method
Gündoğan Automation of Artwork Processes
ARDITO User Interface Development of a Modern Web Application
Van der Westhuizen Bootstrap for ASP. NET MVC
Jakupov Development of a web-based application for automated energy management system
Yang Built-In Components and Modules
Freeman et al. An HTML and CSS Primer

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
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20150624