CN104636146B - A kind of visualization on-line customization method and system - Google Patents
A kind of visualization on-line customization method and system Download PDFInfo
- Publication number
- CN104636146B CN104636146B CN201510098004.2A CN201510098004A CN104636146B CN 104636146 B CN104636146 B CN 104636146B CN 201510098004 A CN201510098004 A CN 201510098004A CN 104636146 B CN104636146 B CN 104636146B
- Authority
- CN
- China
- Prior art keywords
- page
- slice
- webpage
- instruction
- data
- 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.)
- Active
Links
- 238000012800 visualization Methods 0.000 title claims abstract description 79
- 238000000034 method Methods 0.000 title claims abstract description 65
- 238000011161 development Methods 0.000 claims abstract description 28
- 230000008569 process Effects 0.000 claims abstract description 19
- 230000000007 visual effect Effects 0.000 claims abstract description 16
- 238000007726 management method Methods 0.000 claims description 69
- 230000006870 function Effects 0.000 claims description 43
- 238000004458 analytical method Methods 0.000 claims description 34
- 238000005520 cutting process Methods 0.000 claims description 24
- 238000003860 storage Methods 0.000 claims description 19
- 238000012544 monitoring process Methods 0.000 claims description 18
- 230000005540 biological transmission Effects 0.000 claims description 15
- 230000000694 effects Effects 0.000 claims description 15
- 238000005516 engineering process Methods 0.000 claims description 11
- 238000012545 processing Methods 0.000 claims description 11
- 238000009826 distribution Methods 0.000 claims description 5
- 230000008859 change Effects 0.000 claims description 4
- 238000013500 data storage Methods 0.000 claims description 4
- 230000006798 recombination Effects 0.000 claims description 4
- 238000005215 recombination Methods 0.000 claims description 4
- 108010001267 Protein Subunits Proteins 0.000 claims description 3
- 238000004040 coloring Methods 0.000 claims description 3
- 238000013481 data capture Methods 0.000 claims description 3
- 238000004454 trace mineral analysis Methods 0.000 claims description 2
- 235000008429 bread Nutrition 0.000 claims 1
- 235000013399 edible fruits Nutrition 0.000 claims 1
- 239000012634 fragment Substances 0.000 claims 1
- 230000036316 preload Effects 0.000 claims 1
- 238000010586 diagram Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 4
- 238000013461 design Methods 0.000 description 4
- 238000000605 extraction Methods 0.000 description 3
- 238000012797 qualification Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000004913 activation Effects 0.000 description 2
- 238000013475 authorization Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 238000013523 data management Methods 0.000 description 2
- 238000009432 framing Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008520 organization Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 238000012549 training Methods 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 101000911390 Homo sapiens Coagulation factor VIII Proteins 0.000 description 1
- 235000006508 Nelumbo nucifera Nutrition 0.000 description 1
- 240000002853 Nelumbo nucifera Species 0.000 description 1
- 235000006510 Nelumbo pentapetala Nutrition 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 235000014510 cooky Nutrition 0.000 description 1
- 238000012937 correction Methods 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 102000057593 human F8 Human genes 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000006116 polymerization reaction Methods 0.000 description 1
- 229940047431 recombinate Drugs 0.000 description 1
- 238000007619 statistical method Methods 0.000 description 1
- 238000010200 validation analysis Methods 0.000 description 1
Abstract
The present invention provides a kind of visualization on-line customization method and system, which comprises receives on-line customization instruction, shows online customized web page；It receives the page and cuts instruction, instruction is cut according to the page, Webpage is cut, obtain webpage slice；Webpage slice of data is sent to server-side；It receives and applies edit instruction, webpage slice of data is obtained according to application edit instruction connection server-side；Webpage slice is generated according to webpage slice of data, webpage is sliced and carries out visual edit, be applied the page.This method is capable of providing visual editing environment, reduce development difficulty, it is suitble to a plurality of types of users to use, the page simply directly can be combined into a new network application through row dragging in the page by user, development cost and time is greatly saved, simplifies process, makes generation network application more simple and fast, to meet the needs of different terminals Webpage display, user experience is improved.
Description
Technical field
The present invention relates to technical field of network communication, particularly relate to a kind of visualization on-line customization method and system.
Background technique
Web browser is the Client browse program of WWW (Web) service, can send various ask to Web server
It asks, and the hypertext information and various multimedia data formats sent from server is explained, shown and played.With work
Stand, PC machine is compared, mobile terminal resource is relatively limited, therefore mobile terminal web browsing device is compared with running in work station, PC machine
Web browser is more difficult in exploitation, functionally there is more limitations.It is most of at present just because of this reason
Mobile terminal built-in web browser cannot parse execution, and comprising complexity JS, (JavaScript, one kind are driven based on object and event
Move and have the client-side scripting language of relative safety) Web page, this causes mobile terminal built-in web browser cannot
Normal browsing includes the Web page of complexity JS.
It is existing in order to solve the problems, such as that mobile terminal built-in browser is unable to the Web page that normal browsing includes complexity JS
Method employed in technology is by carrying out splitting and reorganizing technology to Web application, in the case where not modifying the former page, by one
The content specified in a or multiple pages tailors out, forms a new page.But the prior art has the following deficiencies: the skill
Art needs the Knowledge Base such as certain JavaScript, HTML, CSS, suitable for making with the user that higher Specialized training is crossed
With, and the user for newly contacting or do not have the public client of specialized Web application mobile technology then can not be immediately
Upper hand gives training, learns even if tailoring a simple page and being also required to devote a tremendous amount of time first.
Accordingly, it is desirable to provide a kind of new solution, can reduce development difficulty, a plurality of types of users is suitble to make
With can especially be suitble to non-professional ordinary populace user to use, there is the shirtsleeve operation page, so that user is directly operating
A new Web can be combined by intuitive drag operation on the page to apply, thus be greatly saved development cost and when
Between, process is simplified, makes generation Web application simpler, fast.
Summary of the invention
The present invention provides a kind of novel visualization on-line customization method and system, can simplify customization operations, realization can
It is operated depending on changing, quickly generates network application.
In order to solve the above technical problems, the embodiment of the present invention provides a kind of visualization on-line customization method, the method
Include:
On-line customization instruction is received, shows online customized web page；
It receives the page and cuts instruction, instruction is cut according to the page, Webpage is cut, obtain webpage slice；
Webpage slice of data is sent to server-side；
It receives and applies edit instruction, the server-side is connected according to the application edit instruction and obtains webpage slice of data；
Webpage slice is generated according to the webpage slice of data, the webpage is sliced and carries out visual edit, is answered
Use the page.
Preferably, the reception on-line customization instruction, shows online customized web page, comprising:
On-line customization instruction is received, the authentication information in the on-line customization instruction is obtained；
Authentication, which is carried out, using the authentication information shows online customized page when the authentication passes through
Face.
Preferably, the on-line customization page includes former web page editing area and slice directorial area.
Preferably, it includes: that page area division instructs, content of pages cuts instruction and the page is cut that the page, which cuts instruction,
Piece edit instruction.
Preferably, it receives the page and cuts instruction, instruction is cut according to the page, Webpage is cut, obtain net
Page slice, comprising:
It receives the page and cuts instruction, instruction is divided according to the page area, former webpage is carried out to cut region division；
Instruction is cut according to the content of pages, the content of pages for cutting region of division is cut, the page is obtained
Slice；
It is sliced edit instruction according to the page, page slice is edited to obtain the webpage slice.
Preferably, it receives the page and cuts instruction, instruction is divided according to the page area, former webpage is carried out to cut region
It divides, instruction is cut according to the content of pages, the content of pages for cutting region of division is cut, the page is obtained and cuts
Piece, comprising:
The drag operation information that user issues is received, former webpage is carried out to cut region division, region is cut to division
Content of pages cut, obtain page slice, edited to obtain the webpage to page slice and be sliced.
It is preferably, described that webpage slice of data is sent to server-side, comprising:
Webpage slice is converted into webpage slice of data, is sent to server-side with JSON character string forms.
Preferably, described receive applies edit instruction, connects the server-side according to the application edit instruction and obtains net
Page slice of data, comprising:
It receives and applies edit instruction, obtain the authentication information using in edit instruction；
Authentication is carried out using the authentication information, when the authentication passes through, is compiled according to the application
It collects instruction and connects the server-side acquisition webpage slice of data.
It is preferably, described that the server-side acquisition webpage slice of data is connected according to the application edit instruction, comprising:
Webpage slice of data acquisition request is sent to server-side according to the application edit instruction；
Receive the webpage slice of data that server-side is sent.
Preferably, described that webpage slice is generated according to the webpage slice of data, webpage slice is visualized
Editor, is applied before the page, further includes:
Show that the application edit page includes page listings area, the page using edit page according to using edit instruction
It edits preview region and webpage is sliced area.
It is preferably, described that webpage slice is generated according to the webpage slice of data, comprising:
Webpage slice is generated according to the webpage slice of data, and the display of webpage slice is applied into page described
Webpage in face is sliced area；
According to described pre- in the page editing preview region progress application page editor of application edit page using edit instruction
It lookes at, and the application page of generation is shown in page listings area.
Preferably, described receive applies edit instruction, connects the server-side according to the application edit instruction and obtains net
Before page slice of data, further includes:
Application creation instruction is received, instruction is created according to the application and establishes application.
The present invention also provides a kind of visualization on-line customization methods, which comprises
Webpage slice of data is received, the webpage slice of data is saved into database；
Webpage slice of data acquisition request is received, webpage number of slices is sent according to the webpage slice of data acquisition request
According to.
Preferably, the reception webpage slice of data acquisition request is sent according to the webpage slice of data acquisition request
Webpage slice of data, comprising:
According to the webpage slice of data acquisition request, the authentication in the webpage slice of data acquisition request is obtained
Information；
Authentication is carried out using the authentication information, when the authentication passes through, sends webpage number of slices
According to.
The present invention also provides a kind of visualization on-line customization system, the system comprises:
Customized web page display module shows online customized web page for receiving on-line customization instruction；
The page cuts module, cuts instruction for receiving the page, cuts instruction according to the page and carries out to Webpage
It cuts, obtains webpage slice；
Data transmission blocks, for webpage slice of data to be sent to server-side；
Data acquisition module, applies edit instruction for receiving, and connects the server-side according to the application edit instruction
Obtain webpage slice of data；
The webpage is sliced and is carried out for generating webpage slice according to the webpage slice of data using editor module
Visual edit, be applied the page.
Preferably, the customized web page display module includes:
First identification authenticating unit, for receiving on-line customization instruction, the identity obtained in the on-line customization instruction is recognized
Demonstrate,prove information；
Customized web page display unit, for carrying out authentication using the authentication information, when the authentication
By when, show online customized web page.
Preferably, the page cuts module and includes:
Area division unit cuts instruction for receiving the page, according to the page area divide instruction to former webpage into
Row cuts region division；
The page cuts unit, for cutting instruction according to the content of pages, to the content of pages for cutting region of division
It is cut, obtains page slice；
It is sliced edit cell, for being sliced edit instruction according to the page, page slice is edited to obtain
The webpage slice.
Preferably the area division unit includes:
Region division subelement refers to for receiving the drag operation information of user's sending according to page area division
Order carries out former webpage to cut region division；
The page cuts subelement, for receiving the drag operation information of user's sending, to the region that cuts of division
Content of pages is cut, and page slice is obtained；
Slice editor's subelement edits page slice for receiving the drag operation information of user's sending
Obtain the webpage slice.
Preferably, the data transmission blocks include:
Data transmission unit is sent to for webpage slice to be converted to webpage slice of data with JSON character string forms
Server-side.
Preferably, the data acquisition module includes:
Second identification authenticating unit applies edit instruction for receiving, and obtains the identity using in edit instruction and recognizes
Demonstrate,prove information；
Data capture unit, for carrying out authentication using the authentication information, when the authentication passes through
When, the server-side is connected according to the application edit instruction and obtains webpage slice of data.
Preferably, the data acquisition module includes:
Request transmitting unit is asked for sending the acquisition of webpage slice of data to server-side according to the application edit instruction
It asks；
Data receipt unit, for receiving the webpage slice of data of server-side transmission.
Preferably, the system also includes:
It is described to apply page for showing according to using edit instruction using edit page using editor's display module
Face includes page listings area, page editing preview region and webpage slice area.
Preferably, the application editor module includes:
It is sliced generation unit, for generating webpage slice according to the webpage slice of data, and webpage slice is aobvious
Show and is sliced area in the webpage using in edit page；
Using edit cell, for according to it is described using edit instruction the page editing preview region of application edit page into
Row application page editor's preview, and the application page of generation is shown in page listings area.
Preferably, the system also includes
Instruction is created according to the application and establishes application for receiving application creation instruction using creation module.
The present invention also provides a kind of visualization on-line customization system, the system comprises:
Data memory module saves the webpage slice of data into database for receiving webpage slice of data；
Data response sending module is obtained for receiving webpage slice of data acquisition request according to the webpage slice of data
Request is taken to send webpage slice of data.
Preferably, the data response sending module includes:
Tiers e'tat authentication unit, for obtaining the webpage number of slices according to the webpage slice of data acquisition request
According to the authentication information in acquisition request；
Data respond transmission sub-unit, for carrying out authentication using the authentication information, when the identity is recognized
When card passes through, webpage slice of data is sent.
The present invention also provides a kind of visualization on-line customization module applied to the Adaptable System based on cloud framework, institutes
Stating Adaptable System includes following functions module:
It accesses control module TailorForwarder: being responsible for the load balance process of HTTP, receive mobile terminal request,
The TailorWorkHorse node transmitting mobile terminal request small to current loads, receives TailorWorkHorse node processing
As a result, forwarding result information is to mobile terminal；
Visible customization unit module VisualTailor: visualization on-line customization module, which is realized, visually to be captured and receives
Collect the page in page business function segment, user on a web browser visually, it is convenient and efficient and intuitively realize original Web system
The secondary recombination of function generates new Web application on the page of system；
Integrated Development module TailorIDE: providing Tailor engineering Integrated Development Environment, realizes engineering creation, management
WebApp engineering and related resource possess and the mixed code of JS, HTML, CSS, JSON and these types are supported to carry out coloring display
Function；Tailor IDE also realizes the starting in IDE of WebApp engineering and TailorServer integrated debugging device, suspends and stop
Only；
Web page dynamic analysis engine/dynamic analysis server module TailorWorkHorse:TailorWorkHorse
The service of Web page dynamic analysis is provided, node can be run with the TailorWorkHorse of infinite expanding and be constituted；
Engineering memory node module StoreWorkHorse: being responsible for data distribution formula data storage and search, can be by nothing
The StoreWorkHorse memory node of limit extension is constituted, and is responsible for storage Tailor engineering information, the module library Web and engineering authority
Etc. management informations；
Engineering space module TailorWorkspace: it is responsible for the storage and retrieval of Tailor engineering；
Self-help service for user management module: realize user self-help business monitoring and system monitoring and service management and
System administration services；
Operation management console module: enterprises registration management and entire platform service and system running state monitoring and pipe are realized
Reason.
Further, the TailorForwarder undertakes two functions, first is that completing user and web page dynamic resolution
The information exchange for analysing user request and request results between service-Engine TailorWorkHorse, second is that balancing multiple web pages
The pressure of dynamic analysis service-Engine realizes load balancing.
Further, in the press process for balancing multiple web page dynamic analysis engines, TailorForwarder meeting
The state of all web page dynamic analysis engines in automatic regular polling cloud framework judges the negative of each web page dynamic analysis engine
Lotus size, and new user's request is sent to the small web page dynamic analysis engine of load, to realize load balancing.
Further, the visualization on-line customization module is mainly by TailorIDEPlug and TailorIDEService
It constitutes, the completion visualization on-line customization page is cooperated by TailorIDEPlug and TailorIDEService, in which:
TailorIDEPlug, which is mainly responsible for, realizes that visually realizes Web slice the processing work such as cuts, processes, combine
It is dynamic；
TailorIDEService is mainly responsible for the storage and management of Web slice.
The present invention additionally provides a kind of visualization on-line customization method simultaneously, by visual in above-mentioned Adaptable System
Change on-line customization module to realize, method includes the following steps:
Step 1: input needs the original web address tailored in TailorIDEPlug；
Step 2:TailorIDEPlug is visually captured and is collected in the page to webpage using browser plug-in technology
Page business function segment forms Web one by one and is sliced；
Step 3: Web is sliced, template support is provided, the specific setting up procedure such as layout, pattern specifically includes:
The Web template library in WebApp cloud memory structure is transferred by TairlorWorkSpace, is TailorIDEPlug
The Web slice of extraction provides template and supports；
The integrally disposed environment provided by TailorIDEPlug, to interested Web slice by selecting Web template,
Layout, the pattern etc. of Web slice are set；
Step 4: the Web set being sliced, TairlorWorkHorse engine is transferred by TairlorIDEService
It is debugged, checks that Web is sliced mobile phone terminal operational effect, if dissatisfied, can also be set again by return step 3
It sets；If being satisfied with Web dicing effect, executes step 5 and save slice.
Step 5: the Web set slice is sent to TairlorWorkHorse and is saved, is specifically included:
TairlorWorkHorse receives the Web slice information for needing to save, and saves it in WebApp cloud storage knot
In Web slice library in structure；It is stored in the Web slice of Web slice library, the component that can be used as WebApp engineering is assembled, collected
At and operation, but by outer net cannot be accessed by the user and use separately as application；
Step 6: user can assemble the Web slice set in WebApp engineering, integrate, and form engineering
In application, the application is a webpage or other application, the WebApp engineering be can directly be passed through by user it is outer
Net the application of access；
Step 7: the WebApp engineering set being transferred into TairlorWorkHorse by TairlorIDEService and is drawn
It holds up and is debugged, check WebApp engineering mobile phone terminal operational effect, if dissatisfied, weight can also be carried out by return step 6
New setting；If being satisfied with WebApp engineering effort, executes step 8 and save engineering；
Step 8: the WebApp engineering set being sent to TairlorWorkHorse and is saved；
TairlorWorkHorse receives the web project information for needing to save, and saves it in WebApp cloud memory structure
In StoreWorkHorse engineering node library.
Above-mentioned technical proposal of the invention at least realize it is following the utility model has the advantages that
Webpage is cut by cutting instruction according to the page, obtains webpage slice and according to the webpage
Slice of data generates webpage slice, is sliced to the webpage and carries out visual edit, be applied the page.It is capable of providing visualization
Editing environment, reduce development difficulty, be suitble to a plurality of types of users to use, can especially be suitble to non-professional ordinary populace
User uses, and the page simply directly can be combined into a new network application through row dragging in the page by user, greatly
Development cost and time are saved greatly, simplifies process, makes generation network application more simple and fast, to meet different terminals net
The demand that the network page is shown improves user experience.
Detailed description of the invention
Figure 1A is the visualization on-line customization method flow diagram of the embodiment of the present invention 1；
Figure 1B -1D is each sub-step logical flow chart of visualization on-line customization method of the embodiment of the present invention 1；
Fig. 2 is the visualization on-line customization method flow diagram of the embodiment of the present invention 2；
Fig. 3 is the visualization on-line customization system structure diagram of the embodiment of the present invention 3；
Fig. 4 is the visualization on-line customization system structure diagram of the embodiment of the present invention 4；
Fig. 5 is another structural framing figure of the visualization on-line customization system of the embodiment of the present invention 4；
Fig. 6 is the schematic diagram of visual prototype design slice page of the invention；
Fig. 7 is the schematic diagram that visual prototype of the invention designs application management page；
Fig. 8 is the schematic diagram of visual prototype design and assembly page of the invention；
Fig. 9 is the structural block diagram of the Adaptable System based on cloud framework of the embodiment of the present invention 4.
Figure 10 is the method flow diagram of the Adaptable System based on cloud framework of the embodiment of the present invention 4.
Figure 11 is the work of the visualization on-line customization module of the Adaptable System based on cloud framework of the embodiment of the present invention 4
Schematic illustration.
Figure 12 is that the working principle of the Integrated Development module of the Adaptable System based on cloud framework of the embodiment of the present invention 4 is shown
It is intended to.
Figure 13 is that the engineering of the Integrated Development module of the Adaptable System based on cloud framework of the embodiment of the present invention 4 debugs work
Make schematic illustration.
Figure 14 is the work of the dynamic analysis server module of the Adaptable System based on cloud framework of the embodiment of the present invention 4
Schematic illustration.
Specific embodiment
To keep the technical problem to be solved in the present invention, technical solution and advantage clearer, below in conjunction with attached drawing and tool
Body embodiment is described in detail.It is to be understood that following specific embodiments is only to schematically illustrate, unless there are special
Illustrate, the different embodiments of the application and Different Optimization means in each embodiment, even without in the same embodiment
It illustrates, is also understood to that any other aspect, embodiment or example described here can be applied to, unless with
It is incompatible or be explicitly excluded outside herein, otherwise the application either with or without the combination between embodiment exhausted
Or sub-portfolio is all in record of the invention and protection scope.Master of the present invention is elaborated below with reference to specification and attached drawing
Purport and its preferred embodiment.
Embodiment 1
As shown in figures 1 a-1d, a kind of visualization on-line customization method of the embodiment of the present invention, which comprises
Step 101: receiving on-line customization instruction, show online customized web page.
Wherein, the on-line customization page may include former web page editing area and slice directorial area.The reception is online fixed
System instruction, shows online customized web page, may include:
On-line customization instruction is received, the authentication information in the on-line customization instruction is obtained；
Authentication, which is carried out, using the authentication information shows online customized page when the authentication passes through
Face.
In the present embodiment, by showing that online customized web page improves the intuitive of on-line customization, user can directly exist
Customization operations are carried out on the on-line customization page, authenticating by the authentication information in instructing to on-line customization can be effective
Improve the safety of row customization again.
Step 102: receiving the page and cut instruction, instruction is cut according to the page, Webpage is cut, obtained
Webpage slice.
Wherein, it may include: that page area divides instruction, content of pages cuts instruction and the page that the page, which cuts instruction,
It is sliced edit instruction.It receives the page and cuts instruction, instruction is cut according to the page, Webpage is cut, obtain webpage
Slice, comprising:
It receives the page and cuts instruction, instruction is divided according to the page area, former webpage is carried out to cut region division；Root
Instruction is cut according to the content of pages, the content of pages for cutting region of division is cut, obtains page slice；According to institute
Page slice edit instruction is stated, page slice is edited to obtain the webpage slice.Preferably, it can receive user
The drag operation information of sending carries out former webpage to cut region division, cuts to the content of pages for cutting region of division
It takes, obtains page slice, page slice is edited to obtain the webpage slice.
In the present embodiment, user, which can be convenient, intuitively to be gone forward side by side by the operation fast selecting original network page content such as dragging
The interception of row network obtains network slice.
Step 103: webpage slice of data is sent to server-side.
Wherein it is possible to which webpage slice is converted to webpage slice of data, server-side is sent to JSON character string forms.
Further, by carrying out drag operation in the page of browser, after content of pages is drawn to break area,
Webpage slice is converted into webpage slice of data in break area after space is handled, and is sent to clothes with JSON character string forms
Business end.
In the present embodiment, by the way that webpage slice is converted to webpage slice of data and is sent to server, can effectively it subtract
The data storage capacity of small browser, and guarantee the integrality and safety of webpage slice of data.
Step 104: receiving and apply edit instruction, the server-side acquisition webpage is connected according to the application edit instruction and is cut
Sheet data.
Wherein it is possible to receive using edit instruction, the authentication information using in edit instruction is obtained；Using institute
It states authentication information and carries out authentication, when the authentication passes through, according to application edit instruction connection
Server-side obtains webpage slice of data.It is obtained specifically, sending webpage slice of data to server-side according to the application edit instruction
Take request；Receive the webpage slice of data that server-side is sent.
In the present embodiment, webpage slice of data is obtained by connection server-side, can guarantee that user carries out anywhere or anytime
Using editor, the mobility of row customization again is improved.
Preferably, described that webpage slice is generated according to the webpage slice of data, webpage slice is visualized
Editor, is applied before the page, further includes: it shows according to using edit instruction using edit page, it is described to apply page
Face includes page listings area, page editing preview region and webpage slice area.
Step 105: webpage slice being generated according to the webpage slice of data of acquisition, webpage slice is carried out visual
Change editor, be applied the page.
Wherein it is possible to generate webpage slice according to the webpage slice of data of acquisition, and the webpage is sliced and is shown
Area is sliced in the webpage using in edit page；According to it is described using edit instruction application edit page page editing
Preview region carries out application page editor preview, and the application page of generation is shown in page listings area.
The network of generation can also be preferably sliced be analyzed, tracking and positioning, to improve using editor
Efficiency.
In the present embodiment, visualization on-line customization plug-in unit can be installed in a browser to realize visualization on-line customization side
Method, when visualizing the starting of on-line customization plug-in unit and activation, visualization on-line customization plug-in unit realizes weight to browser display area
It is new to divide region.
Preferably, described receive applies edit instruction, connects the server-side according to the application edit instruction and obtains net
Before page slice of data, further includes:
Application creation instruction is received, instruction is created according to the application and establishes application.
Specifically, the logical flow chart of step 102 is as shown in Figure 1B, receives after the page cuts instruction and enters step 1101,
It inputs user name, password carries out authentication: if being verified, thening follow the steps 1102 beginnings and select to be sliced in the page, complete
Step 1103 pair slice is executed afterwards to edit and process, then executes step 1104 input slice information, then executes step 1105
Slice information is saved, is finally terminated；If authentication failed, then follow the steps 1106 and provide miscue, user decide in its sole discretion whether
It verifies again, if it is, step 1101 is returned to, if otherwise directly terminated.
The logical flow chart of step 105 is as shown in Figure 1 C, receives using entering step 1201 after edit instruction, inputs user
Name, password carry out authentication: if being verified, thening follow the steps the application that 1202 selections need to edit, then execute step
Certain page in 1203 pairs of applications is edited, and executes step 1204 later and slice is dragged on the page, then execute step
Rapid 1205 input the page data relevant information, execute step 1206 later and save page data, finally terminate；If testing
Card failure, thens follow the steps 1207 and provides miscue, whether user decides in its sole discretion verifies again, if it is, returning to step
1201, if otherwise directly terminated.
Step receives application creation instruction, creates logical flow chart such as Fig. 1 D institute that application is established in instruction according to the application
Show, enter step 1301 after receiving application creation instruction, inputs user name, password carries out authentication: if being verified, holding
Row step 1302 inputs application message, then executes 1303 and saves using data, finally terminates；If authentication failed executes step
Rapid 1304 provide miscue, and whether user decides in its sole discretion verifies again, if it is, step 1301 is returned to, if otherwise straight
Binding beam.
The visualization on-line customization method of the embodiment of the present invention, by according to the page cut instruction to Webpage into
Row is cut, and is obtained webpage slice and is generated webpage slice according to the webpage slice of data, carries out to webpage slice visual
Change editor, be applied the page.Referring to shown in Fig. 6-8, i.e. how the common Web page at one simple end PC of schematic diagram leads to
Cross the App application of the mobile phone terminal of visualization on-line customization method generation.
The visualization on-line customization method of the embodiment of the present invention, is capable of providing visual editing environment, reduces exploitation
Difficulty is suitble to a plurality of types of users to use, and can especially be suitble to non-professional ordinary populace user to use, user can be simple
By the page directly the page through row dragging can be combined into a new network application, be greatly saved development cost and when
Between, process is simplified, makes generation network application more simple and fast, to meet the needs of different terminals Webpage display, is mentioned
High user experience.
Embodiment 2
As shown in Fig. 2, a kind of visualization on-line customization method of the embodiment of the present invention, which comprises
Step 201: receiving webpage slice of data, the webpage slice of data is saved into database.
Step 202: receiving webpage slice of data acquisition request, webpage is sent according to the webpage slice of data acquisition request
Slice of data.
Wherein, the reception webpage slice of data acquisition request sends net according to the webpage slice of data acquisition request
Page slice of data, comprising:
According to the webpage slice of data acquisition request, the authentication in the webpage slice of data acquisition request is obtained
Information；
Authentication is carried out using the authentication information, when the authentication passes through, sends webpage number of slices
According to.
In the present embodiment, it can effectively ensure that webpage is sliced in the database by receiving webpage slice of data, and saving
The integrality and safety of data send webpage slice of data according to the webpage slice of data acquisition request, can effectively mention
High mobility is convenient for the user to use.
Embodiment 3
As shown in figure 3, a kind of visualization on-line customization system of the embodiment of the present invention, the system comprises:
Customized web page display module 301 shows online customized web page for receiving on-line customization instruction；
The page cuts module 302, cuts instruction for receiving the page, according to the page cut instruction to Webpage into
Row is cut, and obtains webpage slice；
Data transmission blocks 303, for webpage slice of data to be sent to server-side；
Data acquisition module 304, applies edit instruction for receiving, and connects the service according to the application edit instruction
End obtains webpage slice of data；
Using editor module 305, for generating webpage slice according to the webpage slice of data, to the webpage be sliced into
Row visual edit, be applied the page.
Preferably, the customized web page display module includes:
First identification authenticating unit, for receiving on-line customization instruction, the identity obtained in the on-line customization instruction is recognized
Demonstrate,prove information；
Customized web page display unit, for carrying out authentication using the authentication information, when the authentication
By when, show online customized web page.
Preferably, the page cuts module and includes:
Area division unit cuts instruction for receiving the page, according to the page area divide instruction to former webpage into
Row cuts region division；
The page cuts unit, for cutting instruction according to the content of pages, to the content of pages for cutting region of division
It is cut, obtains page slice；
It is sliced edit cell, for being sliced edit instruction according to the page, page slice is edited to obtain
The webpage slice.
Preferably the area division unit includes:
Region division subelement refers to for receiving the drag operation information of user's sending according to page area division
Order carries out former webpage to cut region division；
The page cuts subelement, for receiving the drag operation information of user's sending, to the region that cuts of division
Content of pages is cut, and page slice is obtained；
Slice editor's subelement edits page slice for receiving the drag operation information of user's sending
Obtain the webpage slice.
Preferably, the data transmission blocks include:
Data transmission unit is sent to for webpage slice to be converted to webpage slice of data with JSON character string forms
Server-side.
Preferably, the data acquisition module includes:
Second identification authenticating unit applies edit instruction for receiving, and obtains the identity using in edit instruction and recognizes
Demonstrate,prove information；
Data capture unit, for carrying out authentication using the authentication information, when the authentication passes through
When, the server-side is connected according to the application edit instruction and obtains webpage slice of data.
Preferably, the data acquisition module includes:
Request transmitting unit is asked for sending the acquisition of webpage slice of data to server-side according to the application edit instruction
It asks；
Data receipt unit, for receiving the webpage slice of data of server-side transmission.
Preferably, the system also includes:
It is described to apply page for showing according to using edit instruction using edit page using editor's display module
Face includes page listings area, page editing preview region and webpage slice area.
Preferably, the application editor module includes:
It is sliced generation unit, for generating webpage slice according to the webpage slice of data, and webpage slice is aobvious
Show and is sliced area in the webpage using in edit page；
Using edit cell, for according to it is described using edit instruction the page editing preview region of application edit page into
Row application page editor's preview, and the application page of generation is shown in page listings area.
Preferably, the system also includes
Instruction is created according to the application and establishes application for receiving application creation instruction using creation module.
As shown in figure 4, a kind of visualization on-line customization system of the embodiment of the present invention, the system comprises:
Data memory module 401 saves the webpage slice of data to database for receiving webpage slice of data
In；
Data respond sending module 402, for receiving webpage slice of data acquisition request, according to the webpage slice of data
Acquisition request sends webpage slice of data.
Preferably, the data response sending module includes:
Tiers e'tat authentication unit, for obtaining the webpage number of slices according to the webpage slice of data acquisition request
According to the authentication information in acquisition request；
Data respond transmission sub-unit, for carrying out authentication using the authentication information, when the identity is recognized
When card passes through, webpage slice of data is sent.
Embodiment 4
Preferably, the visualization on-line customization system of the embodiment of the present invention, customization frame structure can also be such as Fig. 5 institute
Show, those skilled in the art, which can according to need, to be configured.
Visualization on-line customization (TailorIDEPlug) system in the embodiment of the present invention can be used as inserting in browser
Part form exists, and when visualizing on-line customization plug-in unit (TailorIDEPlug) starting and activation, visualizes on-line customization plug-in unit
Region is repartitioned to browser display area realization, which includes following functions module and realize following functions:
1, it tailors page setup module: freely tailoring for the page being realized according to the visualized operation of user, is specifically included:
1.1 tool bar area setup modules: for placing sectioning option button；
1.2 former page viewing area setup modules: for showing former content of pages and trace analysis original page structure；
1.3 slice processing area setup modules: the slice tailored is processed, is handled；
2, application management page setup module: specific to wrap for managing application page, realizing using preview and application editor
It includes:
2.1 apply preview region setup module: the substantially effect on mobile phone is applied for preview；
2.2 application operating tool bars: for placing the operation button edited to application；
3, using assembling page setup module: for assembling application page, specifically include:
3.1 page listings area setup modules: for showing all pages of current application；
3.2 page editings/preview region setup module: for showing to specified page through edlin, preview；
3.3 slice list area setup modules: for showing all slices of current account.
Preferably, the visualization on-line customization system of the embodiment of the present invention, can be used as a subsystem (or visualization exist
Line customized module) it applies in an Adaptable System based on cloud framework, the Adaptable System structure is as shown in figure 9, institute
The Adaptable System based on cloud framework stated is the Tailor platform cloud service in the Fig. 9 comprising following functions module:
TailorForwarder, VisualTailor, TailorIDE, TailorWorkspace,
TailorWorkHorse, StoreWorkHorse and service management and operation management platform.
Wherein the function of each functional module is as follows:
TailorForwarder (access control module): it is responsible for the load balance process of HTTP, receives mobile terminal and ask
It asks, the TailorWorkHorse node transmitting mobile terminal request small to current loads receives TailorWorkHorse node
Processing result forwards result information to mobile terminal.
TailorForwarder undertakes two functions, first is that completing user and TailorWorkHorse (web page dynamic
Analytics engine) between user's request and the information exchanges of request results, second is that balancing the pressure of multiple web page dynamic analysis services
Power realizes load balancing.
In the press process for balancing multiple web page dynamic analysis engines, TailorForwarder can automatic regular polling cloud
The state of all web page dynamic analysis engines in framework judges the payload of each web page dynamic analysis engine, and
New user's request is sent to the small web page dynamic analysis engine of load, to realize load balancing.
VisualTailor (visible customization unit module): visualization on-line customization is real using browser plug-in technology
Now visually capture and collect the page in page business function segment, user on a web browser visually, it is convenient and efficient
Intuitively realize that the secondary recombination of function generates new Web application on the page of former Web system.
TailorIDE (Integrated Development module): it is one and is constructed based on TailorServer and eclipse
JavaScript program develops EclipsePlugin Integrated Development Environment, and Eclipse3.5 and the above version are supported in design.
TailorIDE is a Tailor engineering Integrated Development Environment, can create, manage WebApp engineering and related resource, possess
JS, HTML, CSS, JSON and the mixed code of these types is supported to carry out coloring and show；TailorIDE be also WebApp engineering and
TailorServer integrated debugging device can start in IDE, suspends and stop.It can test and dispose in cloud computing environment
Your code, it can also be connected to telework platform.It the use of subject population is Tailor engineering development personnel.
TailorWorkHorse (Web page dynamic analysis engine/dynamic analysis server module):
TailorWorkHorse provides the service of Web page dynamic analysis, can run node with the TailorWorkHorse of infinite expanding
It constitutes.
StoreWorkHorse (engineering memory node module): it is responsible for data distribution formula data storage and search, Ke Yiyou
The StoreWorkHorse memory node of infinite expanding is constituted, and is responsible for storage Tailor engineering information, the module library Web and engineering and is awarded
The management informations such as power.
TailorWorkspace (engineering space module): it is responsible for the storage and retrieval of Tailor engineering.
Self-help service for user management: user applies the self-service business monitoring and system monitoring and business pipe of Tailor
Reason and system administration services.
Operation management console module: enterprises registration management and entire platform service and system running state monitoring and pipe are realized
Reason.
Tailor platform cloud service frame shown in Fig. 9 is to meet the following ultra-large Tailor bundle of services business demand
Development need and the framework designed, including can support that corporate client business needs and public users number of storage tanks produced per day needs, energy
It runs well, the WebApp of publication and management corporate client and public users.Corporate client and public users are utilizing
When Tailor platform cloud service frame uses the WebAPP of oneself, need to protect by registration, examination & approval, authorization, engineering customization, engineering
It deposits, engineering operation, multiple steps, the detailed process such as engineering management no longer repeat one by one herein referring to Figure 10.
For an other embodiment as visualization on-line customization module, (visualization is online by the VisualTailor
Customized module) it is to realize visually to capture and collect the page business function segment in the page using browser plug-in technology,
User on a web browser visually, the secondary recombination generation of function on the page that is convenient and efficient and intuitively realizing former Web system
New Web application.
Whether contain browser perform script according in WEB page, WEB page can be divided into static page and dynamic page.
Browser plug-in technology uses the hyperlink that the body matter in static page is read in HTML markup recognition methods and its inside includes
Network address is connect, browser perform script (such as the JavaScript script in dynamic page is read using dynamic analysis technology
Deng), then by code extraction and recombinate, to realize capture and collect the page business function segment in the page.
VisualTailor visualize on-line customization working principle it is as shown in figure 11, visualization on-line customization mainly by
TailorIDEPlug and TailorIDEService is constituted.It is mutually assisted by TailorIDEPlug and TailorIDEService
Make to complete the visualization on-line customization page.
TailorIDEPlug, which is mainly responsible for, realizes that visually realizes Web slice the processing work such as cuts, processes, combine
It is dynamic.
TailorIDEService is mainly responsible for the storage and management of Web slice.
Shown in process flow Figure 12 referring to VisualTailor visualization on-line customization module, the on-line customization module
Workflow is specific as follows:
Step 1: input needs the original web address tailored in TailorIDEPlug；
Step 2:TailorIDEPlug is visually captured and is collected in the page to webpage using browser plug-in technology
Page business function segment forms Web one by one and is sliced；
Step 3: Web is sliced, template support is provided, the specific setting up procedure such as layout, pattern specifically includes:
The Web template library in WebApp cloud memory structure is transferred by TairlorWorkSpace, is TailorIDEPlug
The Web slice of extraction provides template and supports；
The integrally disposed environment provided by TailorIDEPlug, to interested Web slice by selecting Web template,
Layout, the pattern etc. of Web slice are set；
Step 4: the Web set being sliced, TairlorWorkHorse engine is transferred by TairlorIDEService
It is debugged, checks that Web is sliced mobile phone terminal operational effect, if dissatisfied, can also be set again by return step 3
It sets；If being satisfied with Web dicing effect, executes step 5 and save slice.
Step 5: the Web set slice is sent to TairlorWorkHorse and is saved, is specifically included:
TairlorWorkHorse receives the Web slice information for needing to save, and saves it in WebApp cloud storage knot
In Web slice library in structure.It is stored in the Web slice of Web slice library, the component that can be used as WebApp engineering is assembled, collected
At and operation, but by outer net cannot be accessed by the user and use separately as application.
Step 6: user can assemble the Web slice set in WebApp engineering, integrate, and form engineering
In application (webpage or other).
WebApp engineering is the application that directly can pass through extranet access by user.
Step 7: the WebApp engineering set being transferred into TairlorWorkHorse by TairlorIDEService and is drawn
It holds up and is debugged, check WebApp engineering mobile phone terminal operational effect, if dissatisfied, weight can also be carried out by return step 6
New setting；If being satisfied with WebApp engineering effort, executes step 8 and save engineering.
Step 8: the WebApp engineering set being sent to TairlorWorkHorse and is saved；
TairlorWorkHorse receives the web project information for needing to save, and saves it in WebApp cloud memory structure
In StoreWorkHorse engineering node library.
TailorIDE (Integrated Development module), which is that the complete Tailor engineering of plug-in unit offer of an Eclipse is integrated, to be opened
Hair ring border makes the help of the Tailor resource Validation Code of standard development function, search-type, syntax and semantics, the wheel of type
Wide and hierarchical structure, call chain reconstruct and more.
TailorIDE provides creation, editor, template-setup, integrated assembly, debugging, management and the deployment of WebApp engineering
Etc. functions.
Referring to TailorIDE principle process Figure 12 to work it is found that the work of the TailorIDE (Integrated Development module)
Process is specific as follows:
Step 1: user inputs user name and logs in TailorIDE；
The engineering account that TailorIDE is sended over is sent to by step 2:TailorIDEService
TairlorWorkSpace；
2.1 transfer the user library in WebApp cloud memory structure by TairlorWorkSpace, and the engineering of user is provided
Source information is sent to TailorIDE by TailorIDEService, for the engineering resource of user management oneself.
Step 3: user creates in TailorIDE or edits the WebApp engineering of oneself；
The integrally disposed environment provided by TailorIDEPlug, to interested Web slice by selecting Web template,
Layout, the pattern etc. of Web slice are set；
Step 4:
4.1TairlorIDEService transfers the Web mould in WebApp cloud memory structure by TairlorWorkSpace
Plate library, and from Web slice library calling and obtaining user oneself Web slice information, provided for TairlorIDE Integrated Development Environment
WebUI template abundant and user it is stored Web slice.
4.2 users carry out code development to Web slice, page etc. in TailorIDE Integrated Development Environment, can also make
Engineering page effect is checked by engineering debugging after the completion with the UI template configuration engineering page.
Step 5: the engineering page set is transferred into TairlorWorkHorse engine by TairlorIDEService
It is debugged, checks engineering page mobile phone terminal operational effect, if dissatisfied, can also be set again by return step 4
It sets；If satisfactory project page effect, executes step 6 and save engineering.
Step 6: the engineering set being sent to TairlorWorkHorse and is saved；
6.1TairlorWorkHorse receives the engineering information for needing to save, and saves it in WebApp cloud storage knot
In StoreWorkHorse engineering node library in structure.WebApp engineering is directly to pass through answering for extranet access by user
With.
Step 7: user can carry out associated documents resource to WebApp engineering in TailorIDE Integrated Development Environment
Organization and administration, project file version management, project plan management, the management such as engineering permission control management.
Step 8: the WebApp engineering management set deployment information being sent to TairlorWorkHorse and is saved；
8.1TairlorWorkHorse receives the web project management deployment information for needing to save, and saves it in
In StoreWorkHorse engineering node library in WebApp cloud memory structure.
The major function of TailorIDE (Integrated Development module) includes:
There is provided engineering editor: engineering development can create, edit Tailor engineering and related resource, possess support JS,
HTML, CSS, JSON and the mixed code of these types carry out the editing and processing such as grammer prompt, auto-complete, highlighted, editor's error correction.
There is provided engineering template: platform quotient provides WebUI template library abundant, allows engineering staff according to project situation, selects
Suitable WebUI template, generates project WebUI structural framing, and engineering staff's fast construction is allowed to play mobile Web application.
Engineering management and deployment: engineering management can complete the organization and administration of Tailor engineering associated documents resource, engineering text
Part version management, can complete enterprises engineering collaborative development, and project plan work can support and manage the engineering of multiple enterprises
Permission control management, can also support the engineering permission inside integrator to control management.
Engineering debugging: the debugging interface between TailorIDE debugging plug-in unit and TailorWorkHorse is built upon TCP
JSON on the basis of communication debugs communication protocol, can pass through and to run on TailorIDE remote debugging TailorWorkHorse
Tailor engineering code, remote debugging technology mode are that communication infrastructure is established in IDE platform and cloud computing.
The concrete operating principle of engineering debugging no longer repeats one by one herein referring to Figure 13.
TailorWorkspace be responsible for Tailor engineering storage and retrieval and engineering resource permission control access.
TailorWorkspace workflow is referring to Figure 14, and detailed process is as follows:
TailorIDE accesses the Tailor engineering resource file in oneself extent of competence by TailorWorkspace, wound
The Tailor engineering resource file of oneself is built and managed, provides UI template library abundant for TailorIDE, editor saves, management
With deployment engineering information.
VisualTailor visible customization accesses the resource file of oneself by TailorWorkspace, creates and adds
The Web of work oneself is sliced, and provides UI template library abundant for visualization, is provided Web slice engineering information of the assembly after integrated
It saves.
TailorWorkHorse calls Tailor engineering resource file to complete page dynamic by TailorWorkspace
Parsing, support WebApp user's access.
TailorWorkHorse Web dynamic analysis engine has distributed arithmetic service function, TailorWorkHorse
The service of Web page dynamic analysis is provided, node can be run with the TailorWorkHorse of infinite expanding.
Processing function is tailored in parsing, processing and the polymerization of TailorWorkHorse Web dynamic analysis engine implementation web content
Can, seamlessly all kinds of enterprise operation systems or Internet application information organically can be condensed together, and extend to movement
It is applied in equipment.Web dynamic analysis engine can require parsing to execute original Web system output according to the instruction in project file
It is suitble to the page self-adapted WebApp of mobile phone behaviour's built-in browser or the operation of Hybrid client.
TailorWorkHorse Web dynamic analysis engine is parsed by javascript resolver, CSS resolver, html
The part such as device, Cookie&Session management, HttpFetcher forms.
StoreWorkHors engineering memory node has Distributed Storage and search function, and user can be according to whole
A Distributed Storage and retrieval operating load can be responsible for storage with the StoreWorkHorse node of infinite expanding
Tailor engineering information and engineering operation status information are responsible for storage project operation information and system information, are responsible for storage engineering
Account and engineering resource information.
Management platform is divided into two classes: managing the operation management platform and business administration oneself service operation of entire platform operation
Self-help service for user manage platform service.
Operation management platform: the entire platform operation of operation management platform management.Operation management platform is by entire Tailor
Cloud platform service provider be responsible for using, provide the examination & approval of user's registration information, the distribution authorization of user engineering resource information, use
The functions such as family engineering resource service operation monitoring management and operation management platform personnel management.It guarantees that entire Tailor cloud is flat
Platform can normally support creation, maintenance, operation, monitoring of all user engineerings etc..It specifically includes following functions module and divides
It Shi Xian following functions:
Enterprise introduces examination & approval: realizing the enterprise qualification examination & approval processing function of introducing；
Business administration: enterprises registration, enterprise query are realized in business administration, and function is modified by enterprise；
Personal management: the personal management using centralized management platform is realized；
Business monitoring: each business event running state monitoring is realized；
System monitoring: hardware system, operating system, support platform and business platform monitoring are realized.
Self-help service for user manages platform:
Self-help service for user management is public users, enterprise customer, engineers and technicians provide registration, data management, clothes
The functions such as business application, user management, engineering management, business monitoring, business statistics analysis.User passes through registration, data management, clothes
Business application is issued to operation management platform creates the application of WebApp engineering using platform.After operation management person is by examination & approval, use
Oneself available engineering resource space of family, user can create in engineering resource space, edit, debug, saving oneself
WebAPP engineering, and the operation of WebAPP engineering just monitor by Self-Service, business statistics is analyzed etc..It specifically includes
Following functions module simultaneously realizes following functions respectively:
User's registration management: if operation management platform does not have the materials for registration of user, it is necessary to which user is in centralized services
Management platform portal registers the information of oneself.When register user it is successful when, system default generate an Administrator account, pipe
Reason person's account are as follows: Administrator account: admin, Administrator account's password: 123.When user uses default admin's account for the first time
When number login system, the password of oneself is modified after logining successfully, to protect the information security of oneself company.
User information management: user can check user basic information, user's qualification file, user's approval status and user
Approval record qualification file.User can modify user basic information；
Service request: can apply servicing after user registration success, could only apply for service after user registration success；
User's user management: user can manage independently oneself engineering staff's information by platform；
Engineering management: the management and authority distribution of engineering resource are realized；
Business monitoring: the monitoring management of customer service use state is realized；
Business statistics analysis: customer service statistical analysis management is realized.
The visualization on-line customization system of the embodiment of the present invention, the method used is visualizes on-line customization method, therefore
The feature for visualizing on-line customization system is identical as visualization on-line customization method, and details are not described herein.
The above is a preferred embodiment of the present invention, it is noted that for those skilled in the art
For, without departing from the principles of the present invention, several improvements and modifications can also be made, these improvements and modifications
It should be regarded as protection scope of the present invention.
Claims (31)
1. a kind of visualization on-line customization method, which is characterized in that the described method includes:
On-line customization instruction is received, shows online customized web page；
It receives the page and cuts instruction, instruction is cut according to the page, Webpage is cut, obtain webpage slice；The root
Instruction is cut according to the page cut to obtain webpage slice to Webpage and specifically included: former webpage being carried out to cut region
It divides；The content of pages for cutting region is cut, page slice is obtained；Page slice is edited to obtain the webpage
Slice；Wherein, webpage slice be carried out by the page business function segment cut to Webpage in region capture and
It is formed after collection；
Webpage slice of data is sent to server-side；
It receives and applies edit instruction, the server-side is connected according to the application edit instruction and obtains webpage slice of data；
Webpage slice is generated according to the webpage slice of data, the webpage is sliced and carries out visual edit, be applied page
Face.
2. visualization on-line customization method according to claim 1, which is characterized in that the reception on-line customization instruction,
Show online customized web page, comprising:
On-line customization instruction is received, the authentication information in the on-line customization instruction is obtained；
Authentication, which is carried out, using the authentication information shows online customized web page when the authentication passes through.
3. visualization on-line customization method according to claim 1, which is characterized in that the on-line customization page includes original
Web page editing area and slice directorial area.
4. visualization on-line customization method according to claim 1, which is characterized in that the page cuts instruction and includes:
Page area divides instruction, content of pages cuts instruction and page slice edit instruction, the specific reception page cut instruction,
Instruction is cut according to the page to cut Webpage, is obtained webpage slice, is specifically included:
It receives the page and cuts instruction, instruction is divided according to the page area, former webpage is carried out to cut region division；
Instruction is cut according to the content of pages, the content of pages for cutting region of division is cut, obtains page slice；
It is sliced edit instruction according to the page, page slice is edited to obtain the webpage slice.
5. visualization on-line customization method according to claim 4, which is characterized in that it receives the page and cuts instruction, according to
The page area divides instruction and carries out cutting region division to former webpage, instruction is cut according to the content of pages, to division
The content of pages for cutting region cut, obtain the page slice, according to the page be sliced edit instruction, to the page
Slice is edited to obtain the webpage slice, comprising:
The drag operation information that user issues is received, former webpage is carried out to cut region division, to the page for cutting region of division
Face content is cut, and page slice is obtained, and is edited to obtain the webpage slice to page slice.
6. visualization on-line customization method according to claim 1, which is characterized in that described to send webpage slice of data
To server-side, comprising:
Webpage slice is converted into webpage slice of data, is sent to server-side with JSON character string forms.
7. visualization on-line customization method according to claim 1, which is characterized in that described receive applies edit instruction,
The server-side, which is connected, according to the application edit instruction obtains webpage slice of data, comprising:
It receives and applies edit instruction, obtain the authentication information using in edit instruction；
Authentication is carried out using the authentication information, when the authentication passes through, editor refers to according to the application
It enables and connects the server-side acquisition webpage slice of data.
8. visualization on-line customization method according to claim 1, which is characterized in that described to be referred to according to application editor
It enables and connects the server-side acquisition webpage slice of data, comprising:
Webpage slice of data acquisition request is sent to server-side according to the application edit instruction；
Receive the webpage slice of data that server-side is sent.
9. visualization on-line customization method according to claim 1, which is characterized in that described according to the webpage number of slices
According to webpage slice is generated, the webpage is sliced and carries out visual edit, is applied before the page, further includes:
Show that the application edit page includes page listings area, page editing using edit page according to using edit instruction
Preview region and webpage are sliced area.
10. visualization on-line customization method according to claim 9, which is characterized in that described to be sliced according to the webpage
Data generate webpage slice, comprising:
Webpage slice is generated according to the webpage slice of data, and by webpage slice display in the application edit page
Webpage be sliced area；
Application page editor preview is carried out in the page editing preview region of application edit page using edit instruction according to described, and
The application page of generation is shown in page listings area.
11. according to claim 1 to visualization on-line customization method described in 10 any one, which is characterized in that the reception
Using edit instruction, before the application edit instruction connection server-side acquisition webpage slice of data, further includes:
Application creation instruction is received, instruction is created according to the application and establishes application.
12. a kind of visualization on-line customization method, which is characterized in that the described method includes:
It is instructed based on on-line customization, receives webpage slice of data, the webpage slice of data is saved into database；
Webpage slice of data acquisition request is received, webpage slice of data is sent according to the webpage slice of data acquisition request；
The webpage slice of data is obtained by following manner: carrying out cutting region division to former webpage；To the page for cutting region
Content is cut, and page slice is obtained；Page slice is edited to obtain the webpage slice；Wherein, the webpage is cut
Piece is formed after being captured and collected by the page business function segment cut in region to Webpage.
13. visualization on-line customization method according to claim 12, which is characterized in that the reception webpage slice of data
Acquisition request sends webpage slice of data according to the webpage slice of data acquisition request, comprising:
According to the webpage slice of data acquisition request, the authentication letter in the webpage slice of data acquisition request is obtained
Breath；
Authentication is carried out using the authentication information, when the authentication passes through, sends webpage slice of data.
14. a kind of visualization on-line customization system, which is characterized in that the system comprises:
Customized web page display module shows online customized web page for receiving on-line customization instruction；
The page cuts module, cuts instruction for receiving the page, cuts instruction according to the page and cuts to Webpage,
Obtain webpage slice；The webpage is sliced specific acquisition pattern are as follows: carries out cutting region division to former webpage；To the page for cutting region
Face content is cut, and page slice is obtained；Page slice is edited to obtain the webpage slice；Wherein, the webpage
Slice is formed after being captured and collected by the page business function segment cut in region to Webpage；
Data transmission blocks, for webpage slice of data to be sent to server-side；
Data acquisition module applies edit instruction for receiving, and connects the server-side according to the application edit instruction and obtains
Webpage slice of data；
Using editor module, for generating webpage slice according to the webpage slice of data, webpage slice is carried out visual
Change editor, be applied the page.
15. visualization on-line customization system according to claim 14, which is characterized in that the customized web page display module
Include:
First identification authenticating unit obtains the authentication letter in the on-line customization instruction for receiving on-line customization instruction
Breath；
Customized web page display unit, for carrying out authentication using the authentication information, when the authentication passes through
When, show online customized web page.
16. visualization on-line customization system according to claim 14, which is characterized in that the page cuts module packet
It includes:
Area division unit cuts instruction for receiving the page, the page cut instruction include: page area divide instruction,
Content of pages cuts instruction and page slice edit instruction, and the area division unit is also used to be divided according to the page area
Instruction carries out former webpage to cut region division；
The page cuts unit, for cutting instruction according to the content of pages, carries out to the content of pages for cutting region of division
It cuts, obtains page slice；
It is sliced edit cell, for being sliced edit instruction according to the page, page slice is edited to obtain described
Webpage slice.
17. visualization on-line customization system according to claim 16, which is characterized in that the area division unit packet
It includes:
Region division subelement divides instruction pair according to the page area for receiving the drag operation information of user's sending
Former webpage carries out cutting region division；
The page cuts subelement, for receiving the drag operation information of user's sending, to the page for cutting region of division
Content is cut, and page slice is obtained；
Slice editor's subelement is edited to obtain for receiving the drag operation information of user's sending to page slice
The webpage slice.
18. visualization on-line customization system according to claim 14, which is characterized in that the data transmission blocks packet
It includes:
Data transmission unit is sent to service for webpage slice to be converted to webpage slice of data with JSON character string forms
End.
19. visualization on-line customization system according to claim 14, which is characterized in that the data acquisition module packet
It includes:
Second identification authenticating unit applies edit instruction for receiving, and obtains the authentication using in edit instruction and believes
Breath；
Data capture unit, for carrying out authentication, when the authentication passes through, root using the authentication information
The server-side, which is connected, according to the application edit instruction obtains webpage slice of data.
20. visualization on-line customization system according to claim 14, which is characterized in that the data acquisition module packet
It includes:
Request transmitting unit, for sending webpage slice of data acquisition request to server-side according to the application edit instruction；
Data receipt unit, for receiving the webpage slice of data of server-side transmission.
21. visualization on-line customization system according to claim 14, which is characterized in that the system also includes:
Using editor's display module, for showing according to using edit instruction using edit page, the application page bread
Include page listings area, page editing preview region and webpage slice area.
22. visualization on-line customization system according to claim 21, which is characterized in that the application editor module packet
It includes:
It is sliced generation unit, for generating webpage slice according to the webpage slice of data, and webpage slice display is existed
The webpage using in edit page is sliced area；
Using edit cell, for being answered using edit instruction in the page editing preview region of application edit page according to described
With page editing preview, and the application page of generation is shown in page listings area.
23. visualization on-line customization system described in 4 to 22 any one according to claim 1, which is characterized in that the system
Further include
Instruction is created according to the application and establishes application for receiving application creation instruction using creation module.
24. a kind of visualization on-line customization system, which is characterized in that the system comprises:
Data memory module is received webpage slice of data, the webpage slice of data is saved for being instructed based on on-line customization
Into database；
Data respond sending module, for receiving webpage slice of data acquisition request, are asked according to webpage slice of data acquisition
It asks and sends webpage slice of data；
The webpage slice of data is obtained by following manner: carrying out cutting region division to former webpage；To the page for cutting region
Content is cut, and page slice is obtained；Page slice is edited to obtain the webpage slice；Wherein, the webpage is cut
Piece is formed after being captured and collected by the page business function segment cut in region to Webpage.
25. visualization on-line customization system according to claim 24, which is characterized in that the data respond sending module
Include:
Tiers e'tat authentication unit, for obtaining the webpage slice of data and obtaining according to the webpage slice of data acquisition request
Take the authentication information in request；
Data respond transmission sub-unit, for carrying out authentication using the authentication information, when the authentication is logical
It is out-of-date, send webpage slice of data.
26. a kind of visualization on-line customization system, which is characterized in that the system comprises:
It tailors page setup module: freely tailoring for the page being realized according to the visualized operation of user, specifically includes following submodule
Block: submodule is arranged in tool bar area: for placing sectioning option button；Submodule is arranged in former page viewing area: for showing
Show former content of pages and trace analysis original page structure；Submodule is arranged in slice processing area: the slice tailored being processed, is located
Reason；
Application management page setup module: it for managing application page, realizing using preview and application editor, specifically includes following
Submodule: submodule is set using preview region: applying the substantially effect on mobile phone for preview；Application operating tool bar submodule
Block: for placing the operation button edited to application；
Using assembling page setup module: for assembling application page, specifically including following submodule: page listings area setting
Module: for showing all pages of current application；Submodule is arranged in page editing/preview region: for showing to specified page
Through edlin, preview；Submodule is arranged in slice list area: for showing all slices of current account.
27. a kind of visualization on-line customization module is applied in the Adaptable System based on cloud framework, which is characterized in that institute
Stating Adaptable System includes following functions module:
It accesses control module TailorForwarder: being responsible for the load balance process of HTTP, mobile terminal request is received, to working as
The small TailorWorkHorse node transmitting mobile terminal request of preload, receives TailorWorkHorse node processing knot
Fruit forwards result information to mobile terminal；
Visible customization unit module VisualTailor: for realizing visually capturing and collecting the page business in the page
Function fragment, visually, on the page that is convenient and efficient and intuitively realizing former Web system function is secondary on a web browser by user
Recombination generates new Web application；
Integrated Development module TailorIDE: providing Tailor engineering Integrated Development Environment, realizes engineering creation, management WebApp
Engineering and related resource possess the function of supporting the mixed code of JS, HTML, CSS, JSON and these types to carry out coloring display；
Tailor IDE also realizes starting, pause and the stopping of WebApp engineering and TailorServer integrated debugging device in IDE；
Web page dynamic analysis engine/dynamic analysis server module TailorWorkHorse:TailorWorkHorse is provided
Web page dynamic analysis service；
Engineering memory node module StoreWorkHorse: being responsible for data distribution formula data storage and search, is responsible for storage
Tailor engineering information, the module library Web and engineering authority management information；
Engineering space module TailorWorkspace: it is responsible for the storage and retrieval of Tailor engineering；
Self-help service for user management module: the business monitoring and system monitoring and service management and system of user self-help are realized
Management service；
Operation management console module: enterprises registration management and entire platform service and system running state monitoring and management are realized.
28. visualization on-line customization module according to claim 27, which is characterized in that in the Adaptable System
TailorForwarder undertakes two functions:
Function one: user's request and request between user and web page dynamic analysis service-Engine TailorWorkHorse are completed
As a result information exchange；
Function two: balancing the pressure of multiple web page dynamic analysis service-Engines, realizes load balancing.
29. visualization on-line customization module according to claim 28, which is characterized in that the Adaptable System:
In the press process for balancing multiple web page dynamic analysis engines, TailorForwarder can automatic regular polling cloud framework
In all web page dynamic analysis engines state, judge the payload of each web page dynamic analysis engine, and will be new
User request be sent to the small web page dynamic analysis engine of load, to realize load balancing.
30. according to the visualization on-line customization module any in claim 27-29, which is characterized in that the visualization
On-line customization module is made of TailorIDEPlug and TailorIDEService, by TailorIDEPlug and
TailorIDEService cooperates the completion visualization on-line customization page, in which:
TailorIDEPlug be responsible for realize visually realize Web slice cut, process, combined treatment activity；
TailorIDEService is responsible for the storage and management of Web slice.
31. a kind of visualization on-line customization method passes through the visualization on-line customization module in the claims 27-30
It realizes, method includes the following steps:
Step 1: input needs the original web address tailored in TailorIDEPlug；
Step 2:TailorIDEPlug visually captures and collects the page in the page to webpage using browser plug-in technology
Business function segment forms Web one by one and is sliced；
Step 3: Web is sliced, template support, and the specific setting of layout, pattern are provided, specifically included:
The Web template library in WebApp cloud memory structure is transferred by TailorWorkSpace, is extracted for TailorIDEPlug
Web slice provide template support；
The integrally disposed environment provided by TailorIDEPlug passes through selection Web template, setting to interested Web slice
The layout of Web slice, pattern；
Step 4: the Web set slice being transferred into TailorWorkHorse engine by TailorIDEService and is adjusted
Examination checks that Web is sliced mobile phone terminal operational effect, if dissatisfied, return step 3 is reset；If being satisfied with Web slice
Effect executes step 5 and saves slice；
Step 5: the Web set slice is sent to TailorWorkHorse and is saved, is specifically included:
TailorWorkHorse receives the Web slice information for needing to save, and saves it in WebApp cloud memory structure
In Web slice library；It is stored in the Web slice of Web slice library, the component for being used as WebApp engineering is assembled, integrated and is run, but
It is that cannot be accessed by the user and use by outer net separately as application；
Step 6: user, which is sliced the Web set in WebApp engineering, to assemble, integrates, and forms answering in engineering
With the application is a webpage or other application, and the WebApp engineering is directly to pass through extranet access by user
Application；
Step 7: the WebApp engineering set being transferred into TailorWorkHorse engine by TailorIDEService and is carried out
Debugging, checks WebApp engineering mobile phone terminal operational effect, if dissatisfied, return step 6 is reset；If satisfied
WebApp engineering effort executes step 8 and saves engineering；
Step 8: the WebApp engineering set being sent to TailorWorkHorse and is saved；TailorWorkHorse connects
The web project information for needing to save is received, and saves it in the StoreWorkHorse engineering section in WebApp cloud memory structure
In point library.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510098004.2A CN104636146B (en) | 2015-03-05 | 2015-03-05 | A kind of visualization on-line customization method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510098004.2A CN104636146B (en) | 2015-03-05 | 2015-03-05 | A kind of visualization on-line customization method and system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104636146A CN104636146A (en) | 2015-05-20 |
| CN104636146B true CN104636146B (en) | 2019-05-03 |
Family
ID=53214947
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510098004.2A Active CN104636146B (en) | 2015-03-05 | 2015-03-05 | A kind of visualization on-line customization method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104636146B (en) |
Families Citing this family (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9772822B2 (en) * | 2015-03-16 | 2017-09-26 | Microsoft Technology Licensing, Llc | Visualization framework for customizable types in a development environment |
| CN105183775A (en) * | 2015-08-11 | 2015-12-23 | 上海幻电信息科技有限公司 | Webpage topic template system |
| CN105893439A (en) * | 2015-12-14 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Method and system for synchronously creating multi-terminal web pages |
| EP3398361B1 (en) * | 2015-12-29 | 2020-05-13 | Telefonaktiebolaget LM Ericsson (PUBL) | Network nodes and methods performed therein for enabling communication in a communication network |
| CN105739976A (en) * | 2016-01-26 | 2016-07-06 | 四川神州雅韵科技有限公司 | Method for rapidly generating Windows Phone applications in a visual manner |
| CN106095891A (en) * | 2016-06-07 | 2016-11-09 | 广东睿盟计算机科技有限公司 | A kind of magnitude of the operation identification statistical method being applicable to foreground personnel |
| CN106325856B (en) * | 2016-08-10 | 2019-08-20 | 杭州玳数科技有限公司 | A kind of method and system for realizing Elasticsearch Dsl rule visual edit and data exhibiting |
| CN109392096B (en) * | 2017-08-04 | 2020-11-03 | 华为技术有限公司 | Resource allocation method and device |
| CN108268260A (en) * | 2017-12-21 | 2018-07-10 | 博康智能信息技术有限公司 | It is a kind of quick micro- using assemble method based on integrated support technology |
| CN109285037A (en) * | 2018-10-10 | 2019-01-29 | 珠海格力电器股份有限公司 | A kind of assembled selection method of air conditioner |
| CN111694723B (en) * | 2019-03-15 | 2023-06-16 | 福建天晴数码有限公司 | Method for editing nodes and components when product runs under H5 and storage medium |
| CN111291384B (en) * | 2020-04-28 | 2020-09-08 | 杭州海康威视数字技术股份有限公司 | Vulnerability scanning method and device and electronic equipment |
| CN111596883B (en) * | 2020-05-14 | 2023-06-06 | 深圳航天智慧城市系统技术研究院有限公司 | Data visualization system supporting voice recognition and somatosensory operation remote control |
| CN112269569A (en) * | 2020-11-03 | 2021-01-26 | 北京直真科技股份有限公司 | Visual script online editing verification and automatic execution device |
| CN113656011B (en) * | 2021-08-17 | 2022-03-11 | 广州新科佳都科技有限公司 | Visual development system of track traffic net low code |
| CN113705177A (en) * | 2021-08-23 | 2021-11-26 | 风变科技（深圳）有限公司 | Manuscript input method and device based on integrated manuscript writing environment and computer equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102193933A (en) * | 2010-03-10 | 2011-09-21 | 北大方正集团有限公司 | Method and system for webpage editing |
| CN102314427A (en) * | 2010-06-30 | 2012-01-11 | 上海视加信息科技有限公司 | Method for distributively creating webpage |
| CN102880664A (en) * | 2012-08-31 | 2013-01-16 | 华为软件技术有限公司 | Page editing method, device and system |
| CN103198074A (en) * | 2012-01-09 | 2013-07-10 | 北大方正集团有限公司 | Page design method and system for dynamic publishing website |
| CN103853737A (en) * | 2012-11-29 | 2014-06-11 | 怡丰联合（北京）科技有限责任公司 | Hypertext markup language (HTML) content visualization compiling method and system |
-
2015
- 2015-03-05 CN CN201510098004.2A patent/CN104636146B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102193933A (en) * | 2010-03-10 | 2011-09-21 | 北大方正集团有限公司 | Method and system for webpage editing |
| CN102314427A (en) * | 2010-06-30 | 2012-01-11 | 上海视加信息科技有限公司 | Method for distributively creating webpage |
| CN103198074A (en) * | 2012-01-09 | 2013-07-10 | 北大方正集团有限公司 | Page design method and system for dynamic publishing website |
| CN102880664A (en) * | 2012-08-31 | 2013-01-16 | 华为软件技术有限公司 | Page editing method, device and system |
| CN103853737A (en) * | 2012-11-29 | 2014-06-11 | 怡丰联合（北京）科技有限责任公司 | Hypertext markup language (HTML) content visualization compiling method and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104636146A (en) | 2015-05-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104636146B (en) | A kind of visualization on-line customization method and system | |
| CN104639653B (en) | Adaptive approach and system based on cloud framework | |
| CN104579822B (en) | Mobile application automated performance testing system and method based on Http agreements | |
| CN106603283B (en) | A kind of method, apparatus and centralized management platform of analog service | |
| US10582550B2 (en) | Generating sequenced instructions for connecting through captive portals | |
| CN107766509A (en) | A kind of method and apparatus of webpage static backup | |
| CN104067561A (en) | Dynamically scanning a WEB application through use of WEB traffic information | |
| CN106897204A (en) | The automatic monitoring method and system of operation flow | |
| CN104268082A (en) | Pressure test method and pressure test device for browser | |
| CN102866911B (en) | Mashup application establishing method and device | |
| CN103246606B (en) | The performance test methods of ESB platform and system | |
| CN111130922A (en) | Airborne information safety automatic test method and test platform | |
| CN107395747A (en) | A kind of high extended method based on STF platforms | |
| CN112988599B (en) | Page debugging method and device, electronic equipment and storage medium | |
| CN107168844B (en) | Performance monitoring method and device | |
| CN114706579A (en) | Page development method, device, server and storage medium | |
| CN108632361A (en) | A kind of webpage loading method, server, system and storage medium | |
| CN103595742B (en) | A method and an apparatus for debugging webpage CSS | |
| CN103164324B (en) | Microblog test method and device | |
| CN109408763B (en) | Method and system for managing resume of different templates | |
| CN107122307B (en) | Internet of things execution system | |
| CN108984202B (en) | Electronic resource sharing method and device and storage medium | |
| CN107844486A (en) | A kind of method and system of analysis webpage problem for client | |
| CN113516729A (en) | Chart drawing method and device and computer readable storage medium | |
| CN116383061A (en) | Method and related device for testing basic platform interface of substation control system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231225 Address after: 100000 Section 3, No. 6 Tucheng Road, Jimenqiao West, Haidian District, Beijing Patentee after: Beijing Zhong Xian Electronic Technology Development Co.,Ltd. Address before: 100083 Jin'ao International 1-2309, No. 19 Madian East Road, Haidian District, Beijing Patentee before: BEIJING HANDSCAPE TECHNOLOGY Co.,Ltd. |
|
| TR01 | Transfer of patent right |