页面的设计方法、装置、存储介质及计算机设备与流程

1.本技术涉及界面设计领域，尤其涉及一种页面的设计方法、装置、存储介质及计算机设 备。


背景技术：

2.ui设计人员在设计前端页面时，通常会设计包含多个用于展示数据的元素(例如：报表、 账单等)的页面。如果元素的结构发生更新，ui设计人员相应地需要对该组件的代码进行修 改，ui设计人员一般不具备编程能力，这种修改方式存在操作较为复杂和效率较低的问题。


技术实现要素：

3.本技术提供了页面的设计方法、装置、存储介质及计算机设备，可以解决现有技术中修 改页面中的元素存在操作复杂和效率低的问题。所述技术方案如下：
4.第一方面，本技术提供了一种页面的设计方法，所述方法包括：
5.在设计画布中绘制页面的界面元素；
6.在绘制的界面元素中选择一个或多个界面元素添加向导标记；
7.接收到向导指令时，遍历所述设计画布中所有添加有向导标记的界面元素，以及根据遍 历的界面元素生成界面元素列表；
8.在所述界面元素列表中选择一个界面元素；
9.在数据模型中选择一个或多个模型字段，将选择的模型字段和选择的界面元素进行绑定；
10.接收到页面预览指令时，在数据实例中读取所述选择的模型字段的取值，以及在所述选 择的界面元素中显示所述取值。
11.第二方面，本技术提供了一种页面的设计装置，所述装置包括：
12.绘制单元，用于在设计画布中绘制页面的界面元素；
13.添加单元，用于在绘制的界面元素中选择一个或多个界面元素添加向导标记；
14.生成单元，用于接收到向导指令时，遍历所述设计画布中所有添加有向导标记的界面元 素，以及根据遍历的界面元素生成界面元素列表；
15.选择单元，用于在所述界面元素列表中选择一个界面元素；
16.绑定单元，用于在数据模型中选择一个或多个模型字段，将选择的模型字段和选择的界 面元素进行绑定；
17.预览单元，用于接收到页面预览指令时，在数据实例中读取所述选择的模型字段的取值， 以及在所述选择的界面元素中显示所述取值。
18.第三方面，本技术提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所 述指令适于由处理器加载并执行上述的方法步骤。
19.第四方面，本技术提供一种计算机设备，可包括：处理器和存储器；其中，所述存储
器 存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。
20.本技术一些实施例提供的技术方案带来的有益效果至少包括：
21.在设计人员需要设计页面时，确定该页面绑定的数据模型，然后基于向导指令从为界面 元素配置数据模型中选择一个或多个模型字段进行绑定，在显示页面时，读取模型字段的数 值显示在界面元素中，这样可以根据页面的实际需求灵活的配置各个界面元素的模型字段和 数值，不需要对页面元素的代码进行修改，可以降低页面设计的难度和提高设计效率。
附图说明
22.为了更清楚地说明本技术或现有技术中的技术方案，下面将对实施例或现有技术描述中 所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施 例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获 得其他的附图。
23.图1是本技术提供的页面的设计方法的流程示意图；
24.图2是本技术提供的向导界面的示意图；
25.图3是本技术提供的数据模型的配置界面的示意图；
26.图4是本技术提供的数据模型的绑定界面的示意图；
27.图5本技术提供的页面的预览示意图；
28.图6是本技术提供的一种页面的设计装置的结构示意图；
29.图7是本技术提供的一种计算机设备的结构示意图。
具体实施方式
30.为使本技术的目的、技术方案和优点更加清楚，下面将结合附图对本技术实施例方式作 进一步地详细描述。
31.需要说明的是，本技术提供的页面的设计方法一般由计算机设备执行，相应的，页面的 设计装置一般设置于计算机设备中。
32.当计算机设备为硬件时，其上还可以安装有显示设备和摄像头，显示设备显示可以是各 种能实现显示功能的设备，摄像头用于采集视频流；例如：显示设备可以是阴极射线管显示 器(cathode ray tube display，简称cr)、发光二极管显示器(light-emitting diode display，简 称led)、电子墨水屏、液晶显示屏(liquid crystal display，简称lcd)、等离子显示面板 (plasma display panel，简称pdp)等。用户可以利用计算机设备上的显示设备，来查看显示 的文字、图片、视频等信息。
33.下面将结合附图1，对本技术实施例提供的页面的设计方法进行详细介绍。其中，本申 请实施例中的页面的设计装置可以是图1所示的计算机设备。
34.请参见图1，为本技术实施例提供了一种页面的设计方法的流程示意图。如图1所示， 本技术实施例的所述方法可以包括以下步骤：
35.s101、在设计画布中绘制页面的界面元素。
36.其中，用户需要进行页面设计时，通过显示单元显示网页编辑界面，网页编辑界面包括 设计画布，用户通过鼠标和键盘等输入装置在设计画布上绘制页面元素，页面元素为
页面上 可展示的控件，包括但不限于单元格、表格、按钮或其他控件。用户可以在设计画布中放置 界面元素以及设置界面元素的位置。
37.在一个或多个可能的实施例中，计算机设备提供组件库，组件库中包括多个不同类型的 组件，用户也可以对组件库中的组件的属性进行编辑，然后通过拖拽指令，将组件库中选择 的组件拖动到设计画布中。例如：组件库中包括表格，用户对表格的行数和列数进行设置后， 通过鼠标触发的拖拽指令，将表格拖动到设计画布的指定位置，本实施例通过拖拽操作从组 件库中拖动界面元素到设计画布中，实现界面元素的绘制，可以提高页面绘制的效率。
38.s102、在绘制的界面元素中选择一个或多个界面元素添加向导标记。
39.其中，向导标记用于标记需要进行数据绑定的界面元素，用户可以通过前台或后台的方 式为选择的界面元素添加向导标记。
40.在一个或多个可能的实施例中，用户可以通过鼠标在设计画布中进行框选的方式选择一 个或多个界面元素，基于鼠标的框选操作触发生成框选指令，方框内的界面元素即为选择的 界面元素，计算机设备自动将选择的界面元素添加向导标记，通过框选的方式添加向导标记 可以提高操作的效率。
41.s103、接收到向导指令时，遍历设计画布中所有添加有向导标记的界面元素，以及根据 遍历的界面元素生成界面元素列表。
42.其中，向导指令可以是用户基于鼠标或键盘等输入装置触发的，例如：设计画布中设置 有向导按钮，用户通过鼠标点击向导按钮后生成向导指令，计算机设备基于该向导指令遍历 设计画布中所有添加向导标记的界面元素，以及根据遍历到的界面元素生成界面元素列表。
43.举例来说，参见2所示的向导界面的示意图，遍历设计画布后生成的界面元素列表包含 11个界面元素，分别为：表单8767～主表区域。11个界面元素显示在向导界面的顶部。
44.s104、在界面元素列表中选择一个界面元素。
45.其中，用户可以通过鼠标在界面元素列表中选择一个界面元素。
46.举例来说，参见图2所示的向导界面的示意图，用户通过鼠标在界面元素列表中选择第 1个界面元素：表单8767，选中的界面元素以高亮的方式显示，以区分其他未被选中的界面 元素。
47.s105、在数据模型中选择一个或多个模型字段，将选择的模型字段和选择的界面元素进 行绑定。
48.其中，计算机设备预选存储有页面、数据模型和数据实例之间的映射关系，根据该映射 关系获取页面关联的数据模型，数据模型包含多个模型字段，模型字段由页面元素关联的数 据项目来决定。用户根据当前页面的设计需求从数据模型中选择一个或多个模型字段，然后 将选择的模型字段和选择的界面元素进行绑定。
49.进一步的，计算机设备基于用户的编辑指令，调整所述选择的模型字段的布局方式；和/ 或删除所述选择的模型字段中的一个或多个模型字段。
50.举例来说，参见图2所示的的向导界面的示意图，在选择的界面元素为表单8767的情况 下，计算机设备在向导界面中获取模型数据包含的多个模型字段：新项目1、新项目2、
…
、 新项目6，各个模型字段前面设置有勾选框，用户通过鼠标勾选某个模型字段时，该
模型字 段的勾选框中显示√，同时被选中的模型字段导入到右侧的交互区域中。交互区域中包括删 除控件、上移控件、下移控件、置顶控件和置底控件，删除控件用于删除交互区域中已有的 模型字段，上移控件、下移控件、置顶控件和置底控件均用于对交互区域中的模型字段进行 位置调整。
51.在一个或多个可能的实施例中，s101之前，还包括：
52.设置数据模型包括的多个模型字段和数据实例；其中，所述数据实例包括所述多个模型 字段和各个模型字段的取值；
53.将所述数据模型、数据实例和所述页面进行绑定。
54.举例来说，参见3所示的数据模型的配置界面，用户可以在该配置界面配置数据模型的 多个模型字段(即项目标题)，多个模型字段包括：新项目1～新项目11，另外还可以配置各 个模型字段的项目名称、项目类型和输入器类型和输入器设置。同时设置数据实例，数据实 质包括多个模型字段和具体的取值，例如：包括新项目1～新项目11的取值。
55.参见图4所示的数据模型的绑定界面，用户通过该绑定界面选择一个数据模型与页面进 行绑定。
56.s106、接收到页面预览指令时，在数据实例中读取选择的模型字段的取值，以及在选择 的界面元素中显示取值。
57.其中，用户通过输入装置触发页面预览指令，例如：设计画布中设置有预览按钮，通过 鼠标点击该预览按钮后生成页面预览指令，在数据实例中读取选择的模型字段的取值，根据 在选择的页面元素中显示取值。进一步的，数据实例的取值来源于数据库、数据文件或用户 输入，例如：数据库为sql数据库，数据文件为excel文件或word文件等。
58.举例来说，参见图5所述的页面的预览示意图，项目1～项目6为数据模型中选择的模型 字段，项目1和项目6绑定的界面元素为单元格，界面元素表格包含项目6～项目13，项目 6～项目13的取值参见图5所示。
59.进一步的，接收页面导出指令，基于所述设计画布中的页面元素导出页面文件；其中， 所述页面文件包括各个页面元素的页面代码和所述数据实例的接口代码。页面文件的格式可 以为json格式或html格式等，接口代码用于表示数据源(即数据实例)的接口地址，例如： 接口代码为api调用指令。在渲染页面文件上的界面元素时，根据该接口代码从数据实例中 获取数值展示在界面元素中，可以降低数据源和页面的耦合性，便于后期对页面元素中的数 据进行维护。
60.本技术实施例，在设计人员需要设计页面时，确定该页面绑定的数据模型，然后基于向 导指令从为界面元素配置数据模型中选择一个或多个模型字段进行绑定，在显示页面时，读 取模型字段的数值显示在界面元素中，这样可以根据页面的实际需求灵活的配置各个界面元 素的模型字段和数值，不需要对页面元素的代码进行修改，可以降低页面设计的难度和提高 设计效率。
61.下述为本技术装置实施例，可以用于执行本技术方法实施例。对于本技术装置实施例中 未披露的细节，请参照本技术方法实施例。
62.请参见图6，其示出了本技术一个示例性实施例提供的页面的设计装置的结构示意图， 以下简称装置6。该装置6可以通过软件、硬件或者两者的结合实现成为计算机设备的全部 或一部分。装置6包括：绘制单元601、添加单元602、生成单元603、选择单元604、绑
定 单元605和预览单元606。
63.绘制单元601，用于在设计画布中绘制页面的界面元素；
64.添加单元602，用于在绘制的界面元素中选择一个或多个界面元素添加向导标记；
65.生成单元603，用于接收到向导指令时，遍历所述设计画布中所有添加有向导标记的界 面元素，以及根据遍历的界面元素生成界面元素列表；
66.选择单元604，用于在所述界面元素列表中选择一个界面元素；
67.绑定单元605，用于在数据模型中选择一个或多个模型字段，将选择的模型字段和选择 的界面元素进行绑定；
68.预览单元606，用于接收到页面预览指令时，在数据实例中读取所述选择的模型字段的 取值，以及在所述选择的界面元素中显示所述取值。
69.在一个或多个可能的实施例中，所述将选择的模型字段和选择的界面元素进行绑定，还 包括：
70.基于用户的编辑指令，调整所述选择的模型字段的布局方式；和/或删除所述选择的模型 字段中的一个或多个模型字段。
71.在一个或多个可能的实施例中，绑定单元605还用于：
72.设置数据模型包括的多个模型字段和数据实例；其中，所述数据实例包括所述多个模型 字段和各个模型字段的取值；
73.将所述数据模型、数据实例和所述页面进行绑定。
74.在一个或多个可能的实施例中，所述在设计画布中绘制页面的界面元素，包括：
75.显示设计画布；
76.基于用户的拖拽指令从组件库中拖动一个或多个界面元素放置在所述设计画布中。
77.在一个或多个可能的实施例中，所述数据实例的取值来源于数据库、数据文件或用户输 入。
78.在一个或多个可能的实施例中，还包括：
79.导出单元，用于接收页面导出指令，基于所述设计画布中的页面元素导出页面文件；其 中，所述页面文件包括各个页面元素的页面代码和所述数据实例的接口代码。
80.在一个或多个可能的实施例中，所述在绘制的界面元素中选择一个或多个界面元素添加 向导标记，包括：
81.基于用户的框选指令在所述设计画布中选择一个或多个界面元素，以及为所述一个或多 个界面元素添加向导标记。
82.需要说明的是，上述实施例提供的装置6在执行页面的设计方法时，仅以上述各功能模 块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完 成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另 外，上述实施例提供的页面的设计装置与页面的设计方法实施例属于同一构思，其体现实现 过程详见方法实施例，这里不再赘述。
83.上述本技术实施例序号仅仅为了描述，不代表实施例的优劣。
84.本技术实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令， 所述指令适于由处理器加载并执行如上述图1所示实施例的方法步骤，具体执行
过程可以参 见图1所示实施例的具体说明，在此不进行赘述。
85.本技术还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至 少一条指令由所述处理器加载并执行以实现如上各个实施例所述的页面的设计方法。
86.请参见图7，为本技术实施例提供了一种计算机设备的结构示意图。如图7所示，所述 计算机设备700可以包括：至少一个处理器701，至少一个网络接口704，用户接口703，存 储器705，至少一个通信总线702。
87.其中，通信总线702用于实现这些组件之间的连接通信。
88.其中，用户接口703可以包括显示屏(display)、摄像头(camera)，可选用户接口703 还可以包括标准的有线接口、无线接口。
89.其中，网络接口704可选的可以包括标准的有线接口、无线接口(如wi-fi接口)。
90.其中，处理器701可以包括一个或者多个处理核心。处理器701利用各种接口和线路连 接整个终端700内的各个部分，通过运行或执行存储在存储器705内的指令、程序、代码集 或指令集，以及调用存储在存储器705内的数据，执行终端700的各种功能和处理数据。可 选的，处理器701可以采用数字信号处理(digital signal processing，dsp)、现场可编程门 阵列(field-programmable gatearray，fpga)、可编程逻辑阵列(programmable logic array， pla)中的至少一种硬件形式来实现。处理器701可集成中央处理器(central processing unit，cpu)、图像处理器(graphics processing unit，gpu)和调制解调器等中的一种或几种的组 合。其中，cpu主要处理操作系统、用户界面和应用程序等；gpu用于负责显示屏所需要显 示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也 可以不集成到处理器701中，单独通过一块芯片进行实现。
91.其中，存储器705可以包括随机存储器(randomaccess memory，ram)，也可以包括 只读存储器(read-only memory)。可选的，该存储器705包括非瞬时性计算机可读介质 (non-transitory computer-readable storage medium)。存储器705可用于存储指令、程序、代 码、代码集或指令集。存储器705可包括存储程序区和存储数据区，其中，存储程序区可存 储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图 像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法 实施例中涉及到的数据等。存储器705可选的还可以是至少一个位于远离前述处理器701的 存储装置。如图7所示，作为一种计算机存储介质的存储器705中可以包括操作系统、网络 通信模块、用户接口模块以及应用程序。
92.在图7所示的计算机设备700中，用户接口703主要用于为用户提供输入的接口，获取 用户输入的数据；而处理器701可以用于调用存储器705中存储的应用程序，并具体执行如 图1所示的方法，具体过程可参照图1所示，此处不再赘述。
93.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计 算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程 序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、 只读存储记忆体或随机存储记忆体等。
94.以上所揭露的仅为本技术较佳实施例而已，当然不能以此来限定本技术之权利范围，因 此依本技术权利要求所作的等同变化，仍属本技术所涵盖的范围。