CN109710347A - A method of list page is generated with filtering function based on MVC frame Efficient Development - Google Patents
A method of list page is generated with filtering function based on MVC frame Efficient Development Download PDFInfo
- Publication number
- CN109710347A CN109710347A CN201811199419.9A CN201811199419A CN109710347A CN 109710347 A CN109710347 A CN 109710347A CN 201811199419 A CN201811199419 A CN 201811199419A CN 109710347 A CN109710347 A CN 109710347A
- Authority
- CN
- China
- Prior art keywords
- data
- instruction
- page
- stable
- function
- 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
- Document Processing Apparatus (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a kind of methods for generating list page with filtering function based on MVC frame Efficient Development, the following steps are included: executing promise using trigger-type receives data, when the page is when data variation, the meeting dirty inspection behavior of trigger data model, instruction pipe will collect entire filtration zone and page turning region parameter, will be passed in customized promise as parameter, the parameter after variation is by user's selective extraction, the request to service is executed again, receives new table data.The present invention can improve the deficiencies in the prior art, and the clear wash rice of code structure, can timely update data data.
Description
Technical field
It is especially a kind of that column are generated based on MVC frame Efficient Development band filtering function the present invention relates to software technology field
The method of table page.
Background technique
The full name of MVC is Model View Controller, is model (model)-view (view)-controller
(controller) abbreviation, a kind of software design model, with a kind of service logic, data, the method group of interface display separation
Code is knitted, service logic is gathered into an inside components, while improvement and personalized customization interface and user's interaction, no
It needs to rewrite service logic.MVC is grown up by unique for mapping traditional input, handling and exporting function one
In the structure of the graphic user interface of a logic.
Up to the present, it is known that Web conversion of page is object expression by browser, can may even be guessed, right
As indicating to be DOM tree.DOM indicates Document Object Model, is a specification, can be from World Wide Web
Consortium (W3C) is obtained.But importantly, DOM defines the type and attribute of object, to allow browser
Indicate label.
Current existing web, which is applied, receives the response number that middle ware interface returns by sending request request
According to, and data dynamic generation page elements according to response, and corresponding data attribute, rows column are bound for the element generated
Table handles list and directly acquires page elements to operate dom, in Ajax application program or any other
In JavaScript, these nodes can be used and generate following effect, for example remove element and its content, highlight specific
Text, or addition new images element.Because all occurring client (operating in the code in Web browser), these
Effect occurs immediately, without with server communication.Final result is usually that application program feels response faster, because when asking
When asking when turning to server and explaining response, the content change on the Web page is not in prolonged pause.
But the program will directly operate the binding of dom element and event, further relate to the release of heap memory, it is cumbersome
Dom operation be easy to cause the unclear wash rice of service logic, code maintenance cost is relatively high；And because entering a functional module every time
When can generate a new page number object, then do recursive operation in Table List function, leading to jump out recursion method need to be with sentencing
Itself page number object break whether there is or not presence, cause to jump out every time require remove page number object.
Summary of the invention
The technical problem to be solved in the present invention is to provide one kind to generate list based on MVC frame Efficient Development band filtering function
The method of page, is able to solve the deficiencies in the prior art, the clear wash rice of code structure, can timely update data data.
In order to solve the above technical problems, the technical solution used in the present invention is as follows.
A method of list page being generated with filtering function based on MVC frame Efficient Development, comprising the following steps: using touching
Hairdo executes promise and receives data, and when the page is when data variation, the meeting dirty inspection behavior of trigger data model instructs pipe
Entire filtration zone and page turning region parameter will be collected, will be passed in customized promise as parameter, the parameter after variation
By user's selective extraction, the request to service is executed again, receives new table data.
Preferably, what is write relies on the entitled stable of instruction of injection based on MVC, functional module is needed to need
Then dom document and css file quote the instruction of stable reusable required for this programme, preset html, css file；In list
Following dependent file is quoted in page module:
(1) Stable.js, the command file comprising designing plug-in unit, premise are injected into the main module of app；
(2) Stable.css, the pattern file comprising designing plug-in unit；
(3) Stable.html includes the dom element set of design plug-in unit；
Structure is divided into having structure in Stable.html file:
(1) head structural body, the design area of collection and its filtering interaction for designing filtration parameter；
(2) table structural body, the design area of displaying and its interactive function for receiving data；
(3) pagination structural body designs area for page presentation and its page turning and turn function；
Comprising feature list, filtering function, page-turning function dom document in quote this instruction after, will need to handle data column
The dom tree of table is embedded in the instruction, and in the sub- parent structure of package, feature list scope will after this dom tree is commanded succession
It can be instructed and be taken over by stable, is injected into the dom element of the instruction containing ng-transclude of stable structural body；
After having configured the dom element set in html file, the sub-instructions inherited in the technology configuration-direct are write, by the son
The inherited parameter require of instruction is configured to ^stable, so that the relevant configuration in stable instruction is inherited, in sub-instructions
Link function has needed to configure setConfig object, is somebody's turn to do because stable father's instruction will be read after sub-instructions are finished
SetConfig image parameter, to go to execute the tablePipe pipeline in stable father's instruction；Configuration obtains total data entry
The promise function of total, and configuration obtain the promise function of current page table data, then return after the completion of configuration
Parent relies on instruction, and father instructs configured configuration object value in reading sub-instructions to give father's scope, then executes one by one, complete
Cheng Yici data model is ultimately transferred to the process of view to controller, and data model variation can occur when clicking page turning, according to
The comparison that the dirty checking mechanism of angularjs can trigger old value and newly be worth, once discovery value comparison is variant to be re-executed
Directive instruction, stable instruction will re-execute internal custom instruction, because of the external page number value for relying on instruction
Variation is had occurred and that with the value of filtering head, and the promise function of the acquisition data of built-in command will be injected new become
Change the page number and filtering head data, and the data that please be look for novelty to server-side again according to new page turning data, if data return will
Understand by outside stable instruction execution promise, and data are assigned to the data of pipe needs again, thus shows newly
Data so far complete a page turning process.
Preferably, if there is filtering function, then existing in the tablePipe pipeline being embedded in after multiplex instruction
Corresponding filtering Form Element is added in head structural body in stable.html.
Preferably, whether setConfig object is to select the page number, whether select filtering head, every page of how many number of entries.
Brought beneficial effect is by adopting the above technical scheme: the present invention provides a kind of high efficient and reliable, being easy to tie up
View layers of list page of shield carry into execution a plan, the clear wash rice of program code structure.The code structure for avoiding traditional dom operation is unclear
Wash rice, frequent operation dom element, triggering page turning every time need to recycle in recursive function when value changes the data number that cannot timely update
According to the shortcomings that.Api is easy to grasp, and is suitable for common utility module Function Extension.
Detailed description of the invention
Fig. 1 is stable instruction execution flow chart of steps under MVC Development of Framework mode.
Specific embodiment
Referring to Fig.1, a specific embodiment of the invention receives the following steps are included: executing promise using trigger-type
Data, when the page is when data variation, the meeting dirty inspection behavior of trigger data model, instruction pipe will collect entire filtration zone
And page turning region parameter, will be passed in customized promise as parameter, the parameter after variation by user's selective extraction,
The request to service is executed again, receives new table data.
Write based on MVC rely on injection the entitled stable of instruction, need functional module need dom document and
Then css file quotes the instruction of stable reusable required for this programme, preset html, css file；In single-page module
The middle following dependent file of reference:
(1) Stable.js, the command file comprising designing plug-in unit, premise are injected into the main module of app；
(2) Stable.css, the pattern file comprising designing plug-in unit；
(3) Stable.html includes the dom element set of design plug-in unit；
Structure is divided into having structure in Stable.html file:
(1) head structural body, the design area of collection and its filtering interaction for designing filtration parameter；
(2) table structural body, the design area of displaying and its interactive function for receiving data；
(3) pagination structural body designs area for page presentation and its page turning and turn function；
Comprising feature list, filtering function, page-turning function dom document in quote this instruction after, will need to handle data column
The dom tree of table is embedded in the instruction, and in the sub- parent structure of package, feature list scope will after this dom tree is commanded succession
It can be instructed and be taken over by stable, is injected into the dom element of the instruction containing ng-transclude of stable structural body；
After having configured the dom element set in html file, the sub-instructions inherited in the technology configuration-direct are write, by the son
The inherited parameter require of instruction is configured to ^stable, so that the relevant configuration in stable instruction is inherited, in sub-instructions
Link function has needed to configure setConfig object, is somebody's turn to do because stable father's instruction will be read after sub-instructions are finished
SetConfig image parameter, to go to execute the tablePipe pipeline in stable father's instruction；Configuration obtains total data entry
The promise function of total, and configuration obtain the promise function of current page table data, then return after the completion of configuration
Parent relies on instruction, and father instructs configured configuration object value in reading sub-instructions to give father's scope, then executes one by one, complete
Cheng Yici data model is ultimately transferred to the process of view to controller, and data model variation can occur when clicking page turning, according to
The comparison that the dirty checking mechanism of angularjs can trigger old value and newly be worth, once discovery value comparison is variant to be re-executed
Directive instruction, stable instruction will re-execute internal custom instruction, because of the external page number value for relying on instruction
Variation is had occurred and that with the value of filtering head, and the promise function of the acquisition data of built-in command will be injected new become
Change the page number and filtering head data, and the data that please be look for novelty to server-side again according to new page turning data, if data return will
Understand by outside stable instruction execution promise, and data are assigned to the data of pipe needs again, thus shows newly
Data so far complete a page turning process.
In tablePipe pipeline after being embedded in multiplex instruction, if there is filtering function, then in stable.html
Corresponding filtering Form Element is added in head structural body.
Whether setConfig object is to select the page number, whether select filtering head, every page of how many number of entries.
The present invention provides a kind of high efficient and reliable, easy to maintain view layers of list page to carry into execution a plan, program code
The clear wash rice of structure.The unclear wash rice of code structure of traditional dom operation is avoided, frequent operation dom element, triggering page turning every time need to pass
Return function loops when value change cannot timely update data data the shortcomings that.Api is easy to grasp, and is suitable for common public
Functions of modules extension.
The above shows and describes the basic principles and main features of the present invention and the advantages of the present invention.The technology of the industry
Personnel are it should be appreciated that the present invention is not limited to the above embodiments, and the above embodiments and description only describe this
The principle of invention, without departing from the spirit and scope of the present invention, various changes and improvements may be made to the invention, these changes
Change and improvement all fall within the protetion scope of the claimed invention.The claimed scope of the invention by appended claims and its
Equivalent thereof.
Claims (4)
1. a kind of method for generating list page with filtering function based on MVC frame Efficient Development, it is characterised in that including following step
It is rapid: promise being executed using trigger-type and receives data, when the page is when data variation, the dirty inspection of meeting trigger data model is gone
For, instruction pipe will collect entire filtration zone and page turning region parameter, it will be passed in customized promise as parameter,
Parameter after variation executes the request to service by user's selective extraction again, receives new table data.
2. the method according to claim 1 for generating list page with filtering function based on MVC frame Efficient Development, feature
Be: what is write relies on the entitled stable of instruction of injection, the dom document for needing functional module to need and css text based on MVC
Then part quotes the instruction of stable reusable required for this programme, preset html, css file；It is quoted in single-page module
Following dependent file:
(1) Stable.js, the command file comprising designing plug-in unit, premise are injected into the main module of app；
(2) Stable.css, the pattern file comprising designing plug-in unit；
(3) Stable.html includes the dom element set of design plug-in unit；
Structure is divided into having structure in Stable.html file:
(1) head structural body, the design area of collection and its filtering interaction for designing filtration parameter；
(2) table structural body, the design area of displaying and its interactive function for receiving data；
(3) pagination structural body designs area for page presentation and its page turning and turn function；
Comprising feature list, filtering function, page-turning function dom document in quote this instruction after, will need to handle data column
The dom tree of table is embedded in the instruction, and in the sub- parent structure of package, feature list scope will after this dom tree is commanded succession
It can be instructed and be taken over by stable, is injected into the dom element of the instruction containing ng-transclude of stable structural body；
After having configured the dom element set in html file, the sub-instructions inherited in the technology configuration-direct are write, by the son
The inherited parameter require of instruction is configured to ^stable, so that the relevant configuration in stable instruction is inherited, in sub-instructions
Link function has needed to configure setConfig object, is somebody's turn to do because stable father's instruction will be read after sub-instructions are finished
SetConfig image parameter, to go to execute the tablePipe pipeline in stable father's instruction；Configuration obtains total data entry
The promise function of total, and configuration obtain the promise function of current page table data, then return after the completion of configuration
Parent relies on instruction, and father instructs configured configuration object value in reading sub-instructions to give father's scope, then executes one by one, complete
Cheng Yici data model is ultimately transferred to the process of view to controller, and data model variation can occur when clicking page turning, according to
The comparison that the dirty checking mechanism of angularjs can trigger old value and newly be worth, once discovery value comparison is variant to be re-executed
Directive instruction, stable instruction will re-execute internal custom instruction, because of the external page number value for relying on instruction
Variation is had occurred and that with the value of filtering head, and the promise function of the acquisition data of built-in command will be injected new become
Change the page number and filtering head data, and the data that please be look for novelty to server-side again according to new page turning data, if data return will
Understand by outside stable instruction execution promise, and data are assigned to the data of pipe needs again, thus shows newly
Data so far complete a page turning process.
3. the method according to claim 2 for generating list page with filtering function based on MVC frame Efficient Development, feature
Be: in the tablePipe pipeline after insertion multiplex instruction, if there is filtering function, then the head in stable.html is tied
Corresponding filtering Form Element is added in structure body.
4. the method according to claim 3 for generating list page with filtering function based on MVC frame Efficient Development, feature
Be: whether setConfig object is to select the page number, whether select filtering head, every page of how many number of entries.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811199419.9A CN109710347B (en) | 2018-10-16 | 2018-10-16 | Method for efficiently developing list page with filtering function based on MVC (model view controller) framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811199419.9A CN109710347B (en) | 2018-10-16 | 2018-10-16 | Method for efficiently developing list page with filtering function based on MVC (model view controller) framework |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109710347A true CN109710347A (en) | 2019-05-03 |
| CN109710347B CN109710347B (en) | 2021-12-31 |
Family
ID=66254647
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811199419.9A Active CN109710347B (en) | 2018-10-16 | 2018-10-16 | Method for efficiently developing list page with filtering function based on MVC (model view controller) framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109710347B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110231964A (en) * | 2019-06-12 | 2019-09-13 | 四川长虹电器股份有限公司 | The method of repetitive requests is prevented when a kind of dynamically load js resource |
| CN111797357A (en) * | 2020-07-12 | 2020-10-20 | 泰安协同软件有限公司 | Front-end integration method based on dependency injection and path mapping under Html |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104268216A (en) * | 2014-09-24 | 2015-01-07 | 江苏名通信息科技有限公司 | Data cleaning system based on internet information |
| CN107615082A (en) * | 2015-06-26 | 2018-01-19 | 英特尔公司 | The method and apparatus of data collection facility is adaptively managed in distributed computing system |
| CN107992529A (en) * | 2017-11-14 | 2018-05-04 | 江苏神州信源系统工程有限公司 | A kind of key word association method and apparatus |
| US20180136616A1 (en) * | 2016-11-11 | 2018-05-17 | Yokogawa Electric Corporation | Information processing device, information processing method, and storage medium |
| US20180232644A1 (en) * | 2017-02-14 | 2018-08-16 | Cognitive Scale, Inc. | Temporal Topic Machine Learning Operation |
-
2018
- 2018-10-16 CN CN201811199419.9A patent/CN109710347B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104268216A (en) * | 2014-09-24 | 2015-01-07 | 江苏名通信息科技有限公司 | Data cleaning system based on internet information |
| CN107615082A (en) * | 2015-06-26 | 2018-01-19 | 英特尔公司 | The method and apparatus of data collection facility is adaptively managed in distributed computing system |
| US20180136616A1 (en) * | 2016-11-11 | 2018-05-17 | Yokogawa Electric Corporation | Information processing device, information processing method, and storage medium |
| US20180232644A1 (en) * | 2017-02-14 | 2018-08-16 | Cognitive Scale, Inc. | Temporal Topic Machine Learning Operation |
| CN107992529A (en) * | 2017-11-14 | 2018-05-04 | 江苏神州信源系统工程有限公司 | A kind of key word association method and apparatus |
Non-Patent Citations (2)
| Title |
|---|
| 胡悦等: "针对HTTPS的HEIST攻击及检测技术研究", 《网络安全技术与应用》 * |
| 覃国蓉等: "一个改进的BitTorrent类型流媒体系统模型", 《深圳信息职业技术学院学报》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110231964A (en) * | 2019-06-12 | 2019-09-13 | 四川长虹电器股份有限公司 | The method of repetitive requests is prevented when a kind of dynamically load js resource |
| CN110231964B (en) * | 2019-06-12 | 2021-06-22 | 四川长虹电器股份有限公司 | Method for preventing repeated requests during dynamic loading of js resources |
| CN111797357A (en) * | 2020-07-12 | 2020-10-20 | 泰安协同软件有限公司 | Front-end integration method based on dependency injection and path mapping under Html |
| CN111797357B (en) * | 2020-07-12 | 2023-12-19 | 泰安协同软件有限公司 | Front-end integration method based on dependent injection and path mapping under Html |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109710347B (en) | 2021-12-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104035753B (en) | A kind of method and system of double WebView displayings customized web pages | |
| CN101364236B (en) | Data processing apparatus and processing method of WEB page | |
| CN105354013B (en) | Application interface rendering method and device | |
| CN101299688B (en) | Method for acquiring touching quantity of web page area | |
| CN102214098A (en) | Dynamic webpage data acquisition method based on WebKit browser engine | |
| CN101662493B (en) | Data acquiring method, system and server of user access path | |
| CN104965693A (en) | Video processing method and system | |
| CN103034731A (en) | Method for generating Web front-end interactive page | |
| CN102663091B (en) | WEB application navigation management method and system thereof | |
| CN101799753A (en) | Method and device for realizing tree structure | |
| CN109710347A (en) | A method of list page is generated with filtering function based on MVC frame Efficient Development | |
| CN102663050B (en) | Method and device for processing electronic book data | |
| CN109298864A (en) | The method and electronic equipment of automation generation project skeleton screen under teaching platform | |
| CN106162302B (en) | Layout method and device for Launcher main interface and smart television | |
| CN102880708A (en) | Visual design system and method for implementing hypertext markup language (HTML) page | |
| CN103885764A (en) | Network media information display system, method, device and server | |
| CN105912613A (en) | Website template quick migration method | |
| CN102937898A (en) | Xml (Extensive Makeup Language) technique-based web application dynamic assisting method and system | |
| CN106325703A (en) | Webpage man-machine interface control device and running method thereof | |
| JP2005327251A5 (en) | ||
| CN101236558B (en) | Method and device for simulating IM client end interface based on web page | |
| CN109979551A (en) | A kind of editing machine of web-based electronic medical record document | |
| CN105930166B (en) | A method of based on WEB interface ejection layer | |
| CN105739962A (en) | Table cell editor control expansion method and system based on HTML (Hypertext Markup Language) | |
| CN103226475A (en) | Method and device for realizing control replacement during transcoding |
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 |