1、AdminLTE介绍

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具。

2、AdminLTE有什么特点？

  • 提供一系列响应的、可重复使用的组件， 并内置了多个模板页面
  • 自适应多种屏幕分辨率，兼容PC和移动端
  • 快速的创建一个响应式的Html5网站

  • AdminLTE 不但美观， 而且可以免去写很大CSS与JS的工作量

    3、下载

  • 官方原版
    https://adminlte.io/
    https://github.com/ColorlibHQ/AdminLTE

只需要dist和plugins文件夹即可！
image.png

4、AdminLTE入门程序

（1）创建项目，引入css/js等静态资源；

image.png

（2）pom.xml依赖；

  1.  <!--web基础包 -->
  2.     <dependency>
  3.       <groupId>javax.servlet</groupId>
  4.       <artifactId>servlet-api</artifactId>
  5.       <version>2.5</version>
  6.       <scope>provided</scope>
  7.     </dependency>
  8.     <dependency>
  9.       <groupId>javax.servlet.jsp</groupId>
  10.       <artifactId>jsp-api</artifactId>
  11.       <version>2.0</version>
  12.       <scope>provided</scope>
  13.     </dependency>
  14.     <dependency>
  15.       <groupId>jstl</groupId>
  16.       <artifactId>jstl</artifactId>
  17.       <version>1.2</version>
  18.     </dependency>

（3）创建index.jsp

复制模板文件all-admin-datalist.html代码到 index.jsp

  • 注：需加入

    <%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

    （4）报错–>路径

    如果在加载访问出现了404错误，可能是css/js/plugins引用路径出现了错误!
    解决办法：
    使用项目路径${path}替换掉 …/

    …/plugins—–> ${path}/plugins
…/css—–> ${path}/css
…/img—–> ${path}/img

    （5）对左侧菜单进行删除与修改

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

  • （2）创建【企业管理】菜单
     <!-- 导航侧栏 -->
  <jsp:include page="left_menu.jsp"/>
  <!-- 导航侧栏 /-->

    注意点：

    1、jsp的basepath配置：

    一、在页面最上方定义一个变量，使用request中的属性获取路径。

    <%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

    二、在头标签中加入base标签。

    <base href="<%=basePath%>">

    示例代码如下：

    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
  <base href="<%=basePath%>">
  <title>登录</title>