【SaaS-Export项目】 - 04 前台AdminLTE介绍与入门使用,AdminLTE汉化版下载,搭建一个AdminLTE入门页面
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 使用模板,进行左侧菜单栏开发
- 找到左侧菜单栏代码,将其全部拿出去,重新建立一个
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://blog.csdn.net/qq_40542534/article/details/109252065
上一篇: 手机微信在哪看今日油价走势图 手机微信查询油价的方法
下一篇: HTML小白也能懂-1