系统平台的设计方法、装置、计算机设备及存储介质与流程

1.本技术实施例涉及系统平台设计领域，尤其是一种系统平台的设计方法、装置、计算机设备及存储介质。


背景技术：

2.目前，随着网络技术的发展，利用电子设备随时随地浏览网络页面已经非常常见，各行各业都在通过网络页面进行宣传、在线交易等。
3.在相关技术中，网络页面为系统平台设计的过程，网络页面主要的呈现途径为个人电脑端和移动设备端，进行系统平台设计通常需要进行架构搭建，页面布局，html元素和样式书写，和处理浏览器兼容性问题等多个步骤。在相关技术中，为了简化系统平台设计的过程，可以通过提前设置布局模板，方便技术人员进行系统平台布局设计。
4.然而，由于现有技术中的布局模板场景简单，模板中的模块单一，不够灵活，因此，大部分情况下不能满足丰富的系统平台设计需求，对系统平台设计人员要求较高，需要耗费较多的人力成本和时间成本才能够完成系统平台设计。


技术实现要素：

5.本技术实施例提供一种能够高效率的完成系统平台设计的系统平台的设计方法、装置、计算机设备及存储介质。
6.为解决上述技术问题，本发明创造的实施例采用的一个技术方案是：提供一种系统平台的设计方法，包括：接收用户对m个组件中目标组件的第一输入，第一布局中包括m个组件，上述系统平台与上述第一布局相对应，上述目标组件为m个组件中的任一个，m为正整数；响应于上述第一输入，确定上述目标组件对应的属性信息，上述属性信息包括以下至少一项：上述目标组件在上述第一布局中的位置信息，上述目标组件在上述第一布局中的功能信息；接收用户对上述第一布局的第二输入；响应于上述第二输入，调整上述第一布局，生成第二布局，并保存上述第二布局；接收用户的第三输入；响应于上述第三输入，确认上述第二布局对应的系统平台的目标屏幕适配方式，并按照调整上述目标屏幕适配方式调整上述第二布局，生成上述第三布局，上述第三布局与上述目标屏幕适配方式相对应，上述第三布局为上述系统平台的目标布局；接收用户的第四输入；响应于上述第四输入，获取上述系统平台对应的操作系统和浏览器版本；根据上述操作系统和上述浏览器版本，生成上述系统平台；生成上述系统平台对应的上述目标模板安装包。
7.可选地，上述确定上述目标组件对应的目标属性信息中，本技术实施例提供的系统平台的设计方法可以包括：触发上述系统平台对上述目标组件进行属性配置；确定上述目标组件对应的属性信息。
8.可选地，上述第一输入包括第一子输入和第二子输入，上述接收用户对上述m个组件中目标组件的第一输入，本技术实施例提供的系统平台的设计方法可以包括：接收用户对上述m个组件中目标组件的第一子输入；上述确定上述目标组件对应的目标属性信息，本
申请实施例提供的系统平台的设计方法可以包括：显示上述目标组件在上述系统平台中对应的x个属性信息，x为正整数；接收用户对目标控件的第二子输入，上述x个属性信息对应x个控件，上述目标控件对应上述目标属性；响应于上述第二子输入，确定上述目标组件对应的目标属性信息。
9.可选地，上述接收用户对上述第一布局的第二输入中，本技术实施例提供的系统平台的设计方法还包括：接收用户对上述第一布局对应的代码调试模块的第三子输入和对上述第二布局对应的模板存储模块的第四子输入，上述第三子输入包括：输入目标代码；上述响应于上述第二输入，调整上述第一布局，生成第二布局，并保存上述第二布局，本技术实施例提供的系统平台的设计方法可以包括：响应于上述第一子输入，调整上述第一布局，生成第二布局；响应于上述第二子输入，保存上述第二布局。
10.可选地，上述确定上述目标组件对应的目标属性信息之后，本技术实施例提供的系统平台的设计方法还包括：接收用户对上述第一布局的第六输入；响应于上述第六输入，在上述第一布局中添加元素信息，上述元素信息包括一下至少一项：图片信息、文本信息。
11.可选地，上述根据上述操作系统和上述浏览器版本，生成上述系统平台中，本技术实施例提供的系统平台的设计方法还可以包括：根据上述操作系统和上述浏览器版本，生成上述系统平台对应的代码信息和上述系统平台。
12.可选地，上述接收用户对上述n个组件中目标组件的第一输入之前，本技术实施例提供的中系统平台的设计方法还可以包括：接收用户的第八输入；响应于上述第八输入，在上述素材中心确定上述系统平台的目标模板，上述目标模板；接收用户的第九输入；响应于上述第九输入，确定上述目标模板对应的第一布局，上述目标模板对应n个布局，上述第一布局为n个布局中的任一个，n为正整数。
13.为解决上述技术问题，本发明实施例还提供一种系统平台的设计装置，包括：接收模块，用于接收用户对m个组件中目标组件的第一输入，第一布局中包括m个组件，上述系统平台与上述第一布局相对应，上述目标组件为m个组件中的任一个，m为正整数；确定模块，用于响应于上述接收模块接收的上述第一输入，确定上述目标组件对应的属性信息，上述属性信息包括以下至少一项：上述目标组件在上述第一布局中的位置信息，上述目标组件在上述第一布局中的功能信息；上述接收模块，还用于接收用户对上述第一布局的第二输入；存储模块，用于响应于上述接收模块接收的上述第二输入，调整上述第一布局，生成第二布局，并保存上述第二布局；上述接收模块，还用于接收用户的第三输入；上述确定模块，还用于响应于上述接收模块接收的上述第三输入，确认上述第二布局对应的系统平台的目标屏幕适配方式，并按照调整上述目标屏幕适配方式调整上述第二布局，生成上述第三布局，上述第三布局与上述目标屏幕适配方式相对应，上述第三布局为上述系统平台的目标布局；上述接收模块，用于接收用户的第四输入；获取模块，用于响应于上述接收模块接收的上述第四输入，获取上述系统平台对应的操作系统和浏览器版本；生成模块，用于根据上述获取模块获取的上述操作系统和上述浏览器版本，生成上述系统平台；上述生成模块，还用于生成上述系统平台对应的上述目标模板安装包。
14.可选地，上述系统平台的设计装置中还包括：触发模块，用于触发上述系统平台对上述目标组件进行属性配置；确定模块，具体用于确定上述目标组件对应的属性信息。
15.可选地，上述第一输入包括第一子输入和第二子输入，上述系统平台的设计装置
中还包括：接收模块，具体用于接收用户对上述m个组件中目标组件的第一子输入；显示模块，用于显示上述目标组件在上述系统平台中对应的x个属性信息，x为正整数；接收模块，用于接收用户对目标控件的第二子输入，上述x个属性信息对应x个控件，上述目标控件对应上述目标属性；确定模块，具体用于响应于上述接收模块接收的上述第二子输入，确定上述目标组件对应的目标属性信息。
16.可选地，上述接收模块，用于接收用户对上述第一布局对应的代码调试模块的第三子输入和对上述第二布局对应的模板存储模块的第四子输入，上述第三子输入包括：输入目标代码；调整模块，用于响应于上述接收模块接收的上述第一子输入，调整上述第一布局，生成第二布局；存储模块，具体用于响应于上述第二子输入，保存上述第二布局。
17.可选地，上述系统平台的设计装置中还包括：接收模块，还用于接收用户对上述第一布局的第六输入；添加模块，用于响应于上述接收模块接收的上述第六输入，在上述第一布局中添加元素信息，上述元素信息包括一下至少一项：图片信息、文本信息。
18.可选地，生成模块，具体用于根据上述操作系统和上述浏览器版本，生成上述系统平台对应的代码信息和上述系统平台。
19.可选地，接收模块，还用于接收用户的第八输入；确定模块，还用于响应于上述接收模块接收的上述第八输入，在上述素材中心确定上述系统平台的目标模板，上述目标模板；接收模块，还用于接收用户的第九输入；确定模块，还用于响应于上述接收模块接收的上述第九输入，确定上述目标模板对应的第一布局，上述目标模板对应n个布局，上述第一布局为n个布局中的任一个，n为正整数。
20.为解决上述技术问题本发明实施例还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行上述所述系统平台的设计方法的步骤。
21.为解决上述技术问题本发明实施例还提供一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述所述系统平台的设计方法的步骤。
22.本发明实施例的有益效果是：在接收到用户对第一布局中的n个组件中目标组件的第一输入后，即可确定该目标组件对应的目标属性信息(包括目标组件在第一布局中的位置信息和在第一布局中的功能信息)，之后，在接收到用户对第一布局的第二输入后，对第一布局进行调整，生成第二布局，并保存第二布局，之后在接收到用户的第三输入后，确认上述第二布局对应的系统平台的目标屏幕适配方式，并按照目标屏幕适配方式调整该第二布局，生成第三布局，最后，在接收到用户的第四输入后，获取系统平台对应的操作系统和浏览器版本，并生成系统平台，最终生成系统平台对应的目标模板安装包。如此，通过丰富的组件和细致的功能划分，用户仅需要确定布局以及布局中的组件，并根据最终需要的网页形式输入组件和布局的相关信息，即可以得到需要的系统平台，降低了系统平台搭建的人才门槛，提高了系统平台搭建的效率。
附图说明
23.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本
申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
24.图1为本发明一个具体实施例的系统平台的设计方法的基本流程示意图；
25.图2为本发明一个实施例的系统平台的设计装置基本结构示意图；
26.图3为本发明一个实施例的计算机设备的基本结构框图。
具体实施方式
27.下面详细描述本技术的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本技术，而不能解释为对本技术的限制。
28.本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本技术的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。
29.本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本技术所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。
30.本技术领域技术人员可以理解，这里所使用的“终端”既包括无线信号接收器的设备，其仅具备无发射能力的无线信号接收器的设备，又包括接收和发射硬件的设备，其具有能够在双向通信链路上，执行双向通信的接收和发射硬件的设备。这种设备可以包括：蜂窝或其他通信设备，其具有单线路显示器或多线路显示器或没有多线路显示器的蜂窝或其他通信设备；pcs(personal communications service，个人通信系统)，其可以组合语音、数据处理、传真和/或数据通信能力；pda(personal digital assistant，个人数字助理)，其可以包括射频接收器、寻呼机、互联网/内联网访问、网络浏览器、记事本、日历和/或gps(global positioning system，全球定位系统)接收器；常规膝上型和/或掌上型计算机或其他设备，其具有和/或包括射频接收器的常规膝上型和/或掌上型计算机或其他设备。这里所使用的“终端”可以是便携式、可运输、安装在交通工具(航空、海运和/或陆地)中的，或者适合于和/或配置为在本地运行，和/或以分布形式，运行在地球和/或空间的任何其他位置运行。这里所使用的“终端”还可以是通信终端、上网终端、音乐/视频播放终端，例如可以是pda、mid(mobile internet device，移动互联网设备)和/或具有音乐/视频播放功能的移动电话，也可以是智能电视、机顶盒等设备。
31.请参阅图1，图1为本实施例提供的系统平台的设计方法的基本流程示意图，包括步骤201至步骤210：
32.步骤201：接收用户对m个组件中目标组件的第一输入。
33.在本发明实施例中，第一布局中包括m个组件，上述目标组件为m个组件中的任一个，上述系统平台与上述第一布局相对应，m为正整数。
34.在本发明实施例中，上述组件为最终显示在系统平台上的可视化内容，不同的组
件具有不同的功能，例如，组件1具备的功能是进入系统平台当前层级的下一层级，例如，网页1的开启通道，组件2具备的功能是返回系统平台当前层级的上一层级的网页2的开启通道。
35.在本发明实施例中，上述m个组件均为第一布局中的组件。
36.在本发明实施例中，第一布局为系统平台中预存的布局，电子设备可以接收用户对第一布局的调整输入，对第一布局进行改动，从而得到符合用户需求的布局。
37.可以理解的是，第一布局中包括m个组件，在对系统平台进行设计的过程中，可以选择多个布局中的一个，也即，第一平台为多个布局中的一个，详细参照下文。
38.在本发明实施例中，上述第一输入可以为触控输入，例如，点击输入、拖拽输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
39.在本发明实施例中，上述第一输入用于对目标组件进行调整。
40.需要说明的是：
41.第一，在本发明实施例中，系统平台的设计方法基于所见即所得的思想，通过对页面展示(例如，对目标组件)和代码的同步调整，使得设计人员可以可视化的完成系统平台的设计过程。
42.第二，在本发明实施例中，用于设计系统的电子设备中应当包含以下内容：组件库，属性编辑器，布局模块，代码调试模块，模板存储模块，打包下载模块，素材中心，其中：
43.1.组件库包含基础的输入框，下拉框，按钮等等基础组件；
44.2.属性编辑器用来修改基础组件的样式，包括颜色，高宽，间距等等；
45.3.布局模块主要用于给用户提供复用的布局模板，也可以通过多个基础组件组装成一个布局模板，布局模块中包括多个布局，详细参照下文；
46.4.代码调试模块主要用于对拖拽完成的模块或者布局进行代码层面的调整以及后续的效果调试；
47.5.模板存储主要用于对布局模块就行保存，供后续复用；
48.6.打包下载模块主要是把保存好的目标模板打包，便于用户后续使用；
49.7.素材中心是保持一些用户认可的整套页面风格的主题，其中，素材中心中包括多个模板，每个模版中包括多个布局。
50.步骤202：响应于上述第一输入，确定上述目标组件对应的属性信息。
51.在本发明实施例中，上述属性信息包括以下至少一项：上述目标组件在上述第一布局中的位置信息，上述目标组件在上述第一布局中的功能信息。
52.示例性地，当上述属性信息为目标组件在第一布局中的位置信息时，可以通过接收用户输入目标组件的在第一布局中的位置信息从而确定属性信息，也可以直接接收用户目标组件的输入从而确定属性信息。
53.示例性地，当上述属性信息为目标组件在第一布局中的功能信息时，该功能信息可以为目标组件初始的功能，也可以为接收用户输入后，该输入确定的功能。
54.进一步地，上述第一输入可以在确定目标组件属性信息的同时，可以将新定义该目标组件的初始属性信息。例如，当上述属性信息为位置信息，上述第一输入为触控输入，例如拖拽输入时，则在将目标组件拖拽到第一布局的任意位置的同时，会触发电子设备对该拖拽过程进行监听，自动将拖拽过程以及最终确定的位置信息的代码复刻至第一布局
中，并保存该位置信息，在后续的用户使用该第一布局时，可以直接调取该位置信息，无需重复进行拖拽输入。
55.步骤203：接收用户对上述第一布局的第二输入。
56.在本发明实施例中，上述第二输入可以为触控输入，例如，长按输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
57.在本发明实施例中，上述第二输入用于调整第一布局的尺寸信息和位置信息，保存调整后的第一布局。
58.步骤204：响应于上述第二输入，调整上述第一布局，生成第二布局，并保存上述第二布局。
59.在本发明实施例中，上述第二布局即为调整后的第一布局。
60.需要说明的是，上述调整第一布局，调整的是第一布局整体的尺寸信息、位置信息，并不改变第一布局中的m个组件，即第二布局中仍然包含上述m个组件。同时，在调整第一布局的尺寸信息后，m个组件的尺寸信息可以相应变化，例如，将第一布局的尺寸信息统一变为原先的1.25倍，则m个组件的尺寸信息也可以相应变化；m个组件的尺寸信息也可以不同步变化。上述m个组件的尺寸信息和第一布局尺寸信息之间的变化关系
61.步骤205：接收用户的第三输入。
62.在本发明实施例中，上述第三输入可以为触控输入，例如，点击输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
63.在本发明实施例中，上述第三输入用于确定屏幕适配方式。
64.步骤206：响应于上述第三输入，确认上述第二布局对应的系统平台的目标屏幕适配方式，并按照调整上述目标屏幕适配方式调整上述第二布局，生成上述第三布局。
65.在本发明实施例中，上述第三布局与上述目标屏幕适配方式相对应，上述第三布局为上述系统平台的目标布局。
66.在本发明实施例中，上述确定屏幕适配方式，基于提前预设的用于确定屏幕适配方式的不同，可以包含多种方式，可以为用户输入需要适配的屏幕尺寸，即通过切换确定目标屏幕适配方式，还可以为自行匹配屏幕适配方式，从而确定目标屏幕适配方式，还可以为其他屏幕适配方式。
67.在一种示例中，当提前预设的用于确定屏幕适配方式为媒体查询方式时，可以接收用户输入的适配多种屏幕尺寸的动态参数,包括需要支持的屏幕宽度和高度,输入完成后,系统能自动生成相应的css代码，确定目标屏幕适配方式，并且能看到相应的虛拟机屏幕的展示效果。进一步地，该方式生成的目标屏幕适配方式可以改动上述第三布局对应的模板中所有布局的屏幕适配方式。
68.在一种示例中，当提前预设的用于确定屏幕适配方式为电子设备自行匹配屏幕适配方式时，可以选择rem或者em方式。其中，基于rem相对root元素得大小不断改变自身大小得特性,用户定义好rem和根元素的换算关系的比例值,从而在拖入组件后,自动换算rem和系统平台对应的页面像素之间的值,并可以选择或者输入屏幕尺寸展示相应的结果。进一步地，该rem方式生成的目标屏幕适配方式仅可以改动上述第三布局对应的屏幕适配方式。类似的，em方式可以参照上述rem方式的改动过程，而通过em方式确定的目标屏幕适配方式，生成的目标屏幕适配方式可以改动上述第三布局对应的模板中所有布局的屏幕适配方
式。
69.在一种示例中，当提前预设的用于确定屏幕适配方式为选择flex布局时,可以通过接收用户调整m个组件的位置,自动生成flex布局方式的css代码,确定目标屏幕适配方式，并且能看到相应的虛拟机屏幕的展示效果。
70.在一种示例中，当提前预设的用于确定屏幕适配方式为选择引入第三方布局方式时，可以直接读取上传的第三方的布局文件,比如flexible.js,从而确定目标屏幕适配方式。进一步地，通过该种方式生成的目标屏幕适配方式可以改动上述第三布局对应的模板中所有布局的屏幕适配方式。
71.步骤207：接收用户的第四输入。
72.在本发明实施例中，上述第四输入可以为触控输入，例如，点击输入、拖拽输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
73.在本发明实施例中，上述第四输入用于获取上述系统平台对应的操作系统和浏览器版本。
74.可以理解的是，系统平台对应的操作系统和浏览器版本不同时，系统平台可能会有所调整。
75.步骤208：响应于上述第四输入，获取上述系统平台对应的操作系统和浏览器版本。
76.需要说明的是，针对不同的操作系统，电子设备均会提供不同设备端的模拟视图层供用户选择(即上述第四输入)。
77.步骤209：根据上述操作系统和上述浏览器版本，生成上述系统平台。
78.示例性地，上述操作系统可以包括安卓系统，ios系统。
79.在一种示例中，当选择操作系统为ios系统时,可以自动生成html页面,其中包含与ios系统交互的js,css代码。
80.在一种示例中，当选择操作系统为安卓系统时,可以自动生成html页面，其中包含与安卓系统交互的js,css代码。
81.需要说明的是，上述自动生成html页面的时机可以为最终保存目标模板安装包时，即在保存目标模板安装包时自动生成html页面。
82.步骤210：生成上述系统平台对应的上述目标模板安装包。
83.在本发明实施例中，上述目标模板安装包可以用于在不同设备中下载并安装系统平台。
84.本技术实施例提供的系统平台的设计方法中，在接收到用户对第一布局中的n个组件中目标组件的第一输入后，即可确定该目标组件对应的目标属性信息(包括目标组件在第一布局中的位置信息和在第一布局中的功能信息)，之后，在接收到用户对第一布局的第二输入后，对第一布局进行调整，生成第二布局，并保存第二布局，之后在接收到用户的第三输入后，确认上述第二布局对应的系统平台的目标屏幕适配方式，并按照目标屏幕适配方式调整该第二布局，生成第三布局，最后，在接收到用户的第四输入后，获取系统平台对应的操作系统和浏览器版本，并生成系统平台，最终生成系统平台对应的目标模板安装包。如此，通过丰富的组件和细致的功能划分，用户仅需要确定布局以及布局中的组件，并根据最终需要的网页形式输入组件和布局的相关信息，即可以得到需要的系统平台，降低
了系统平台搭建的人才门槛，提高了系统平台搭建的效率。
85.可选地，在本技术实施例中，上述步骤202中的确定上述目标组件对应的目标属性信息中，本技术实施例提供的系统平台的设计方法还包括如下步骤a1和步骤a2：
86.步骤a1：触发上述系统平台对上述目标组件进行属性配置。
87.步骤a2：确定上述目标组件对应的属性信息。
88.可以理解的是，对于不同的系统平台，目标组件的属性信息不同。因此，在接收第一输入后，即可以触发系统平台根据平台需求对目标组件进行属性配置，从而确定目标组件需要对应的位置信息和功能信息。
89.进一步地，上述属性配置过程可以为系统平台根据预设值的规则自动完成。
90.在一种示例中，当上述属性配置过程为系统平台预设置的规则时，上述目标组件中会直接自行携带属性信息，在对目标组件进行第一输入后，即可触发系统平台将该目标组件设置为操作控件，并为该目标组件设置组件名称，进而完成属性配置。
91.如此，通过触发系统平台对目标组件进行属性配置，进而确定目标组件对应的属性信息，从而可以大幅度提高确定目标组件对应的属性信息的效率。
92.可选地，在本技术实施例中，上述第一输入包括第一子输入和第二子输入，上述步骤201中，本技术实施例提供的系统平台的设计方法还包括如下步骤b1：
93.步骤b1：接收用户对上述m个组件中目标组件的第一子输入。
94.在上述步骤b1的基础上，上述步骤201中的确定上述目标组件对应的目标属性信息中，本技术实施例提供的系统平台的设计方法还包括如下步骤b2至步骤b4：
95.步骤b2：显示上述目标组件在上述系统平台中对应的x个属性信息。
96.步骤b3：接收用户对目标控件的第二子输入，上述x个属性信息对应x个控件，上述目标控件对应上述目标属性。
97.步骤b4：响应于上述第二子输入，确定上述目标组件对应的目标属性信息。
98.示例性地，上述第一子输入和上述第二子输入可以为触控输入，例如，点击输入、拖拽输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
99.示例性地，上述第一子输入用于触发电子设备显示x个属性信息。
100.示例性地，一个组件可以对应多个属性信息。
101.示例性地，上述第二子输入用于触发电子设备确定目标组件对应的目标属性信息。
102.需要说明的是，上述x个属性信息的设置过程通常根据div代码和css代码组合实现属性信息配置。上述x个属性信息可以为提前预设置的。
103.如此，可以通过显示目标组件可选择的多种属性信息，便于用户进行选择，从而进一步丰富目标组件的属性信息定义，大幅提高系统平台设计的效率。
104.可选地，在本技术实施例中，上述步骤203中，本技术实施例提供的系统平台的设计方法还包括如下步骤c1：
105.步骤c1：接收用户对上述第一布局对应的代码调试模块的第三子输入和对上述第二布局对应的模板存储模块的第四子输入。
106.示例性地，上述第三子输入包括：输入目标代码。
107.在上述步骤c1的基础上，上述步骤204中，本技术实施例提供的系统平台的设计方法还包括如下步骤c2和步骤c3：
108.步骤c2：响应于上述第一子输入，调整上述第一布局，生成第二布局。
109.步骤c3：响应于上述第二子输入，保存上述第二布局。
110.示例性地，上述代码调试模块和模板存储模块可以参照前述描述，此处不再赘述。
111.示例性地，上述第三子输入和上述第四子输入可以为触控输入，例如，点击输入、拖拽输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
112.示例性地，输入目标代码用于调整第一布局的空间大小和位置,调试第一布局对应的界面效果,生成第二布局。
113.进一步地，每个布局均有对应的代码信息。
114.示例性地，在保存上述第二布局的同时，也保存第二布局对应的代码信息。
115.如此，通过输入代码的方式，快速调整第一布局，同时生成第二布局并保存第二布局，从而提高系统平台设计的效率。
116.可选地，在本技术实施例中，在上述步骤202中的确定上述目标组件对应的目标属性信息之后，本技术实施例提供的系统平台的设计方法还包括如下步骤d1和步骤d2：
117.步骤d1：接收用户对上述第一布局的第六输入。
118.步骤d2：响应于上述第六输入，在上述第一布局中添加元素信息。
119.示例性地，上述元素信息包括一下至少一项：图片信息、文本信息。
120.示例性地，上述第六输入可以为触控输入，例如，点击输入、拖拽输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
121.示例性地，上述元素信息主要为与组件不同的信息。一般的，上述元素信息为系统平台中具有个性化特征的信息。
122.示例性地，上述图片信息和文本信息可以为电子设备中预存的，也可以为用户自定义输入的，例如，用户拍摄的图片或者用户编辑的文字。
123.在一种示例中，对于复杂的元素信息的添加，可以对已有的类似组件进行加工，以完成在第一布局中添加元素信息。例如，若元素信息为比如树形结构,可以先对电子设备进行拖拽输入，在第一布局中插入一个示例树形结构的组件,然后再该组件中设置子节点展示的条件及自定义的样式,该组件种内置递归实现算法,可以自动遍历当前数据结构,发现含有子节点,会为当前节点生成下一层级的多个子节点,用户可输入模拟值,比如传入存json数据,系统自动递归生成相应的树形结构的代码,并且插入到模板的根节点位，从而完成树形结构元素信息的插入。
124.如此，通过上述方式可以方便的添加元素信息，在保证系统平台设计丰富度的同时还简化了操作步骤，提高了系统平台的设计效率。
125.可选地，在本技术实施例中，上述步骤209中，本技术实施例提供的系统平台的设计方法还包括如下步骤e1至步骤e3：
126.步骤e：根据所述操作系统和所述浏览器版本，生成所述系统平台对应的代码信息和所述系统平台。
127.示例性地，在本发明实施例中，系统平台支持vue和react等生态模式,因此，可以
在设计系统平台的过程中，在系统平台的模拟视图中中选择不同的组件，系统平台会根据需要显示的设备端,生成相应能够支持渲染功能渲染的代码信息。
128.进一步地，当生成目标模板安装包后，在安装过程中该目标模板安装保会自动获取当前的设备端信息，进而选择合适的代码信息进行读取，并且根据设置支持的样式自适应渲染页面。
129.可选地，在本技术实施例中，上述步骤201之前，本技术实施例提供的系统平台的设计方法还包括如下步骤f1至f4：
130.步骤f1：接收用户的第八输入。
131.步骤f2：响应于上述第八输入，在上述素材中心确定上述系统平台的目标模板，上述目标模板。
132.步骤f3：接收用户的第九输入。
133.步骤f4：响应于上述第九输入，确定上述目标模板对应的第一布局。
134.示例性地，上述目标模板对应n个布局，上述第一布局为n个布局中的任一个。
135.示例性地，上述素材中心中包括多个模板，每个模板中包括多个布局。
136.进一步地，上述目标模板为素材中心中多个模板中的任一个，上述第一布局为目标模板中多个布局中的任一个。
137.示例性地，上述第八输入和第九输入可以为触控输入，例如，点击输入、拖拽输入，还可以为语音控制输入，还可以为特殊手势的输入，本发明实施例对此不作限定。
138.为解决上述技术问题，本发明实施例还提供系统平台的设计装置。具体请参阅图2，图2为本实施系统平台的设计装置基本结构示意图。
139.如图2所示，一种系统平台的设计装置，包括：接收模块301，用于接收用户对m个组件中目标组件的第一输入，第一布局中包括m个组件，上述系统平台与上述第一布局相对应，上述目标组件为m个组件中的任一个，m为正整数；确定模块302，用于响应于上述接收模块301接收的上述第一输入，确定上述目标组件对应的属性信息，上述属性信息包括以下至少一项：上述目标组件在上述第一布局中的位置信息，上述目标组件在上述第一布局中的功能信息；上述接收模块301，还用于接收用户对上述第一布局的第二输入；存储模块303，用于响应于上述接收模块301接收的上述第二输入，调整上述第一布局，生成第二布局，并保存上述第二布局；上述接收模块301，还用于接收用户的第三输入；上述确定模块302，还用于响应于上述接收模块接收的上述第三输入，确认上述第二布局对应的系统平台的目标屏幕适配方式，并按照调整上述目标屏幕适配方式调整上述第二布局，生成上述第三布局，上述第三布局与上述目标屏幕适配方式相对应，上述第三布局为上述系统平台的目标布局；上述接收模块301，用于接收用户的第四输入；获取模块304，用于响应于上述接收模块301接收的上述第四输入，获取上述系统平台对应的操作系统和浏览器版本；生成模块305，用于根据上述获取模块304获取的上述操作系统和上述浏览器版本，生成上述系统平台；上述生成模块305，还用于生成上述系统平台对应的上述目标模板安装包。
140.系统平台的设计装置在接收到用户对第一布局中的n个组件中目标组件的第一输入后，即可确定该目标组件对应的目标属性信息(包括目标组件在第一布局中的位置信息和在第一布局中的功能信息)，之后，在接收到用户对第一布局的第二输入后，对第一布局进行调整，生成第二布局，并保存第二布局，之后在接收到用户的第三输入后，确认上述第
二布局对应的系统平台的目标屏幕适配方式，并按照目标屏幕适配方式调整该第二布局，生成第三布局，最后，在接收到用户的第四输入后，获取系统平台对应的操作系统和浏览器版本，并生成系统平台，最终生成系统平台对应的目标模板安装包。如此，通过丰富的组件和细致的功能划分，用户仅需要确定布局以及布局中的组件，并根据最终需要的网页形式输入组件和布局的相关信息，即可以得到需要的系统平台，降低了系统平台搭建的人才门槛，提高了系统平台搭建的效率。
141.在一些实施方式中，上述系统平台的设计装置中还包括：触发模块306，用于触发上述系统平台对上述目标组件进行属性配置；确定模块302，具体用于确定上述目标组件对应的属性信息。
142.在一些实施方式中，上述第一输入包括第一子输入和第二子输入，上述系统平台的设计装置中还包括：接收模块301，具体用于接收用户对上述m个组件中目标组件的第一子输入；显示模块307，用于显示上述目标组件在上述系统平台中对应的x个属性信息，x为正整数；接收模块301，用于接收用户对目标控件的第二子输入，上述x个属性信息对应x个控件，上述目标控件对应上述目标属性；确定模块302，具体用于响应于上述接收模块301接收的上述第二子输入，确定上述目标组件对应的目标属性信息。
143.在一些实施方式中，上述接收模块301，用于接收用户对上述第一布局对应的代码调试模块的第三子输入和对上述第二布局对应的模板存储模块的第四子输入，上述第三子输入包括：输入目标代码；调整模块308，具体用于响应于上述接收模块301接收的上述第一子输入，调整上述第一布局，生成第二布局；存储模块303，具体用于响应于上述第二子输入，保存上述第二布局。
144.在一些实施方式中，上述系统平台的设计装置中还包括：接收模块301，还用于接收用户对上述第一布局的第六输入；添加模块309，用于响应于上述接收模块301接收的上述第六输入，在上述第一布局中添加元素信息，上述元素信息包括一下至少一项：图片信息、文本信息。
145.在一些实施方式中，生成模块305，具体用于根据上述操作系统和上述浏览器版本，生成上述系统平台对应的代码信息和上述系统平台。
146.在一些实施方式中，接收模块301，还用于接收用户的第八输入；确定模块302，还用于响应于上述接收模块391接收的上述第八输入，在上述素材中心确定上述系统平台的目标模板，上述目标模板；接收模块301，还用于接收用户的第九输入；确定模块302，还用于响应于上述接收模块301接收的上述第九输入，确定上述目标模板对应的第一布局，上述目标模板对应n个布局，上述第一布局为n个布局中的任一个，n为正整数。
147.为解决上述技术问题，本发明实施例还提供计算机设备。具体请参阅图3，图3为本实施例计算机设备基本结构框图。
148.如图3所示，计算机设备的内部结构示意图。该计算机设备包括通过系统总线连接的处理器、非易失性存储介质、存储器和网络接口。其中，该计算机设备的非易失性存储介质存储有操作系统、数据库和计算机可读指令，数据库中可存储有控件信息序列，该计算机可读指令被处理器执行时，可使得处理器实现一种数据关系重构方法。该计算机设备的处理器用于提供计算和控制能力，支撑整个计算机设备的运行。该计算机设备的存储器中可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种数据
关系重构方法。该计算机设备的网络接口用于与终端连接通信。本领域技术人员可以理解，图3中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
149.本实施方式中处理器用于执行图2中接收模块301、确定模块302、存储模块303、获取模块304和生成模块305的具体功能，存储器存储有执行上述模块所需的程序代码和各类数据。网络接口用于向用户终端或服务器之间的数据传输。本实施方式中的存储器存储有数据关系重构装置中执行所有子模块所需的程序代码及数据，服务器能够调用服务器的程序代码及数据执行所有子模块的功能。
150.本发明还提供一种存储有计算机可读指令的存储介质，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述任一实施例系统平台的设计方法的步骤。
151.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(read-only memory，rom)等非易失性存储介质，或随机存储记忆体(random access memory，ram)等。
152.本技术领域技术人员可以理解，本技术中已经讨论过的各种操作、方法、流程中的步骤、措施、方案可以被交替、更改、组合或删除。进一步地，具有本技术中已经讨论过的各种操作、方法、流程中的其他步骤、措施、方案也可以被交替、更改、重排、分解、组合或删除。进一步地，现有技术中的具有与本技术中公开的各种操作、方法、流程中的步骤、措施、方案也可以被交替、更改、重排、分解、组合或删除。
153.以上所述仅是本技术的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本技术的保护范围。