SSM入門項目-3-門戶與內容服務

門戶搭建

1，根據manager_web，搭建portal_web。

2，web.xml攔截的時候改成

<!-- 實現網頁的僞靜態化 -->
<url-pattern>*.html</url-pattern>

3，將web.xml中的初始頁面改爲html

<welcome-file>index.html</welcome-file>

4，在Controller中去調整攔截內容

    @RequestMapping("/index")
    public String showIndex() {
        return "index";
    }

搭建內容服務

1，js分析

和創建管理服務一樣，創建一個聚合工程。子模塊創建interface和service即可。這部分的內容不再寫了。但分析一段js。

onContextMenu: function(e,node){
            e.preventDefault();
            $(this).tree('select',node.target);
            $('#contentCategoryMenu').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }

這個onContextMenu，代表的是在菜單中點擊右鍵。
$(this).tree(‘select’,node.target);代表將菜單變成選中狀態
然後獲得位置之後，顯示菜單

然而關於添加節點的部分，用到的是如下的js，這個js是綁定在這個tree上的。

function menuHandler(item){
    var tree = $("#contentCategory");
    var node = tree.tree("getSelected");
    if(item.name === "add"){
        tree.tree('append', {
            parent: (node?node.target:null),
            data: [{
                text: '新建分類',
                id : 0,
                parentId : node.id
            }]
        }); 
        var _node = tree.tree('find',0);
        tree.tree("select",_node.target).tree('beginEdit',_node.target);
    }else if(item.name === "rename"){
        tree.tree('beginEdit',node.target);
    }else if(item.name === "delete"){
        $.messager.confirm('確認','確定刪除名爲 '+node.text+' 的分類嗎？',function(r){
            if(r){
                $.post("/content/category/delete/",{parentId:node.parentId,id:node.id},function(){
                    tree.tree("remove",node.target);
                }); 
            }
        });
    }
}

node是取到的tree的節點。然後根據add，rename，delete進行了分析。
tree.tree（）方法主要是創建新的節點，parent代表的是獲取的節點，data代表的是新增的節點。
之後再tree中找到id爲0的節點，然後改成beginEdit的狀態。

而光標離開時候的方法，子啊tree的初始化的方法中。

    onAfterEdit : function(node){
            var _tree = $(this);
            if(node.id == 0){
                // 新增節點
                $.post("/content/category/create",{parentId:node.parentId,name:node.text},function(data){
                    if(data.status == 200){
                        _tree.tree("update",{
                            target : node.target,
                            id : data.data.id
                        });
                    }else{
                        $.messager.alert('提示','創建'+node.text+' 分類失敗!');
                    }
                });
            }else{
                $.post("/content/category/update",{id:node.id,name:node.text});
            }
        }

在這個光標離開的方法中，根據id是0和非0判斷是新增的還是重命名的方法，然後提交請求。
在返回時status==200，把tree更新操作，把返回的id更新到node.target中，也就是說不會再是新增的0的id，而是自動生成的id。

2，在mapper中自動更新主鍵

<selectKey keyProperty="id" resultType="long" order="AFTER">
            SELECT
            LAST_INSERT_ID()
        </selectKey>

在insert標籤內添加，實現自增。

內容管理

1，js分析

在點擊toolbar中，會根據先在選中的節點是否是葉子節點來判斷是否提示消息“新增內容必須選擇一個內容分類！”而如果在葉子節點下的js如下：

createWindow : function(params){
        $("<div>").css({padding:"5px"}).window({
            width : params.width?params.width:"80%",
            height : params.height?params.height:"80%",
            modal:true,
            title : params.title?params.title:" ",
            href : params.url,
            onClose : function(){
                $(this).window("destroy");
            },
            onLoad : function(){
                if(params.onLoad){
                    params.onLoad.call(this);
                }
            }
        }).window("open");
    }

這裏面的params，是url : “/content-add”。
爲了能夠看出效果，我們再實現一個顯示列表的查詢，別忘了傳categoryId作爲Controller接受的參數，這樣一個內容服務的簡單效果就實現了。