Introduction and use of AdminLTE (detailed process)-----front-end framework

---

---

Introduction to AdminLTE

(1) What is AdminLTE?

AdminLTE is an open source template theme tool built on bootstrap and jquery.

(2) What are the characteristics of AdminLTE?

• Provide a series of responsive, reusable components, and built-in多个模板页面
• Adaptive multiple screen resolutions, compatible PCand移动端
• Quickly create a 响应式Html5 website
• AdminLTE is not only beautiful, but also免去写很大CSS与JS的工作量

(3) Download

• Official original version
  https://adminlte.io/
  https://github.com/ColorlibHQ/AdminLTE
• Chinese version

Directory Structure:

You only need to use the following four files.

Approximate style:

AdminLTE entry program

(1) Create a project and introduce static resources such as css/js

(2) pom.xml dependency

 <!--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) Create index.jsp

Copy the code of the template file all-admin-datalist.html to index.jsp

• Note: Need to join

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

(4) Error report -> path

If a 404 error occurs during loading access, it may be an error in the css/js/plugins reference path

Solution:
Replace with project path ${path}.../

…/plugins-----> ${path}/plugins
…/css-----> ${path}/css
…/img-----> ${path}/img

(5) Delete and modify the left menu

• (1) For the convenience of page maintenance, move the [menu content] to left_menu.jsp, and then use include to import the current page
• (2) Create [Enterprise Management] menu

index.jsp

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

Show results: