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

你的名字 2022-12-17 14:50 176阅读 0赞

## 1. AdminLTE介绍 ##

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

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

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

**汉化版下载链接**：  
**[adminlte2-pro-master汉化版][adminlte2-pro-master]，提取码【8888】**  
目录结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]  
基础使用只需要使用`release/dist`目录下的四个文件就行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 1]  
`release/dist/pages/all-admin-datalist.html`效果大概是是这样的，基本上需要的功能都有。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 2]

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`页面）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 3]

### 2.2 导入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" %>

部署运行看能否访问到：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 4]  
上图发现没有任何样式，打开12查看网络情况发现（一堆报错）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 5]  
**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`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 6]

当我们全部替换成本项目路径之后，发现显示正常，无错误。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 7]

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

1.  找到左侧菜单栏代码，将其全部拿出去，重新建立一个`left_menu.jsp`页面放进去（方便以后管理和修改）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 8]  
    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"/>

比如对左侧菜单栏（导航栏），进行修改显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 9]

[https_github.com_ColorlibHQ_AdminLTE_releases]: https://github.com/ColorlibHQ/AdminLTE/releases
[https_adminlte.io]: https://adminlte.io/
[adminlte2-pro-master]: https://pan.baidu.com/s/1zl3jTxUxrSdfVNEsR8xZIA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/a791c3649af84d00b46f280085ff2709.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/1356fa3463604083829415e2a6deb64c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/c4ff57f962cb49f38f4f65c253bed225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221122/a9dd5272a88e4b7283b0cd3c70b9b76c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221122/7b2d140c8db24e2f9af498da03cd8c32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221122/d6e1320148924dfea2d843a893866b09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221122/9f531d210fdb4546bdc2cd3bb7ef6cd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221122/50cc2b285f4a4f0fb9b8b3347520615a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221122/98742c73211840b294a3571caa6a8ad3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221122/0988f5f226b04640ad3c2590b4c2db2f.png