AdminLTE 介绍与入门

AdminLTE介绍

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

AdminLTE入门

• （1）官方原版
  https://adminlte.io/
  https://github.com/ColorlibHQ/AdminLTE
  汉化版
  

idea部署

新建web项目AdminLTE

配置web基础包 pom.xml

<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--web基础包 -->
    <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>
  </dependencies>

拷贝

把adminlte2-pro-master\release\dist下的文件拷贝至webapp目录下

index.jsp

头部标签配置

 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>

设置path

<% pageContext.setAttribute("path",request.getContextPath());%>

路径替换
../plugins ------> ${path}/plugins

把pages/all-admin-datalist.html复制到index.jsp

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

新建left_menu.jsp,把index.jsp里边的多个<li class="treeview"标签折叠剪切过来

并在index.jsp添加

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

修改表格数据为企业管理