制作一个类似页面

给了个小活，写个小页面，就是在首页上一级菜单后面加一个。

原界面如下图：

 加过界面如下图：

制作如下：

先找到该页面的jsp，即：sys_param_list.jsp, 快捷键：ctrl+shift+r直接搜索。然后同方法找到sys_param_list.js

sys_param_list.jsp 中代码是按页面的div来排列的，第一个div是页面顶层logo，然后是一级菜单

这里用了动态加载，代码如下：

<jsp:include page="/public/jk/header.jsp" flush="true">
<jsp:param name="MENU_TYPE" value="order" />
</jsp:include>

可以看出包含了header.jsp文件，跳转过去，在其中找到该页的js代码，如下：

<script type="text/javascript"
    src="<%=request.getContextPath()%>/public/v4/js/header.js"></script>
<script type="text/javascript"

可以看出是在header.js中写的，再跳（注意路径）

在header.js中找到首页一级菜单的调取代码，如下：

//读取首页信息，构建一级菜单+++++++++++++++++++++++++++首页，日常处理，工单管理，集客系统管理，集客系统配置，报表工具，一级菜单从这里调取创建
    var param = {};
    param.roles_id = roleid;
    Service.asExcute('ISystemManageBO','queryHeaderMenuListByRole',[param],function(reply){
        if(reply){
            $("#header_ul_list").html("");
            for(var i=0;i<reply.length;++i){
                var data = reply[i];
                var li = $('<li class="nav-item"><a href="javascript:void(0);" class="nav-link">'+data.menu_name+'</a></li>');
                li.attr("url",data.menu_url);
                if (data.menu_url.indexOf(locstr)>=0)
                {
                    li.find("a").addClass("active");
                }
                li.click(function(){
                    $("#header_ul_list").find("li").find("a").removeClass("active");
                    $(this).find("a").addClass("active");
                    window.location.href=$(this).attr("url");
                });
                $("#header_ul_list").append(li);
            }
        }
    });

其中Service.asExcute()里调用了后台借口ISystemManageBO，再跟踪，找到方法queryHeaderMenuListByRole（），这被写在SystemManageBO类中，跟踪到该页该段代码，如下：

public List queryHeaderMenuListByRole(HashMap params) {
        String roles=Const.getStrValue(params, "roles_id");
        List list = new ArrayList();
        list.add(roles);
        try {
            String sql = "select m.* from privileges_rel p left join privileges s on s.priv_id=p.priv_id " +
                    "left join menu m on m.menu_id=s.menu_id where p.roles_id=? and s.priv_type='1' and menu_level='0' order by m.order_id asc ";
            List headerList = SqlMapExe.queryForMapListBySql(sql, list);
            return headerList;

        } catch (Exception e) {

            e.printStackTrace();
            System.out.println("查询首页一级菜单列表发生了错误！");
        }

        return null;
    }

通过sql语句，我们知道了又三个关联表，分别是: privileges_rel, privileges, menu

在数据库中找到这三个表，然后插入新的行

其中最后一行，集客系统配置test1就是我们插入的行，同样的，在表privileges_rel, privileges中根据menu_id，插入相对应的行。

有关roles_id,根据相同级别的一级菜单的id找到该级别roles_id，然后将该页面的roles_id设置为相同即可，本项目中该一级菜单的roles_id为1037。

最后，保存，clean项目，然后调试，连接服务器，即可加载页面。

相当于我新建一个页面，放在该项目路径中，然后再后台生成相关数据，来将该页面加载（挂载）进去，即可。