CN105988778A - 一种页面设置方法及装置 - Google Patents

Abstract

本申请提供了一种页面设置方法及装置，包括：设置区接收设置参数，所述设置参数为对待设置页面进行设置的参数；将经所述设置参数设置后的页面展示在展示区；其中，所述设置区和所述展示区位于同一页面。采用本申请实施例所提供的页面设置方法和装置，在进行页面设置时，设置区接收设置参数后，将经所述设置参数设置后的页面展示在展示区，由于设置区和展示区位于同一页面，使得用户能够在对页面进行设置的同时看到设置后的效果，不再需要用户进行设置、点击预览、再设置、再点击预览这样的循环操作，极大地提高了管理效率和用户体验。

Description

一种页面设置方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面设置方法及装置。

背景技术

随着互联网的不断发展，当今阶段互联网已呈现全线“无线ALL IN”的态势，不断产生很多基于新型用户制造内容的互联网应用程序(Web APP)。这些Web APP的应用内容展示通常是由后台控制设置的，后台设置的每个控件可以在前端显示页面格式化展示。

当需要对Web APP的页面进行设置时，用户需要在后台设置页面进行设置，设置成功后点击保存，再打开前端显示页面查看设置后的效果；如果展示效果不符合预期，则再返回后台设置页面进行重新设置，设置成功点击保存，再打开前端显示页面查看设置后的效果；通过这样的循环往复，最终实现满足预期效果的页面设置。

采用现有技术中的方案，查看设置后的效果时的操作步骤很繁琐，极大地影响管理效率以及用户体验。

发明内容

本申请实施例提出了一种页面设置方法及装置，以解决现有技术中在页面设置时查看设置后的效果的步骤很繁琐的技术问题。

本申请实施例提供了一种页面设置方法，包括如下步骤：

设置区接收设置参数，所述设置参数为对待设置页面进行设置的参数；

将经所述设置参数设置后的页面展示在展示区；其中，所述设置区和所述展示区位于同一页面。

本申请实施例提供了一种页面设置装置，包括：

接收模块，用于设置区接收设置参数，所述设置参数为对待设置页面进行设置的参数；

展示模块，用于将经所述设置参数设置后的页面展示在展示区；其中，所述设置区和所述展示区位于同一页面。

有益效果如下：

本申请实施例所提供的页面设置方法和装置，在进行页面设置时，设置区接收设置参数后，将经所述设置参数设置后的页面展示在展示区，由于设置区和展示区位于同一页面，使得用户能够在对页面进行设置的同时看到设置后的效果，不再需要用户进行设置、点击预览、再设置、再点击预览这样的循环操作，极大地提高了管理效率和用户体验。

附图说明

下面将参照附图描述本申请的具体实施例，其中：

图1示出了本申请实施例中页面设置方法实施的流程示意图；

图2示出了本申请实施例中页面布局示意图；

图3示出了本申请实施例中一效果示意图；

图4示出了本申请实施例中另一效果示意图；

图5示出了本申请实施例中页面设置装置的结构示意图。

具体实施方式

为了使本申请的技术方案及优点更加清楚明白，以下结合附图对本申请的示例性实施例进行进一步详细的说明，显然，所描述的实施例仅是本申请的一部分实施例，而不是所有实施例的穷举。并且在不冲突的情况下，本说明中的实施例及实施例中的特征可以互相结合。

针对现有技术的不足，本申请实施例提出了一种页面设置方法及装置，下面进行说明。

图1示出了本申请实施例中页面设置方法实施的流程示意图，如图所示，所述方法可以包括如下步骤：

步骤101、设置区接收设置参数，该设置参数为对待设置页面进行设置的参数；

步骤102、将经设置参数设置后的页面展示在展示区；其中，设置区和展示区位于同一页面。

本申请实施例中可以利用级联样式表(CSS，Cascading Style Sheets)将页面制作成两列CSS模版布局，一边是设置区、一边是展示区。

其中，设置区可以通过输入框、单选按钮、下拉菜单等表单控件接收设置参数。待设置页面可以为任意前端显示页面，或者称线上页面。

以手机淘宝APP为例，现有技术中各个商家在进行店铺页面设置时，需要在PC端打开手机淘宝APP进行店铺设置，然后再打开手机端的手机淘宝APP查看设置后的效果，如果设置后的效果不符合要求，则再进行PC端设置、手机端查看设置后的效果，循环操作直至店铺页面符合预期效果。很显然，这样的操作方式比较繁琐。

而本申请实施例所提供的技术方案，在手机淘宝APP中的同一页面内既包括设置区、又包括展示区，通过设置区接收设置参数，并将经设置参数设置后的页面展示在展示区，从而实现商家设置店铺的同时，预览设置完成后的线上效果。

以待设置页面为普通消费者手机端的APP页面为例，商家可以在本申请实施例页面的设置区输入设置参数，右侧展示区即可看到预览效果，待商家确定设置完成并保存后，在普通消费者手机端的APP页面即可呈现设置后的页面。

下面以设置区为表单设置、展示区为手机端预览为例进行说明。

图2示出了本申请实施例中页面布局示意图，如图所示，左侧是表单设置区、右侧是手机模型预览区。

本申请实施例中可以将左侧和右侧这一整体组件作为独立的Web APP，拥有自己完整的上下文作用域骨架，商家可以通过该Web APP实现对店铺进行设置的同时预览设置后的效果。

两侧视图由控制器管理交互逻辑：

上述代码，通过ng-app指令给应用程序指定名称为mobileManager，通过ng-app指令给控制器指定名称为mainArea，然后再用class属性分别标识左侧表单设置视图和右侧手机模型预览视图。

本申请实施例解决了现有技术中后台设置页面与前端显示页面的隔离问题，通过将页面设置成两个区域，一个区域为设置区、另一个区域为展示区，两侧实时同步，用户可以在进行页面设置时，即可观察自己的设置在前端的展示是否符合预期，方便用户及时调整页面设置。

现有技术中，为实现后台设置页面与前端显示页面的同步，一般是通过脚本监听后台设置页面每一个控件的变化，然后点对点的修改前端显示页面的文档对象模型(DOM，Document Object Model)，这种方式性能较低；而通过Flash技术来实现设置页面和显示页面同步，由于Flash开发需要高度专业技能等原因，每次开发的成本比较高。

针对上述不足，本申请实施例还可以采用如下方式实施。

实施中，在设置区接收设置参数之前，页面设置方法可以进一步包括：

建立数据模型，数据模型中包括与模板结合形成展示区的所有数据；

将设置区与展示区分别与数据模型绑定；

将经设置参数设置后的页面展示在展示区，可以具体包括：

根据设置参数修改数据模型，并通知展示区进行相应改变。

本申请实施例中采用模型-视图-控制(MVC)原理，也即：数据管理-数据模型Model、应用逻辑-控制器Controller、数据表现-视图View，首先建立数据模型，可以是JavaScript中的一个对象。其中该数据模型中包括实现左侧和右侧这一整体组件的所有数据，可以与模板结合形成最终的视图效果，数据模型可以是变量、数组等数据形式。

本申请实施例中在设置区接收设置参数的同时，可以由控制器根据所述设置参数修改所述数据模型，并通知所述展示区进行相应改变。也就是说，当数据模型Model变化时，视图View也相应改变。本申请实施例通过这种双向绑定行为，将数据模型Model作为视图View和控制器Controller之间的纽带，最终实现设置区与展示区的实时联动。

在具体实施中，可以采用Angular框架来实现双向绑定，例如，如图2所示的左侧表单设置区，本申请实施例中可以将每个表单控件域(每个表单控件域可以包括有多个或一组表单控件)都通过ng-model模式绑定到控制器scope里的一个模型，同时，右侧展示区的文字或媒体内容等也都绑定到该模型上。

其中，在Angular中，可以通过scope对象的属性来获取数据模型，使用ng-model属性将页面元素和数据模型属性绑定起来，页面元素可以是文本输入框、单选框、多选框等。

继续以手机淘宝APP为例，图3示出了本申请实施例中页面设置效果示意图，如图所示，左侧的输入框、右侧的上新显示组件分别与数据模型绑定，当商家在左侧的输入框进行输入操作时，如输入“demo公告，实时联动”，即可在右侧手机模型预览区同步查看到手机端的线上效果。由于本申请实施例采用的是双向绑定方式，左侧接收商家输入内容的同时，右侧实时显示设置后的效果，如图3所示的“lian’dong”字，左侧和右侧的同步显示效果，实时性较高。

本申请实施例通过模型一视图双向绑定(Two-Way Binding)方式，可以通过数据模型封装表单等常用控件，每设置一个控件，便可同步观察前端的线上效果，可以在较低成本的情况下，实现高效设置、实时预览。

实施中，将设置区和展示区分别与数据模型绑定时，页面设置方法可以进一步包括：

对展示区内经设置参数设置后的页面的框架进行相对定位；

对该页面框架内的各个组件进行绝对定位。

具体实施中，右侧的手机模型对应的视图模板可以为：

其中，.phone-wrap内放置利用css background-image嵌入的手机模型，将经设置参数设置后的页面之外的范围划分为css padding属性区域，写在.phone-wrap上即可。

.phone-content即经设置参数设置后的页面，也就是实时联动的主体部分，该页面框架利用position：relative的相对定位该页面内的各个组件采用绝对定位方式，页面框架作为各个组件的父元素，各个元素相对于父元素进行绝对定位，保证复杂的WebApp各组件(如单选框、图片等)的准确定位联动。

本申请实施例通过对经设置参数设置后的页面框架采用CSS相对定位，由于各个组件的父元素(右侧展示区的页面框架)采用的是相对定位，当终端分辨率不同时，各个组件可以相对于整个页面(左侧和右侧这一整个页面)移动；而页面内各个组件又是以其父元素(右侧展示区的页面框架)绝对定位的，则在不同分辨率的情况下，各个组件可以在右侧展示区的页面框架内精确定位。

继续以图3为例说明，右侧手机模型预览区内“上新”、“优惠”、“广播”以及下面的公告栏这一页面属于.phone-content嵌入的页面，该部分页面采用相对定位方式，也即，在分辨率不同的终端上显示时，这一页面框架的位置可以移动；而其中的公告栏等组件采用以“上新”、“优惠”、“广播”以及下面的公告栏这一页面的框架为父元素进行绝对定位，在不同分辨率的终端上显示时，页面框架内的“上新”、“优惠”、“广播”以及下面的公告栏这几个组件之间的相对位置是固定的。

实施中，当需要扩展组件时，页面设置方法可以进一步包括：

接收扩展组件请求，请求中包括待扩展组件信息；

在数据模型内添加与待扩展组件相关的数据；

在将数据模型所需数据与数据模型进行映射后，通知展示区展示扩展组件后的页面。

为了便于本申请的实施，下面以一个商家店铺公告作为实例进行说明。

左侧表单设置区代码为：

<textarea placeholder＝″这里是默认文案″

class＝“custom-style″name＝“custom_name″

maxlength＝“140″ng-model＝“custom_textarea”></textarea>

右侧手机模型预览区代码为：

通过上述代码，在左侧表单设置区实现了一个表单输入框，并定义了该表单输入框输入字段的最大长度为140个字符。其中，表单输入框加入了ng-model属性，实现了输入框texrarea和数据模型custom_textarea的绑定。在右侧的手机模型预览区嵌入了手机模型，其中，由class＝″phone-wrap″嵌入了手机模型框架，再通过class＝“phone-content″嵌入与左侧表单设置区的输入框对应的组件。由于右侧手机模型预览区的代码中通过{{custom_textarea}}绑定了该数据模型，因比可以实现表单输入框与右侧手机模型预览区的实时联动。

当需要扩展组件时，本申请实施例还可以采用如下方式实施。

下面本申请实施例根据手机端抽奖奖池设定需求来改造下拉框到整个组件内为例进行说明。

建立数据模型，数据模型$rootScope.awardInfo的数据结构如下所示：

通过上述代码，在数据模型内添加了与下拉框组件相关的三个奖池属性数据，分别为xx奖池、yy奖池、zz奖池，还可以包括这三类奖池的开始时间、结束时间、奖金额度等数据。

然后，控制器里会对数据模型进行映射，以拉取、映射图片等数据模型所需数据，这些数据可以是预先存储在本地的数据，也可以是通过下载等方式得到的数据，具体映射代码如下：

接下来，再将左侧设置区和右侧展示区分别与上述数据模型绑定，具体实现如下：

表单区代码：

最终，达到的demo演示效果如图4所示。左侧设置区添加了下拉框组件，下拉框内包括xx奖池、yy奖池、zz奖池等属性。当商家选定yy奖池时，右侧手机模型预览区则显示yy奖池。在商家点击保存后，普通消费者即可在各自手机端看到公告栏显示yy奖池这样的线上效果。

本申请实施例中通过数据模型封装了常用表单控件，控制器只需要根据接收到的用户操作请求，修改该数据模型中的数据，并通知展示区进行相应改变，即可实现更多复杂的表单改造，且本申请实施例通过数据模型封装所有控件，不再需要对每个表单控件的change事件进行监听、手工对比再进行预览区dom变化的渲染，极大地简化了操作。

以手机淘宝APP为例，该APP通过数据模型封装了输入框、下拉框等多种表单控件，左侧设置区与右侧展示区分别与该数据模型绑定，当控制器接收到商家的添加下拉框的请求时，即可在数据模型中添加下拉框及该下拉框内的各个属性数据，并通知右侧手机预览区显示该下拉框对应的属性数据。采用本申请实施例所提供的技术方案，用户可以根据需要随时添加所需组件，体验上得到很大的提升。

实施中，所述页面设置方法可以进一步包括：

在接收到设置完成指令时，对数据模型进行数据校验。

具体实施中，在商家设置完成、点击保存时，本申请实施例中还可以配合控制器对数据模型进行校验，对必要的字段等进行验证后方可形成最终效果，以避免由于用户疏忽所带来的负面影响。

本申请实施例所提供的技术方案，通过在接收到设置完成指令时，进一步对数据模型进行数据校验，从而对设置参数是否符合要求、是否存在敏感字段等方面进行判断，以便确保页面的设置操作符合要求，当设置操作不符合要求时及时提示用户，提高页面设置的效率。

基于同一发明构思，本申请实施例中还提供了一种页面设置装置，由于这些设备解决问题的原理与一种页面设置方法相似，因此这些设备的实施可以参见方法的实施，重复之处不再赘述。

图5示出了本申请实施例中页面设置装置的结构示意图，如图所示，页面设置装置可以包括：

接收模块501，用于设置区接收设置参数，该设置参数为对待设置页面进行设置的参数；

展示模块502，用于经设置参数设置后的页面展示在展示区；其中，设置区和展示区位于同一页面。

实施中，页面设置装置可以进一步包括：

模型建立模决503，用于在设置区接收设置参数之前，建立数据模型，所述数据模型中包括与模板结合形成展示区的所有数据；

模型绑定模块504，用于将设置区和展示区分别与数据模型绑定；

展示模块502可以具体用于根据设置参数修改所述数据模型，并通知展示区进行相应改变。

实施中，页面设置装置可以进一步包括：

定位模块505，用于在将设置区和展示区分别与数据模型绑定时，利用CSS中相对定位方式对展示区内经设置参数设置后的页面的框架进行相对定位；对该页面框架内的各个组件进行绝对定位。

实施中，接收模块501可以进一步用于当需要扩展组件时，接收扩展组件请求，请求中包括待扩展组件信息；

展示模块502可以进一步用于在数据模型内添加与待扩展组件相关的数据；在将数据模型所需数据与数据模型进行映射后，通知展示区展示扩展组件后的页面。

实施中，页面设置装置可以进一步包括：

校验模块506，用于在接收到设置完成指令时，对数据模型进行数据校验。

为了描述的方便，以上所述装置的各部分以功能分为各种模块或单元分别描述。当然，在实施本申请时可以把各模块或单元的功能在同一个或多个软件或硬件中实现。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指今产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

Claims (10)

1.一种页面设置方法，其特征在于，包括如下步骤：

设置区接收设置参数，所述设置参数为对待设置页面进行设置的参数；

将经所述设置参数设置后的页面展示在展示区；其中，所述设置区和所述展示区位于同一页面。

2.如权利要求1所述的方法，其特征在于，在设置区接收设置参数之前，所述方法进一步包括：

建立数据模型，所述数据模型中包括与模板结合形成展示区的所有数据；

将所述设置区和所述展示区分别与所述数据模型绑定；

将经所述设置参数设置后的页面展示在展示区，具体包括：

根据所述设置参数修改所述数据模型，并通知所述展示区进行相应改变。

3.如权利要求2所述的方法，其特征在于，在将所述设置区和所述展示区分别与所述数据模型绑定时，所述方法进一步包括：

对所述展示区内经设置参数设置后的页面的框架进行相对定位；

对所述页面框架内的各个组件进行绝对定位。

4.如权利要求2所述的方法，其特征在于，当需要扩展组件时，所述方法进一步包括：

接收扩展组件请求，所述请求中包括待扩展组件信息；

在所述数据模型内添加与所述待扩展组件相关的数据；

将所述数据模型所需数据与所述数据模型进行映射后，通知所述展示区展示扩展组件后的页面。

5.如权利要求2所述的方法，其特征在于，所述方法进一步包括：

在接收到设置完成指令时，对所述数据模型进行数据校验。

6.一种页面设置装置，其特征在于，包括：

接收模块，用于设置区接收设置参数，所述设置参数为对待设置页面进行设置的参数；

展示模块，用于将经所述设置参数设置后的页面展示在展示区；其中，所述设置区和所述展示区位于同一页面。

7.如权利要求6所述的装置，其特征在于，所述装置进一步包括：

模型建立模块，用于在设置区接收设置参数之前，建立数据模型，所述数据模型中包括与模板结合形成展示区的所有数据；

模型绑定模块，用于将所述设置区和所述展示区分别与所述数据模型绑定；

所述展示模块具体用于根据所述设置参数修改所述数据模型，并通知所述展示区进行相应改变。

8.如权利要求7所述的装置，其特征在于，所述装置进一步包括：

定位模块，用于在将所述设置区和所述展示区分别与所述数据模型绑定时，对所述展示区内经设置参数设置后的页面的框架进行相对定位；对该页面框架内的各个组件进行绝对定位。

9.如权利要求7所述的装置，其特征在于，所述接收模块进一步用于当需要扩展组件时，接收扩展组件请求，所述请求中包括待扩展组件信息；

展示模块进一步用于在所述数据模型内添加与所述待扩展组件相关的数据；将所述数据模型所需数据与所述数据模型进行映射后，通知所述展示区展示扩展组件后的页面。

10.如权利要求7所述的装置，其特征在于，所述装置进一步包括：

校验模块，用于在接收到设置完成指令时，对所述数据模型进行数据校验。