宅急送项目第二天笔记！
一、 项目前台 easyui
基于jquery 的一套ui类库
1、 直接编写html，为html元素设置class属性 ----- 自动被easyui 进行渲染
2、 编写js脚本代码，生成页面html元素
整个页面布局 layout ------------ 主页 WEB-INF/common/index.jsp
*********** easyui 需要引入文件
工程需要引入 locale plugins themes 、 easyloader.js 、 easyui-min.js 、 jquery.js
页面内容 引入 themes/default/easyui.css、 themes/icon.css 、 easyui-min.js 、 jquery.js 、 locale/easyui-lang-zh_CN.js
<body class="easyui-layout" > 页面整体采用layout布局 （东南西北中）
<div data-options="region:west"> 西面布局结构 ================== <div region="west">
1、north 中下拉自定义菜单 <a class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu'>更换皮肤</a>
easyui-menubutton 将链接变为下拉菜单
data-options="menu:'#layout_north_pfMenu' 下拉菜单显示内容 #layout_north_pfMenu 定义
<div id="layout_north_pfMenu">
<div>菜单一</div>
<div>菜单二</div>
</div>
更换皮肤代码原理： 动态link一个新的css文件
2、north 中控制面板下拉菜单 对应功能效果
修改密码 ： 将div制作为 window窗口（遮罩效果） ------------ <div class="essyui-window">
$('#editPwdWindow').window({
title: '修改密码', ---- 窗口标题栏
width: 300, ----- 宽度
modal: true, ----- 遮罩
shadow: true, ----- 阴影
closed: true, ----- 已经关闭
height: 160, ------ 高度
resizable:false ----- 不可以调整大小
});
点击修改密码
function editPassword() {
$('#editPwdWindow').window('open');
}
$("#id").window({key:value,key:value...}); ------------ {} 代表设置easyui对象属性
$("#id").window('open'); ------ 在window对象中直接传入字符串 代表执行对象某个方法
联系管理员 ： $.messager.alert("宅急送 v1.0","设计: yuyang<br/> 管理员邮箱: [email protected] <br/> QQ: 117038615");
$.messager 提供 alter 提示 、 confirm 确认 、 prompt输入 、 progress
退出系统 ： $.messager.confirm("退出系统","确认退出吗？",function(b){
if(b) {
// 退出代码
}
});
3 、登陆主页时，右下角弹出提示窗口
$.messager.show({
title ： 标题
msg : 内容
timeout : 5000 ------------ 5秒后窗口自动消失
});
=================================================================================================================================
二、 页面左侧菜单 点击、右侧显示效果
左侧 Accordion 效果 可伸缩面板
<div class="easyui-accordion">
<div title="信息一"> 面板信息一 </div>
<div title="信息二"> 面板信息二 </div>
</div>
accordion 中树形菜单如何制作 ？ zTree
zTree 是一个企业主流 树形菜单 制作技术， 功能比easyui 自带tree强大
去官网下载 最新ztree插件 包
将ztree解压目录 js目录和css目录导入工程 即可
*** 导入css/zTreeStyle/* 导入工程
*** js目录 core 核心功能 （不需要 使用选中、编辑、隐藏等功能） 、 使用全部功能 all
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css">
<!-- 使用ztree -->
<!-- ztree 是一个依赖jquery 树形菜单 -->
<script type="text/javascript" src="${pagecontext.request.contextPath }/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${pagecontext.request.contextPath }/js/ztree/jquery.ztree.core-3.5.js"></script>
在页面需要使用ztree生成树地方
<div id="mytree" class="ztree">
在js中通过
$.fn.zTree.init($("#mytree"), setting, zNodes); 对树进行初始化 setting是一些配置 ， zNodes 是节点数据
var setting = {
data : {
key : {
title : "t" ------- 鼠标停留在节点上，提示信息
},
simpleData : { ------------ 简单数据 ，没有使用异步 ， 数据中 id 表示节点唯一表示 pid ： 父节点唯一标识
enable : true
}
},
callback : {
onClick : abc ------ 当点击树节点时，执行函数 abc
}
};
// 主页面中初始化树，数据是动态的，执行ajax程序对tree的数据进行获取，完成树初始化
$.ajax({
url : '${pageContext.request.contextPath}/menu.json', ------------- 这里可以改为服务器端action
type : 'POST', ------ 提交方式
dataType : 'text', ------ 数据类型
success : function(data) { ------ 回调函数
var zNodes = eval("(" + data + ")"); ------------- eval 可以将返回 json字符串 转换 js 对象
$.fn.zTree.init($("#treeMenu"), setting, zNodes); ----------- 初始化树
},
error : function(msg) {
alert('菜单加载异常!');
}
});
通过click和page 控制，该节点是否有点击效果，点击后跳转页面
{ id:11, pId:0, name:"基础档案", t:"", click:false}, ------ click:false该节点是一个父节点，点击后不做处理
{ id:111, pId:11, name:"基础档案设置", t:"基础档案设置",page:"page_base_jichudangan.action"}, ---- page ，点击后跳到page
***** click属性是官方的，page是我自定义
点击左侧菜单 右侧出现tab
<div class="easyui-tabs" id="tabs">
<div title="标题一">内容一</div>
<div title="标题二">内容二</div>
</div>
点击菜单，onclick函数，在函数中判断是否click属性为false，不处理，不为false添加add
function onClick(event, treeId, treeNode, clickFlag) {
if (treeNode.click != false) {
open(treeNode.name, treeNode.page);
}
}
先判断tab是否存在，如果存在，select选中tab
如果不存在，easyui中tab对象add方法， div中嵌入 iframe 用于局部刷新
function open(text, url) {
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
var content = '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe src="'
+ url
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
$('#tabs').tabs('add', {
title : text,
content : content,
//href : url
closable : true
});
}
}
========================================================================================================================================
三、第一批次功能
登陆
修改密码
查询显示用户信息 （多条件查询）
删除用户
添加用户
查看修改用户
用户对象设计（编号、名称、密码、性别、生日、单位、工资、电话 ）
使用注解配置实体类 @OnetoMang @ManytoOne 会和 javaee.jar javax.persistence包冲突 （包冲突错误： NoSuchMethodError 、ClassCast）
编写实体类domain 完成建表
导入GenericDAO ----- 通用DAO
编写Service 按照六个功能 ------------ Spring test进行测试
1、 登陆功能
验证码 技术原理 ： 生成验证码，放入Session中，以图片方式显示给用户，用户根据图片显示内容输入，提交， 服务器比较用户输入验证码 与Session中是否一致
服务器端输入校验 validation
2、 修改密码
主页相关 显示完善
index.jsp [<strong>${existUser.username }</strong>]，欢迎你！您使用[<strong>${pageContext.request.remoteAddr}</strong>]IP登录！
home.jsp 右下角提示 换做 ${existUser.username}
退出登陆
function logoutFun() {
$.messager
.confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) {
if (isConfirm) {
location.href = '${pageContext.request.contextPath }/invalidate.jsp';
}
});
}
invalidate.jsp 中销毁Session， 重定向login.jsp
<div id="editPwdWindow"> 使用easyui 的window技术，将窗口弹出遮罩
修改密码确认按钮 btnEp 点击后 ， 将新密码以Ajax方式，传输服务器，修改后，关闭window提示修改密码成功
引入common.js 自定义ajax错误显示信息 ！！！ 处理json返回结果 一定在Action返回json格式字符串
$.post('${pageContext.request.contextPath}/user_editpassword.action?password=' + $newpass.val(), function(msg) {
$.post('${pageContext.request.contextPath}/user_editpassword.action?' , {password : $newpass.val()}, function(msg) {
以上两种写法等价
3、 用户管理页面 userindex.jsp 查看用户列表
layout布局 east是一个查询表单 center查询结果 （使用iframe）------ userlist.jsp (列表结果页面)
userlist.jsp 增加按钮 ------ 链接效果，iframe 跳转 userinfo.jsp (增加和修改功能 )
easyui框架 自带数据校验功能 <input type="text" class="easyui-validatebox" required="true" />
使用html代码对目标生成校验
<input id="vv" required="true" validType="email" class="easyui-validatebox">
使用js代码对目标生成校验
$('#vv').validatebox({
required:true,
validType : 'length[0,5]'
});
用户添加功能 userinfo.jsp 改写成struts2 标签
4、 用户列表显示 datagrid组件
直接用html编写<table> 元素 ----- <table class="easyui-datagrid" style="height:auto"> 为table 添加 class="easyui-datagrid"
**** 例如主页面 公告、预警信息、带办信息
**** 用html制作数据表格 不是很常见
用js代码生成 table （非常常用）
针对页面中 id 为grid的table元素 生成动态表格 <table id="grid" ></table>
$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true, // 适应父元素大小
border : false, // 无边框
rownumbers : true, // 设置为true将显示行数
striped : true, // 设置为true将交替显示行背景
pageList: [30,50,100], // 可选择的每页记录数
pagination : true, // 设置true将在数据表格底部显示分页工具栏 **********
toolbar : toolbar, // 工具栏 在表格上方显示一行工具按钮 新增、查看、删除
url : "users.json", // 数据源，通过 users.json 去加载数据 --- 改为action
idField : 'id', // 主键列 ，返回数据中id 为唯一标识
frozenColumns : frozenColumns, // 冻结列，当列很多出现横向滚动，冻结列不会被隐藏
columns : columns, // 普通列
onClickRow : onClickRow, // 单击某行触发事件
onDblClickRow : doDblClickRow // 双击某行触发事件
});
请求参数： page 页码 rows 每页多少条
返回数据：
{
total : 总记录数 ,
rows : [
{},
{}...
]
}
编写UserListAction 接收请求参数，返回对应结果数据
将分页所有相关数据定义为分页数据Bean ------ > PageBean
* PageBean存放 分页相关数据 page rowsPerPage total result condition
携带条件数据查询
用户名查询 ----- 模糊查询
性别查询 ------ 等值查询
生日范围查询
5 、 用户删除
在页面中选中多行，如何在js中获得多行选中id
getSelected none 返回第一个被选择的行记录或null。
getSelections none 返回所有被选择的行，当没有记录被选择时，将返回一个空数组。
var items = $('#grid').datagrid('getSelections'); 获得所有选中行
for循环 获得每个id 存放数组中。通过js 的join方法 将多个id 连接到一起 1,2,3
$.post("${pageContext.request.contextPath}/user_delete.action", {ids ,ids.join(",") }, function(data){
$('#grid').datagrid('reload');
$('#grid').datagrid('uncheckAll'); // 取消所有元素选中效果
});
6、用户修改
使用id查询数据，回显到jsp ----------- userinfo.jsp
如果选中多个，默认修改第一个 getSelected
基于jquery 的一套ui类库
1、 直接编写html，为html元素设置class属性 ----- 自动被easyui 进行渲染
2、 编写js脚本代码，生成页面html元素
整个页面布局 layout ------------ 主页 WEB-INF/common/index.jsp
*********** easyui 需要引入文件
工程需要引入 locale plugins themes 、 easyloader.js 、 easyui-min.js 、 jquery.js
页面内容 引入 themes/default/easyui.css、 themes/icon.css 、 easyui-min.js 、 jquery.js 、 locale/easyui-lang-zh_CN.js
<body class="easyui-layout" > 页面整体采用layout布局 （东南西北中）
<div data-options="region:west"> 西面布局结构 ================== <div region="west">
1、north 中下拉自定义菜单 <a class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu'>更换皮肤</a>
easyui-menubutton 将链接变为下拉菜单
data-options="menu:'#layout_north_pfMenu' 下拉菜单显示内容 #layout_north_pfMenu 定义
<div id="layout_north_pfMenu">
<div>菜单一</div>
<div>菜单二</div>
</div>
更换皮肤代码原理： 动态link一个新的css文件
2、north 中控制面板下拉菜单 对应功能效果
修改密码 ： 将div制作为 window窗口（遮罩效果） ------------ <div class="essyui-window">
$('#editPwdWindow').window({
title: '修改密码', ---- 窗口标题栏
width: 300, ----- 宽度
modal: true, ----- 遮罩
shadow: true, ----- 阴影
closed: true, ----- 已经关闭
height: 160, ------ 高度
resizable:false ----- 不可以调整大小
});
点击修改密码
function editPassword() {
$('#editPwdWindow').window('open');
}
$("#id").window({key:value,key:value...}); ------------ {} 代表设置easyui对象属性
$("#id").window('open'); ------ 在window对象中直接传入字符串 代表执行对象某个方法
联系管理员 ： $.messager.alert("宅急送 v1.0","设计: yuyang<br/> 管理员邮箱: [email protected] <br/> QQ: 117038615");
$.messager 提供 alter 提示 、 confirm 确认 、 prompt输入 、 progress
退出系统 ： $.messager.confirm("退出系统","确认退出吗？",function(b){
if(b) {
// 退出代码
}
});
3 、登陆主页时，右下角弹出提示窗口
$.messager.show({
title ： 标题
msg : 内容
timeout : 5000 ------------ 5秒后窗口自动消失
});
=================================================================================================================================
二、 页面左侧菜单 点击、右侧显示效果
左侧 Accordion 效果 可伸缩面板
<div class="easyui-accordion">
<div title="信息一"> 面板信息一 </div>
<div title="信息二"> 面板信息二 </div>
</div>
accordion 中树形菜单如何制作 ？ zTree
zTree 是一个企业主流 树形菜单 制作技术， 功能比easyui 自带tree强大
去官网下载 最新ztree插件 包
将ztree解压目录 js目录和css目录导入工程 即可
*** 导入css/zTreeStyle/* 导入工程
*** js目录 core 核心功能 （不需要 使用选中、编辑、隐藏等功能） 、 使用全部功能 all
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css">
<!-- 使用ztree -->
<!-- ztree 是一个依赖jquery 树形菜单 -->
<script type="text/javascript" src="${pagecontext.request.contextPath }/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${pagecontext.request.contextPath }/js/ztree/jquery.ztree.core-3.5.js"></script>
在页面需要使用ztree生成树地方
<div id="mytree" class="ztree">
在js中通过
$.fn.zTree.init($("#mytree"), setting, zNodes); 对树进行初始化 setting是一些配置 ， zNodes 是节点数据
var setting = {
data : {
key : {
title : "t" ------- 鼠标停留在节点上，提示信息
},
simpleData : { ------------ 简单数据 ，没有使用异步 ， 数据中 id 表示节点唯一表示 pid ： 父节点唯一标识
enable : true
}
},
callback : {
onClick : abc ------ 当点击树节点时，执行函数 abc
}
};
// 主页面中初始化树，数据是动态的，执行ajax程序对tree的数据进行获取，完成树初始化
$.ajax({
url : '${pageContext.request.contextPath}/menu.json', ------------- 这里可以改为服务器端action
type : 'POST', ------ 提交方式
dataType : 'text', ------ 数据类型
success : function(data) { ------ 回调函数
var zNodes = eval("(" + data + ")"); ------------- eval 可以将返回 json字符串 转换 js 对象
$.fn.zTree.init($("#treeMenu"), setting, zNodes); ----------- 初始化树
},
error : function(msg) {
alert('菜单加载异常!');
}
});
通过click和page 控制，该节点是否有点击效果，点击后跳转页面
{ id:11, pId:0, name:"基础档案", t:"", click:false}, ------ click:false该节点是一个父节点，点击后不做处理
{ id:111, pId:11, name:"基础档案设置", t:"基础档案设置",page:"page_base_jichudangan.action"}, ---- page ，点击后跳到page
***** click属性是官方的，page是我自定义
点击左侧菜单 右侧出现tab
<div class="easyui-tabs" id="tabs">
<div title="标题一">内容一</div>
<div title="标题二">内容二</div>
</div>
点击菜单，onclick函数，在函数中判断是否click属性为false，不处理，不为false添加add
function onClick(event, treeId, treeNode, clickFlag) {
if (treeNode.click != false) {
open(treeNode.name, treeNode.page);
}
}
先判断tab是否存在，如果存在，select选中tab
如果不存在，easyui中tab对象add方法， div中嵌入 iframe 用于局部刷新
function open(text, url) {
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
var content = '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe src="'
+ url
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
$('#tabs').tabs('add', {
title : text,
content : content,
//href : url
closable : true
});
}
}
========================================================================================================================================
三、第一批次功能
登陆
修改密码
查询显示用户信息 （多条件查询）
删除用户
添加用户
查看修改用户
用户对象设计（编号、名称、密码、性别、生日、单位、工资、电话 ）
使用注解配置实体类 @OnetoMang @ManytoOne 会和 javaee.jar javax.persistence包冲突 （包冲突错误： NoSuchMethodError 、ClassCast）
编写实体类domain 完成建表
导入GenericDAO ----- 通用DAO
编写Service 按照六个功能 ------------ Spring test进行测试
1、 登陆功能
验证码 技术原理 ： 生成验证码，放入Session中，以图片方式显示给用户，用户根据图片显示内容输入，提交， 服务器比较用户输入验证码 与Session中是否一致
服务器端输入校验 validation
2、 修改密码
主页相关 显示完善
index.jsp [<strong>${existUser.username }</strong>]，欢迎你！您使用[<strong>${pageContext.request.remoteAddr}</strong>]IP登录！
home.jsp 右下角提示 换做 ${existUser.username}
退出登陆
function logoutFun() {
$.messager
.confirm('系统提示','您确定要退出本次登录吗?',function(isConfirm) {
if (isConfirm) {
location.href = '${pageContext.request.contextPath }/invalidate.jsp';
}
});
}
invalidate.jsp 中销毁Session， 重定向login.jsp
<div id="editPwdWindow"> 使用easyui 的window技术，将窗口弹出遮罩
修改密码确认按钮 btnEp 点击后 ， 将新密码以Ajax方式，传输服务器，修改后，关闭window提示修改密码成功
引入common.js 自定义ajax错误显示信息 ！！！ 处理json返回结果 一定在Action返回json格式字符串
$.post('${pageContext.request.contextPath}/user_editpassword.action?password=' + $newpass.val(), function(msg) {
$.post('${pageContext.request.contextPath}/user_editpassword.action?' , {password : $newpass.val()}, function(msg) {
以上两种写法等价
3、 用户管理页面 userindex.jsp 查看用户列表
layout布局 east是一个查询表单 center查询结果 （使用iframe）------ userlist.jsp (列表结果页面)
userlist.jsp 增加按钮 ------ 链接效果，iframe 跳转 userinfo.jsp (增加和修改功能 )
easyui框架 自带数据校验功能 <input type="text" class="easyui-validatebox" required="true" />
使用html代码对目标生成校验
<input id="vv" required="true" validType="email" class="easyui-validatebox">
使用js代码对目标生成校验
$('#vv').validatebox({
required:true,
validType : 'length[0,5]'
});
用户添加功能 userinfo.jsp 改写成struts2 标签
4、 用户列表显示 datagrid组件
直接用html编写<table> 元素 ----- <table class="easyui-datagrid" style="height:auto"> 为table 添加 class="easyui-datagrid"
**** 例如主页面 公告、预警信息、带办信息
**** 用html制作数据表格 不是很常见
用js代码生成 table （非常常用）
针对页面中 id 为grid的table元素 生成动态表格 <table id="grid" ></table>
$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true, // 适应父元素大小
border : false, // 无边框
rownumbers : true, // 设置为true将显示行数
striped : true, // 设置为true将交替显示行背景
pageList: [30,50,100], // 可选择的每页记录数
pagination : true, // 设置true将在数据表格底部显示分页工具栏 **********
toolbar : toolbar, // 工具栏 在表格上方显示一行工具按钮 新增、查看、删除
url : "users.json", // 数据源，通过 users.json 去加载数据 --- 改为action
idField : 'id', // 主键列 ，返回数据中id 为唯一标识
frozenColumns : frozenColumns, // 冻结列，当列很多出现横向滚动，冻结列不会被隐藏
columns : columns, // 普通列
onClickRow : onClickRow, // 单击某行触发事件
onDblClickRow : doDblClickRow // 双击某行触发事件
});
请求参数： page 页码 rows 每页多少条
返回数据：
{
total : 总记录数 ,
rows : [
{},
{}...
]
}
编写UserListAction 接收请求参数，返回对应结果数据
将分页所有相关数据定义为分页数据Bean ------ > PageBean
* PageBean存放 分页相关数据 page rowsPerPage total result condition
携带条件数据查询
用户名查询 ----- 模糊查询
性别查询 ------ 等值查询
生日范围查询
5 、 用户删除
在页面中选中多行，如何在js中获得多行选中id
getSelected none 返回第一个被选择的行记录或null。
getSelections none 返回所有被选择的行，当没有记录被选择时，将返回一个空数组。
var items = $('#grid').datagrid('getSelections'); 获得所有选中行
for循环 获得每个id 存放数组中。通过js 的join方法 将多个id 连接到一起 1,2,3
$.post("${pageContext.request.contextPath}/user_delete.action", {ids ,ids.join(",") }, function(data){
$('#grid').datagrid('reload');
$('#grid').datagrid('uncheckAll'); // 取消所有元素选中效果
});
6、用户修改
使用id查询数据，回显到jsp ----------- userinfo.jsp
如果选中多个，默认修改第一个 getSelected
doView方法中 ，通过点击 查询 ----- location.href = "${pageContext.request.contextPath}/user_view.action?id="+item.id;
