【SaaS-Export项目】 – 04 前台AdminLTE介绍与入门使用,AdminLTE汉化版下载,搭建一个AdminLTE入门页面「建议收藏」

【SaaS-Export项目】 – 04 前台AdminLTE介绍与入门使用,AdminLTE汉化版下载,搭建一个AdminLTE入门页面「建议收藏」AdminLTE介绍,汉化版下载,5分钟快速入门使用

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1. AdminLTE介绍

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

2)AdminLTE托管在GitHub上,下面地址可以进行访问下载:https://github.com/ColorlibHQ/AdminLTE/releases

官方原版(英文):https://adminlte.io/
也可以通过git clone 克隆下来使用
git clone https://github.com/almasaeed2010/AdminLTE.git

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

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页面)
在这里插入图片描述

2.2 导入web基础包依赖

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

部署运行看能否访问到:
在这里插入图片描述
上图发现没有任何样式,打开12查看网络情况发现(一堆报错)
在这里插入图片描述
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

在这里插入图片描述

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

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

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

比如对左侧菜单栏(导航栏),进行修改显示:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/164540.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Git配置环境变量「建议收藏」

    Git配置环境变量「建议收藏」环境变量位置:点击Path,编辑:任意位置打开gitBashHere,输入wheregit(查找git安装路径)去安装路径找到这三个文件位置,添加到变量中====================================为你的git添加邮箱和你的用户名(建议用英文)gitconfig–globaluser.name“用户名”gitconfig–globaluser.email“邮箱”gitconfig–list(查看配置)cmd中:git-a

    2022年10月22日
    0
  • 密码–暴力激活成功教程

    密码–暴力激活成功教程1.海德拉(Hydra)hydra是世界顶级密码暴力密码激活成功教程工具,支持几乎所有协议的在线密码激活成功教程,功能强大,其密码能否被激活成功教程关键取决于激活成功教程字典是否足够强大,在网络安全渗透过程中是一款必备的测试工具。root@kali2019:~#hydra-Luserlist.txt-Ppasswordlist.txt-t20192.168.106.134ssh我们先建立简单的字典…

    2022年8月22日
    4
  • VMI管理常见的业务场景(一)[通俗易懂]

    VMI管理常见的业务场景(一)[通俗易懂]VMI管理常见的业务场景(一)什么是VMI管理?和传统库存管理的差别VMI是供应商管理库存(VendorManagedInventory)的简称,为了界定清楚这个新的库存管理思想,需要弄明白它和传统库存管理的差别。传统库存管理是指对物料的收发存的业务管理,是各节点企业独立管理自有库存,最明显的缺点是容易存在库存管理的牛鞭效应、上下游企业利益对抗、合作与沟通困难等问题。VMI库存管理系统能够突破传统的条块分割的库存管理模式,VMI是一种在用户和供应商之间…

    2022年5月26日
    58
  • itextpdf生成列表基本用法

    itextpdf生成列表基本用法随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)、博主微信(guyun297890152)、QQ技术交流群(183198395)。在上一篇文章使用itextpdf生成表格基本用法中,介绍了生成表格的基本步骤和一些常用设置,同样的,在某些需求下,我们需要在pdf中展示列表,体现条理性,itextpdf同样支持,这个开源库支持很多种列表风格来满足…

    2022年6月22日
    30
  • 讲讲springboot_@SpringBootApplication

    讲讲springboot_@SpringBootApplication作为一个java程序员,如果你还不知道springboot,那你一定是落后了。1.什么是springbootSpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,SpringBoot致力于在蓬勃发展的快速应用开发领域(rapidappli

    2022年8月20日
    6
  • Excel 8000401a 错误 及解决办法[通俗易懂]

    Excel 8000401a 错误 及解决办法[通俗易懂]“/”应用程序中的服务器错误。——————————————————————————–检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误:8000401a。说明:执行当前Web请求期…

    2022年7月25日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号