Intellij IDEA部署AdminLTEmode

AdminLTE介绍

(1)AdminLTE是什么?
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
(2)AdminLTE有什么特点?

  • 提供一系列响应的、可重复使用的组件, 并内置了多个模板页面
  • 自适应多种屏幕分辨率,兼容PC和移动端
  • 快速的创建一个响应式的Html5网站
  • AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量

AdminLTE入门程序

(1)官方原版
https://adminlte.io/
https://github.com/ColorlibHQ/AdminLTE
(2)汉化版
在这里插入图片描述

AdminLTE入门程序

(1)创建项目,引入AdminLTE汉化版中release/dist下所有静态资源
在这里插入图片描述
在这里插入图片描述
(2)删除原有index.jsp后新建index.jsp
设置path为项目访问路径

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<% //1.引入web基本模块,设置path为项目访问路径
    pageContext.setAttribute("path",request.getContextPath());
%>

(3)复制pages下的all-admin-datalist.html模板中的html代码t替换掉index.jsp的html
在这里插入图片描述
(4)在index.jsp中使用搜索(ctrl+f)和替换(ctrl+r)
…/plugins ——> ${path}/plugins
…/css ——> ${path}/css
…/img ——> ${path}/img
在这里插入图片描述
注:选择红框内全部替换,已替换过显示搜索为0。
导入web基础包
pom.xml

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

对左侧栏进行删除和修改

1.新建left_menu.jsp,把index.jsp的左侧栏代码收缩后移进去,复制路径进去。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.把index.jsp中左侧栏位置添加include 标签引入left_menu.jsp (不同区域以后都这么部署)

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

3.有张图片找不到,在left_menu.jsp中添加isELIgnored表达式
在这里插入图片描述

isELIgnored="false"

4.对左侧栏进行删除和修改:left_menu.jsp中留一个treeview
在这里插入图片描述

<li class="treeview">
                <a href="#">
                    <i class="fa fa-folder"></i> <span>企业管理</span>
                    <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                <ul class="treeview-menu">

                    <li id="admin-login">
                        <a href="all-admin-login.html">
                            <i class="fa fa-circle-o"></i> 登录
                        </a>
                    </li>

                    <li id="admin-register">
                        <a href="all-admin-register.html">
                            <i class="fa fa-circle-o"></i> 注册
                        </a>
                    </li>

                </ul>
            </li>

效果图
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页