This is the first time I heard about this template, keep it for future use

1. Necessary configuration files for AdminLTE

2. Customize theme style

(1) Set the class in the body.

skin-blue: theme color, if _all-skins.min.css is introduced, there are many colors to choose from, as shown in the left picture, if it is set to skin-blue, the default is the theme style of the right picture.

 
 

sidebar-mini: found in AdminLTE.css.

 
 

(2) wrapper settings: AdminLTE.css

Header setting: put it in the header tag.

xxx background management system

Toggle navigation

  • ${user.name}
    •  

    ${user.name}

    • Followers Sales Friends

The header effect is shown in the figure below, click the sidebar toggle button, the logo-lg is hidden, and the logo-mini is displayed, as shown on the right.

 
 

aside setting: put in the aside tag.

navigation

front page

{{each sub1 as value i}} //sub1 corresponds to sub1 in js code.

{ {value.name}}

  • { {each value.sub as value1 i1}}//对应 rootList[i].sub
  • { {value1.name}}

{ {/each}}

{ {/each}}

functionsloveSliderData (list, pid){

var retList = [ ];

var len = list.length;

if (len > 0)

{

for (var i = 0; i < len; i++)

{

var x = list[i];

if (x.pid == pid)

{

var node = {};

node.name = x.name;

if (x.url == undefined || x.url == null || x.url == “”)

{

node.url = null;

}

else

{

node.url = “{ctx}{apath}/page/” + x.url;

}

node.ico = x.ico;

node.pid = x.pid;

node.id = x.id;

retList.push (node);

}

else

{

}

}

}

return retList;

}

$.HTTP.list (

{

url : “{ctx}{apath}/permission/list”,

success : function (list, pageinfo) {

var rootList = [ ];

rootList = sloveSliderData (list, 0); //According to the pid of the root menu is 0, select the root menu

if (list.length > 0)

{

for (var i = 0; i < rootList.length; i++)

{

rootList[i].sub = sloveSliderData (list, rootList[i].id); //The id of the root menu selected according to the pid of 0 is used as the pid of the submenu.

}

}

//Assemble the data source

var sidebardata =

{

sub1 : rootList

};

console.log(sidebardata);

// render menu data

var dt = template(“left-sidebarTmp”, sidebardata); //artTemplate method

$(“#left-sidebar”).html(dt);

}

});

Notice:

The data for {ctx}{apath}/permission/list interface is added manually in the database and the java backend has code to store the data into this interface. The database fields correspond to the fields required by the js code。

 

The sidebardata processed by js:

 

After success, the sidebar is displayed as shown below:

 

content setting: put it in the section tag.

  • front page

Click the link of the sidebar, the corresponding page will be displayed in the iframe_box.

 

Publisher: full stack programmer, please indicate the source: https://javaforall.cn/164548.htmlOriginal link: https://javaforall.cn

Related articles

Python Errors and Exceptions

The keyword for exception handling in python is different from that in c#. In python, try and except are used to handle exceptions, such as the following: 2. raise excepption

Spring Boot log

In any production system, proper logging is very important. This is extremely critical to the location processing of system faults. Spring Boot supports Java Util Logging, Log4j2, Lockback as the logging framework, and Spring Boot uses Logback as the defa

java Checked Exceptions and Unchecked Exceptions

There are two kinds of exceptions in the java world, one is Checked Exceptions , another called Unchecked Exceptions. 1) Checked Exceptions : Checked exceptions are checked at compile time (during compile time). If there is an exception, it will not pas

Spring 406 error

The web page appears 406 generally for the following two situations: 1.Missing jar package 2.If the URL of the access url has a suffix ending in .html, the server cannot respond to the json data. Because springMVC will mistakenly think that the request

webservice example

What is webservice: WebService is a remote invocation technology across programming languages and operating system platforms. The so-called cross programming language and cross operating platform means that the server program is written in java, and the

Install Tomcat

Tomcat relies on the java runtime environment, so it is necessary to have the appropriate version of the JDK before it can run properly. Tip: The current version is 9.0.5, but the version demonstrated here is 8.5.28, the reason is that CMDBuild officially

hbase Deployment

The deployment of hbase is relatively simple compared to java. The main process is as follows: 1. Download the latest stable version of hbase 2. Copy to the corresponding directory 3. Modify hbase-env.sh in the conf directory, and set java and inapplic

Java methods for creating threads

1.Inherits the Thread class and overrides the run( method. The run() method represents the task to be performed by the thread. • Thread is a thread class, located under the java.lang package

Java methods for creating threads

1.Inherits the Thread class and overrides the run( method. The run() method represents the task to be performed by the thread. • Thread is a thread class, located under the java.lang package