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接受的参数，这样一个内容服务的简单效果就实现了。