CN110262857A - A kind of front end response method and device - Google Patents
A kind of front end response method and device Download PDFInfo
- Publication number
- CN110262857A CN110262857A CN201910536958.5A CN201910536958A CN110262857A CN 110262857 A CN110262857 A CN 110262857A CN 201910536958 A CN201910536958 A CN 201910536958A CN 110262857 A CN110262857 A CN 110262857A
- Authority
- CN
- China
- Prior art keywords
- styling component
- equipment
- screen size
- target device
- mobile terminal
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
Abstract
This application discloses a kind of front end response method and devices, wherein, method includes: in the case where receiving respond request, from description components library, determine that the styling component for being suitable for target device, target device are the access equipment for triggering rear end and sending respond request, the device type of target device is PC equipment or mobile terminal device, description components library includes: the styling component suitable for PC equipment and the styling component suitable for mobile terminal device, calls the styling component for being suitable for target device.This application provides the front end response schemes for being not only suitable for PC equipment and being also applied for mobile terminal device.
Description
Technical field
This application involves internet area more particularly to a kind of front end response methods and device.
Background technique
In the framework model (for example, VUE) of front and back end separation, product (for example, website) leaved for development includes: that is produced from front end
Product and end product, front-end product need to only pay close attention to the parsing of the pattern, dynamic data of the page and the rendering of dynamic data, and is produced from rear end
Product are absorbed in service logic.In order to improve development efficiency, the exploitation of front-end product and the exploitation of end product carry out parallel, front end
Product development personnel and end product developer appoint the interactive interface of front-end product and end product.For the side of description
Just, front-end product is referred to as front end below, end product is referred to as rear end.
Front-end and back-end operate in different servers, wherein front end is right by ajax (asynchronous JavaScript and XML)
The application programming interface (restful API) of rear end is responded, wherein and restful API is used to provide response data,
Response data is the data that response user's operation request in rear end generates.For convenience, by the restful of front end response rear end
The process of API, referred to as front end response process.
Currently, the front end suitable for PC equipment need to be developed for PC equipment, it need to develop and be suitable for for mobile terminal device
Therefore the front end of mobile terminal device needs to develop two sets of front end response codes for PC equipment and mobile terminal device.
Summary of the invention
This application provides a kind of front end response method and device, and it is an object of the present invention to provide one kind be not only suitable for PC equipment again fit
Front end response scheme for mobile terminal device.
To achieve the goals above, this application provides following technical schemes:
This application provides a kind of front end response methods, comprising:
In the case where receiving respond request, from description components library, the styling component for being suitable for target device is determined；
The target device is the access equipment for triggering rear end and sending the respond request；The device type of the target device sets for PC
Standby or mobile terminal device；The description components library includes: suitable for the styling component of the PC equipment and suitable for the shifting
The styling component of dynamic terminal device；
Call the styling component for being suitable for the target device.
Optionally, the styling component suitable for the PC equipment, the default screen size model of the corresponding PC equipment
It encloses；The styling component suitable for the mobile terminal device, the default screen size model of the corresponding mobile terminal device
It encloses；
It is described from description components library, determine be suitable for the target device styling component, comprising:
Determine the screen size of the target device；
The corresponding styling component of screen size range of preset condition will be met, as the sample for being suitable for the target device
Formula component；The preset condition includes: that the difference between the screen size of the target device belongs to preset range.
Optionally, the screen size of the determination target device, comprising:
Call Media Inquiries；
The screen size that the Media Inquiries are determined, the screen size as the target device.
Optionally, the mobile terminal device includes: tablet computer and mobile phone；
The styling component suitable for the mobile terminal device, comprising: the pattern group suitable for the tablet computer
Part and styling component suitable for the mobile phone.
Optionally, the styling component suitable for the PC equipment and the sample suitable for the mobile terminal device
Formula component, by calling Media Inquiries to determine.
Present invention also provides a kind of front end responding devices, comprising:
Determining module, in the case where receiving respond request, from description components library, determination to be set suitable for target
Standby styling component；The target device is the access equipment for triggering rear end and sending the respond request；The target device
Device type is PC equipment or mobile terminal device；The description components library includes: the styling component suitable for the PC equipment
With the styling component for being suitable for the mobile terminal device；
Calling module, for calling the styling component for being suitable for the target device.
Optionally, the styling component suitable for the PC equipment, the default screen size model of the corresponding PC equipment
It encloses；The styling component suitable for the mobile terminal device, the default screen size model of the corresponding mobile terminal device
It encloses；
The determining module, for determining the styling component for being suitable for target device from description components library, comprising:
The determining module, specifically for the screen size of the determination target device；The screen of preset condition will be met
The corresponding styling component of size range, as the styling component for being suitable for the target device；The preset condition includes: and institute
The difference stated between the screen size of target device belongs to preset range.
Optionally, the determining module, specifically for the screen size of the determination target device, comprising:
The determining module is specifically used for calling Media Inquiries；The screen size that the Media Inquiries are determined, as
The screen size of the target device.
Optionally, the mobile terminal device includes: tablet computer and mobile phone；
The styling component suitable for the mobile terminal device, comprising: the pattern group suitable for the tablet computer
Part and styling component suitable for the mobile phone.
Optionally, the styling component suitable for the PC equipment and the sample suitable for the mobile terminal device
Formula component, by calling Media Inquiries to determine.
In the method and device of herein described front end response, in the case where receiving respond request, from description components
In library, the styling component for being suitable for current accessed equipment is determined, and call the styling component for being suitable for current accessed equipment.
Since description components library includes: the styling component suitable for PC equipment, and the sample suitable for mobile terminal device
Formula component, therefore, no matter current accessed equipment is PC equipment or mobile terminal device, all exists in description components library and is suitable for
The styling component of current accessed equipment, therefore, front end responder provided by the present application are not only suitable for PC equipment and are also applied for moving
Dynamic terminal device.
Detailed description of the invention
In order to illustrate the technical solutions in the embodiments of the present application or in the prior art more clearly, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
Some embodiments of application for those of ordinary skill in the art without creative efforts, can be with
It obtains other drawings based on these drawings.
Fig. 1 is a kind of flow chart of front end response method disclosed in the embodiment of the present application；
Fig. 2 is a kind of structural schematic diagram of front end responding device disclosed in the embodiment of the present application.
Specific embodiment
Front end response scheme provided by the embodiments of the present application is suitable for the architecture mode of front and back end separation, for example, being suitable for
VUE frame.
Below in conjunction with the attached drawing in the embodiment of the present application, technical solutions in the embodiments of the present application carries out clear, complete
Site preparation description, it is clear that described embodiments are only a part of embodiments of the present application, instead of all the embodiments.It is based on
Embodiment in the application, it is obtained by those of ordinary skill in the art without making creative efforts every other
Embodiment shall fall in the protection scope of this application.
Fig. 1 is a kind of front end response method provided by the embodiments of the present application, comprising the following steps:
S101, in the case where receiving respond request, from description components library, determine be suitable for target device equipment
The styling component of type.
In the present embodiment, target device is the equipment of current accessed product, for example, product is the net for having developed completion
It stands, target device is exactly the equipment of current accessed website, as the access equipment of triggering rear end transmission respond request.
Device type includes: PC equipment and mobile terminal device, wherein PC equipment may include: various types of desk-top
Computer and various types of laptops etc., mobile terminal device may include: various types of tablet computers and various types of
The mobile phone etc. of type.
In the present embodiment, description components library includes styling component and js file, wherein styling component includes being suitable for PC
The styling component of equipment and styling component suitable for mobile terminal device.Specifically, being suitable for the pattern of mobile terminal device
Component may include: the styling component suitable for tablet computer and the styling component suitable for mobile phone.No matter what type
Equipment, the styling component of the equipment suitable for this type refer to the sample of the screen size range of the equipment suitable for this type
Formula component can bring the styling component of preferable visual experience that is, in the equipment of this type to user.Specifically, component
Layout and the size of component etc. meet the screen size range of this type equipment.Specifically, being set suitable for this type
Standby styling component can be by manually utilizing the Media Inquiries (media query) in css3 technology to determine.Wherein, media are looked into
Inquiry refers to the Xiang Gongneng provided in css3, can define different patterns for different medium types.
The generating process of styling component suitable for PC equipment and the styling component suitable for mobile terminal device includes:
It is investigated firstly, developer is directed in advance using the equipment of the user of product, specifically includes investigation user and set
The screen size of standby device type and equipment, wherein the screen size of equipment includes: the length and equipment screen of device screen
The width of curtain.Secondly, after according to the device type and screen size of obtained user equipment, for every kind of device type, work
Make personnel by being determined to reach the group of preferable user's visual experience in the equipment of this kind of device type using Media Inquiries
The layout and size of part obtain the styling component of the equipment suitable for the device type for any one device type.Most
Afterwards, it is packaged by styling component of the VUE to the equipment for being suitable for every kind of device type, and distinct device type is right respectively
Styling component and js file configuration after the encapsulation answered is in a Component Gallery.
It should be noted that in practice, the screen size of the equipment of device type of the same race is not much different, distinct device class
The screen size of the equipment of type generally differs more, therefore, can distinguish device type by screen size.In the present embodiment
In, according to the screen size of the equipment of every kind of device type, determine screen size range belonging to the equipment of this kind of device type,
I.e. the equipment of any one device type all corresponds to a screen size range.In order to can be with by the screen size range of setting
Accurate differentiation device type, in the present embodiment, the corresponding screen size range of the equipment of distinct device type are not present
Intersect.
After the corresponding screen size range of equipment for determining every kind of device type, in the present embodiment, by every kind of equipment
The corresponding screen size range configuration of the equipment of type is in description components library.I.e. in preset Component Gallery, set suitable for PC
Standby styling component is corresponding with the screen size range of PC equipment, and the styling component suitable for tablet computer is corresponding with tablet computer
Screen size range, the styling component suitable for mobile phone is corresponding with the screen size range of mobile phone.
In the present embodiment, js file refers to: for judging the pattern of the screen size of the equipment suitable for this type
The file of component.
Specifically, in this step, from description components library, determining the pattern group for being suitable for the device type of target device
The process of part includes the following steps A1~step A2:
A1, the screen size for determining target device.
In this step, Media Inquiries can be called, Media Inquiries can determine the screen size of target device.At this
In step, the screen size that Media Inquiries are determined, the screen size as target device.
A2, the screen size according to target device, determine the styling component for being suitable for target device.
In this step, the corresponding styling component of screen size range that preset condition will be met, as suitable for target
The styling component of equipment.
Wherein, preset condition includes: that the difference between the screen size with target device belongs to preset range.Specifically, mesh
The screen width of marking device is respectively smaller than the first preset threshold with the difference of the bound of screen width size range respectively, and
And difference of the screen length of target device respectively between the bound of screen length size range is respectively smaller than the second default threshold
Value.
Wherein, the specific value of the first preset threshold and the second preset threshold, can determines according to actual conditions, this implementation
Example does not limit the specific value of the first preset threshold and the second preset threshold.As long as can guarantee to determine is suitable for mesh
The styling component of marking device is accurate.For example, that is determined is applicable in the case where target device is tablet computer
In the styling component of target device be the corresponding styling component of tablet computer in Component Gallery.
S102, the styling component for being suitable for target device is called.
In this step, it is suitable for the styling component of target device by calling, can shows on the screen of the target device
Show the content of the webpage of target device current accessed.
In the embodiment of the present application, description components library may be configured with the interface for carrying out personalized designs, for example, exploitation
Personnel can be configured the attribute of pop-up this component by the interface.Description components library provided in this embodiment also configures
There is self-defined call back function.
In description components library provided by the embodiments of the present application, suitable for the styling component of PC equipment and suitable for mobile whole
The styling component of end equipment Style Design having the same.
The present embodiment has the advantages that
Beneficial effect one,
Since description components library includes: the styling component suitable for PC equipment, and the sample suitable for mobile terminal device
Formula component, therefore, no matter current accessed equipment is PC equipment or mobile terminal device, all exists in description components library and is suitable for
The styling component of current accessed equipment, therefore, front end response scheme provided in this embodiment are not only suitable for PC equipment and are also applied for
Mobile terminal device.In turn, it without developing front end response code respectively for PC equipment and mobile terminal device, i.e., only needs to develop
A set of front end responder, in turn, human cost needed for exploitation front end responder can be saved very much in maximum probability, also,
Human cost needed for maintenance of the later period to the front end responder of exploitation can be saved very much in maximum probability.
Beneficial effect two,
Due to description components library provided by the embodiments of the present application, it is provided with the interface for carrying out personalized designs and makes by oneself
Adopted call back function reduces skill it is thus possible to improve the development efficiency of developer, code reuse, reduce the development cost of company
Art difficulty.
Beneficial effect three,
Due in description components library provided in this embodiment, suitable for PC equipment styling component and be suitable for mobile terminal
The styling component of equipment Style Design having the same.So that process of the user using the equipment access product of distinct device type
In, unified perception is had, without lofty and indisposed sense, brings preferable experience to user.
Fig. 2 is a kind of front end responding device provided by the embodiments of the present application, comprising: determining module 201 and calling module
202。
Wherein it is determined that module 201, for from description components library, determining and being applicable in the case where receiving respond request
In the styling component of target device, target device is the access equipment for triggering rear end and sending respond request.The equipment of target device
Type is PC equipment or mobile terminal device, and description components library includes: the styling component suitable for PC equipment and is suitable for moving
The styling component of terminal device.Calling module 202, for calling the styling component for being suitable for target device.
Optionally, the styling component suitable for PC equipment, the default screen size range of corresponding PC equipment, is suitable for movement
The styling component of terminal device, the default screen size range of corresponding mobile terminal device.Determining module 201 is used for from default
In Component Gallery, the styling component for being suitable for target device is determined, comprising: determining module 201, specifically for determining target device
Screen size will meet the corresponding styling component of screen size range of preset condition, as the pattern for being suitable for target device
Component, preset condition include: that the difference between the screen size with target device belongs to preset range.
Optionally, determining module 201, specifically for determining the screen size of target device, comprising: determining module 201, tool
Body is for calling Media Inquiries, the screen size that Media Inquiries are determined, the screen size as target device.
Optionally, mobile terminal device includes: tablet computer and mobile phone, suitable for the styling component of mobile terminal device,
It include: the styling component suitable for the styling component of tablet computer and suitable for mobile phone.
Optionally, suitable for the styling component of PC equipment and the styling component for being suitable for the mobile terminal device, pass through
Media Inquiries are called to determine.
If function described in the embodiment of the present application method is realized in the form of SFU software functional unit and as independent production
Product when selling or using, can store in a storage medium readable by a compute device.Based on this understanding, the application is real
The part for applying a part that contributes to existing technology or the technical solution can be embodied in the form of software products,
The software product is stored in a storage medium, including some instructions are used so that a calculating equipment (can be personal meter
Calculation machine, server, mobile computing device or network equipment etc.) execute each embodiment the method for the application whole or portion
Step by step.And storage medium above-mentioned include: USB flash disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), with
Machine accesses various Jie that can store program code such as memory (RAM, Random Access Memory), magnetic or disk
Matter.
Each embodiment in this specification is described in a progressive manner, the highlights of each of the examples are with it is other
The difference of embodiment, same or similar part may refer to each other between each embodiment.
The foregoing description of the disclosed embodiments makes professional and technical personnel in the field can be realized or use the application.
Various modifications to these embodiments will be readily apparent to those skilled in the art, as defined herein
General Principle can be realized in other embodiments without departing from the spirit or scope of the application.Therefore, the application
It is not intended to be limited to the embodiments shown herein, and is to fit to and the principles and novel features disclosed herein phase one
The widest scope of cause.
Claims (10)
1. a kind of front end response method characterized by comprising
In the case where receiving respond request, from description components library, the styling component for being suitable for target device is determined；It is described
Target device is the access equipment for triggering rear end and sending the respond request；The device type of the target device be PC equipment or
Mobile terminal device；The description components library includes: the styling component suitable for the PC equipment and is suitable for described mobile whole
The styling component of end equipment；
Call the styling component for being suitable for the target device.
2. the method according to claim 1, wherein the styling component suitable for the PC equipment, corresponding
The default screen size range of the PC equipment；The styling component suitable for the mobile terminal device, the corresponding shifting
The default screen size range of dynamic terminal device；
It is described from description components library, determine be suitable for the target device styling component, comprising:
Determine the screen size of the target device；
The corresponding styling component of screen size range of preset condition will be met, as the pattern group for being suitable for the target device
Part；The preset condition includes: that the difference between the screen size of the target device belongs to preset range.
3. according to the method described in claim 2, it is characterized in that, the screen size of the determination target device, comprising:
Call Media Inquiries；
The screen size that the Media Inquiries are determined, the screen size as the target device.
4. the method according to claim 1, wherein the mobile terminal device includes: tablet computer and mobile phone；
The styling component suitable for the mobile terminal device, comprising: suitable for the tablet computer styling component and
Styling component suitable for the mobile phone.
5. the method according to claim 1, wherein the styling component suitable for the PC equipment with it is described
Suitable for the styling component of the mobile terminal device, by calling Media Inquiries to determine.
6. a kind of front end responding device characterized by comprising
Determining module, for from description components library, determining and being suitable for target device in the case where receiving respond request
Styling component；The target device is the access equipment for triggering rear end and sending the respond request；The equipment of the target device
Type is PC equipment or mobile terminal device；The description components library includes: the styling component suitable for the PC equipment and fits
Styling component for the mobile terminal device；
Calling module, for calling the styling component for being suitable for the target device.
7. device according to claim 6, which is characterized in that the styling component suitable for the PC equipment, it is corresponding
The default screen size range of the PC equipment；The styling component suitable for the mobile terminal device, the corresponding shifting
The default screen size range of dynamic terminal device；
The determining module, for determining the styling component for being suitable for target device from description components library, comprising:
The determining module, specifically for the screen size of the determination target device；The screen size of preset condition will be met
The corresponding styling component of range, as the styling component for being suitable for the target device；The preset condition includes: and the mesh
Difference between the screen size of marking device belongs to preset range.
8. device according to claim 7, which is characterized in that the determining module is set specifically for the determination target
Standby screen size, comprising:
The determining module is specifically used for calling Media Inquiries；The screen size that the Media Inquiries are determined, as described
The screen size of target device.
9. device according to claim 6, which is characterized in that the mobile terminal device includes: tablet computer and mobile phone；
The styling component suitable for the mobile terminal device, comprising: suitable for the tablet computer styling component and
Styling component suitable for the mobile phone.
10. device according to claim 6, which is characterized in that the styling component and institute suitable for the PC equipment
The styling component suitable for the mobile terminal device is stated, by calling Media Inquiries to determine.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910536958.5A CN110262857A (en) | 2019-06-20 | 2019-06-20 | A kind of front end response method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910536958.5A CN110262857A (en) | 2019-06-20 | 2019-06-20 | A kind of front end response method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110262857A true CN110262857A (en) | 2019-09-20 |
Family
ID=67919849
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910536958.5A Pending CN110262857A (en) | 2019-06-20 | 2019-06-20 | A kind of front end response method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110262857A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105867899A (en) * | 2015-12-10 | 2016-08-17 | 乐视致新电子科技（天津）有限公司 | Method and device for identifying device |
| CN106776969A (en) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | Page adaptation method, device and electronic equipment |
| CN106919375A (en) * | 2015-12-28 | 2017-07-04 | 航天信息股份有限公司 | Screen adaptive approach and system on a kind of mobile terminal device |
| CN109426541A (en) * | 2017-08-31 | 2019-03-05 | 阿里巴巴集团控股有限公司 | A kind of method and apparatus that the page changes skin |
-
2019
- 2019-06-20 CN CN201910536958.5A patent/CN110262857A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105867899A (en) * | 2015-12-10 | 2016-08-17 | 乐视致新电子科技（天津）有限公司 | Method and device for identifying device |
| CN106919375A (en) * | 2015-12-28 | 2017-07-04 | 航天信息股份有限公司 | Screen adaptive approach and system on a kind of mobile terminal device |
| CN106776969A (en) * | 2016-12-05 | 2017-05-31 | 乐视控股（北京）有限公司 | Page adaptation method, device and electronic equipment |
| CN109426541A (en) * | 2017-08-31 | 2019-03-05 | 阿里巴巴集团控股有限公司 | A kind of method and apparatus that the page changes skin |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108363602B (en) | Intelligent UI (user interface) layout method and device, terminal equipment and storage medium | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| JP2019520624A (en) | Page component dynamic layout | |
| US10346858B2 (en) | Assigning slots to user interface elements | |
| CN105260420A (en) | Method and device for providing target page in mobile application | |
| JP2017515216A (en) | System and method for optimizing content layout using behavioral metric | |
| CN105210051A (en) | Estimating visibility of content items | |
| TWI584149B (en) | Web page access request response method and device | |
| CN104881273B (en) | A kind of analysis method and terminal device of webpage rendering | |
| TW201723897A (en) | Method, device, and system for displaying information associated with a web page | |
| US10062090B2 (en) | System and methods to display three dimensional digital assets in an online environment based on an objective | |
| CN110598149A (en) | Webpage access method, device and storage medium | |
| CN106294463B (en) | Data point updating method and equipment for dynamic curve | |
| CN105488125A (en) | Page access method and apparatus | |
| CN106503111A (en) | Webpage code-transferring method, device and client terminal | |
| CN103530338A (en) | Frame for carrying out page rendering on calculation equipment and page generation method | |
| CN106168959A (en) | Page layout method and device | |
| CN110543307A (en) | application construction method and device | |
| US20120124487A1 (en) | Issuing behavioral and contextual notifications | |
| KR101383056B1 (en) | Method for providing web application linkaging whith netive menu using script and the smart terminal thereof | |
| CN110262857A (en) | A kind of front end response method and device | |
| US9230022B1 (en) | Customizable result sets for application program interfaces | |
| CN113050921A (en) | Webpage conversion method, device, storage medium and computer equipment | |
| US11321746B2 (en) | Ad simulator browser extension | |
| CN113254830A (en) | Webpage configuration method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |