半暖商城第一季--后台管理系统框架AdminLTE的搭建和使用（七）

1. 前言

这个时代就是互联网发展最好的时代，无论是资源还是框架都是层出不穷，作为一名开发人员，如何避免重复造轮子就变成一项尤为重要的技能。本篇我将介绍Github Star量将近16k的一个开源管理框架AdminLTE。

2. AdminLTE

这是AdminLTE的Github地址。
这是AdminLTE的官网地址。

相关详细介绍请阅读官方文档。

3. 引入AdminLTE

1. 首先到Github下载最新的开源项目。

   
   
   

   AdminLTE

2. 因为AdminLTE项目是基于BootStrap的所以项目还需要引入BootStrap的文件。

   
   
   

   Bootstrap

3. 拷贝下图中的文件到项目静态资源文件内。

   
   
   

   static

4. 新建main.jsp。并将官方的示例代码starter.html拷贝到main.jsp中，然后根据自己的需求进行相应的更改。

main.jsp

<%--
  Created by IntelliJ IDEA.
  User: alibct
  Date: 2017/3/9
  Time: 下午2:14
  Desc: 半暖商城-后台管理系统
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    Long administratorId = (Long) session.getAttribute("administratorId");
    String administratorName = (String) session.getAttribute("administratorName");
    Integer privilegeLevel = (Integer) session.getAttribute("privilegeLevel");
    if (null == administratorId) {
        response.sendRedirect(request.getContextPath() + "/signIn");
        return;
    }
%>



    
    
    
    
    <%--Tell the browser to be responsive to screen width--%>
    
    
    
    
    
    <%--
    AdminLTE Skins. We have chosen the skin-blue for this starter
    page. However, you can choose any other skin. Make sure you
    apply the skin class to the body tag so the changes take effect.
    --%>
    
    <%--HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries--%>
    <%--WARNING: Respond.js doesn't work if you view the page via file://--%>
    <%--[if lt IE 9]--%>
    <%----%>
    <%----%>
    <%--[endif]--%>

<%--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
--%>


    <%--顶部导航条--%>
    

        
            半暖
            SemiWarm
        

        

            
                Toggle navigation
            
            

                

                    

                        
                            
                            <%=administratorName%>
                        
                        

                            

                                
                                

                                    <%=administratorName%>
                                
                                权限等级
                                <%=privilegeLevel%>
                            
                            

                                

                                    

                                        <%--消息图标--%>
                                        

                                            

                                                
                                                    
                                                    4
                                                
                                            
                                        
                                    
                                    

                                        <%--通知图标--%>
                                        

                                            

                                                
                                                    
                                                    10
                                                
                                            
                                        
                                    
                                    

                                        <%--任务图标--%>
                                        

                                            

                                                
                                                    
                                                    9
                                                
                                            
                                        
                                    
                                
                            
                            

                                

                                    <%--设置界面--%>
                                    设 置
                                
                                

                                    <%--退出登录按钮--%>
                                    退
                                        出
                                
                            
                        
                    
                
            
        
    

    <%--左侧导航栏--%>
    

        

            

                

                    
                
                

                    
<%=administratorName%>
                    
                     在线
                
            
            <%--搜索表单--%>
            

                

                    
                    
                        
                    
                
            
            

                <%--主页--%>
                

                    
                        
                        主页
                    
                
            
        
    

    <%--主要内容区--%>
    

        

            

                主 页
                后台管理
            
            

                

                     主页
                
            
        

        
        


            

        
    

<%--引用文件--%>

以上是根据我的项目修改之后的主要框架代码，仅供参考。每个部分都有相应的注释，如果还有看不懂的地方，请建议仔细阅读官方示例。

以上的简单配置之后就可以运行了，下面提一些简单的注意点。

1. 一定要添加，否则可能会出现兼容性问题。
2. 每一个界面都必须拷贝以上的代码，并在内容区域添加自定义内容。（这个还是有点麻烦的）
3. 如果需要使用官方的插件，请自行阅读官方文档。