【SaaS-Export项目】 – 04 前台AdminLTE介绍与入门使用，AdminLTE汉化版下载，搭建一个AdminLTE入门页面「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1. AdminLTE介绍

1）AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具（完全响应管理模板）。内置了多个页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。

2）AdminLTE托管在GitHub上，下面地址可以进行访问下载：https://github.com/ColorlibHQ/AdminLTE/releases

官方原版（英文）：https://adminlte.io/
也可以通过git clone 克隆下来使用
git clone https://github.com/almasaeed2010/AdminLTE.git

汉化版下载链接：
adminlte2-pro-master汉化版，提取码【8888】
目录结构：

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

release/dist/pages/all-admin-datalist.html效果大概是是这样的，基本上需要的功能都有。

3）AdminLTE的特点

• AdminLTE自带JQuery和Bootstrap3框架，无需另外下载。
• 提供一系列响应的、可重复使用的组件， 并内置了多个模板页面，自带多种配色皮肤，可根据需要实时调整。
• 自适应多种屏幕分辨率，兼容PC和移动端（电脑和手机自动适应屏幕分辨率）。
• 能够快速的创建一个响应式的Html5网站。
• AdminLTE 不但美观， 而且可以免去写很大CSS与JS的工作量。

【注意】：AdminLTE的源文件包内，缺少font-awesome-4.6.3和ionicons-2.0.1这两个图标插件，它是通过CDN的形式加载的，如果网络不太好，加载可能比较困难或者缓慢，最好改用本地静态文件的形式。解决办法就是附带上了这两个插件，可以直接使用，当然你自己下载安装也行。

2. AdminLTE入门程序使用

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

将adminlte2-pro-master/release/dist路径下的css、img、pages、plugins导入到web项目的webapp目录下。pages目录下的是html模板，你也可以按照你自己的需要导入（这个入门只用到了all-admin-datalist.html页面）

2.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>

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

需要加入jsp的头文件

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

部署运行看能否访问到：

上图发现没有任何样式，打开12查看网络情况发现（一堆报错）

404错误原因：，模板的路径都是使用../比如…/plugins ../css ../img等路径，而不是我们的项目路径。
解决办法：在jsp中获取当前项目路径：
<% pageContext.setAttribute("path",request.getContextPath()); %>
然后通过Ctrl+Shift+R一键替换将当前项目路径path替换掉../plugins比如将../plugins替换为${path}/plugins，css和img也是同样操作

…/plugins 替换成 ${path}/plugins
…/css 替换成 ${path}/css
…/img 替换成 ${path}/img

当我们全部替换成本项目路径之后，发现显示正常，无错误。

2.4 使用模板，进行左侧菜单栏开发

1. 找到左侧菜单栏代码，将其全部拿出去，重新建立一个left_menu.jsp页面放进去（方便以后管理和修改）
   
   left_menu.jsp需要有jsp的头文件和当前项目路径

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

然后按照显示的东西对其进行修改删除增加就行。然后测试显示就行，其他位置的也拉出来进行修改就可以。
拉出来之后，主页面index.jsp需要引入左侧菜单栏页面

	<%--导入左侧菜单栏 --%>
    <jsp:include page="left_menu.jsp"/>

比如对左侧菜单栏（导航栏），进行修改显示：