部署AdminLTE

最新推荐文章于 2024-09-11 09:11:04 发布

qq_40711092

最新推荐文章于 2024-09-11 09:11:04 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/qq_40711092/article/details/109254712

版权

下载AdminLTE的相关文件

在这里插入图片描述

AdminLTE入门程序

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

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）创建项目，引入css/js等静态资源

在这里插入图片描述

（2）创建index.jsp

在这里插入图片描述

（3）复制模板文件代码到 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
 <head/>
 ...

（4）使用项目路径${path}替换掉 …/

在这里插入图片描述

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

在这里插入图片描述

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

（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" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<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>

        <li id="admin-404">
            <a href="all-admin-404.html">
                <i class="fa fa-circle-o"></i> 404页
            </a>
        </li>

        <li id="admin-500">
            <a href="all-admin-500.html">
                <i class="fa fa-circle-o"></i> 500页
            </a>
        </li>

        <li id="admin-blank">
            <a href="all-admin-blank.html">
                <i class="fa fa-circle-o"></i> 空白页
            </a>
        </li>

        <li id="admin-datalist">
            <a href="all-admin-datalist.html">
                <i class="fa fa-circle-o"></i> 数据列表页
            </a>
        </li>

        <li id="admin-dataform">
            <a href="all-admin-dataform.html">
                <i class="fa fa-circle-o"></i> 表单页
            </a>
        </li>

        <li id="admin-profile">
            <a href="all-admin-profile.html">
                <i class="fa fa-circle-o"></i> 个人中心
            </a>
        </li>

        <li id="admin-invoice">
            <a href="all-admin-invoice.html">
                <i class="fa fa-circle-o"></i> 发票
            </a>
        </li>

        <li id="admin-invoice-print">
            <a href="all-admin-invoice-print.html">
                <i class="fa fa-circle-o"></i> 发票打印
            </a>
        </li>

    </ul>
</li>
</body>
</html>