saas-export项目-AdminLTE介绍与入门

标签: ssm  java  web

AdminLTE介绍

  • (1)AdminLTE是什么?
    AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具
  • (2)AdminLTE有什么特点?
    提供一系列响应的、可重复使用的组件, 并内置了多个模板页面
    自适应多种屏幕分辨率,兼容PC和移动端
    快速的创建一个响应式的Html5网站
    AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量

AdminLTE入门

  • 官方原版
    https://adminlte.io/
    https://github.com/ColorlibHQ/AdminLTE
  • 步骤:

(1)到官网下载adminlte包,并解压
在这里插入图片描述

(2)打开release文件夹
在这里插入图片描述
(3)找到如图4个文件夹
在这里插入图片描述
(4)将这4个文件夹复制粘贴到项目中
在这里插入图片描述

AdminLTE入门程序

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

  • (2)创建index.jsp

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

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

在index.jsp与left_menu.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"/>
 <!-- 导航侧栏 /-->

left_menu.jsp

只保留一个li标签,并删除其中多余的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>

页面效果

在这里插入图片描述

版权声明:本文为weixin_46335487原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46335487/article/details/109249399

智能推荐

idea基础–(7)–jsp页面Controller路径自动识别的问题“Cannot resolve controller URL ...”,Cannot resolve variable

idea之所以强大,就是强大的代码提示和联想功能,写起代码来简直不要太爽。但是这几天我发现在我的jsp页面中访问controller路径的时候不会自动提示了,对于这么严谨的我肯定要找出原因啊,哈哈。 最终效果:按住ctrl,同时点击左键会自动跳转到对应的controller代码块,爽。 需要同时满足的条件 JSP页面顶部包含如下代码: 在idea的项目设置中显示如下:  若显示的是spring a...

26_Python基础_继承

面向对象三大特性: 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中 继承 实现代码的重用, 相同的代码不需要重复的编写 多态 不同的对象调用相同的方法,  产生不同的执行结果,  增加代码的灵活度 1.  单继承 1.1 概念 继承的概念:&...

循环

与任何程序设计语言一样Java利用条件语句与循环结构确定流程控制,一下总结一下Java中的循环语句: while do while for switch 对于golang来说: switch非常灵活。从第一个expr为true的case开始执行,如果case带有fallthrough,程序会继续执行下一条case,不会再判断下一条case的expr,如果之后的case都有fallthrough,d...

1638 统计只差一个字符的子串数目(动态规划)

1. 问题描述: 给你两个字符串 s 和 t ,请你找出 s 中的非空子串的数目,这些子串满足替换一个不同字符以后,是 t 串的子串。换言之,请你找到 s 和 t 串中恰好只有一个字符不同的子字符串对的数目。比方说, "computer" 和 "computation"...

websocket基本原理

HTTP中一个request只能有一个response。而且这个response也是被动的,不能主动发起 因此过去的服务端推送信息是通过客户端不停的轮询实现的 websocket是双向通信协议,提供了服务端主动推送信息的能力 需要客户端(浏览器)和服务端同时支持 如果经过代理的话,还需要代理支持,否则有些代理在长时间无通信时会自动切断连接 因此WS为了保证连接不被断掉,会发心跳 WebSocket...

猜你喜欢

mybatis+ehcache二级缓存

导入jar包 mapper.xml文件开启二级缓存 pojo类实现序列化接口 配置ehcache.xml 测试...

python+opencv实现图像拼接

任务 拍摄两张图片去除相同部分,拼接在一起 原图 结果 步骤 读取两张图片 使用sift检测关键点及描述因子 匹配关键点 处理并保存关键点 得到变换矩阵 图像变换并拼接 代码实现 扩展 这里对右边图像进行变换,右边变得模糊,可以修改代码对左边图像变换 这里只有两张图片拼接,可以封装实现多张图片拼接 可以修改代码实现上下图片的拼接...

python_sklearn机器学习算法系列之AdaBoost------人脸识别(PCA,决策树)

          注:在读本文之前建议读一下之前的一片文章python_sklearn机器学习算法系列之PCA(主成分分析)------人脸识别(k-NearestNeighbor,KNN)         本文主要目的是通过一个简单的小...

memmove函数与memcpy函数的模拟实现

memmove函数和memcpy函数都是在内存复制任意类型的,但是它俩也有区别。当源区域和目标区域有重复的,memmove函数会复制缓冲区重叠的部分,而memcpy相反,会报出未知错误。 下面给出两个函数的实现 首先,memmove函数。 实现的基本原理如下图。 具体代码如下: memcpy函数的实现很简单,就直接给出源代码了...