saas-export项目-创建AdminLTE入门界面

AdminLTE介绍

1. AdminLTE是什么？

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具内置了多个页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。
2. AdminLTE有什么特点？
》》提供一系列响应的、可重复使用的组件， 并内置了多个模板页面
》》自适应多种屏幕分辨率，兼容PC和移动端
》》快速的创建一个响应式的Html5网站
》》AdminLTE 不但美观， 而且可以免去写很大CSS与JS的工作量
3. AdminLTE托管在GitHub上，下面地址可以进行访问下载：https://github.com/ColorlibHQ/AdminLTE/releases

AdminLTE入门程序

1. 官方原版

https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE

2. 汉化版

目录结构

入门使用只需要使用release/dist目录下的四个文件就行

AdminLTE入门程序使用

创建项目，引入css/js等静态资源
创建index.jsp
复制模板文件代码到 index.jsp
all-admin-datalist.html
使用项目路径${path}替换掉 …/
…/plugins ${path}/plugins
…/css ${path}/css
…/img ${path}/img

1.idea创建一个web项目，引入css/js静态资源

将adminlte2-pro-master/release/dist路径下的css、img、pages、plugins导入到web项目的webapp目录下。pages目录下的是html模板

2.导入web基础包依赖

 <!--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>

3.复制release/dist/pages下的all-admin-datalist.html到index.jsp中当模板

需要加入jsp的头文件

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

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

1. 为了页面维护方便 将【菜单内容】移到left_menu.jsp中，再使用include引入当前页面
2. 创建【企业管理】菜单
   index.jsp

    <!-- 导航侧栏 -->
    <jsp:include page="left_menu.jsp"/>
    <!-- 导航侧栏 /-->

left_menu.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%    pageContext.setAttribute("path",request.getContextPath()); %>

3. 保留一个li标签，并删除，只留两个子项