body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}




     

      
       已成功注销

			

            
 
			
使用账号密码登录
			 
				
					账号
					
				

      重新加载并运行我们的程序我们会看到我们全新的页面效果如下所示：

       到此我们的登陆的首页已经完成了，接着我们再开发我们登陆成功以后的主页main.html，在我们编写我们的主页的时候，我们需要重新设计下我们的数据库，因此我们现有的表结构无法支撑起来我们的整个业务系统，因此我们重新设计了我们的数据库如下图：

接着我们直接生成我们的数据库执行脚本，并在我们的数据库中执行，同时使用我们上一章开发的工具我们来快速生成我们的代码,并根据我们的权限架构来修改我们的代码，以下是经过修改以后的代码的结构：

在我们的工程中有一些我们经常用到的CSS或者js 我们并不想每个页面都进行一次引用，因此我们新建一个全局的引用到我们的工程（在templates底下新建一个文件夹include同时创建includebase.html文件）中如下：

通过以上的代码的快速生成、修改以及配置我们这才可以正式开发我们的登陆成功以后的首页，首页代码如下：

    $(function () {
        // 页面加载完成以后开启websocket的连接
        var options = new Array();
        options.sockurl = '/ricky-websocket';
        options.stompClienturl = '/ricky/topic/greetings';
        options.login = [[${#authentication.name}]];
        options.success = function(greeting){
            var r = eval("("+JSON.parse(greeting.body).content+")")
           alert(r);
            // $("#greetings").append("" + JSON.parse(greeting.body).content + "");
        }
        $.fn.socketConnect(options);
        // 初始化nav
        $.fn.bootstrapNav({index:'main',navTitle:'XXXX管理系统'});
        // 初始化标签页
        $("#tabContainer").tabs({
            data: [{
                id: '99999999',
                text: '首页',
                url: "home",
                closeable: false
            }],
            showIndex: 0,
            loadAll: false
        })
        //
        $.fn.bootstrapTree({url:"/user/mainTree",treeId:'menu_tree',tabId:"tabContainer"});
        $.fn.dictUtil("/dict/loadDict");
    });