一种无代码Web开发系统的制作方法

一种无代码web开发系统
技术领域
1.本申请涉及计算机技术领域，尤其涉及一种无代码web开发系统。


背景技术：

2.web页面是万维网上的一个按照html格式组织起来的文件，在通过万维网进行信息查询时，以信息页面的形式出现，它可包括图形、文字、声音和视像等信息。web页面是用户访问万维网的入口，因此web页面的构建好坏直接影响用户对网站的第一印象。
3.用于开发网络应用程序的web系统目前得到广泛应用。网络应用程序(简称webapp)是一种使用网页浏览器在互联网或企业内部网上操作的应用软件，其是一种以网页语言(例如html、javascript、java等编程语言)撰写的应用程序，需要通过浏览器来运行。web系统是客户机——服务器模式。web客户机是客户端的浏览器。web服务器是资源存放的主机。
4.目前，web开发通常需要由开发人员将图像编辑软件(如photoshop等)设计的设计稿按页面需要进行切片，使用集成开发环境(如：visual studio code、eclipse等)编码，将打包后的产出物部署到服务器上运行，供访问者使用浏览器访问。需要开发人员熟悉html、css、javascript、java、php等前、后端开发语言及掌握linux操作系统常用命令。
5.目前web开发普遍存在如下问题：需要专业的前、后端开发人员进行编码，技术难度较大。现有可视化页面搭建系统通过拖拽系统提供的固有组件实现搭建页面，无法将设计稿所表达的视觉效果转化成页面。现有可视化页面搭建系统不能解决较复杂的页面交互和后端开发、部署问题，复杂功能组件仍然需要专业开发人员介入。


技术实现要素：

6.本申请的目的在于，针对上述所提出的问题，提供了一种无代码web开发系统，使用户可以不具备专业开发知识，无需编写程序代码，将psd等格式的设计稿文件制作成具有交互操作和动态数据的显示、提交等较复杂功能的页面供访问者使用。
7.本申请的技术方案如下：
8.一种无代码web开发系统，所述系统包括用户界面、文件处理模块、页面处理模块；
9.所述用户界面用于处理用户终端的输入输出，用户通过对用户界面的操作调用系统的功能；
10.所述文件处理模块用于将设计稿文件中的图层信息数据转换为页面处理模块所需的json格式页面元素数据；
11.所述页面处理模块用于将所述json格式页面元素数据转换生成浏览器可显示的文件格式的页面。
12.进一步的改进在于，所述系统还包括项目管理模块，所述项目管理模块用于管理项目数据的读取和存储。
13.进一步的改进在于，所述系统还包括页面托管服务，所述页面托管服务用于存放
页面处理模块生成的页面和资源文件，提供url给访问者访问。
14.进一步的改进在于，所述系统还包括业务中台，所述业务中台用于向所述页面处理模块提供动态数据的数据源接口定义，以及用于业务数据的新增、修改、查询、删除服务。
15.进一步的改进在于，所述页面处理模块还用于处理页面元素的事件绑定和动态数据的获取。
16.进一步的改进在于，所述页面元素包括页面、布局、区块；所述页面包含至少一个布局；所述布局包含至少一个区块或者包含至少另外一个布局；所述区块为最小的可配置单元。
17.进一步的改进在于，所述页面、布局和区块具有样式配置和交互配置；所述布局具有布局方式配置；所述区块具有数据配置和内容配置。
18.进一步的改进在于，配置包含至少一个字段，字段由系统预先设计，字段的值由系统自动设置或用户通过选择或输入设置。
19.进一步的改进在于，所述文件处理模块将设计稿文件中的图层信息数据转换为页面处理模块所需的json格式页面元素数据的具体过程为：
20.遍历设计稿文件的图层信息数据；
21.每个节点对应一个页面元素，获取每个节点的宽度、高度、x轴偏移量、y轴偏移量、z轴偏移量、图像、富文本数据，将其转化为对应页面元素的宽度、高度、x轴偏移量、y轴偏移量、z轴偏移量、图像、富文本数据；
22.每个节点写入预设字段，所述预设字段的值由用户通过用户界面预设置；保持原结构不变，得到一个存储页面元素信息的json格式页面元素数据。
23.进一步的改进在于，所述页面处理模块将所述json格式页面元素数据转换生成浏览器可显示的文件格式的页面具体过程为：
24.遍历所述json格式页面元素数据，将节点按预设规则逐个转化为html代码和css代码；
25.在html代码尾部追加script标签用于注入脚本代码；
26.将注入脚本代码后的html代码注入一个标准html模板文件中，转换过程完成。
27.本申请的有益效果：
28.本申请可以通过设计稿自动生成页面，做到成品页面和原设计稿一致。
29.本申请可以添加交互效果，添加动态数据，将页面部署到服务器，全程无需专业开发人员编码，提高了开发效率，降低了开发难度。
附图说明
30.图1为本申请实施例一种无代码web开发系统的系统结构图；
31.图2为本申请实施例一种无代码web开发系统的用户界面示意图。
具体实施方式
32.下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他
实施例，都属于本申请保护的范围。
33.除非另有明确定义，否则本文使用的所有术语具有与示例性实施例所属领域中的普通技术人员通常所理解的相同的含义。还应当理解，除非本文中另有明确定义，术语应当被解释为具有与发明时间时本领域普通技术人员所理解的说明书中的含义一致的含义，该说明书具有现有技术的上下文。
34.应当理解，对于本文中可能出现的术语“和/或”，其仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，单独存在b，同时存在a和b三种情况；对于本文中可能出现的术语“/和”，其是描述另一种关联对象关系，表示可以存在两种关系，例如，a/和b，可以表示：单独存在a，单独存在a和b两种情况；另外，对于本文中可能出现的字符“/”，一般表示前后关联对象是一种“或”关系。
35.应当理解，本文使用的术语仅用于描述特定实施例，并不意在限制本申请的示例实施例。若本文所使用的，单数形式“一”、“一个”以及“该”意在包括复数形式，除非上下文明确指示相反意思。还应当理解，若术语“包括”、“包括了”、“包含”和/或“包含了”在本文中被使用时,指定所声明的特征、整数、步骤、操作、单元和/或组件的存在性,并且不排除一个或多个其他特征、数量、步骤、操作、单元、组件和/或他们的组合存在性或增加。
36.如图1和图2所示，本申请实施例提出一种无代码web开发系统，所述系统包括用户界面、文件处理模块、页面处理模块；
37.所述用户界面用于处理用户终端的输入输出，用户通过对用户界面的操作调用系统的功能；
38.所述文件处理模块用于将设计稿文件中的树型图层信息数据转换为页面处理模块所需的json格式页面元素数据；每个节点的数据包含对应图层的尺寸、偏移量和base64编码的图像等信息。
39.所述页面处理模块用于将所述json格式页面元素数据转换生成浏览器可显示的文件格式的页面，包括html、css和javascript文件。
40.具体地，本申请实施例中，所述系统还包括项目管理模块，所述项目管理模块用于管理项目数据的读取和存储。
41.具体地，本申请实施例中，所述系统还包括页面托管服务，所述页面托管服务用于存放页面处理模块生成的页面和资源文件，提供url给访问者访问。
42.具体地，本申请实施例中，所述系统还包括业务中台，所述业务中台用于向所述页面处理模块提供动态数据的数据源接口定义，以及用于业务数据的新增、修改、查询、删除服务，例如添加商品到购物车、删除购物车商品、获取购物车商品列表、修改购物车商品数量等。
43.具体地，本申请实施例中，所述页面处理模块还用于处理页面元素的事件绑定和动态数据的获取。
44.具体地，本申请实施例中，所述页面元素划分为页面、布局、区块；所述页面包含至少一个布局；所述布局包含至少一个区块或者包含至少另外一个布局；所述区块为最小的可配置单元。具体地，所述页面、布局和区块具有样式配置和交互配置；所述布局具有布局方式配置；所述区块具有数据配置和内容配置。具体地，配置包含至少一个字段，字段由系统预先设计，字段的值由系统自动设置或用户通过选择或输入设置。
45.具体地，本申请实施例中，所述文件处理模块将设计稿文件中的树型图层信息数据转换为页面处理模块所需的json格式页面元素数据的具体过程为：
46.读取用户上传的设计稿文件(如psd文件)，遍历设计稿文件的树型图层信息数据；
47.每个节点对应一个页面元素，获取每个节点的宽度、高度、x轴偏移量、y轴偏移量、z轴偏移量、图像、富文本数据(节点的x轴偏移量、y轴偏移量是相对于画布左上角顶点的偏移量，z轴偏移量为图层垂直于屏幕平面方向的层叠顺序)；将获取到的每个节点的宽度、高度、x轴偏移量、y轴偏移量、z轴偏移量、图像、富文本数据转化为对应页面元素的宽度、高度、x轴偏移量、y轴偏移量、z轴偏移量、图像、富文本数据(页面元素的x轴偏移量、y轴偏移量是相对于浏览器渲染区域左上角顶点的偏移量，z轴偏移量为页面元素垂直于屏幕平面方向的层叠顺序，图像使用base64编码存储，富文本数据使用html和css编码存储)。
48.每个节点写入预设字段，所述预设字段的值由用户通过用户界面预设置，字段的说明如下表所示：
[0049][0050]
保持原树型结构不变，得到一个存储页面元素信息的json格式页面元素数据。
[0051]
具体地，本申请实施例中，所述页面处理模块将所述json格式页面元素数据转换生成浏览器可显示的文件格式的页面具体过程为：
[0052]
遍历所述json格式页面元素数据，将节点按预设规则逐个转化为html代码和css代码；其中预设规则为每个节点转换为div标签，所述div标签的id属性为节点的id字段值，div标签的标签内容为节点的富文本内容字段值，style属性如下表所示：
[0053][0054][0055]
上述转换完成后得到页面的html代码，在html代码尾部追加script标签用于注入脚本代码，具体如下：
[0056]
遍历上述json格式页面元素数据，当节点包含一组actiontrigger、actiontype、actionparams字段数据时，向上述script注入脚本代码，该脚本通过浏览器引擎具有的函数及对这些函数组合、封装而成的函数库，实现以下功能：通过该节点的id字段值，查询到html中匹配此id的div标签元素，根据actiontrigger枚举值在此元素上绑定相应的事件，根据actiontype枚举值调用事件执行函数，函数参数为actionparams。
[0057]
在上述遍历过程中，当节点包含一组datasrc、dataparams字段数据时，向上述script注入脚本代码，该脚本通过浏览器引擎具有的函数及对这些函数组合、封装而成的函数库，实现以下功能：通过该节点的id字段值，查询到html中匹配此id的div标签元素，发送异步http请求到datasrc值的url，参数为dataparams，处理请求的响应，使用handlebars模版引擎处理富文本内容和响应数据，将该div标签的内容替换为模板引擎处理结果。
[0058]
将注入脚本代码后的html代码注入一个标准html模板文件中，转换过程完成。
[0059]
如图1和图2所示，本申请实施例一种无代码web开发系统的工作原理如下：
[0060]
首先，用户通过用户界面点击“从文件导入”，上传本地的设计稿文件(如：.psd、.sketch、.xd等格式文件)，由文件处理模块把设计稿文件解析为json格式页面元素数据，其中，设计稿文件中的树型图层数据的叶子节点被解析为区块，其他节点被解析为布局。
[0061]
其次，用户也可以点击用户界面中的“添加布局”、“添加区块”，向空白页面或由设计稿生成的页面中添加布局和区块。
[0062]
然后，所述页面处理模块将上述json格式页面元素数据转化为浏览器可识别以及显示的html代码和css代码，显示在用户界面的预览区域。
[0063]
用户可以通过点击用户界面预览区域中的某个布局或区块，使其进入编辑模式，随即显示配置界面，用户可以在该配置界面完成布局或区块的各项配置。
[0064]
具体地，可配置的内容如下：用户可以点击用户界面中的“布局方式”选项卡配置该布局内区块的排列和定位方式。
[0065]
用户可以点击用户界面中的“样式”选项卡配置区块的尺寸、背景等样式。
[0066]
用户可以点击用户界面中的“数据”选项卡配置动态数据，此时界面显示一个数据源选择列表，该列表项由业务中台模块提供的业务功能所决定。当用户从数据源选择列表中选择所需的数据源时，界面会匹配显示该数据源所需的参数和输出的字段。
[0067]
用户可以点击用户界面中的“内容”选项卡配置区块的内容，此时配置界面会显示一个富文本编辑器，用户可以输入文本内容、编辑文本样式、插入图片。文本内容使用模版引擎，上述配置的数据源动态获取的数据字段可以通过模板语法显示，如：{{key}}。
[0068]
用户可以点击用户界面中的“交互”选项卡配置区块的交互行为。用户可以从事件列表中选择点击、定时等触发条件，界面会匹配显示该事件的参数，如定时执行的间隔时间。用户可以从执行列表中选择要执行的命令，界面会匹配显示该命令的参数，如打开页面的页面唯一标识。
[0069]
用户可以点击用户界面中的“预览”，系统将页面部署到页面托管服务，用户可以通过特定的url预览页面发布后的效果。
[0070]
用户可以点击用户界面中的“发布”，选择“测试环境”或“线上环境”，将页面部署到相应的页面托管服务。此时访客可通过特定的url访问该页面。
[0071]
本申请实施例具有以下优点：本申请可以通过设计稿自动生成页面，做到成品页面和原设计稿一致。本申请可以添加交互效果，添加动态数据，将页面部署到服务器，全程无需专业开发人员编码，提高了开发效率，降低了开发难度。
[0072]
在本申请的一个实施例中，所述一种无代码web开发系统可以部署于桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算设备可包括，但不仅限于，处理器、存储器、显示器。本领域技术人员可以理解，上述部件仅仅是示例，并不构成对计算设备的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述计算设备还可以包括输入输出设备、网络接入设备、总线等。
[0073]
所称处理器可以是中央处理单元(central processing unit，cpu)，还可以是其他通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field
‑
programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
[0074]
所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述面向web的页面构建系统的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、文字转换功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、文字消息数据等)等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(smart media card,smc)，安全数字(securedigital,sd)卡，闪存卡(flash card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
[0075]
在上述实施例中。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介
质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solid state disk(ssd))等。
[0076]
以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。
[0077]
最后应说明的是，本申请不局限于上述可选的实施方式，任何人在本申请的启示下都可得出其他各种形式的产品。上述具体实施方式不应理解成对本申请的保护范围的限制，本申请的保护范围应当以权利要求书中界定的为准，并且说明书可以用于解释权利要求书。