AdminLTE的介绍与使用(详细流程)—–前端框架

时间:2020-10-27 作者:admin

文章目录



AdminLTE介绍

(1)AdminLTE是什么?

AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具。

(2)AdminLTE有什么特点?

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

(3)下载

  • 官方原版
    https://adminlte.io/
    https://github.com/ColorlibHQ/AdminLTE
  • 汉化版

目录结构:

AdminLTE的介绍与使用(详细流程)-----前端框架
只需要使用以下的四个文件就行
AdminLTE的介绍与使用(详细流程)-----前端框架
大概样式:
AdminLTE的介绍与使用(详细流程)-----前端框架

AdminLTE入门程序

(1)创建项目,引入css/js等静态资源

AdminLTE的介绍与使用(详细流程)-----前端框架

(2)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>

(3)创建index.jsp

复制模板文件all-admin-datalist.html代码到 index.jsp

  • 注:需加入
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

(4)报错–>路径

如果在加载访问出现了404错误,可能是css/js/plugins引用路径出现了错误

解决办法:
使用项目路径${path}替换掉 …/

/plugins—–> ${path}/plugins
/css—–> ${path}/css
/img—–> ${path}/img

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

  • (1)为了页面维护方便 将【菜单内容】移到left_menu.jsp中,再使用include引入当前页面
  • (2)创建【企业管理】菜单

index.jsp

    <!-- 导航侧栏 -->
    <jsp:include page="left_menu.jsp"/>
    <!-- 导航侧栏 /-->

效果展示:
AdminLTE的介绍与使用(详细流程)-----前端框架

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。