一种创建WEB应用的系统及方法与流程

本发明实施例涉及移动互联网技术领域，尤其涉及一种创建WEB应用的系统及方法。

背景技术：

随着移动互联网成熟度越来越高，WEB应用的使用越来越频繁，因此，可视化的网页制作工具应运而生。用户可以通过网页制作工具制作一些招聘信息、邀请函等。

“易企秀”是现有技术中的一款针对移动互联网营销的手机网页DIY制作工具，用户可以通过电脑或者手机编辑手机网页，将编辑好的网页发布到服务器上，还可以分享至微信朋友圈，微博，QQ群和QQ空间等。因此用户通过易企秀，无需掌握复杂的编程技术，就能够简单、轻松的制作基于HTML5的精美手机幻灯片页面。但是现有技术中的可视化制作WEB页面的工具只能制作单页面且页面是静态的，从而使应用的功能受到了限制。

技术实现要素：

针对现有技术存在的问题，本发明实施例提供一种创建WEB应用的系统及方法。

一方面，本发明实施例提供一种创建WEB应用的系统，包括：页面组装模块和页面链接模块；

所述页面组装模块用于制作所述WEB应用中至少一个页面，且每个所述页面对应一个页面地址；所述页面组装模块包括数据绑定器，所述数据绑定器用于将数据与组件进行绑定，所述数据包括静态数据和/或动态数据；

所述页面链接模块用于根据所述页面地址设定所述页面之间的跳转。

另一方面，本发明实施例提供一种创建WEB应用的方法，包括：

新建至少一个页面，并为新建后的每一所述页面生成一个页面地址；

从模板库中选择所述页面对应的模板，通过组件选择器从组件库中选择组件，并将数据与所述组件进行绑定，所述数据包括静态数据和/或动态数据；

根据新建的至少一个页面，在需要实现页面跳转的所述组件上设定对应的页面地址；

将创建好的所述WEB应用通过应用发布器进行保存、预览或发布。

本发明实施例提供的一种创建WEB应用的系统及方法，通过页面组装模块制作WEB应用中的至少一个页面，且每个页面对应一个页面地址，并通过数据绑定器将数据与组件进行绑定，数据包括静态数据和/或动态数据，实现了制作多页面，且页面为动态内容的WEB应用，使创建的WEB应用的功能多样化。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种创建WEB应用的系统结构示意图；

图2为本发明另一实施例提供的一种创建WEB应用的系统结构示意图；

图3为本发明实施例提供的页面组装模块结构示意图；

图4为本发明另一实施例提供的页面组装模块结构示意图；

图5为本发明实施例提供的一种创建WEB应用的方法流程示意图；

图6为本发明实施例提供的创建WEB应用方法的整体流程示意图；

图7为本发明又一实施例提供的一种创建WEB应用的系统结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1为本发明实施例提供的一种创建WEB应用的系统结构示意图，如图1所示，所述系统包括：页面组装模块101和页面链接模块102，其中：

所述页面组装模块101用于制作所述WEB应用中至少一个页面，且每个所述页面对应一个页面地址；所述页面组装模块包括数据绑定器，所述数据绑定器用于将数据与组件进行绑定，所述数据包括静态数据和/或动态数据；所述页面链接模块102用于根据所述页面地址设定所述页面之间的跳转。

具体地，页面组装模块101可以制作WEB应用中的一个或多个页面，通过页面组装模块101制作的每一个页面，系统都会为其生成一个对应的页面地址；页面组装模块101包括数据绑定器1011，通过数据绑定器1011将页面上的组件与数据进行绑定，数据包括动态数据和静态数据，根据组件的属性为组件绑定相应的数据，即当组件的属性为动态时，为该组件绑定动态数据；当组件的属性为静态时，为该组件绑定静态数据；当通过该系统制作多个页面的WEB应用时，需要实现页面与页面之间的跳转，通过页面链接模块102根据页面地址设定页面之间的跳转。

本发明实施例通过页面组装模块制作WEB应用中的至少一个页面，且每个页面对应一个页面地址，并通过数据绑定器将数据与组件进行绑定，数据包括静态数据和/或动态数据，实现了制作多页面，且页面为动态内容的WEB应用，使创建的WEB应用的功能多样化。

在上述实施例的基础上，图2为本发明另一实施例提供的一种创建WEB应用的系统结构示意图，如图2所示，所述系统，包括页面组装模块101、页面链接模块102和应用发布模块103，其中：

所述应用发布模块103用于将创建完成的所述WEB应用进行保存、预览或发布。

具体地，页面组装模块101和页面链接模块102与上述实施例一致，本发明实施例不再赘述。通过系统制作完成WEB应用后，通过应用发布模块103进行保存，保存至登录该系统的用户名下，还可以进行预览，在系统上预览制作的效果；也可以发布，即，将制作好的WEB应用发布至服务器上。

本发明实施例通过应用发布模块，实现了将制作好的WEB应用进行保存、预览及发布的功能。

在上述实施例的基础上，图3为本发明实施例提供的页面组装模块结构示意图，如图3所示，所述页面组装模块，包括数据绑定器1011和模板选择器1012，其中；

所述模板选择器1012用于从模板库中选择所述WEB应用对应的模板。

具体地，数据绑定器1011与上述实施例一致，此处不再赘述。系统中预设有一个模板库，模板库中存有多个模板，模板选择器1012从模板库中选择WEB应用所需要的模板，可以理解的是，模板库中可以按照不同类别将模板进行分类，例如，可以分为节日、商品、名片、简历、招聘、婚礼等等。

本发明实施例通过模板选择器从模板库中选择所需要的模板，实现了制作WEB应用风格的多样化，提高了用户的体验。

在上述各实施例的基础上，图4为本发明另一实施例提供的页面组装模块结构示意图，如图4所示，所述页面组装模块，包括数据绑定器1011、模板选择器1012、组件选择器1013和组件设定器1014，其中：

所述组件选择器1013用于选择所述组件，通过所述组件设定器1014设定所述组件的组件属性。

具体地，数据绑定器1011和模板选择器1012与上述实施例一致，此处不再赘述。WEB应用中每一个页面都是由不同的组件组成的，比如文字、图片、全景、地图、图集等组件，当然，还可以有其他组件，本发明实施例对此不作具体限定，本系统预设有一个组件库，并将上述组件放入组件库中。组件选择器1013从组件库中选择相应的组件，并通过组件设定器1014对组件的组件属性进行设定，例如，可以设定组件的位置、尺寸、颜色、字体、动/静态等。

本发明实施例通过组件选择器和组件设定器，可以使页面显示的内容更加丰富，在实现了WEB应用功能多样化的同时提高了用户的体验。

图5为本发明实施例提供的一种创建WEB应用的方法流程示意图，如图5所示，所述方法包括：

步骤501：新建至少一个页面，并为新建后的每一所述页面生成一个页面地址；

具体地，进入系统后，根据实际需要通过新建页面的功能新建一个或多个页面，每新建一个页面，系统都会为其生成一个页面地址，应当说明的是，在每新建的一个页面下还可以新建或复制多个子页面，多个子页面构成一个页面，都对应同一个页面地址。

步骤502：从模板库中选择所述页面对应的模板，通过组件选择器从组件库中选择组件，并将数据与所述组件进行绑定，所述数据包括静态数据和/或动态数据；

具体地，在新建页面后，通过模板选择器从模板库中选择该页面所需要的模板，其中，模板库是系统预先设置的，选择好模板后，通过组件选择器从组件库中选择需要的组件，并将数据与组件进行绑定，其中数据包括动态数据和/或静态数据，根据组件的属性为组件绑定相应的数据。

步骤503：根据新建的至少一个页面，在需要实现页面跳转的所述组件上设定对应的页面地址；

具体地，当WEB应用新建了多个页面，则需要实现页面之间的跳转关系，通过页面跳转器根据页面地址实现页面之间的跳转，例如，WEB应用新建了页面A和页面B，如要实现通过点击页面A中的按钮实现从页面A到页面B的跳转，此时，可以在页面A上添加一个按钮的组件，并为该组件绑定页面B的页面地址，通过页面跳转器就可以实现从页面A跳转到页面B的功能。

步骤504：将创建好的所述WEB应用通过应用发布器进行保存、预览或发布。

具体地，当整个WEB应用都制作完成后，可以通过应用发布器将该WEB应用进行保存、预览或发布。应当说明的是，应用发布器的保存、预览或发布功能可以单独或组合使用，即可以只保存，不预览也不发布，也可以只保存并预览，但不发布，还可以保存后预览，预览后进行发布等，本实施例对此不作具体限定。

本发明实施例通过页面组装模块制作WEB应用中的至少一个页面，且每个页面对应一个页面地址，并通过数据绑定器将数据与组件进行绑定，数据包括静态数据和/或动态数据，实现了制作多页面，且页面为动态内容的WEB应用，使创建的WEB应用的功能多样化。

在上述实施例的基础上，所述方法还包括：

根据组件设定器设定所述组件的组件属性，所述组件属性包括动态和静态。

具体地，通过组件选择器从组件库中选择了所需的组件后，可以通过组件设定器设定组件的属性，例如，可以设定组件的位置、尺寸、颜色、字体等。

本发明实施例通过组件设定器设定组件的属性，使用户根据自己的需求设定组件的位置、尺寸、颜色、字体等，使制作WEB应用的页面更加灵活，提高了用户的体验。

在上述实施例的基础上，所述方法还包括：

设置所述WEB应用对应的基础信息，其中所述基础信息包括标题、分享信息和描述信息。

根据选择的所述组件属性，通过数据绑定器给所述组件绑定相应的数据。

具体地，在创建一个WEB应用后，需要设置该WEB应用对应的基础信息，包括该WEB应用的标题，分享信息和对该WEB应用的描述信息，可以理解的是，还可以包括其他的基础信息，本发明实施例对此不作具体限定。有的组件是静态组件，有的组件的属性是动态，对于只有一种组件属性的组件，当用户选择后不需要进行动静态的设定，直接对其绑定数据即可，对于组件可以是动态组件也可以是静态组件的，当用户选择了该组件后，需要设定其动静态属性，并根据选择的动静态属性对组件进行数据绑定。例如：文本框组件就是静态的，用户直接将要显示的文字输入到文本框中即可，图集的组件可以为静态也可以为动态，当选择了图集组件后，选择组件的动静态属性，若选择动态，则需要为该组件指定一个数据源，使系统从该数据源中获取到该数据源中的图片，并将该图片显示在图集的组件上。应当说明的是，系统获取到数据元的数据后，通过约定好的数据格式进行传输到组件上，可以为json数据，但不局限于该数据格式。

本发明实施例通过根据组件的动静态属性为其绑定对应数据类型的数据，实现了页面为动态内容的功能，使制作WEB应用的系统功能更加多样化，进一步满足用户的需求。

在上述各实施例的基础上，所述方法还包括：

根据用户名及密码登录系统，其中，所述用户名是已经完成注册的。

具体地，用户进入系统后，需要通过用户名及密码登录，若没有用户名，则可以注册用户名。登录后，系统可以显示存储在该用户名下的已经制作完成并保存或已发布的WEB应用。

本发明实施例通过用户名及密码登录系统，可以记录该用户名制作WEB应用的信息，以便用户对已完成WEB应用的管理。

在上述实施例的基础上，所述方法还包括：

在所述新建至少一个页面之前，选择系统中已经存在的WEB应用；或

新建所述WEB应用。

具体地，登录系统后，可以选择新建一个WEB应用，还可以复用已经制作完成并保存的WEB应用。例如：用户认为之前制作过的一个WEB应用的模板、布局等比较好，想要在这个WEB应用的基础上加以修改，从而形成一个新的WEB应用，此时，用户可以复制该WEB应用，在该WEB应用的副本上进行修改。

本发明实施例通过复用已经存在的WEB应用，减少了制作的时间，提高了制作WEB应用的效率。

在上述实施例的基础上，所述方法还包括：

根据所述WEB应用对应的应用地址，判断所述WEB应用是否已经发布，若判断获知所述WEB应用已经发布，则替换已经发布的所述WEB应用。

具体地，当WEB应用制作完成后，通过应用发布器将其发布到服务器上时，系统会通过该WEB应用对应的应用地址检查是否已经在服务器上发布，即检查服务器上是否存在该应用地址，若存在，则说明该WEB应用已经在服务器上发布，此时将新制作好的WEB应用替换为已经发布到服务器上的该WEB应用；若服务器上不存在该应用地址，则直接发布到服务器上即可。

本发明实施例通过检测制作好的WEB应用是否存在，若存在，则将新制作好的WEB应用替换为已经发布到服务器上的WEB应用，避免由于应用地址相同导致应用的冲突。

图6为本发明实施例提供的创建WEB应用方法的整体流程示意图，如图6所示，所述方法的具体流程如下：

步骤601、登录系统；根据已经注册好的用户名及密码登录系统，登录系统后，系统中显示该用户名对应的信息，例如：该用户名所创建并保存过的WEB应用；

步骤602、新建应用或复用已有应用；进入系统后可以新建一个WEB应用，也可以复用已经创建好并保存的WEB应用；如果复用已经创建好的WEB应用，则需要先复制该WEB应用，并在WEB应用副本的基础上进行修改；

步骤603、设置应用基本信息；对新建的或者复用的WEB应用，设置其应用基本信息，例如：该WEB应用的标题、分享信息、描述信息等，分享信息包括分享时，设置其显示的标题内容、描述信息的内容、允许查看的人群等；

步骤604、进入界面；

步骤605、新建页面；点击新建页面的功能按钮，新建一个页面A，此时，系统会为该页面生成一个页面地址1；

步骤606、模板选择；通过模板选择器从模板库中选择所需要的模板；

步骤607、组件选择；通过组件选择器从组件库中选择所需要的组件，并使用组件设定器对已经选好的组件设定其组件属性。例如：组件可以是文本框、图片、图集等，设定该组件在该页面中的位置、组件大小、字体、动静态和颜色等，其中若该页面中需要多个组件，则可以多次使用组件选择器和组件设定器来进行组件的选择和属性的设定；

步骤608、数据绑定；给选择好的组件绑定数据，如果用户选择一个文本框组件，则将要显示在文本框中的内容输入到文本框中即可，如果用户选择一个动态图集组件，则需要为该组件指定一个数据源，例如：用户选择“风景”，系统则将数据库中获取到风景类的图片，并根据预先约定好的数据格式，将风景类的图片的数据进行传输，并显示在组件的对应位置。其中数据格式可以为json数据，还可以为其他数据，本发明实施例对此不作具体限定。

步骤609、新建另一个页面；与S5相同，新建另一个页面B，系统同样会为该页面B生成一个页面地址2；对于页面B的设计步骤同S6-S8；

步骤610、页面跳转；如果需要通过一个按钮组件从页面A跳转到页面B，则需要在页面A中从组件选择器中选择按钮组件，并给改按钮组件绑定数据，该数据为要跳转到页面B的页面地址2；

步骤611、保存、预览或发布；整个WEB应用创建完成后，可以通过保存按钮、预览按钮和发布按钮对其进行保存、预览和发布，系统为该WEB应用生成一个应用地址；

步骤612、判断WEB应用是否存在；点击发布按钮后，系统根据该WEB应用对应的应用地址查询该应用是否已经发布，若已经发布，进行步骤613，否则，进行步骤614；

步骤613、强制替换；强制替换已经发布的WEB应用，进行S14；

步骤614、发布成功；提示用户发布成功。

可以理解的是，本发明实施例列举的是新建两个页面，以及两个页面之间的跳转，还可以新建多个页面，并实现多个页面之间的跳转，本发明实施例对此不作具体限定。

图7为本发明实施例提供的一种创建WEB应用的系统结构示意图，如图7所示，所述系统，包括：处理器(processor)701、存储器(memory)702、和总线703；其中：

所述处理器701、存储器702通过所述总线703完成相互间的通信；

所述处理器701用于调用所述存储器702中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：新建至少一个页面，并为新建后的每一所述页面生成一个页面地址；从模板库中选择所述页面对应的模板，通过组件选择器从组件库中选择组件，并将数据与所述组件进行绑定，所述数据包括静态数据和/或动态数据；根据新建的至少一个页面，在需要实现页面跳转的所述组件上设定对应的页面地址；将创建好的所述WEB应用通过应用发布器进行保存、预览或发布。

以上所描述的系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。