一种页面可视化编程方法、装置、服务器和存储介质制造方法及图纸

本发明专利技术公开了一种页面可视化编程方法、装置、服务器及存储介质，包括展示多个待配置页面的缩略图；选择目标待配置页面，所述目标待配置页面包括固定功能区域和一个或多个待配置功能区域；输入功能代码以实现所述待配置功能区域的功能；执行代码生成目标页面。本发明专利技术通过事先制作风格固定的待配置页面，同时在已有代码中进行注释标注，使软件工程师能够节省配置页面的时间，同时快速了解自己的工作内容，专注实现页面功能，提高工作效率。

A visual programming method, device, server and storage medium for page

The invention discloses a page visualization programming method, device, server and storage medium, including displaying thumbnails of a plurality of pages to be configured; selecting a target page to be configured, the target page to be configured includes a fixed functional area and one or more functional area to be configured; inputting a functional code to realize the function of the functional area to be configured; executing a code generation target Standard page. By making a page to be configured with a fixed style in advance and annotation in the existing code, the software engineer can save the time of configuring the page, quickly understand his work content, focus on realizing the page function and improve the work efficiency.

【技术实现步骤摘要】
一种页面可视化编程方法、装置、服务器和存储介质
本专利技术实施例涉及可视化编程领域，尤其涉及一种页面可视化编程方法、装置、服务器和存储介质。
技术介绍
目前的编程方法主要以手工编写代码为主，通过编码来实现程序员的面向对象、变量声明、分支循环等控制处理过程，最终实现设计效果，如visualstudio和eclipse等IDE工具均支持常规的编码、编译、测试、调试功能。也有一些可视化平台的系统，以流程图为主体，通过拖动程序块，来实现可视化的编程，如普元构件编程、儿童积木块编程等。这两者主要都面对程序员，要求程序员处理系统的所有编程细节，涉及到页面编程时,需要UI设计师或测试员检测工作成果，工作中的沟通更多，导致工作效率下降。
技术实现思路
本专利技术提供一种页面可视化编程方法，以解决页面编程过程中程序员耗费过多时间在静态页面的美化设计上，达到提高效率的效果：展示预设的多个待配置页面的缩略图；根据所述缩略图选择目标待配置页面，所述目标待配置页面包括固定功能区域和一个或多个待配置功能区域；放大显示所述目标待配置页面，同时显示所述目标待配置页面对应的代码编辑窗口，所述代码编辑窗口包括不可编辑区和可编辑区，所述不可编辑区显示有所述固定功能区域对应的固定代码和所述待配置功能区域对应的一个或多个功能注释；接收基于所述一个或多个功能注释从所述可编辑区输入的第一功能代码，所述第一功能代码用于实现所述待配置功能区域的功能；执行所述代码编辑窗口的固定代码和第一功能代码以生成所述目标待配置页面对应的目标页面。本专利技术还提供一种可视化编程装置，包括展示模块，用于展示预设的多个待配置页面的缩略图；选择模块，用于根据所述缩略图选择目标待配置页面，所述目标待配置页面包括固定功能区域和一个或多个待配置功能区域；显示模块，放大显示所述目标待配置页面，同时显示所述目标待配置页面对应的代码编辑窗口，所述代码编辑窗口包括不可编辑区和可编辑区，所述不可编辑区显示有所述固定功能区域对应的固定代码和所述待配置功能区域对应的一个或多个功能注释；代码写入模块，用于接收基于所述一个或多个功能注释从所述可编辑区输入的第一功能代码，所述第一功能代码用于实现所述待配置功能区域的功能；编译模块，用于执行所述代码编辑窗口的固定代码和第一功能代码以生成所述目标待配置页面对应的目标页面。本专利技术还提供一种服务器，包括一个或多个处理器；存储装置，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器能够实现如上述任一项所述的页面可视化编程方法。本专利技术还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述任一项所述的页面可视化编程方法。本专利技术通过事先制作风格固定的待配置页面，同时在已有代码中进行注释标注，使软件工程师能够节省配置页面的时间，同时快速了解自己的工作内容，专注实现页面功能，提高工作效率。附图说明图1为本专利技术实施例一的页面可视化编程方法流程图。图2为本专利技术实施例一替代实施例的页面可视化编程方法流程图；图3为本专利技术实施例二的页面可视化编程方法流程图。图4为本专利技术实施例二替代实施例的页面可视化编程方法流程图。图5为本专利技术实施例三的页面可视化编程装置模块图。图6为本专利技术实施例三替代实施例的页面可视化编程装置模块图。图7为本专利技术实施例四提供的页面可视化编程服务器的结构示意图。具体实施方式下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时处理可以被终止，但是还可以具有未包括在附图中的附加步骤。处理可以对应于方法、函数、规程、子例程、子程序等等。此外，术语“第一”、“第二”等可在本文中用于描述各种方向、动作、步骤或元件等，但这些方向、动作、步骤或元件不受这些术语限制。这些术语仅用于将第一个方向、动作、步骤或元件与另一个方向、动作、步骤或元件区分。举例来说，在不脱离本申请的范围的情况下，第一速度差值可以为第二速度差值，且类似地，第二速度差值可以为第一速度差值。第一速度差值和第二速度差值两者都是速度差值，但其不是同一速度差值。术语“第一”、“第二”等而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本专利技术的描述中，“多个”、“批量”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。实施例一如图1所示，本实施例公开了一种页面可视化编程方法，包括如下步骤：S110.展示预设的多个待配置页面的缩略图；该步骤中，待配置页面为预先由UI设计师制作并上传的半成品的网页页面，这种半成品的网页页面具备固定的风格特征，具体地包括了logo、背景、边缘、底纹、分隔符、系统标题、菜单栏标题等内容，但对于数据信息、动态区域等需要软件工程师进一步进行编码的区域显示为未配置的状态。在工作平台中，为方便程序员快速选择目前需要进行编码的待配置页面，平台工作区会首先展示预设的多个待配置页面的缩略图。可选地，工作区可以平铺式第同时展示多个缩略图，也可以使用翻页、滑动、覆盖等模式依次展示缩略图；可选地，工作区可根据用户上传时设定的优先级确定多个待配置页面的展示顺序和/或缩略图的大小。如图2所示，在替代实施例中，步骤S110还包括：S111、接收用户上传的多个待配置页面和所述多个待配置页面对应的待编辑代码，所述待编辑代码包括一个或多个功能注释和固定代码；用户在上传待配置页面之前还需执行制作过程：美工设计出多种待配置页面的平面图样，平面图样包括固定功能区域的logo、背景、边缘、底纹、分隔符等内容，每个页面具有多种布局，布局为固定功能区域和待配置功能区域在待配置页面上的区域大小和排布方式。可选地，还对每个页面模板不同待配置区域进行了功能注释，功能注释指的是UI设计师在代码编写中加入注释进行标注。可选地，也可以根据功能注释在每个待配置页面上进行可视化的标注。UI设计师使用编程语言实现美工设计的平面图样，用以区分固定功能区域和待配置功能区域，固定功能区域制作完成后无法被软件工程师修改，待配置功能区域为未完成的内容，软件工程师可以通过输入代码进行修改。制作完成后，将多个待配置页面打包压缩，上传至系统进行存储。S112、当接收到用户的系统登录指令后，展示预设的多个待配置页面的缩略图。...

【技术保护点】
1.一种页面可视化编程方法，其特征在于，包括：/n展示预设的多个待配置页面的缩略图；/n根据所述缩略图选择目标待配置页面，所述目标待配置页面包括固定功能区域和一个或多个待配置功能区域；/n放大显示所述目标待配置页面，同时显示所述目标待配置页面对应的代码编辑窗口，所述代码编辑窗口包括不可编辑区和可编辑区，所述不可编辑区显示有所述固定功能区域对应的固定代码和所述待配置功能区域对应的一个或多个功能注释；/n接收基于所述一个或多个功能注释从所述可编辑区输入的第一功能代码，所述第一功能代码用于实现所述待配置功能区域的功能；/n执行所述代码编辑窗口的固定代码和第一功能代码以生成所述目标待配置页面对应的目标页面。/n

【技术特征摘要】
1.一种页面可视化编程方法，其特征在于，包括：
展示预设的多个待配置页面的缩略图；
根据所述缩略图选择目标待配置页面，所述目标待配置页面包括固定功能区域和一个或多个待配置功能区域；
放大显示所述目标待配置页面，同时显示所述目标待配置页面对应的代码编辑窗口，所述代码编辑窗口包括不可编辑区和可编辑区，所述不可编辑区显示有所述固定功能区域对应的固定代码和所述待配置功能区域对应的一个或多个功能注释；
接收基于所述一个或多个功能注释从所述可编辑区输入的第一功能代码，所述第一功能代码用于实现所述待配置功能区域的功能；
执行所述代码编辑窗口的固定代码和第一功能代码以生成所述目标待配置页面对应的目标页面。


2.根据权利要求1所述的页面可视化编程方法，其特征在于，所述展示预设的多个待配置页面的缩略图包括：
接收用户上传的多个待配置页面和所述多个待配置页面对应的待编辑代码，所述待编辑代码包括一个或多个功能注释和固定代码；
当接收到用户的系统登录指令后，展示预设的多个待配置页面的缩略图。


3.根据权利要求1所述的页面可视化编程方法，其特征在于，在所述放大显示所述目标待配置页面，同时显示所述目标待配置页面对应的代码编辑窗口之后，还包括：
根据用户向所述目标待配置页面输入的选择待配制功能区域的指令，在代码编辑窗口显示选择的所述待配置功能区域对应的功能注释。


4.根据权利要求1所述的页面可视化编程方法，其特征在于，在所述执行所述代码编辑窗口的固定代码和第一功能代码以生成所述目标待配置页面对应的目标页面之后，还包括：
根据用户输入的指令判断所述目标页面是否符合用户要求；
若接收到用户输入的页面确认指令，则保存并发布所述目标页面；
若接收到用户输入的代码修改指令，则修改所述第一功能代码。


5.根据权利要求4所述的页面可视化编程方法，其特征在于，所述保存并发布所述目标页面之后，还包括：
保存与所述目标页面对应的所述固定代码和第一功能代码。

【专利技术属性】
技术研发人员：何海生，吴庆，王天一，
申请(专利权)人：软通动力信息技术有限公司，
类型：发明
国别省市：天津;12