一种前端响应方法及装置制造方法及图纸

本申请公开了一种前端响应方法及装置，其中，方法包括：在接收到响应请求的情况下，从预设组件库中，确定适用于目标设备的样式组件，目标设备为触发后端发送响应请求的访问设备，目标设备的设备类型为PC设备或移动终端设备，预设组件库包括：适用于PC设备的样式组件和适用于移动终端设备的样式组件，调用适用于目标设备的样式组件。本申请提供了既适用于PC设备也适用于移动终端设备的前端响应方案。

A Front-end Response Method and Device

【技术实现步骤摘要】
一种前端响应方法及装置
本申请涉及互联网领域，尤其涉及一种前端响应方法及装置。
技术介绍
在前后端分离的架构模型(例如，VUE)中，待开发的产品(例如，网站)包括：前端产品和后端产品，前端产品只需关注页面的样式、动态数据的解析和动态数据的渲染，后端产品专注于业务逻辑。为了提高开发效率，前端产品的开发和后端产品的开发并行进行，前端产品开发人员与后端产品开发人员约定好前端产品与后端产品的交互接口。为了描述方便，以下将前端产品简称为前端，将后端产品简称为后端。前端和后端运行在不同的服务器，其中，前端通过ajax(异步JavaScript和XML)对后端的应用程序编程接口(restfulAPI)进行响应，其中，restfulAPI用于提供响应数据，响应数据是后端响应用户操作请求产生的数据。为了描述方便，将前端响应后端的restfulAPI的过程，称为前端响应过程。目前，针对PC设备需开发适用于PC设备的前端，针对移动终端设备需开发适用于移动终端设备的前端，因此，针对PC设备和移动终端设备需要开发两套前端响应代码。
技术实现思路
本申请提供了一种前端响应方法及装置，目的在于提供一种既适用于PC设备又适用于移动终端设备的前端响应方案。为了实现上述目的，本申请提供了以下技术方案：本申请提供了一种前端响应方法，包括：在接收到响应请求的情况下，从预设组件库中，确定适用于目标设备的样式组件；所述目标设备为触发后端发送所述响应请求的访问设备；所述目标设备的设备类型为PC设备或移动终端设备；所述预设组件库包括：适用于所述PC设备的样式组件和适用于所述移动终端设备的样式组件；调用所述适用于所述目标设备的样式组件。可选的，所述适用于所述PC设备的样式组件，对应所述PC设备的预设屏幕尺寸范围；所述适用于所述移动终端设备的样式组件，对应所述移动终端设备的预设屏幕尺寸范围；所述从预设组件库中，确定适用于所述目标设备的样式组件，包括：确定所述目标设备的屏幕尺寸；将满足预设条件的屏幕尺寸范围对应的样式组件，作为适用于所述目标设备的样式组件；所述预设条件包括：与所述目标设备的屏幕尺寸间的差值属于预设范围。可选的，所述确定所述目标设备的屏幕尺寸，包括：调用媒体查询；将所述媒体查询确定出的屏幕尺寸，作为所述目标设备的屏幕尺寸。可选的，所述移动终端设备包括：平板电脑和手机；所述适用于所述移动终端设备的样式组件，包括：适用于所述平板电脑的样式组件和适用于所述手机的样式组件。可选的，所述适用于所述PC设备的样式组件与所述适用于所述移动终端设备的样式组件，通过调用媒体查询确定。本申请还提供了一种前端响应装置，包括：确定模块，用于在接收到响应请求的情况下，从预设组件库中，确定适用于目标设备的样式组件；所述目标设备为触发后端发送所述响应请求的访问设备；所述目标设备的设备类型为PC设备或移动终端设备；所述预设组件库包括：适用于所述PC设备的样式组件和适用于所述移动终端设备的样式组件；调用模块，用于调用所述适用于所述目标设备的样式组件。可选的，所述适用于所述PC设备的样式组件，对应所述PC设备的预设屏幕尺寸范围；所述适用于所述移动终端设备的样式组件，对应所述移动终端设备的预设屏幕尺寸范围；所述确定模块，用于从预设组件库中，确定适用于目标设备的样式组件，包括：所述确定模块，具体用于确定所述目标设备的屏幕尺寸；将满足预设条件的屏幕尺寸范围对应的样式组件，作为适用于所述目标设备的样式组件；所述预设条件包括：与所述目标设备的屏幕尺寸间的差值属于预设范围。可选的，所述确定模块，具体用于确定所述目标设备的屏幕尺寸，包括：所述确定模块，具体用于调用媒体查询；将所述媒体查询确定出的屏幕尺寸，作为所述目标设备的屏幕尺寸。可选的，所述移动终端设备包括：平板电脑和手机；所述适用于所述移动终端设备的样式组件，包括：适用于所述平板电脑的样式组件和适用于所述手机的样式组件。可选的，所述适用于所述PC设备的样式组件与所述适用于所述移动终端设备的样式组件，通过调用媒体查询确定。本申请所述前端响应的方法及装置中，在接收到响应请求的情况下，从预设组件库中，确定适用于当前访问设备的样式组件，并调用适用于当前访问设备的样式组件。由于预设组件库包括：适用于PC设备的样式组件，以及适用于移动终端设备的样式组件，因此，无论当前访问设备是PC设备还是移动终端设备，预设组件库中都存在适用于当前访问设备的样式组件，因此，本申请提供的前端响应程序既适用于PC设备也适用于移动终端设备。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本申请实施例公开的一种前端响应方法的流程图；图2为本申请实施例公开的一种前端响应装置的结构示意图。具体实施方式本申请实施例提供的前端响应方案适用于前后端分离的架构模式，例如，适用于VUE框架。下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。图1为本申请实施例提供的一种前端响应方法，包括以下步骤：S101、在接收到响应请求的情况下，从预设组件库中，确定适用于目标设备的设备类型的样式组件。在本实施例中，目标设备为当前访问产品的设备，例如，产品为已开发完成的网站，目标设备就是当前访问网站的设备，即为触发后端发送响应请求的访问设备。设备类型包括：PC设备和移动终端设备，其中，PC设备可以包括：各种类型的台式电脑和各种类型的笔记本电脑等，移动终端设备可以包括：各种类型的平板电脑和各种类型的手机等。在本实施例中，预设组件库包括样式组件和js文件，其中，样式组件包括适用于PC设备的样式组件和适用于移动终端设备的样式组件。具体的，适用于移动终端设备的样式组件可以包括：适用于平板电脑的样式组件和适用于手机的样式组件。无论是哪种类型的设备，适用于该种类型的设备的样式组件是指适用于该种类型的设备的屏幕尺寸范围的样式组件，即在该种类型的设备上可以给用户带来较好的视觉体验的样式组件。具体的，组件的布局和组件的尺寸等等符合该种类型设备的屏幕尺寸范围。具体的，适用于该种类型设备的样式组件可以通过人工利用css3技术中的媒体查询(mediaquery)确定。其中，媒体查询指css3中提供的一项功能，可以针对不同的媒体类型定义不同的样式。适用于PC设备的样式组件和适用于移动终端设备的样式组件的生成过程包括：首先，开发人员事先针对使用产品的用户的设备进行调查，具体包括调查用户设备的设备类型以及设备的屏幕尺寸，其中，设备的屏幕尺寸包括：设备屏幕的长度和设备屏幕的宽度。其次，根据得到的用户设备的设备类型以及屏幕尺寸后，针对每种设备类型，工作人员通过利用媒体查询，确定能够在该种设备类型的设备上达到较好用户视觉体验的组件的布局和尺寸，对于任意一种设备类型，得到适用于该设备类型的设备的样式组件。最本文档来自技高网...

【技术保护点】
1.一种前端响应方法，其特征在于，包括：在接收到响应请求的情况下，从预设组件库中，确定适用于目标设备的样式组件；所述目标设备为触发后端发送所述响应请求的访问设备；所述目标设备的设备类型为PC设备或移动终端设备；所述预设组件库包括：适用于所述PC设备的样式组件和适用于所述移动终端设备的样式组件；调用所述适用于所述目标设备的样式组件。

【技术特征摘要】
1.一种前端响应方法，其特征在于，包括：在接收到响应请求的情况下，从预设组件库中，确定适用于目标设备的样式组件；所述目标设备为触发后端发送所述响应请求的访问设备；所述目标设备的设备类型为PC设备或移动终端设备；所述预设组件库包括：适用于所述PC设备的样式组件和适用于所述移动终端设备的样式组件；调用所述适用于所述目标设备的样式组件。2.根据权利要求1所述的方法，其特征在于，所述适用于所述PC设备的样式组件，对应所述PC设备的预设屏幕尺寸范围；所述适用于所述移动终端设备的样式组件，对应所述移动终端设备的预设屏幕尺寸范围；所述从预设组件库中，确定适用于所述目标设备的样式组件，包括：确定所述目标设备的屏幕尺寸；将满足预设条件的屏幕尺寸范围对应的样式组件，作为适用于所述目标设备的样式组件；所述预设条件包括：与所述目标设备的屏幕尺寸间的差值属于预设范围。3.根据权利要求2所述的方法，其特征在于，所述确定所述目标设备的屏幕尺寸，包括：调用媒体查询；将所述媒体查询确定出的屏幕尺寸，作为所述目标设备的屏幕尺寸。4.根据权利要求1所述的方法，其特征在于，所述移动终端设备包括：平板电脑和手机；所述适用于所述移动终端设备的样式组件，包括：适用于所述平板电脑的样式组件和适用于所述手机的样式组件。5.根据权利要求1所述的方法，其特征在于，所述适用于所述PC设备的样式组件与所述适用于所述移动终端设备的样式组件，通过调用媒体查询确定。6.一种前端响应装置，其特征在于，包括：确定模块，...

【专利技术属性】
技术研发人员：黄秋霞，
申请(专利权)人：郑州悉知信息科技股份有限公司，
类型：发明
国别省市：河南,41