CN108536832A - A kind of page layout switch intelligent animation effect application process and system - Google Patents
A kind of page layout switch intelligent animation effect application process and system Download PDFInfo
- Publication number
- CN108536832A CN108536832A CN201810325070.2A CN201810325070A CN108536832A CN 108536832 A CN108536832 A CN 108536832A CN 201810325070 A CN201810325070 A CN 201810325070A CN 108536832 A CN108536832 A CN 108536832A
- Authority
- CN
- China
- Prior art keywords
- page
- module
- server
- animation
- animation effect
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of page layout switch intelligent animation effect application process and systems, belong to Internet technical field.The present invention is by providing a kind of page layout switch mode meeting ergonomics, it more advantageously realizes that the page enters the operations such as to exit and can have animation effect, by way of rational animation operation guide, a kind of subconscious psychological hint of routine operation is provided, efficiency of inputting can be virtually effectively improved；And, pass through routing mode, realize that " part " changes, this can locally be packaged into the switching mode of full page very well by front-end technology, but virtually without public module is reloaded, module and part, which render, needed for on-demand loading can be achieved with page layout switch effect, reduce the time of repetition load public documents, to reduce the time of page layout switch, page access efficiency is improved；And eliminate user's interim card when waiting for page layout switch, the unfriendly experience such as page empty.
Description
Technical field
The present invention relates to a kind of page layout switch intelligent animation effect application process and systems, belong to Internet technical field.
Background technology
AngularJS：It is a outstanding front end JS frames, has been used in more money products of Google.
AngularJS has many characteristics, and core is the most：MVC, modularization, automation bi-directional data binding, semantization label,
Rely on injection etc..
SPA：Single Page Application refer to a kind of application based on web or website, this single
Some object or button when, will not jump to other pages to page when the user clicks when being interacted with user.
CSS：It is the abbreviation of Cascading Style Sheets (cascading style sheets), it need not be compiled, can be direct
(belonging to browser-interpreted type language) is executed by browser-interpreted.
Internet has come into the big data epoch, it means that data deal occupied in production work seems more
Exacerbation has been wanted.How effectively the data of diversification to be obtained and be combed by way of intelligence, and is various at present
The research point of data collecting system.
Data convergence wherein has a kind of source to depend on manual typing, and in prolonged typing operating process, one good
Good user's operation experience can effectively improve efficiency of inputting, reduce typing operation error etc., and therefore, research is a set of to meet human body
The UI operating methods of engineering are also with practical significance.
Many government unit are largely in the information for collecting subordinate enterprise's business circumstance and pass through making at present
Excel template is assigned to subordinate enterprise, and then subordinate fills in and reports according to set Excel template.Pass through Excel
The processing mode of template file is easy to cause information asymmetry and processing not in time, and there is also sensitive datas to have the hidden of concerning security matters
Suffer from, and need to re-issue template again if original Excel template has carried out content adjustment, to lead repeated work very
Greatly.It operates in the conventional mode, it can be seen that this operation irregularity of convergence subordinate enterprise's operation information data is complicated and deposits
Generating other unpredictable risks.
Government unit is also followed by the progress of technology in convergence decimal enterprise operation message context, uses Internet technology institute
Data convergence input function is being disposed on the internet, is improving working efficiency, convenient constituent parts user by the facility brought
Member uses.There is also many risks simultaneously for innovation that technology is brought, therefore, how the good data inputting of control reliability and have
Effect property is the direction that system developer stresses concern.
Traditional page jump mode will realize that animation effect is relatively difficult, be primarily due to pair of each browser
The specification that JavaScript and css is supported is not quite identical, and it is to need to reload file to redirect mode all, to
The problem of causing long page switching time, page access inefficiency.
Invention content
The main realization of this system is that front end is based on developing based on AngularJS, and page presentation mode is to use SPA moulds
Formula；
The present invention provides a kind of page layout switch intelligent animation effect application process, includes the following steps：
Step 1：Single-page application is realized using development mode；By configuring front end routing, SPA pattern lower pages are realized
Redirect mode；
Step 2：Animation is carried out using angular-animate to take over；
Step 3：Self-defined animation effect.
Optionally, the development mode employed in step 1 is MVVM frames, and MVVM frames include AngularJS, vue
And avalon.
Optionally, in step 1, SPA patterns are realized using AngularJS, including：
AngularJS carries out view switching by monitoring hashchange events, while using the history of HTML5
API monitors popstate events to carry out view switching by pushState () recording operation history；Pass through above two
Mode forms the deep linking (deeplinking) to navigate by address field, forms routing mechanism；By routing mechanism,
It is organized into each view of single page application.
Optionally, it in step 2, carries out animation using angular-animate and takes over, including：
NgAnimate monitors event；If monitoring event, ngAnimate is arranged using predefined class
The animation of HTML element；
CSS transition (transition) or CSS animations make HTML element generate animation effect, realize control the page it
Between the animation effect that switches.
Optionally, in step 3, self-defined animation effect, including：
Self-defined CSS animations；
The animation method for introducing customized ng-enter covers the acquiescence access method of angular-animate.
The present invention provides a kind of page layout switch intelligent animation effect application system, which includes：
Login module, homepage module, system management module and business module；
Wherein, login module is used for logging in system by user；
Homepage module is used to concentrate the entrance of the summary information and modules of displaying business module；
For system management module for system master data to be arranged, master data includes user management and rights management；
Business module is used for the service logic of system itself.
Optionally, login module is for verifying user account, password and verification code information when user logs in, if school
It tests and passes through, then the token returned by localStorage buffer services end；If verification does not pass through, corresponding prompt is provided.
Optionally, homepage module is used for after user successfully logs into homepage, after having loaded all DOM structures,
Execute getAllData () method from encapsulation；By the Asynchronous Request (ajax) in getAllData (), parameter is sent to clothes
Business end, server-side is according to the parameter query database sent and returns to corresponding data；According to the corresponding data of return, if
Failure, then terminate flow and prompt error message, and data are changed into json words by JSON.stringify () if success
Symbol string is simultaneously cached to local and is built to page presentation form by localStorage, passes through the two-way binding of angualurjs
Mechanism is to each element assignment and binds corresponding method.
Optionally, it when system management module is used for the rights management in the system administration of menu on the left side when the user clicks, holds
The getAllData () method of row from encapsulation；By the Asynchronous Request (ajax) in getAllData (), parameter is sent to service
End, server-side return to corresponding data and can be to clothes when load for the first time according to the parameter query database received
The page/size (the current page number/every page of item number) for end transmission acquiescence of being engaged in；According to the corresponding data of return, tied if failure
Line journey simultaneously prompts error message, and data are changed into json character strings by JSON.parse () if success and are passed through
LocalStorage is cached to local and is built to page presentation form, and permission is traversed out by the ng-repeat of AngularJS
List；If user needs additional new permission, the method for clicking system trigger layer when increasing button newly to pop up and increase permission newly
The small page clicks ACK button after user inputs authority name and permission button is arranged, by triggering from encapsulation
Asynchronous Request (ajax) in saveInfo () method sends parameter to server-side, and server-side selects corresponding data according to interface
Library table carries out preservation operation, and flow terminates and closes popup web page refresh list if success, if it fails, flow terminates simultaneously
Prompt error message.
Optionally, business module is used to, when the rights management in the system administration that administrator clicks menu on the left side, execute
From getAllData () method of encapsulation；By the Asynchronous Request (ajax) in getAllData (), parameter is sent to service
End, server-side return to corresponding data and can be to clothes when load for the first time according to the parameter query database received
The page/size (the current page number/every page of item number) for end transmission acquiescence of being engaged in；According to the corresponding data of return, tied if failure
Line journey simultaneously prompts error message, and data are changed into json character strings by JSON.parse () if success and are passed through
LocalStorage is cached to local and is built to page presentation form, and permission is traversed out by the ng-repeat of AngularJS
List；If administrator needs additional new permission, the method for clicking system trigger layer when increasing button newly to pop up and increase permission newly
The small page, when user inputs authority name and after permission button is arranged, clicks ACK button, by triggering from encapsulation
Asynchronous Request (ajax) in saveInfo () method sends parameter to server-side, and server-side selects corresponding data according to interface
Library table carries out preservation operation, and flow terminates and closes popup web page refresh list if success, if it fails, flow terminates simultaneously
Prompt error message.
The beneficial effects of the invention are as follows：It is more convenient by providing a kind of page layout switch mode meeting ergonomics
Ground realizes that the page enters and the operations such as exits and can have animation effect, by way of rational animation operation guides, provides a kind of normal
The subconscious psychological hint for advising operation, can virtually effectively improve efficiency of inputting；Also, by routing mode, realize " office
Portion " changes, this can locally be packaged into the switching mode of full page very well by front-end technology, but virtually without weight
New load public module, module and part render and can be achieved with page layout switch effect needed for on-demand loading, reduce repetition and add
The time for carrying public documents improves page access efficiency to reduce the time of page layout switch；And it eliminates user and exists
Interim card when waiting for page layout switch, the unfriendly experience such as page empty.
Description of the drawings
The page layout switch intelligent animation effect application process flow chart that Fig. 1 embodiment of the present invention one provides；
Fig. 2 page layout switch intelligent animation effect application process flow charts provided by Embodiment 2 of the present invention；
SPA realization principles in Fig. 3 page layout switch intelligent animation effect application processes provided by Embodiment 2 of the present invention are shown
It is intended to；
CSS in Fig. 4 page layout switch intelligent animation effect application processes provided by Embodiment 2 of the present invention renders schematic diagram；
The structural schematic diagram for the page layout switch intelligent animation effect application system that Fig. 5 embodiment of the present invention three provides.
Specific implementation mode
Embodiment one：
The present embodiment provides a kind of page layout switch intelligent animation effect application process, referring to Fig. 1, the method includes：
Step 1：Single-page application is realized using development mode；By configuring front end routing, SPA pattern lower pages are realized
Redirect mode；
Step 2：Animation is carried out using angular-animate to take over；
Step 3：Self-defined animation effect.
The present embodiment provides a kind of subconscious psychological hint of routine operation by self-defined animation effect, can be invisible
In effectively improve efficiency of inputting；By configuring front end routing mode, realization is not necessarily to reload public module in page layout switch,
It only needs module needed for on-demand loading and part to render and can be achieved with page layout switch effect, reduce repetition load public documents
Time improves page access efficiency to reduce the time of page layout switch；And it eliminates user and is waiting for page layout switch
When interim card, the unfriendly experience such as page empty.
Embodiment two
The present embodiment provides a kind of page layout switch intelligent animation effect application process, referring to Fig. 2, the method includes：
Step 1：SPA patterns are realized using AngularJS.There are many kinds of the implementation of SAP is current, such as vue,
The frames such as avalon can also be realized, therefore AngularJS is also that can be replaced based on frames such as vue or avalon.
The present embodiment by taking AngularJS as an example by illustrating：
SPA patterns are realized using AngularJS.AngularJS is cut by monitoring hashchange events to carry out view
It changes, while can also use the history API using HTML5, by pushState () recording operation history, monitor popstate
Event carries out view switching.By using both modes, the deep linking to navigate by address field is just formd
(deeplinking), routing mechanism is formed.By routing mechanism, each view of single page application can be good group
It knits.SPA realization principle schematic diagrames are as shown in Figure 3.
That is AngularJS carries out view switching by monitoring hashchange events, while using HTML5's
History API monitor popstate events to carry out view switching by pushState () recording operation history；Pass through
Above two mode forms the deep linking (deeplinking) to navigate by address field, forms routing mechanism；Pass through
Routing mechanism is organized into each view of single page application.
Specifically used mode is as follows：Angular and ui-route is introduced in the page, paying attention to will be in the leading of ui-route
Enter angular.Because AngularJS is a kind of MVC front end frames, there are one being on-demand carry in core concept, therefore
It is introduced on the page not enough, the dependence to ui.router need to be also injected in module statement, it is specific to quote shown in code：var
App=angular.module (' MyApp', [ui.router])；
After introducing file and module, then can in template or controller using the service of routing and
It instructs.Inside route list, global routing table is configured, SPA page jump modes is realized, arrives this, just generate one
SPA page applications based on AngularJS.
Step 2：Animation is carried out using angular-animate to take over.
After the html pages for receiving server return, browser starts to build DOM TREE browser, encounters CSS samples
Formula can build CSS RULER TREE, encounter javascript can by DOM API and CSSOM API come operate DOM Tree and
CSS Rule Tree, after being parsed, browser engine can be constructed by DOM Tree and CSS Rule Tree
Rendering Tree (render tree), finally, render tree structure is exactly after the completion " and layout " processing, that is, determine each node
Exact display position on the screen, it is as shown in Figure 4 that CSS renders schematic diagram.
The principle of SPA actually changes " part " element, according to this characteristic, so that it may to pass through the variation for controlling CSS
To realize page animation effect.Therefore, the core thinking that page animation generates is exactly the change by the operation CSS of javascript
Change, renders the principle of css further according to browser to realize.
In the present invention, the CSS that various scenes are controlled using angular-animate is used changes to realize page
Face animation.Angular-animate is also based on a plug-in unit of AngularJS, and major function is management AngularJS applications
In animation effect, application mode as other plug-in units, and need further quoted after loading AngularJS.
After angular-animate, it is also desirable to carry out plug-in unit carry, as follows：angular.module('MyApp',
[ngAnimate]).By above step, it is achieved that the animation effect of the angular-animate management and control overall situations.
That is ngAnimate monitors event；If monitoring event, ngAnimate is set using predefined class
Set the animation of HTML element；CSS transition (transition) or CSS animations make HTML element generate animation effect, realize control
The animation effect switched between the page processed；
The principle of angular-animate management animation effects, which is ngAnimate models, can add or remove class.
Although ngAnimate models can not make HTML element generate animation, ngAnimate can monitor event, and similar hide shows
Show HTML element, if event is occurred ngAnimate and the animation of HTML element will be arranged using predefined class.
The instruction that AngularJS added/removed class has:ng-show、ng-hide、ng-class、ng-view、ng-
include、ng-repeat、ng-if、ng-switch.Wherein ng-show and ng-hide instructions are for adding or removing ng-
The value of hide class, and other instructions can add ng-enter classes into DOM, ng-leave categories can be added by removing DOM
Property.When HTML element position change, ng-repeat instructions can equally add ng-move classes.In addition, after the completion of animation,
The class set of HTML element will be removed.Such as：Ng-hide instructions can add a lower class：ng-animate、ng-hide-
Animate, ng-hide-add (if element will be hidden), ng-hide-remove (if element will be shown), ng-hide-
Add-active (if element will be hidden), ng-hide-remove-active (if element will be shown).
Therefore, the characteristic can be utilized, HTML element is made by using CSS transition (transition) or CSS animations
Animation effect is generated, to realization to control to the animation effect switched between the page.
Step 3：Self-defined animation effect.
Step 2 describes the principle of animation, it is known that the ng-view of the animation effect of page layout switch Angular multi-purpose greatly and
The keyframes and animation of CSS3 realizes that when DOM element changes, AngularJS can add spy on element
Fixed class, such as ng-enter, ng-leave, the dynamic of page layout switch can be realized by defining CSS animations to these class
It draws, therefore we can be by way of self-defined CSS, to achieve the purpose that self-defined animation effect.
For example, when the page switches over, using the mode of " entrance ", then the state handover trigger of ngAnimate
Event triggers enter events, and it is " ng-enter " class that a name will be increased in corresponding element, therefore, I
Can cover the acquiescence access method of angular-animate by introducing the animation method of customized ng-enter,
Can be self-defined required animation effect.
According to this principle, other events between the page can be redefined according to this mode.Through overweight
After structure is self-defined after style sheet, entirely the animation effect of the SAP pages based on AngularJS is achieved that.
By the way that the friendly control page enters sliding, the page leaves the modes such as hiding, can be provided to web page operation person
The psychological hint of one acquiescence, such as a left side slip into, and are to enter system, and right sliding fades out disappearance and then logs off
Mode can produce to user and be operated into, operate the feeling successfully exited.Once there is exception in this way of feeling, then
The meaning that will dive thinks error in operation, thus can virtually improve the correctness of data inputting.
By above three step, page layout switch intelligent animation effects module is realized, enriches the vision of user's interaction
Effect realizes a kind of method that reliable financial data converges and last practice is in production activity.
The embodiment of the present invention more advantageously realizes page by providing a kind of page layout switch mode meeting ergonomics
Face, which enters, the operations such as to be exited and can have animation effect, by way of rational animation operation guide, provides a kind of routine operation
Subconscious psychological hint can virtually effectively improve efficiency of inputting；Also, by routing mode, realize that " part " changes, this
A part can be packaged into the switching mode of full page by front-end technology very well, but public virtually without reloading
Module, module needed for on-demand loading and part, which render, can be achieved with page layout switch effect, reduce repetition load public documents
Time improve page access efficiency to reduce the time of page layout switch；And it eliminates user and the page is being waited for cut
Interim card when changing, the unfriendly experience such as page empty.
Embodiment three
The present embodiment provides a kind of page layout switch intelligent animation effect application systems, and referring to Fig. 5, which includes：It logs in
Module, homepage module, system management module and business module；
Wherein, login module is used for logging in system by user；Homepage module is used to concentrate the summary information of displaying business module
With the entrance of modules；For system management module for system master data to be arranged, master data includes user management and permission
Management；Business module is used for the service logic of system itself.
Specifically, login module is used to verify user account, password and verification code information when user logs in, if school
It tests and passes through, then the token returned by localStorage buffer services end；If verification does not pass through, corresponding prompt is provided.
Homepage module is used for after user successfully logs into homepage, after having loaded all DOM structures, is executed self-styled
GetAllData () method of dress；By the Asynchronous Request (ajax) in getAllData (), parameter is sent to server-side, clothes
Business end according to the parameter query database sent and returns to corresponding data；According to the corresponding data of return, if failure
Terminate flow and prompt error message, data are changed into json character strings simultaneously by JSON.stringify () if success
It is cached to local by localStorage and page presentation form is built, given by the two-way binding mechanism of angualurjs
Each element assignment simultaneously binds corresponding method.
When system management module is used for the rights management in the system administration of menu on the left side when the user clicks, execute from encapsulation
GetAllData () method；By the Asynchronous Request (ajax) in getAllData (), parameter is sent to server-side, service
It holds according to the parameter query database received, returns to corresponding data and sent to server-side when loading first time and write from memory
The page/size (the current page number/every page of item number) recognized；According to the corresponding data of return, terminates flow if failure and carry
Show error message, data are changed into json character strings by JSON.parse () if success and passes through localStorage
It is cached to local and page presentation form is built, permissions list is traversed out by the ng-repeat of AngularJS；If user
Need additional new permission, the method for clicking system trigger layer when increasing button newly to pop up the small page for increasing permission newly, when with
After family inputs authority name and permission button is arranged, ACK button is clicked, by triggering from saveInfo () method of encapsulation
Asynchronous Request (ajax), send parameter to server-side, server-side selects associated databases table to carry out preservation operation according to interface,
Flow terminates and closes popup web page refresh list if success, if it fails, flow terminates and prompts error message.
If user needs modification authority, the method for system trigger layer, pops up the small of modification authority when clicking modification button
The page clicks ACK button after user inputs modified authority name and permission button is arranged, by triggering from encapsulation
Asynchronous Request (ajax) in saveInfo () method sends parameter to server-side, and server-side selects corresponding data according to interface
Library table carries out preservation operation, and flow terminates and closes popup web page refresh list if success, if it fails, flow terminates simultaneously
Prompt error message.
Newly-increased and modification user can be completed by clicking corresponding button, and principle is the same as above-mentioned newly-increased and modification authority.
After user has increased permission newly, when clicking the user management in the system administration of menu on the left side, a user is selected
Setting permission button is clicked, by the way that from the layer in setPermission () method of encapsulation, open () method opens setting
The popup web page of permission simultaneously sends Asynchronous Request (ajax) to server-side, asks the permissions list not selected by the user, success
List is traversed out after user selects one or more permissions by the ng-repeat methods of AngularJS afterwards to click and confirm, is led to
SetInfo () method from encapsulation to be crossed, Asynchronous Request (ajax) is sent, server-side is configured operation according to corresponding parameter,
Flow terminates and closes popup web page and terminates flow if success, if it fails, if prompt failure cause and terminate flow.
Business module is used to, when the rights management in the system administration that administrator clicks menu on the left side, execute from encapsulation
GetAllData () method；By the Asynchronous Request (ajax) in getAllData (), parameter is sent to server-side, server-side
According to the parameter query database received, returns to corresponding data and sent to server-side when loading first time and given tacit consent to
Page/size (the current page number/every page of item number)；According to the corresponding data of return, terminates flow if failure and prompt
Data are changed into json character strings by JSON.parse () if success and are delayed by localStorage by error message
It is stored to local and page presentation form is built, permissions list is traversed out by the ng-repeat of AngularJS；If administrator
Need additional new permission, the method for clicking system trigger layer when increasing button newly to pop up the small page for increasing permission newly, when with
After family inputs authority name and permission button is arranged, ACK button is clicked, by triggering from saveInfo () method of encapsulation
Asynchronous Request (ajax), send parameter to server-side, server-side selects associated databases table to carry out preservation operation according to interface,
Flow terminates and closes popup web page refresh list if success, if it fails, flow terminates and prompts error message.
The embodiment of the present invention more advantageously realizes page by providing a kind of page layout switch system meeting ergonomics
Face, which enters, the operations such as to be exited and can have animation effect, by way of rational animation operation guide, provides a kind of routine operation
Subconscious psychological hint can virtually effectively improve efficiency of inputting；Also, by routing mode, realize that " part " changes, this
A part can be packaged into the switching mode of full page by front-end technology very well, but public virtually without reloading
Module, module needed for on-demand loading and part, which render, can be achieved with page layout switch effect, reduce repetition load public documents
Time improve page access efficiency to reduce the time of page layout switch；And it eliminates user and the page is being waited for cut
Interim card when changing, the unfriendly experience such as page empty.
Although the present invention has been described by way of example and in terms of the preferred embodiments, it is not limited to the present invention, any to be familiar with this skill
The people of art can do various change and modification, therefore the protection model of the present invention without departing from the spirit and scope of the present invention
Enclosing be subject to what claims were defined.
Claims (10)
1. a kind of page layout switch intelligent animation effect application process, which is characterized in that the method includes：
Step 1：Single-page application is realized using development mode；By configuring front end routing, realize that SPA pattern lower pages redirect
Mode；
Step 2：Animation is carried out using angular-animate to take over；
Step 3：Self-defined animation effect.
2. according to the method described in claim 1, it is characterized in that, the development mode be MVVM frames, the MVVM frames
Including AngularJS, vue and avalon.
3. according to the method described in claim 2, it is characterized in that, in step 1, SPA patterns, packet are realized using AngularJS
It includes：
AngularJS carries out view switching by monitoring hashchange events, while using the history API of HTML5,
By pushState () recording operation history, popstate events are monitored to carry out view switching；By above two mode,
The deep linking (deeplinking) to navigate by address field is formed, routing mechanism is formed；Pass through routing mechanism, tissue
The each view applied at a single page.
4. according to the method described in claim 3, it is characterized in that, in step 2, animation is carried out using angular-animate
It takes over, including：
NgAnimate monitors event；If monitoring event, HTML is arranged using predefined class in ngAnimate
The animation of element；
CSS transition (transition) or CSS animations make HTML element generate animation effect, realize and are cut between controlling the page
The animation effect changed.
5. according to the method described in claim 4, it is characterized in that, in step 3, self-defined animation effect, including：
Self-defined CSS animations；
The animation method for introducing customized ng-enter covers the acquiescence access method of angular-animate.
6. a kind of page layout switch intelligent animation effect application system, which is characterized in that the system comprises：
Login module, homepage module, system management module and business module；
The login module is used for logging in system by user；
The homepage module is used to concentrate the entrance of the summary information and modules of displaying business module；
For the system management module for system master data to be arranged, the master data includes user management and rights management；
The business module is used for the service logic of system itself.
7. system according to claim 6, which is characterized in that the login module when user logs in for verifying user
Account, password and verification code information, if verification passes through, the token returned by localStorage buffer services end；
If verification does not pass through, corresponding prompt is provided.
8. system according to claim 7, which is characterized in that the homepage module is used to successfully log into head in user
After page, after having loaded all DOM structures, getAllData () method from encapsulation is executed；By in getAllData ()
Asynchronous Request (ajax), send parameter to server-side, server-side is according to the parameter query database sent and returns accordingly
Data；According to the corresponding data of return, terminate flow if failure and prompt error message, data are led to if success
JSON.stringify () is crossed to change into json character strings and be cached to locally and to page presentation form by localStorage
Structure to each element assignment and binds corresponding method by the two-way binding mechanism of angualurjs.
9. system according to claim 8, which is characterized in that the system management module is for left side dish when the user clicks
When rights management in single system administration, getAllData () method from encapsulation is executed；By in getAllData ()
Asynchronous Request (ajax) sends parameter to server-side, and server-side returns to corresponding number according to the parameter query database received
The page/size (the current page number/every page of item number) of acquiescence can be sent when according to and load for the first time to server-side；According to returning
The corresponding data returned terminate flow if failure and prompt error message, and data are passed through if success
JSON.parse () changes into json character strings and is cached to local by localStorage and is built to page presentation form,
Permissions list is traversed out by the ng-repeat of AngularJS；If user needs additional new permission, when clicking newly-increased button
The method of system trigger layer pops up the small page for increasing permission newly, after user inputs authority name and permission button is arranged,
ACK button is clicked, by triggering from the Asynchronous Request (ajax) in saveInfo () method of encapsulation, sends parameter to service
End, server-side select associated databases table to carry out preservation operation according to interface, and flow terminates and closes pop-up page if success
Face refresh list, if it fails, flow terminates and prompts error message.
10. system according to claim 8, which is characterized in that the business module is used to click left side dish as administrator
When rights management in single system administration, getAllData () method from encapsulation is executed；By in getAllData ()
Asynchronous Request (ajax) sends parameter to server-side, and server-side returns to corresponding number according to the parameter query database received
The page/size (the current page number/every page of item number) of acquiescence can be sent when according to and load for the first time to server-side；According to returning
The corresponding data returned pass through data if success if it fails, then terminating flow and prompting error message
JSON.parse () changes into json character strings and is cached to local by localStorage and is built to page presentation form,
Permissions list is traversed out by the ng-repeat of AngularJS；If administrator needs additional new permission, clicks and increase button newly
When system trigger layer method, the small page for increasing permission newly is popped up, when user inputs authority name and permission button is arranged
Afterwards, click ACK button, by trigger from encapsulation saveInfo () method in Asynchronous Request (ajax), send parameter to
Server-side, server-side select associated databases table to carry out preservation operation according to interface, and flow terminates and closes bullet if success
Page-out refresh list, if it fails, flow terminates and prompts error message.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810325070.2A CN108536832A (en) | 2018-04-12 | 2018-04-12 | A kind of page layout switch intelligent animation effect application process and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810325070.2A CN108536832A (en) | 2018-04-12 | 2018-04-12 | A kind of page layout switch intelligent animation effect application process and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108536832A true CN108536832A (en) | 2018-09-14 |
Family
ID=63479976
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810325070.2A Pending CN108536832A (en) | 2018-04-12 | 2018-04-12 | A kind of page layout switch intelligent animation effect application process and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108536832A (en) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109508436A (en) * | 2018-11-14 | 2019-03-22 | 北京锐安科技有限公司 | Front end method for routing and device based on asynchronous loading page |
| CN109710219A (en) * | 2018-12-10 | 2019-05-03 | 武汉烽火众智智慧之星科技有限公司 | A kind of processing method quickly loading different number grade data based on Openlayers |
| CN110032404A (en) * | 2018-11-29 | 2019-07-19 | 阿里巴巴集团控股有限公司 | A kind of management method and device of refresh tasks |
| CN110704765A (en) * | 2019-09-27 | 2020-01-17 | 四川长虹电器股份有限公司 | Page transition effect implementation method |
| CN111796887A (en) * | 2020-02-28 | 2020-10-20 | 北京沃东天骏信息技术有限公司 | Page image closing method and device, electronic equipment and storage medium |
| CN111835646A (en) * | 2020-07-13 | 2020-10-27 | 四川虹魔方网络科技有限公司 | Vue-based modular routing management method and authority control method |
| CN112100555A (en) * | 2020-08-18 | 2020-12-18 | 北京思特奇信息技术股份有限公司 | Method and system for realizing single-page application in native HTML5 page |
| CN112364496A (en) * | 2020-11-03 | 2021-02-12 | 中国航空无线电电子研究所 | Avionics simulation panel generation system based on HTML5 and VUE technology |
| CN112433803A (en) * | 2020-12-09 | 2021-03-02 | 上海创远仪器技术股份有限公司 | Method for realizing multi-task switching in radio Web single page application |
| CN112822553A (en) * | 2020-12-30 | 2021-05-18 | 四川长虹网络科技有限责任公司 | Method for dynamically controlling page switching transition effect of IPTV |
| CN113568550A (en) * | 2021-06-23 | 2021-10-29 | 深圳震有科技股份有限公司 | Animation display method and device based on animation component and terminal equipment |
| CN110321504B (en) * | 2019-06-18 | 2023-09-22 | 平安医疗健康管理股份有限公司 | Page processing method and device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102945153A (en) * | 2012-10-18 | 2013-02-27 | 南京通达海信息技术有限公司 | Novel three-layer application foundation platform system |
| CN103514179A (en) * | 2012-06-21 | 2014-01-15 | 腾讯科技（深圳）有限公司 | Method for web browser to switch over historical webpages and web browser |
| CN103984686A (en) * | 2013-02-07 | 2014-08-13 | 阿里巴巴集团控股有限公司 | Page-switching method and device |
-
2018
- 2018-04-12 CN CN201810325070.2A patent/CN108536832A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103514179A (en) * | 2012-06-21 | 2014-01-15 | 腾讯科技（深圳）有限公司 | Method for web browser to switch over historical webpages and web browser |
| CN102945153A (en) * | 2012-10-18 | 2013-02-27 | 南京通达海信息技术有限公司 | Novel three-layer application foundation platform system |
| CN103984686A (en) * | 2013-02-07 | 2014-08-13 | 阿里巴巴集团控股有限公司 | Page-switching method and device |
Non-Patent Citations (1)
| Title |
|---|
| 博客: "AngularJS：动画", 《WWW.CNBLOGS.COM/STOREBOOK/P/8566984》 * |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109508436A (en) * | 2018-11-14 | 2019-03-22 | 北京锐安科技有限公司 | Front end method for routing and device based on asynchronous loading page |
| CN110032404B (en) * | 2018-11-29 | 2021-11-02 | 创新先进技术有限公司 | Method and device for managing refresh tasks |
| CN110032404A (en) * | 2018-11-29 | 2019-07-19 | 阿里巴巴集团控股有限公司 | A kind of management method and device of refresh tasks |
| CN109710219A (en) * | 2018-12-10 | 2019-05-03 | 武汉烽火众智智慧之星科技有限公司 | A kind of processing method quickly loading different number grade data based on Openlayers |
| CN110321504B (en) * | 2019-06-18 | 2023-09-22 | 平安医疗健康管理股份有限公司 | Page processing method and device |
| CN110704765A (en) * | 2019-09-27 | 2020-01-17 | 四川长虹电器股份有限公司 | Page transition effect implementation method |
| CN110704765B (en) * | 2019-09-27 | 2022-04-12 | 四川长虹电器股份有限公司 | Page transition effect implementation method |
| CN111796887A (en) * | 2020-02-28 | 2020-10-20 | 北京沃东天骏信息技术有限公司 | Page image closing method and device, electronic equipment and storage medium |
| CN111835646B (en) * | 2020-07-13 | 2021-03-16 | 四川虹魔方网络科技有限公司 | Vue-based modular routing management method and authority control method |
| CN111835646A (en) * | 2020-07-13 | 2020-10-27 | 四川虹魔方网络科技有限公司 | Vue-based modular routing management method and authority control method |
| CN112100555A (en) * | 2020-08-18 | 2020-12-18 | 北京思特奇信息技术股份有限公司 | Method and system for realizing single-page application in native HTML5 page |
| CN112364496A (en) * | 2020-11-03 | 2021-02-12 | 中国航空无线电电子研究所 | Avionics simulation panel generation system based on HTML5 and VUE technology |
| CN112364496B (en) * | 2020-11-03 | 2024-01-30 | 中国航空无线电电子研究所 | Avionics simulation panel generation system based on HTML5 and VUE technologies |
| CN112433803A (en) * | 2020-12-09 | 2021-03-02 | 上海创远仪器技术股份有限公司 | Method for realizing multi-task switching in radio Web single page application |
| CN112433803B (en) * | 2020-12-09 | 2023-06-20 | 上海创远仪器技术股份有限公司 | Method for implementing multi-task switching in radio Web single page application |
| CN112822553A (en) * | 2020-12-30 | 2021-05-18 | 四川长虹网络科技有限责任公司 | Method for dynamically controlling page switching transition effect of IPTV |
| CN113568550A (en) * | 2021-06-23 | 2021-10-29 | 深圳震有科技股份有限公司 | Animation display method and device based on animation component and terminal equipment |
| CN113568550B (en) * | 2021-06-23 | 2024-01-05 | 深圳震有科技股份有限公司 | Animation display method and device based on animation component and terminal equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108536832A (en) | A kind of page layout switch intelligent animation effect application process and system | |
| CN108491206A (en) | A kind of SPA single-pages realization method and system | |
| US10235533B1 (en) | Multi-user access controls in electronic simultaneously editable document editor | |
| Galloway et al. | Professional ASP. NET MVC 4 | |
| US9383911B2 (en) | Modal-less interface enhancements | |
| US8387006B1 (en) | System and method for authoring a web page to be run-time editable | |
| US9052812B1 (en) | System for exportable graphical designs with interactive linked comments between design and playback environments | |
| CN107818143A (en) | A kind of page configuration, generation method and device | |
| CN104199647B (en) | A kind of visualization system and implementation method based on IBM main frames | |
| CN106445983A (en) | Method for constructing and generating webpage, and system | |
| US20180081994A1 (en) | Automatically mapping data while designing process flows | |
| CN104169853B (en) | web application control | |
| Hupp et al. | Smart bookmarks: automatic retroactive macro recording on the web | |
| CN101930456A (en) | Method and system for establishing aggregated LinkUGC by using browser | |
| US8769439B2 (en) | Method for creation, management, and presentation of user-scoped navigation topologies for web applications | |
| CN108664242A (en) | Generate method, apparatus, electronic equipment and the readable storage medium storing program for executing of visualization interface | |
| CN112416349A (en) | Form page generation method, system, equipment and storage medium | |
| CN115982266A (en) | Page dynamic rendering method and system based on custom configuration attribute field | |
| Dwyer | Flask By Example | |
| CN112528608A (en) | Page editing method and device, electronic equipment and storage medium | |
| CN109891410B (en) | Data collection for new session dialog systems | |
| Ganapathy | Learning *** apps script | |
| Haller et al. | RaUL: RDFa User Interface Language–A data processing model for web applications | |
| Freeman | Pro jQuery 2.0 | |
| CN104020996A (en) | Instruction front-end system and corresponding instruction front-end interactive method |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180914 |
|
| RJ01 | Rejection of invention patent application after publication |