1 学习计划
1、jQuery easyUI中动态添加选项卡
2、jquery ztree插件使用
n 下载ztree
n 基于标准json数据构造ztree
n 基于简单json数据构造ztree（重点）
3、数据库建模工具PowerDesigner使用方式
4、myeclipse翻转引擎插件使用（了解）
5、项目底层代码构建（重点）
n 持久层代码抽取
n 表现层代码抽取
6、实现BOS项目登录和注销功能
2 jQuery easyUI中动态添加选项卡
l 用于动态添加一个选项卡
l 选中指定的选项卡和判断某个选项卡是否存在
<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完成后，为上面的按钮绑定事件
$("#but1").click(function(){
//判断“系统管理”选项卡是否存在
var e = $("#mytabs").tabs("exists","系统管理");
if(e){
//已经存在，选中就可以
$("#mytabs").tabs("select","系统管理");
}else{
//调用tabs对象的add方法动态添加一个选项卡
$("#mytabs").tabs("add",{
title:'系统管理',
iconCls:'icon-edit',
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
});
}
});
});
</script>
3 jquery ztree插件使用
官网：ztree.me
目录结构：
l 在页面中引入ztree相关的文件：
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
3.1 使用标准json数据构造ztree（了解）
<!-- 展示ztree效果 :使用标准json数据构造ztree-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting = {};
//构造节点数据
var zNodes = [
{"name":"节点一","children":[
{"name":"节点一_1"},
{"name":"节点一_2"}
]},//每个json对象表示一个节点数据
{"name":"节点二"},
{"name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>
3.2 使用简单json数据构造ztree（重点）
<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting2 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//构造节点数据
var zNodes2 = [
{"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
{"id":"2","pId":"3","name":"节点二"},
{"id":"3","pId":"0","name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
});
</script>
效果：
3.3 发送ajax请求获取json数据构造ztree
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
3.4 使用ztree提供的API为节点绑定事件
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
},
callback: {
//为ztree节点绑定单击事件
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
//判断选项卡是否已经存在
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在，选中
$("#mytabs").tabs("select",treeNode.name);
}else{
//动态添加一个选项卡
$("#mytabs").tabs("add",{
title:treeNode.name,
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
});
}
}
}
}
};
//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
4 数据库建模工具PowerDesigner使用方式
5 myeclipse翻转引擎插件使用
6 项目底层代码构建（重点）
6.1 持久层代码抽取
IBaseDao接口：
/**
* 持久层通用接口
* @author zhaoqx
*
* @param <T>
*/
public interface IBaseDao<T> {
public void save(T entity);
public void delete(T entity);
public void update(T entity);
public T findById(Serializable id);
public List<T> findAll();
}
BaseDaoImpl<T>实现类：
/**
* 持久层通用实现
* @author zhaoqx
*
* @param <T>
*/
public class BaseDaoImpl<T> extends HibernateDaoSupport implements IBaseDao<T> {
//代表的是某个实体的类型
private Class<T> entityClass;
@Resource//根据类型注入spring工厂中的会话工厂对象sessionFactory
public void setMySessionFactory(SessionFactory sessionFactory){
super.setSessionFactory(sessionFactory);
}
//在父类（BaseDaoImpl）的构造方法中动态获得entityClass
public BaseDaoImpl() {
ParameterizedType superclass = (ParameterizedType) this.getClass().getGenericSuperclass();
//获得父类上声明的泛型数组
Type[] actualTypeArguments = superclass.getActualTypeArguments();
entityClass = (Class<T>) actualTypeArguments[0];
}
public void save(T entity) {
this.getHibernateTemplate().save(entity);
}
public void delete(T entity) {
this.getHibernateTemplate().delete(entity);
}
public void update(T entity) {
this.getHibernateTemplate().update(entity);
}
public T findById(Serializable id) {
return this.getHibernateTemplate().get(entityClass, id);
}
public List<T> findAll() {
String hql = "FROM " + entityClass.getSimpleName();
return (List<T>) this.getHibernateTemplate().find(hql);
}
}
6.2 表现层代码抽取
BaseAction代码：
/**
* 表现层通用实现
* @author zhaoqx
*
* @param <T>
*/
public class BaseAction<T> extends ActionSupport implements ModelDriven<T> {
//模型对象
private T model;
public T getModel() {
return model;
}
//在构造方法中动态获取实体类型，通过反射创建model对象
public BaseAction() {
ParameterizedType genericSuperclass = (ParameterizedType) this.getClass().getGenericSuperclass();
//获得BaseAction上声明的泛型数组
Type[] actualTypeArguments = genericSuperclass.getActualTypeArguments();
Class<T> entityClass = (Class<T>) actualTypeArguments[0];
//通过反射创建对象
try {
model = entityClass.newInstance();
} catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
7 实现BOS项目登录
登录页面：/login.jsp
第一步：调整login.jsp页面，为登录按钮指定单击事件，提交表单
第二步：创建UserAction，提供login登录方法
@Controller
@Scope("prototype")
public class UserAction extends BaseAction<User> {
//属性驱动，接收页面输入的验证码
private String checkcode;
public void setCheckcode(String checkcode) {
this.checkcode = checkcode;
}
@Autowired
private IUserService userService;
/**
* 用户登录
*/
public String login(){
//从Session中获取生成的验证码
String validatecode = (String) ServletActionContext.getRequest().getSession().getAttribute("key");
//校验验证码是否输入正确
if(StringUtils.isNotBlank(checkcode) && checkcode.equals(validatecode)){
//输入的验证码正确
User user = userService.login(model);
if(user != null){
//登录成功,将user对象放入session，跳转到首页
ServletActionContext.getRequest().getSession().setAttribute("loginUser", user);
return HOME;
}else{
//登录失败，,设置提示信息，跳转到登录页面
//输入的验证码错误,设置提示信息，跳转到登录页面
this.addActionError("用户名或者密码输入错误！");
return LOGIN;
}
}else{
//输入的验证码错误,设置提示信息，跳转到登录页面
this.addActionError("输入的验证码错误！");
return LOGIN;
}
}
}
第三步：提供UserService接口和实现类
@Service
@Transactional
public class UserServiceImpl implements IUserService{
@Autowired
private IUserDao userDao;
/***
* 用户登录
*/
public User login(User user) {
//使用MD5加密密码
String password = MD5Utils.md5(user.getPassword());
return userDao.findUserByUsernameAndPassword(user.getUsername(),password);
}
}
第四步：提供UserDao接口和实现类
@Repository
public class UserDaoImpl extends BaseDaoImpl<User> implements IUserDao {
/**
* 根据用户名和密码查询用户
*/
public User findUserByUsernameAndPassword(String username, String password) {
String hql = "FROM User u WHERE u.username = ? AND u.password = ?";
List<User> list = (List<User>) this.getHibernateTemplate().find(hql, username,password);
if(list != null && list.size() > 0){
return list.get(0);
}
return null;
}
}
第五步：配置struts.xml
<!-- 用户管理 -->
<action name="userAction_*" class="userAction" method="{1}">
<result name="login">/login.jsp</result>
<result name="home">/index.jsp</result>
</action>
8 注销功能
将session销毁，跳转到登录页面