一、jQuery easyUI中動態新增選項卡

<div class="easyui-accordion" data-options="fit:true">
            <%--利用div表示每個摺疊面板--%>
                <div data-options="iconCls:'icon-cut'" title="面板一">
                    <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',
                                            closeable:true,
                                            content:' <iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
                                        });
                                }
                            });
                        });
                    </script>
                </div>

                <div title="面板二">112</div>
                <div title="面板三">333</div>
        </div>
 

二、jquery ztree外掛使用

n 下載ztree

n 基於標準json資料構造ztree

n 基於簡單json資料構造ztree（重點）

    <div title="面板二">
                    <%--展示ztree效果：一、使用標準json資料構造ztree--%>
                    <ul id="ztree1" class="ztree">
                        <script type="text/javascript">
                            $(function () {
                                //頁面載入完後，執行這段程式碼----動態建立ztree
                                var setting = {};
                                //構造節點資料
                                var zNodes = [
                                    {"name":"節點一","children":[
                                        {"name":"孩子節點一"},
                                        {"name":"孩子節點二"}
                                    ]},
                                    {"name":"節點二"},
                                    {"name":"節點三"}
                                ];
                                //呼叫API初始化ztree
                                $.fn.zTree.init($("#ztree1"),setting,zNodes);
                            })
                        </script>
                    </ul>


                </div>
                <div title="面板三">
                    <!-- 展示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":"0","name":"節點一"},//每個json物件表示一個節點資料
                                {"id":"2","pId":"1","name":"節點二"},
                                {"id":"3","pId":"2","name":"節點三"}
                            ];
                            //呼叫API初始化ztree
                            $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
                        });
                    </script>
                </div>
 

傳送ajax請求獲取簡單json資料構造ztree

<div title="面板四">
                    <!-- 展示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>
                </div>
 

為ztree節點繫結事件動態新增選項卡

 <div title="面板四">
                    <!-- 展示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{
                                                /*alert("你點選了："+treeNode.name);*/
                                                //動態新增一個選項卡
                                                $("#mytabs").tabs("add",{
                                                    title:treeNode.name,
                                                    closeable: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>
                </div>

三、資料庫建模工具PowerDesigner使用方式

四、myeclipse翻轉引擎外掛使用（瞭解）

五、專案底層程式碼構建（重點）

n 持久層程式碼抽取

IBaseDao.java

package com.sh.bos.dao.base;

import java.io.Serializable;
import java.util.List;

/**
 * 持久層通用介面
 *
 * @author lee [email protected]
 * @create 2018-03-19 8:54
 **/
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.java

package com.sh.bos.dao.base.impl;

import com.sh.bos.dao.base.IBaseDao;
import org.hibernate.SessionFactory;
import org.springframework.orm.hibernate5.support.HibernateDaoSupport;

import javax.annotation.Resource;
import java.io.Serializable;
import java.lang.reflect.ParameterizedType;
import java.lang.reflect.Type;
import java.util.List;
/**
 * 持久層通用實現
 *
 */
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);
    }
}

n 表現層程式碼抽取

BaseAction.java

package com.sh.bos.web.action.base;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

import java.lang.reflect.ParameterizedType;
import java.lang.reflect.Type;

/**
 * 表現層通用實現
 * @author lee [email protected]
 * @create 2018-03-19 19:29
 **/

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();
        }
    }
}

六、實現BOS專案登入和登出功能