CN112631574A - 一种基于JavaWeb的前端可视化开发平台 - Google Patents

Abstract

本发明提供一种基于JavaWeb的前端可视化开发平台，属于Web开发技术领域，本发明展示形式为网站，分为两个部分，一部分为用户系统，一部分为业务系统，登录注册会员后可通过前端拖拽等形式形成前端页面，提交给审核人员审核后可发布在云服务器上以供浏览。

Description

一种基于JavaWeb的前端可视化开发平台

技术领域

本发明涉及Web开发、云服务技术领域，尤其涉及一种基于JavaWeb的前端可视化开发平台。

背景技术

随着前端组件化趋势的发展，前端开发框架呈现百花齐放众彩纷呈的局面，但是对于企业级开发中经常会遇到交互简单页面很多的需求。现有的开发框架中有不具备通用性的问题，其提供了全面的解决方案但是使用时不具备易用性的特点。

此外，使用通用组件形成的前端项目其需要的存储空间一般比较小，服务器的安全管理也越来越完善，而前端网站的需求却越来越多，但是网站的编写发布却一般只有开发人员和运维人员才会，亦不具备易用性。

发明内容

为了解决以上技术问题，本发明提供了一种基于JavaWeb的前端可视化开发平台，提供前端网站开发并线上发布前后端分离的前端项目，简化前端项目开发及发布流程。

本发明的技术方案是：

一种基于JavaWeb的前端可视化开发平台，展示形式为网站，分为两个部分，一部分为用户系统，一部分为业务系统；

所述用户系统，分为普通用户系统、会员系统、审核系统；其中，普通用户系统可以浏览在本平台发布过的样例网站，会员系统可以在本平台构建并发布网站同时具有普通用户的权益，审核系统可以审核会员提交审核的网站的网站内容及代码，待审核成功后可将其发布到服务器上以供用户使用；

所述业务系统，包括：浏览网站数据、查看自己创建的网站列表和网站的新建与发布、审核网站。

进一步的，

对于网站的新建，分为三个区域，一个区域为组件区，一个区域为预览区，一个区域为属性事件区；

组件区中提供基础组件，组件区中的组件可拖拽到预览区，组件区中可新建自定义组件；

预览区中可通过鼠标拖拽的形式修改组建的布局跟大小，其中组件的布局是flex布局，满足不同浏览器的自适应情况；

双击预览器的组件时，属性事件区呈现该组件的属性，包括该组件的类、所有css属性、以及事件，可动态编辑组件的类跟事件。

进一步的，

还设有网站css修改按钮，通过该按钮进入修改该网站的css文件，动态添加css类。

进一步的，

若新建事件，则提供基础事件可选择；点击事件，选择新建点击事件时需要选择组件的类，希望对类做出的动作，基础动作为消失显示，通过编写js代码自定义动作，网站新建完成后保存或提交审核。

对于接口请求提供封装，在事件里使用。

对于新建组件，分为三个区域即组件区、预览区、属性事件区；

组件区提供基础组件，基础组件拖动到预览区调整更改属性事件后可选择发布为基础组件或者该网站组件，发布为基础组件后更新该用户的基础组件库，发布为该网站的组件时更新本网站的组件库。

进一步的，

对于网站的提交审核，网站提交审核之后会形成该网站的静态文件夹，该静态文件夹储存在只可供审核系统查看的硬盘下，并只具有只读权限。

审核系统查看审核列表中的数据进行审核时，需对指定的静态文件夹进行审核，符合规定的，将该目录移动到ngnix对外暴露的地方。

本发明的有益效果是

(1)简化前后分离项目的前端开发流程。

(2)简化网站发布流程。网站完成审核后即可发布，用户只需要一台域名服务器转发到发布后的网址即可打造属于自己域名的网站。

附图说明

图1是本发明的整体工作框图；

图2是新建网站示意图；

图3是新建组件示意图；

图4是工作流程示意图。

具体实施方式

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

本发明的一种基于JavaWeb的前端可视化开发平台，登录注册会员后可通过前端拖拽等形式形成前端页面，提交给审核审核后可发布在云服务器上以供浏览。

该平台的展示形式为网站。

该平台分为两个部分，一部分为用户系统，一部分为业务系统。

对于用户系统，分为普通用户系统、会员系统、及审核系统。其中，普通用户系统可以浏览在本平台发布过的样例网站，会员系统可以在本平台构建并发布网站同时具有普通用户的权益，审核系统可以审核会员提交审核的网站的网站内容及代码，待审核成功后可将其发布到服务器上以供用户使用。

对于业务系统，主要分为三个功能，一为浏览网站数据，二为查看自己创建的网站列表和网站的新建与发布，三为审核网站。

对于网站的新建，分为三个区域，一个区域为组件区，一个区域为预览区，一个区域为属性事件区。组件区中提供基础组件，组件区中的组件可以拖拽到预览区，组件区中可以新建自定义组件。预览区中可以通过鼠标拖拽的形式修改组建的布局跟大小，其中组件的布局是flex布局，满足不同浏览器的自适应情况。双击预览器的组件时，属性事件区会呈现该组件的属性，包该组件的类、所有css属性、以及事件，可动态编辑组件的类跟事件。有个网站css修改按钮，点击后会进入修改该网站的css文件，可动态添加css类，满足个性化需求。可以新建事件，提供基础事件可选择，如点击事件，选择新建点击事件时需要选择组件的类，希望对类做出的动作，基础动作为消失显示，可通过编写js代码自定义动作，满足个性化需求。网站新建完成后可保存或提交审核。

对于接口请求，该平台提供封装的方法，可以在事件里使用。

对于新建组件，同网站新建同样分为三个区域。组件区、预览区、属性事件区。组件区提供基础组件，基础组件拖动到预览区调整更改属性事件后可选择发布为基础组件或者该网站组件，发布为基础组件后更新该用户的基础组件库，发布为该网站的组件时更新本网站的组件库。

对于网站的提交审核，网站提交审核之后会形成该网站的静态文件夹，该静态文件夹储存在只可供审核系统查看的硬盘下，并只具有只读权限，审核系统查看到审核列表中的数据进行审核时，需对指定的静态文件夹进行审核，符合安全及其他规定时，才可将该目录移动到ngnix对外暴露的地方。

以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (8)

1.一种基于JavaWeb的前端可视化开发平台，其特征在于，展示形式为网站，分为两个部分，一部分为用户系统，一部分为业务系统；

所述用户系统，分为普通用户系统、会员系统、审核系统；其中，普通用户系统可以浏览在本平台发布过的样例网站，会员系统可以在本平台构建并发布网站同时具有普通用户的权益，审核系统可以审核会员提交审核的网站的网站内容及代码，待审核成功后可将其发布到服务器上以供用户使用；

所述业务系统，包括：浏览网站数据、查看自己创建的网站列表和网站的新建与发布、审核网站。

2.根据权利要求1所述的平台，其特征在于，

对于网站的新建，分为三个区域，一个区域为组件区，一个区域为预览区，一个区域为属性事件区；

组件区中提供基础组件，组件区中的组件可拖拽到预览区，组件区中可新建自定义组件；

预览区中可通过鼠标拖拽的形式修改组建的布局跟大小，其中组件的布局是flex布局，满足不同浏览器的自适应情况；

双击预览器的组件时，属性事件区呈现该组件的属性，包括该组件的类、所有css属性、以及事件，可动态编辑组件的类跟事件。

3.根据权利要求2所述的平台，其特征在于，

还设有网站css修改按钮，通过该按钮进入修改该网站的css文件，动态添加css类。

4.根据权利要求3所述的平台，其特征在于，

若新建事件，则提供基础事件可选择；点击事件，选择新建点击事件时需要选择组件的类，希望对类做出的动作，基础动作为消失显示，通过编写js代码自定义动作，网站新建完成后保存或提交审核。

5.根据权利要求4所述的平台，其特征在于，

对于接口请求提供封装，在事件里使用。

6.根据权利要求4所述的平台，其特征在于，

对于新建组件，分为三个区域即组件区、预览区、属性事件区；

组件区提供基础组件，基础组件拖动到预览区调整更改属性事件后可选择发布为基础组件或者该网站组件，发布为基础组件后更新该用户的基础组件库，发布为该网站的组件时更新本网站的组件库。

7.根据权利要求6所述的平台，其特征在于，

对于网站的提交审核，网站提交审核之后会形成该网站的静态文件夹，该静态文件夹储存在只可供审核系统查看的硬盘下，并只具有只读权限。

8.根据权利要求2所述的平台，其特征在于，

审核系统查看审核列表中的数据进行审核时，需对指定的静态文件夹进行审核，符合规定的，将该目录移动到ngnix对外暴露的地方。

Images