D2

AdminLTE介绍

• AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
• 特点
  》提供一系列响应的、可重复使用的组件， 并内置了多个模板页面
  》自适应多种屏幕分辨率，兼容PC和移动端
  》快速的创建一个响应式的HTML5网站
  》AdminLTE 不但美观， 而且可以免去写很大CSS与JS的工作量

AdminLTE部署

官方网址https://adminlte.io/

• 创建webapp项目
• 导入依赖pom.xml

<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
</dependency>

• 导入css等文件

• 创建一个index.jsp，复制模板的代码过去，文件中名为all-admin-datalist.html的html文件
• 使用${path}替换带…/的路径
  …/plugins》 ${path}/plugins
  …/css》 ${path}/css
  …/img》 ${path}/img

对左侧菜单进行一些修改和删除

• 为了页面维护方便，将【菜单内容】移到left_menu.jsp中，再使用include引入index.jsp页面

<jsp:include page="left_menu.jsp"/>

• left_menu.jsp

		<ul class="sidebar-menu">
            <li class="header">菜单</li>
            <li id="admin-index"><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>
            <!-- 菜单 -->
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-folder"></i> <span>企业管理</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">
                    <li id="admin-login">
                        <a href="all-admin-login.html">
                            <i class="fa fa-circle-o"></i> 企业列表
                        </a>
                    </li>
                    <li id="admin-register">
                        <a href="all-admin-register.html">
                            <i class="fa fa-circle-o"></i> 企业添加
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 菜单 /-->
        </ul>