介

JeeWeb是一款基于SpringBoot 2+Spring+Mybatis+Hibernate的敏捷開發(fā)系統(tǒng)；它是一款具有代碼生成功能的智能快速開發(fā)平臺(tái)；是以Spring Framework為核心容器，Spring MVC為模型視圖控制器，Hibernate為數(shù)據(jù)訪問(wèn)層， Apache Shiro為權(quán)限授權(quán)層，Ehcahe對(duì)常用數(shù)據(jù)進(jìn)行緩存，Disruptor作為并發(fā)框架，Bootstrap作為前端框架的優(yōu)秀 開源 系統(tǒng)。

JeeWeb是一款 全開源開發(fā)平臺(tái) ，特別 代碼生成器模塊也采用開源模式 ，各位開發(fā)者可以根據(jù)自己的需要改造出更加適合自己的代碼生成器，不管是做項(xiàng)目、學(xué)習(xí)、接私活它都將是你的最佳拍檔；

JeeWeb主要定位于企業(yè)快速開發(fā)平臺(tái)建設(shè)，已內(nèi)置很多優(yōu)秀的基礎(chǔ)功能和高效的 代碼生成 工具，包括：系統(tǒng)權(quán)限組件、數(shù)據(jù)權(quán)限組件、數(shù)據(jù)字典組件、核心工具組件、視圖操作組件、代碼生成、 UI模版標(biāo)簽 庫(kù)等。前端界面風(fēng)格采用了結(jié)構(gòu)簡(jiǎn)單、性能優(yōu)良、頁(yè)面美觀大氣的Twitter Bootstrap頁(yè)面展示框架。采用分層設(shè)計(jì)、提交數(shù)據(jù)安全編碼、密碼加密、訪問(wèn)驗(yàn)證、數(shù)據(jù)權(quán)限驗(yàn)證。使用Maven做項(xiàng)目管理，提高項(xiàng)目的易開發(fā)性、擴(kuò)展性。

目前功能模塊代碼生成器、權(quán)限框架、數(shù)據(jù)字典、數(shù)據(jù)緩存、并發(fā)框架、數(shù)據(jù)監(jiān)控、計(jì)劃任務(wù)、多數(shù)據(jù)源管理、附件管理、類似mybatis動(dòng)態(tài)SQL、UI模板標(biāo)簽、短信發(fā)送、郵件發(fā)送、統(tǒng)計(jì)功能等功能。

JeeWeb的開發(fā)方式采用（ 代碼生成器快速設(shè)計(jì)生成代碼->手工完善邏輯->豐富模板標(biāo)簽快速前端開發(fā) ），可以快速協(xié)助java開發(fā)人員解決60%的重復(fù)工作，讓開發(fā)人員更多關(guān)注業(yè)務(wù)邏輯的實(shí)現(xiàn)，框架使用前端模板標(biāo)簽，解放JAVA開發(fā)人員的開發(fā)壓力，提高開發(fā)效率，為企業(yè)節(jié)省項(xiàng)目研發(fā)成本，減少開發(fā)周期。

后臺(tái)框架演示（支持兩種前端樣式自由切換）

論壇演示

前后端分離演示

JeeWeb 技術(shù)特點(diǎn)

JeeWeb使用目前流程的WEB開發(fā)架構(gòu)技術(shù)，如 SpringBoot,Mybatis, Hibernate,Apache Shiro, Disruptor , ehcache, Jquery ,BootStrap等等，支持多種數(shù)據(jù)庫(kù)MySQL, Oracle, sqlserver等。 分層設(shè)計(jì)：使用分層設(shè)計(jì)，分為dao，service，Controller，view層，層次清楚，低耦合，高內(nèi)聚。

安全考慮：嚴(yán)格遵循了web安全的規(guī)范，前后臺(tái)雙重驗(yàn)證，參數(shù)編碼傳輸，密碼md5加密存儲(chǔ)，shiro權(quán)限驗(yàn)證，從根本上避免了SQL注入，XSS攻擊，CSRF攻擊等常見的web攻擊手段。

JeeWeb 功能特點(diǎn)

• SpringBoot+Spring+Mybatis+Hibernate+Shiro+ Ehcache+Disruptor+Jquery + Boostrap + Ztree等基礎(chǔ)前后端架構(gòu)架構(gòu)
• 采用面向聲明的開發(fā)模式， 基于泛型編寫極少代碼即可實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)展示、數(shù)據(jù)編輯、表單處理等功能，在不使用代碼生成器的情況下，也只需要很少的代碼就能實(shí)現(xiàn)基礎(chǔ)的CURD操作，再配合在線開發(fā)與代碼生成器的使用，更加加快了開發(fā)的進(jìn)度，將J2EE的開發(fā)效率成本提高，可以將代碼減少60%以上。
• 在線開發(fā)(通過(guò)在線配置實(shí)現(xiàn)一個(gè)表模型的增刪改查功能，無(wú)需一行代碼，支持用戶自定義表單布局)
• 代碼生成器，支持多種數(shù)據(jù)模型,根據(jù)表生成對(duì)應(yīng)的Entity,Service,Dao,Controller,JSP等,增刪改查功能生成直接使用
• UI標(biāo)簽開發(fā)庫(kù)，針對(duì)前端UI進(jìn)行標(biāo)準(zhǔn)封裝表，頁(yè)面統(tǒng)一采用UI標(biāo)簽實(shí)現(xiàn)功能：數(shù)據(jù)datagrid,treegrid,FileInput,Editor,GridSelect等，實(shí)現(xiàn)JSP頁(yè)面零JS，開發(fā)維護(hù)簡(jiǎn)潔高效
• 查詢過(guò)濾器：只需前端配置，后臺(tái)動(dòng)態(tài)拼SQL追加查詢條件；支持多種匹配方式（全匹配/模糊查詢/包含查詢/不匹配查詢）
• 移動(dòng)平臺(tái)支持，對(duì)Bootstrap(兼容Html5)進(jìn)行標(biāo)準(zhǔn)封裝
• 靈活的權(quán)限控制，可控制到頁(yè)面或按鈕，滿足絕大部分的權(quán)限需求,優(yōu)化權(quán)限注解方便權(quán)限配置
• 完善的XSS防范及腳本過(guò)濾，徹底杜絕XSS攻擊
• 支持分布式部署，session存儲(chǔ)在redis中
• 友好的代碼結(jié)構(gòu)及注釋，便于閱讀及二次開發(fā)
• 引入quartz定時(shí)任務(wù)，可動(dòng)態(tài)完成任務(wù)的添加、修改、刪除、暫停、恢復(fù)及日志查看等功能
• 引入swagger文檔支持，方便編寫API接口文檔
• 國(guó)際化（支持多語(yǔ)言，國(guó)際化的封裝為多語(yǔ)言做了便捷支持）
• 多數(shù)據(jù)源（在線配置數(shù)據(jù)源，數(shù)據(jù)源工作類封裝）
• 數(shù)據(jù)權(quán)限：整合Shiro權(quán)限
• 計(jì)劃任務(wù)控制（在線配置計(jì)劃任務(wù)、方便計(jì)劃任務(wù)的時(shí)間調(diào)整規(guī)劃）
• 郵件發(fā)送（配置郵件模版、郵件帳號(hào)的在線配置、郵件異步發(fā)送、郵件發(fā)送日志功能統(tǒng)計(jì)）
• 短信發(fā)送（配置短信模版、短信帳號(hào)的在線配置、短信異步發(fā)送、短信發(fā)送日志功能統(tǒng)計(jì)、支持短信發(fā)送平臺(tái)動(dòng)態(tài)切換）
• 多種首頁(yè)風(fēng)格切換,支持自定義首頁(yè)風(fēng)格。（Inspinia風(fēng)格|ACE風(fēng)格）
• 數(shù)據(jù)統(tǒng)計(jì)報(bào)表：豐富的報(bào)表統(tǒng)計(jì)功能
• 支持多種瀏覽器: Google, 火狐, IE,360 等
• 支持?jǐn)?shù)據(jù)庫(kù): Mysql,Oracle10g,SqlServer等
• 基礎(chǔ)權(quán)限: 用戶，角色，菜單權(quán)限
• Web容器測(cè)試通過(guò)的有Jetty和Tomcat,Weblogic
• 要求JDK1.8+

技術(shù)選型

1、后端

• 核心框架：Spring boot2.0、Spring Framework
• 安全框架：Apache Shiro
• 服務(wù)端驗(yàn)證：Hibernate Validator
• 模板標(biāo)簽：Beetl
• 任務(wù)調(diào)度：Quartz
• 持久層框架：Hibernate
• 數(shù)據(jù)庫(kù)連接池：Alibaba Druid
• 緩存框架：Redis、Ehcache
• 并發(fā)框架：Disruptor
• 日志管理：SLF4J、Log4j
• 工具類：Apache Commons、Jackson、Xstream、

2、前端

• JS框架：jQuery。
• CSS框架：Twitter Bootstrap
• 客戶端驗(yàn)證：Validform。
• 富文本在線編輯：markdown、simditor、Summernote、CodeMirror自由切換
• 文件上傳工具:Bootstrap fileinput
• 數(shù)據(jù)表格：jqGrid
• 對(duì)話框：layer
• 樹結(jié)構(gòu)控件：jQuery zTree
• 日期控件： datepicker
• 代碼高亮： syntaxhighlighter

簡(jiǎn)單使用說(shuō)明

• 導(dǎo)入jeeweb目錄下的，具體模塊sql/mysql.sql文件到mysql數(shù)據(jù)庫(kù)
• 導(dǎo)入項(xiàng)目到Idea,(項(xiàng)目目前使用分模塊開發(fā)，我們建議是用IDEA開發(fā)).
• 修改數(shù)據(jù)庫(kù)配置文件application.yml中的賬號(hào)密碼.
• 啟動(dòng)項(xiàng)目,管理員賬號(hào)admin/密碼123456

平臺(tái)目錄結(jié)構(gòu)說(shuō)明

jeeweb
├─jeeweb-common 公共模塊
│ ├─jeeweb-common-base 公用基礎(chǔ)模塊
│ │ 
│ ├─jeeweb-common-email 郵件基礎(chǔ)模塊
│ │ 
│ ├─jeeweb-common-hibernatemvc hibernate公用模塊
│ │ 
│ ├─jeeweb-common-mybatismvc mybatis公用模塊
│ │ 
│ ├─jeeweb-common-oss 數(shù)據(jù)存儲(chǔ)公用模塊
│ │ 
│ ├─jeeweb-common-quartz quartz公用模塊
│ │ 
│ ├─jeeweb-common-query 查詢封裝模塊
│ │ 
│ ├─jeeweb-common-security 安全公用模塊
│ │ 
│ ├─jeeweb-common-sms 短信公用模塊
│ │ 
│ └─jeeweb-common-utils 公用工具模塊
│ 
├─jeeweb-ui UI模塊
│ ├─jeeweb-beetl-tag 基于beetl的類似spring form的模板標(biāo)簽
│ │ 
│ ├─jeeweb-ui-static 公用靜態(tài)資源模塊
│ │ 
│ └─jeeweb-ui-tag 基于靜態(tài)資源模塊的標(biāo)簽
│ 
├─jeeweb-web 業(yè)務(wù)模塊
│ ├─jeeweb-admin 后臺(tái)案例模塊
│ │ 
│ ├─jeeweb-bbs Jeeweb官方論壇代碼模塊
│ │ 
│ ├─jeeweb-vue 前后端分離后端模塊
│ │ 
│ └─jeeweb-generator 代碼生成器模塊
│

代碼示例

[1].GRID列表

<#grid:grid id="onlineGrid" datatype="local" datas="${onlineSessionList}" sortname="startTimestamp" sortorder="desc">
 <#grid:column label="sys.common.key" hidden="true" name="id" width="100"/>
 <#grid:column label="用戶" name="username" />
 <#grid:column label="用戶主機(jī)IP" name="host" />
 <#grid:column label="系統(tǒng)主機(jī)IP" name="systemHost" />
 <#grid:column label="登錄時(shí)間" name="startTimestamp" width="140" queryMode="date" condition="between" />
 <#grid:column label="最后訪問(wèn)時(shí)間" name="lastAccessTime" width="140"/>
 <#grid:column label="狀態(tài)" name="status" dict="onlinestatus" />
 <#grid:column label="User-Agent" name="userAgent" />
 <#grid:column label="用戶會(huì)話ID" name="id" />
 <#grid:toolbar title="強(qiáng)制退出" btnclass="btn-danger" icon="fa-trash-o" function="toolbarSelectConfirm" url="${adminPath}/sys/online/forceLogout" tipMsg="您確定要強(qiáng)制退出這些信息么，請(qǐng)謹(jǐn)慎操作！"/>
</#grid:grid>

[2].TREEGRID列表

<#grid:grid id="organizationGrid" async="true" treeGrid="true" expandColumn="name" url="${adminPath}/sys/organization/ajaxTreeList">
	<#grid:column label="sys.common.key" hidden="true" name="id" width="100"/>
	<#grid:column label="sys.organization.name" name="name" query="true" condition="like" />
	<#grid:column label="sys.organization.remarks" name="remarks" />
	<#grid:column label="sys.common.opt" name="opt" formatter="button" width="100"/>
	<#grid:button groupname="opt" function="delete" />
	<#grid:toolbar function="add"/>
	<#grid:toolbar function="update"/>
	<#grid:toolbar function="delete"/>
	<#grid:toolbar function="search"/>
	<#grid:toolbar function="reset"/>
</#grid:grid>

[3].表單代碼

<% layout('/layouts/form.html', {title: @MessageUtils.getMessage('sys.user.updateuser',''), formId: 'userForm', bodyClass: 'white-bg', libs: 'bootstrap-fileinput'}){ %>
<#form:form id="userForm" modelAttribute="data" method="post" class="form-horizontal">
 <#form:hidden path="id" />
 <table class="table table-bordered table-condensed dataTables-example dataTable no-footer">
 <tbody>
 <tr>
 <td class="width-15 active text-right">
 <label>用戶名:</label></td>
 <td class="width-35">${data.username}</td>
 <td class="width-15 active text-right">
 <label>
 <font color="red">*</font>姓名:</label></td>
 <td class="width-35">
 <#form:input path="realname" class="form-control " datatype="*" nullmsg="請(qǐng)輸入姓名！" htmlEscape="false" />
 <label class="Validform_checktip"></label>
 </td>
 </tr>
 <tr>
 <td class="width-15 active text-right">
 <label>
 <font color="red">*</font>郵箱:</label></td>
 <td class="width-35">
 <#form:input path="email" class="form-control" datatype="e" nullmsg="請(qǐng)輸入姓名！" htmlEscape="false" />
 <label class="Validform_checktip"></label>
 </td>
 <td class="width-15 active text-right">
 <label>
 <font color="red">*</font>聯(lián)系電話:</label></td>
 <td class="width-35">
 <#form:input path="phone" class="form-control" htmlEscape="false" datatype="m" nullmsg="請(qǐng)輸入用戶名！" />
 <label class="Validform_checktip"></label>
 </td>
 </tr>
 <tr>
 <td class="active">
 <label class="pull-right">
 <font color="red">*</font>用戶角色:</label></td>
 <td colspan="3">
 <#form:checkboxes path="roleIdList" nested="false" items="${allRoles}" defaultValue="${roleIdList}" itemLabel="name" itemValue="id" htmlEscape="false" cssClass="i-checks required" /></td>
 </tr>
 <tr>
 <td class="width-15 active">
 <label class="pull-right">組織機(jī)構(gòu):</label></td>
 <td colspan="3">
 <#form:treeselect title="請(qǐng)選擇組織機(jī)構(gòu)" path="organizationIds" nested="false" dataUrl="${adminPath}/sys/organization/treeData" chkboxType="" labelName="parentname" labelValue="${organizationNames}" multiselect="true" /></td>
 </tr>
 </tbody>
 </table>
</#form:form>
<% } %>

git地址：https://gitee.com/dataact/jeeweb

紹

VvvebJs是一個(gè)開源的網(wǎng)頁(yè)拖拽自動(dòng)生成的JavaScript庫(kù)，你可以以簡(jiǎn)單拖拽的方式生成自己需要的網(wǎng)頁(yè)樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁(yè)的構(gòu)建，非常的方便，而且可以實(shí)時(shí)修改代碼，功能豐富，使用簡(jiǎn)單，界面友好，特別適合一些專注于展示的網(wǎng)頁(yè)設(shè)計(jì)，需要的朋友不可錯(cuò)過(guò)！

Github地址

https://github.com/givanz/VvvebJs

相關(guān)特性

• 1、組件和塊/片段拖放。
• 2、撤銷/重做操作。
• 3、一個(gè)或兩個(gè)面板界面。
• 4、文件管理器和組件層次結(jié)構(gòu)導(dǎo)航添加新頁(yè)面。
• 5、實(shí)時(shí)代碼編輯器。
• 6、包含示例php腳本的圖像上傳。
• 7、頁(yè)面下載或?qū)С鰄tml或保存頁(yè)面在服務(wù)器上包含示例PHP腳本。
• 8、組件/塊列表搜索。
• 9、Bootstrap 4組件等組件

默認(rèn)情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進(jìn)行擴(kuò)展。

使用方式

如下代碼：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個(gè)參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個(gè)參數(shù)是頁(yè)面加載完成時(shí)調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();

• 結(jié)構(gòu)

Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對(duì)象僅用于在編輯器左側(cè)面板中對(duì)組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下

Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];

Component是一個(gè)對(duì)象，它提供可以在畫布上放置的html以及在選擇組件時(shí)可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component屬性集合中使用Input對(duì)象來(lái)編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對(duì)象并定義為：

var TextInput=$.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

輸入還需要一個(gè)在編輯器html（在editor.html中）定義為<script>標(biāo)簽的模板，其id為vvveb-input-inputname，例如對(duì)于文本輸入為vvveb-input-textinput，定義：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助瀏覽器翻譯工具，對(duì)官網(wǎng)的文檔進(jìn)行簡(jiǎn)單的翻譯，可能會(huì)有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計(jì)界面預(yù)覽

總結(jié)

VvvebJs是一個(gè)非常強(qiáng)大的網(wǎng)頁(yè)可視化生成構(gòu)建工具，讓不懂網(wǎng)頁(yè)設(shè)計(jì)的小伙伴們也能夠通過(guò)拖拽來(lái)生成美觀大方的網(wǎng)頁(yè)出來(lái)，讓設(shè)計(jì)網(wǎng)頁(yè)就像設(shè)計(jì)圖片一樣，VvvebJs特別適合展示型網(wǎng)頁(yè)，甚至可以不需要代碼就能完成一項(xiàng)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)，總體來(lái)說(shuō)，VvvebJs是一個(gè)值得嘗試的工具！