当前位置：首页 > news >正文

AdminLte入门搭建

news 2025/6/6 12:46:05

1.下载AdminLte，解压文件

在这里插入图片描述

2.创建webapp工程，将其部署在服务器上

在这里插入图片描述

3.将release的所有文件复制到webapp下

在这里插入图片描述

4.使用模板页面，修改模板页面资源文件的引用路径，添加jstl标签库等依赖

注意：将引入的css样式表，js，图片的路径前的**..**换成自己的项目路径即request.getContextPath()

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%
pageContext.setAttribute("path",request.getContextPath());
%><link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.min.css"><script src="${path}/plugins/bootstrap/js/bootstrap.min.js"></script><img src="${path}/img/user2-160x160.jpg" class="img-circle" alt="User Image">............

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>

5.修改左侧菜单

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %><ul class="sidebar-menu"><li class="header">菜单</li><li id="admin-index"><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a></li><!-- 菜单 --><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></ul>