先讲一下架构师的定义:架构师负责设计系统整体架构,从需求到设计的每个细节都要考虑到,把握整个项目,使设计的项目尽量效率高,开发容易,维护方便,升级简单。架构师的主要责任是提供开发人员和项目经理之间的共用沟通媒体。他们负责让业务规则及需求与工程实践及限制相适应,以确保成功。
好了,书归正传,为什么选择easyui,先看easyui的优点:
1)jQueryEasyUI是一种基于jQuery的用户界面插件集合。
2)使用简单但是功能非常强大,提供了丰富的插件和CSS、图片等素材。
3)代码编写量很少,开发工程师编写项目的前端页面展示功能节省了大量的时间和精力。
4)并且提供了丰富的文档支持。
5)非常适合项目组内没有专业的美工开发前端页面情况,对于新兴的HTML5也有不错的支持。
下面看看我们系统的页面
充分考虑了页面代码的简洁和开发人员的工作量,把easyui的列表、弹出框,提示框做成公共函数,使用时,直接调用即可。对于一个增删改查功能,普通开发人员半天可完成。真正实现快速开发。
公共base.js
/**
* @注释:编辑、添加对话框
* @param url 访问地址
* @param height 宽的高度
* @param width 框的宽度
* @param dataDatagrid 列表ID
* @param saveCallBack 点击“保存”按钮后,触发的操作函数
*
*/
function openEditDialog(url,height,width,dataGrid,saveCallBack){
var id = "dialogId";
$(document.body).append("<div id='"+id+"'></div>");
var mdialog = $('#'+id).dialog({
href:url,
width:width,
height:height,
border:false,
cache:false,
collapsible:false,
maximizable:false,
resizable:false,
modal:true,
closed:true,
buttons:[ {
text:'保存',
iconCls:'icon-ok',
handler:function() {
saveCallBack(id);
}
}, {
text:'取消',
iconCls:'icon-cancel',
handler:function() {
$("#"+id).dialog("close");
}
} ],
onClose:function() {
$("#"+id).dialog('destroy');
dataGrid.datagrid("reload");
}
});
return mdialog;
}
/**
* @注释:查看对话框
* @param url 访问地址
* @param height 宽的高度
* @param width 框的宽度
* @param dataDatagrid 列表ID
*
*
*/
function openViewDialog(url,height,width,dataGrid){
var id = "dialogId";
$(document.body).append("<div id='"+id+"'></div>");
var mdialog = $('#'+id).dialog({
href:url,
width:width,
height:height,
border:false,
cache:false,
collapsible:false,
maximizable:false,
resizable:false,
modal:true,
closed:true,
buttons:[ {
text:'关闭',
iconCls:'icon-cancel',
handler:function() {
$("#"+id).dialog("close");
}
} ],
onClose:function() {
$("#"+id).dialog('destroy');
dataGrid.datagrid("reload");
}
});
return mdialog;
}
/**
* @注释:展示列表
* @param url 访问地址
*
*/
function listdata(url,headTitle){
//----------数据列表初始化-----------------------
var dataDatagrid = $("#datalist").datagrid({
url:url,
title:headTitle,
fitColumns:true,
singleSelect:true,
pagination:true,
rownumbers:true,
showPageList:false,
pagePosition:'bottom',//top','bottom','both'。
fit:true,
border:false,
width:'auto',
height:'auto',
striped:true,
loadMsg : '数据装载中......',
onLoadSuccess:function(data){
}
});
dataDatagrid.datagrid('getPager').pagination({
showPageList:false,
pageSize:10
});
return dataDatagrid;
}
/**
* 信息提示框
* @param msg
*/
function easyui_alert(msg){
jQuery.messager.alert('信息提示',msg,'info');
}
/**
* 错误提示框
* @param msg
*/
function easyui_error(msg){
jQuery.messager.alert('错误提示',msg,'error');
}
/**
* 取得数据区高度
*/
function setDataHeight(){
var screenHeight = document.body.clientHeight;
var bodyHeight = screenHeight*1;
//alert(bodyHeight);
var dataH = bodyHeight*0.7;
$("#wholedatadiv").css("height",bodyHeight);
$("#datalistdiv").css("height",dataH+"px");
}
jsp页面调用:companyList.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/easyui_head.jsp" %>
<!-- 公司参数设置 -->
<script type="text/javascript">
var dataDatagrid;
$(function(){
setDataHeight();
//展示数据列表
var url = "${www_url}/companyManage/queryCompanyDatas.do";
dataDatagrid = listdata(url,"公司信息列表");
});
//每行后面的操作类型链接
function rowformater(val,row,index){
var html ='';
if(row.companyLevel=="1"){
}else{
if(row.status=="0"){
html += "<a href='javascript:void(0)' class='easyui-linkbutton' iconCls='hnses-add' οnclick=\"openCompanyEditDialog('"+row.companyId+"')\">修改</a>";
html += " | ";
html += "<a href='javascript:void(0)' οnclick=\"delCompanyDialog('"+index+"','logout')\">注销</a>";
}else{
html += "<a href='javascript:void(0)' οnclick=\"delCompanyDialog('"+index+"','inuse')\">启用</a>";
}
html += " | ";
}
html += "<a href='javascript:void(0)' οnclick=\"viewCompanyDialog('"+row.companyId+"')\">查看</a>";
return html;
}
//-------------新增---------------
function openCompanyAddDialog() {
var url="${www_url}/companyManage/openAddCompanyDialog.do";
openEditDialog(url,230,500,dataDatagrid,function(id) {
addCompany(id);
}).dialog('open').dialog('setTitle', '新增公司信息');
}
//-------------修改---------------
function openCompanyEditDialog(companyId) {
var url="${www_url}/companyManage/openEditCompanyDialog.do?companyId="+companyId;
openEditDialog(url,230,500,dataDatagrid,function(id) {
modifyCompany(id);
}).dialog('open').dialog('setTitle', '修改公司信息');
}
//-------------查看---------------
function viewCompanyDialog(companyId) {
var url="${www_url}/companyManage/openViewCompanyDialog.do?companyId="+companyId;
openViewDialog(url,260,500,dataDatagrid).dialog('open').dialog('setTitle', '查看公司信息');
}
// ---------------条件查询-------------_----
function companyListSearch(){
dataDatagrid.datagrid('load', sy.serializeObject($("#companyList").form()));
}
//------------删除----------------------
function delCompanyDialog(index,doflag){
var msg = "";
if(doflag=="logout"){
msg = "注销";
}else{
msg = "启用";
}
$.messager.confirm('确认','确认'+msg+'?',function(row){
if(row){
var selectedRow = dataDatagrid.datagrid('getSelected'); //获取选中行
//alert(selectedRow);
$.ajax({
type: "post",
url:'${www_url}/companyManage/delCompany.json',
data: {companyId:selectedRow.companyId, doflag:doflag},
async: false,
dataType: "json",
//删除成功处理
success:function(data){
var msg = data.success;
if(msg!=true){
easyui_error(data.msg);
}else{
dataDatagrid.datagrid('reload');
}
//dataDatagrid.datagrid('deleteRow',index);
} ,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
return false;
}
});
}
})
}
//字段翻译值
function formatLevel(val,row){
if(val == 1){
return "总公司";
}else{
return "子公司";
}
}
//字段翻译值
function formatStatus(val,row){
if(val == 0){
return "正常";
}else{
return "停用";
}
}
</script>
<div id="data_top_address" >
网页位置:
</div>
<div class="easyui-layout" id="wholedatadiv" data-options="fit:false" style="width: 100%; overflow:visible">
<div data-options="region:'north',height:33,border:false" style="overflow:hidden;">
<form id="companyList" method="post">
<table class="searchForm datagrid-toolbar" fitcolumns="true" style="font-size: 12px; border: 0px; width: 100%">
<tr>
<td style="width: 10%;text-align:right;">公司编码:</td>
<td style="width: 10%">
<input name="company.companyCode"
class="easyui-textbox"
data-options="required:false,width:100" />
</td>
<td style="width: 10%;text-align:right;">公司名称:</td>
<td style="width: 10%">
<input name="company.companyName"
class="easyui-textbox"
data-options="required:false,width:100" />
</td>
<td>
<div style="text-align: left; padding: 0px">
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'hnses-search',plain:false"
οnclick="companyListSearch()">查询</a>
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'hnses-cancel',plain:false"
οnclick="cleanForm('companyList');">清空</a>
</div>
</td>
<td>
<div style="text-align: right; padding: 0px">
<a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'hnses-add',plain:false"
οnclick="openCompanyAddDialog();">添加</a>
</div>
</td>
</tr>
</table>
</form>
</div>
<!-- 数据列表 -->
<div data-options="region:'center',border:false" id="datalistdiv" fit="true" >
<table id="datalist">
<thead>
<tr>
<th field="companyCode" width="100" align="center">公司编号</th>
<th field="companyName" width="100" align="center">公司名称</th>
<th field="companyLevel" width="50" align="center" formatter="formatLevel">公司级别</th>
<!-- <th field="companyPid" width="100" align="center">上级公司</th> -->
<th field="status" width="50" align="center" formatter="formatStatus">状态</th>
<th field="--" width="100" align="center" data-options="field:'companyId',formatter: rowformater">操作类型</th>
</tr>
</thead>
</table>
</div>
</div>
companyAdd.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/jstl.jspf" %>
<!-- 修改 -->
<script type="text/javascript">
//---------------修改操作---------------
function addCompany(cid) {
$('#companyDialogForm').form('submit',{
url : "${www_url}/companyManage/addCompany.json",
async: false,
onSubmit : function() {
//提交表单数据时,如果表单是无效的(校验不通过),阻止表单提交
var result = $(this).form('enableValidation').form('validate');
//alert(result);
if(result){
var res = checkData();
return res;
}else{
return false;
}
},
success : function(data) {
var result = eval('(' + data + ')');
if (result.success) {
$("#"+cid).dialog("close");
$("#"+cid).dialog("destroy");
} else {
$.messager.alert("提示",result.msg);
}
}
});
}
//生成公司组织树
$(function(){
$('#companyScopeName').combotree({
url:basePath+'tree/queryCompanyTrees.json'
});
});
//校验公司名称和公司编号不能为空
function checkData(){
var result = true;
$.ajax({
type: "post",
url: basePath+"/companyManage/checkData.json",
data: {companyName:$("#companyName").val(), companyCode:$("#companyCode").val()},
async: false,
dataType: "json",
success: function (data) {
var msg = data.success;
if(msg!=true){
easyui_error(data.msg);
result = false;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
return false;
}
});
return result;
}
</script>
<form id="companyDialogForm" method="post" data-options="novalidate:true">
<table class="tableForm" style="width:100%">
<tr>
<td class="tdR"><span style="color:red">*</span>公司编码</td>
<td>
<input name="company.companyCode" value="" id="companyCode"
class="easyui-textbox"
data-options="required:true,width:300" missingMessage="公司编码必须填写"/>
</td>
</tr>
<tr>
<td class="tdR"><span style="color:red">*</span>公司名称</td>
<td>
<input name="company.companyName" id="companyName"
class="easyui-textbox"
data-options="required:true,width:300"
missingMessage="公司名称必须填写" />
</td>
</tr>
<!-- <tr>
<td class="tdR"><span style="color:red">*</span>公司级别</td>
<td>
<select class="easyui-combobox" name="company.companyLevel" style="width:200px;">
<option value="1">总公司</option>
<option value="2">分公司</option>
</select>
</td>
</tr> -->
<tr>
<td class="tdR"><span style="color:red">*</span>上级公司</td>
<td>
<select id="companyScopeName" name="company.companyPid" class="easyui-combotree"
data-options="required:true" style="width:300px;"></select>
</td>
</tr>
<tr>
<td class="tdR">公司描述</td>
<td>
<textarea name="company.companyDesc"
class="easyui-validatebox"
style="height:50px;width:300px;"></textarea>
</td>
</tr>
</table>
</form>
添加了校验validator.js。可验证的项有:身份证(idcard)、长度()、座机,手机号、货币、qq号、年龄、英文、整数、传真、邮编、ip地址、日期、msn账号。调用方法:
<input name="staff.email" id="email"
class="easyui-textbox" validtype="email"
data-options="required:true,width:300"
missingMessage="电子邮箱必须填写" invalidMessage="电子邮箱格式不正确!"/>
validator.js
$.extend($.fn.validatebox.defaults.rules, {
idcard: {// 验证身份证
validator: function (value) {
return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);
},
message: '身份证号码格式不正确'
},
minLength: {
validator: function (value, param) {
return value.length >= param[0];
},
message: '请输入至少(2)个字符.'
},
length: { validator: function (value, param) {
var len = $.trim(value).length;
return len >= param[0] && len <= param[1];
},
message: "输入内容长度必须介于{0}和{1}之间."
},
phone: {// 验证电话号码
validator: function (value) {
return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
},
message: '格式不正确,请使用下面格式:020-88888888'
},
mobile: {// 验证手机号码
validator: function (value) {
return /^(13|15|18)\d{9}$/i.test(value);
},
message: '手机号码格式不正确'
},
intOrFloat: {// 验证整数或小数
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '请输入数字,并确保格式正确'
},
currency: {// 验证货币
validator: function (value) {
return /^\d+(\.\d+)?$/i.test(value);
},
message: '货币格式不正确'
},
qq: {// 验证QQ,从10000开始
validator: function (value) {
return /^[1-9]\d{4,9}$/i.test(value);
},
message: 'QQ号码格式不正确'
},
integer: {// 验证整数 可正负数
validator: function (value) {
//return /^[+]?[1-9]+\d*$/i.test(value);
return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);
},
message: '请输入整数'
},
age: {// 验证年龄
validator: function (value) {
return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);
},
message: '年龄必须是0到120之间的整数'
},
chinese: {// 验证中文
validator: function (value) {
return /^[\Α-\¥]+$/i.test(value);
},
message: '请输入中文'
},
english: {// 验证英语
validator: function (value) {
return /^[A-Za-z]+$/i.test(value);
},
message: '请输入英文'
},
unnormal: {// 验证是否包含空格和非法字符
validator: function (value) {
return /.+/i.test(value);
},
message: '输入值不能为空和包含其他非法字符'
},
username: {// 验证用户名
validator: function (value) {
return /^[a-zA-Z][a-zA-Z0-9_@.]{5,15}$/i.test(value);
},
message: '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'
},
faxno: {// 验证传真
validator: function (value) {
// return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);
return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);
},
message: '传真号码不正确'
},
zip: {// 验证邮政编码
validator: function (value) {
return /^[1-9]\d{5}$/i.test(value);
},
message: '邮政编码格式不正确'
},
ip: {// 验证IP地址
validator: function (value) {
return /d+.d+.d+.d+/i.test(value);
},
message: 'IP地址格式不正确'
},
name: {// 验证姓名,可以是中文或英文
validator: function (value) {
return /^[\Α-\¥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);
},
message: '请输入姓名'
},
date: {// 验证姓名,可以是中文或英文
validator: function (value) {
//格式yyyy-MM-dd或yyyy-M-d
return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);
},
message: '清输入合适的日期格式'
},
msn: {
validator: function (value) {
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
message: '请输入有效的msn账号(例:abc@hotnail(msn/live).com)'
},
same: {
validator: function (value, param) {
if ($("#" + param[0]).val() != "" && value != "") {
return $("#" + param[0]).val() == value;
} else {
return true;
}
},
message: '两次输入的密码不一致!'
}
});
前端部分讲完了,下一节我们介绍spring架构。对于easyui组件的使用可以查询easyui中文网