一种无代码Web开发系统技术方案

本申请涉及计算机技术领域，尤其涉及一种无代码Web开发系统。所述系统包括用户界面、文件处理模块、页面处理模块；所述用户界面用于处理用户终端的输入输出，用户通过对用户界面的操作调用系统的功能；所述文件处理模块用于将设计稿文件中的图层信息数据转换为页面处理模块所需的JSON格式页面元素数据；所述页面处理模块用于将所述JSON格式页面元素数据转换生成浏览器可显示的文件格式的页面。本申请可以通过设计稿自动生成页面，做到成品页面和原设计稿一致；本申请可以添加交互效果，添加动态数据，将页面部署到服务器，全程无需专业开发人员编码，提高了开发效率，降低了开发难度。度。度。

【技术实现步骤摘要】
一种无代码Web开发系统


[0001]本申请涉及计算机
，尤其涉及一种无代码Web开发系统。

技术介绍

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

技术实现思路

[0006]本申请的目的在于，针对上述所提出的问题，提供了一种无代码Web开发系统，使用户可以不具备专业开发知识，无需编写程序代码，将PSD等格式的设计稿文件制作成具有交互操作和动态数据的显示、提交等较复杂功能的页面供访问者使用。
[0007]本申请的技术方案如下：
[0008]一种无代码Web开发系统，所述系统包括用户界面、文件处理模块、页面处理模块；
[0009]所述用户界面用于处理用户终端的输入输出，用户通过对用户界面的操作调用系统的功能；
[0010]所述文件处理模块用于将设计稿文件中的图层信息数据转换为页面处理模块所需的JSON格式页面元素数据；
[0011]所述页面处理模块用于将所述JSON格式页面元素数据转换生成浏览器可显示的文件格式的页面。
[0012]进一步的改进在于，所述系统还包括项目管理模块，所述项目管理模块用于管理项目数据的读取和存储。
[0013]进一步的改进在于，所述系统还包括页面托管服务，所述页面托管服务用于存放
页面处理模块生成的页面和资源文件，提供URL给访问者访问。
[0014]进一步的改进在于，所述系统还包括业务中台，所述业务中台用于向所述页面处理模块提供动态数据的数据源接口定义，以及用于业务数据的新增、修改、查询、删除服务。
[0015]进一步的改进在于，所述页面处理模块还用于处理页面元素的事件绑定和动态数据的获取。
[0016]进一步的改进在于，所述页面元素包括页面、布局、区块；所述页面包含至少一个布局；所述布局包含至少一个区块或者包含至少另外一个布局；所述区块为最小的可配置单元。
[0017]进一步的改进在于，所述页面、布局和区块具有样式配置和交互配置；所述布局具有布局方式配置；所述区块具有数据配置和内容配置。
[0018]进一步的改进在于，配置包含至少一个字段，字段由系统预先设计，字段的值由系统自动设置或用户通过选择或输入设置。
[0019]进一步的改进在于，所述文件处理模块将设计稿文件中的图层信息数据转换为页面处理模块所需的JSON格式页面元素数据的具体过程为：
[0020]遍历设计稿文件的图层信息数据；
[0021]每个节点对应一个页面元素，获取每个节点的宽度、高度、X轴偏移量、Y轴偏移量、Z轴偏移量、图像、富文本数据，将其转化为对应页面元素的宽度、高度、X轴偏移量、Y轴偏移量、Z轴偏移量、图像、富文本数据；
[0022]每个节点写入预设字段，所述预设字段的值由用户通过用户界面预设置；保持原结构不变，得到一个存储页面元素信息的JSON格式页面元素数据。
[0023]进一步的改进在于，所述页面处理模块将所述JSON格式页面元素数据转换生成浏览器可显示的文件格式的页面具体过程为：
[0024]遍历所述JSON格式页面元素数据，将节点按预设规则逐个转化为HTML代码和CSS代码；
[0025]在HTML代码尾部追加SCRIPT标签用于注入脚本代码；
[0026]将注入脚本代码后的HTML代码注入一个标准HTML模板文件中，转换过程完成。
[0027]本申请的有益效果：
[0028]本申请可以通过设计稿自动生成页面，做到成品页面和原设计稿一致。
[0029]本申请可以添加交互效果，添加动态数据，将页面部署到服务器，全程无需专业开发人员编码，提高了开发效率，降低了开发难度。
附图说明
[0030]图1为本申请实施例一种无代码Web开发系统的系统结构图；
[0031]图2为本申请实施例一种无代码Web开发系统的用户界面示意图。
具体实施方式
[0032]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他
实施例，都属于本申请保护的范围。
[0033]除非另有明确定义，否则本文使用的所有术语具有与示例性实施例所属领域中的普通技术人员通常所理解的相同的含义。还应当理解，除非本文中另有明确定义，术语应当被解释为具有与专利技术时间时本领域普通技术人员所理解的说明书中的含义一致的含义，该说明书具有现有技术的上下文。
[0034]应当理解，对于本文中可能出现的术语“和/或”，其仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，单独存在B，同时存在A和B三种情况；对于本文中可能出现的术语“/和”，其是描述另一种关联对象关系，表示可以存在两种关系，例如，A/和B，可以表示：单独存在A，单独存在A和B两种情况；另外，对于本文中可能出现的字符“/”，一般表示前后关联对象是一种“或”关系。
[0035]应当理解，本文使用的术语仅用于描述特定实施例，并不意在限制本申请的示例实施例。若本文所使用的，单数形式“一”、“一个”以及“该”意在包括复数形式，除非上下文明确指示相反意思。还应当理解，若术语“包括”、“包括了”、“包含”和/或“包含了”在本文中被使用时,指定所声明的特征、整数、步骤、操作、单元和/或组件的存在性,并且不排本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种无代码Web开发系统，其特征在于，所述系统包括用户界面、文件处理模块、页面处理模块；所述用户界面用于处理用户终端的输入输出，用户通过对用户界面的操作调用系统的功能；所述文件处理模块用于将设计稿文件中的图层信息数据转换为页面处理模块所需的JSON格式页面元素数据；所述页面处理模块用于将所述JSON格式页面元素数据转换生成浏览器可显示的文件格式的页面。2.根据权利要求1所述的一种无代码Web开发系统，其特征在于，所述系统还包括项目管理模块，所述项目管理模块用于管理项目数据的读取和存储。3.根据权利要求1所述的一种无代码Web开发系统，其特征在于，所述系统还包括页面托管服务，所述页面托管服务用于存放页面处理模块生成的页面和资源文件，提供URL给访问者访问。4.根据权利要求1所述的一种无代码Web开发系统，其特征在于，所述系统还包括业务中台，所述业务中台用于向所述页面处理模块提供动态数据的数据源接口定义，以及用于业务数据的新增、修改、查询、删除服务。5.根据权利要求1所述的一种无代码Web开发系统，其特征在于，所述页面处理模块还用于处理页面元素的事件绑定和动态数据的获取。6.根据权利要求1所述的一种无代码Web开发系统，其特征在于，所述页面元素包括页面、布局、区块；所述页面包含至少一个布局；所述布局包含至少一个区块或者包含至少另外一个布局；所述区块为最小的可配置单元。7.根据权利要求6所述的一种无...

【专利技术属性】
技术研发人员：孙极，王琪，黄仕彪，罗成行，周奕，莫子睿，王程，
申请(专利权)人：广州博恒信息科技有限责任公司，
类型：发明
国别省市：