Springboot + WebJars + AdminLTE 2 : HelloWorld 项目
本文给出一个使用 Springboot + WebJars + AdminLTE 2组合进行开发的HelloWorld Web项目。该组合有如下好处 :
- 目标
web应用可以以jar包方式独立部署和运行； - 使用
WebJars方式管理三方JavaScript包，避免琐碎易错的手工管理; - 前后端开发在同一个
Java开发项目内完成; - 使用
AdminLTE 2,方便快速开始一个管理端项目；
现在，我们分享一下源代码。需要先说明的一点是，这是一个maven项目。
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0modelVersion>
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.1.4.RELEASEversion>
parent>
<groupId>com.andygroupId>
<artifactId>springboot-webjar-web-demoartifactId>
<version>0.0.1version>
<name>springboot-webjar-web-demoname>
<description>Demo web project for Spring Boot + WebJarsdescription>
<properties>
<java.version>1.8java.version>
properties>
<dependencies>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>AdminLTEartifactId>
<version>2.4.10version>
dependency>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>jqueryartifactId>
<version>3.4.0version>
dependency>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>font-awesomeartifactId>
<version>4.7.0version>
dependency>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>ioniconsartifactId>
<version>2.0.1version>
dependency>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>bootstrapartifactId>
<version>3.4.1version>
dependency>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>webjars-locatorartifactId>
<version>0.30version>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
plugin>
plugins>
build>
project>
对该项目的一些解释 :
- 使用
spring-boot 2.1.4; - 使用
spring-boot-starter-web声明这是一个web项目，缺省使用内置tomcat在8080端口提供服务; - 引入
AdminLTE webjar，这是AdminLTE管理端开发组件自身； - 引入
bootstrap webjar,这是AdminLTE的潜在依赖； - 引入
font-awesome webjar,这是AdminLTE使用的字体三方库； - 引入
ioniconswebjar,这是AdminLTE使用的图标三方库； - 引入
jquery webjar,这是bootstrap的潜在依赖； - 引入
webjars-locator，这样HTML文件中三方库引入时可以省略版本信息；
SpringBoot Java入口程序
package com.andy.webJarWebDemo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoWebApplication {
public static void main(String[] args) {
SpringApplication.run(DemoWebApplication.class, args);
}
}
前端 React 应用
入口页面 resources/static/index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Startertitle>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/webjars/ionicons/css/ionicons.css">
<link rel="stylesheet" href="/webjars/AdminLTE/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/webjars/AdminLTE/dist/css/skins/skin-blue.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<a href="index2.html" class="logo">
<span class="logo-mini"><b>Ab>LTspan>
<span class="logo-lg"><b>Adminb>LTEspan>
a>
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigationspan>
a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o">i>
<span class="label label-success">4span>
a>
<ul class="dropdown-menu">
<li class="header">You have 4 messagesli>
<li>
<ul class="menu">
<li>
<a href="#">
<div class="pull-left">
<img src="/webjars/AdminLTE/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
div>
<h4>
Support Team
<small><i class="fa fa-clock-o">i> 5 minssmall>
h4>
<p>Why not buy a new awesome theme?p>
a>
li>
ul>
li>
<li class="footer"><a href="#">See All Messagesa>li>
ul>
li>
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o">i>
<span class="label label-warning">10span>
a>
<ul class="dropdown-menu">
<li class="header">You have 10 notificationsli>
<li>
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua">i> 5 new members joined today
a>
li>
ul>
li>
<li class="footer"><a href="#">View alla>li>
ul>
li>
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o">i>
<span class="label label-danger">9span>
a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasksli>
<li>
<ul class="menu">
<li>
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%small>
h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Completespan>
div>
div>
a>
li>
ul>
li>
<li class="footer">
<a href="#">View all tasksa>
li>
ul>
li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="/webjars/AdminLTE/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Piercespan>
a>
<ul class="dropdown-menu">
<li class="user-header">
<img src="/webjars/AdminLTE/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012small>
p>
li>
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followersa>
div>
<div class="col-xs-4 text-center">
<a href="#">Salesa>
div>
<div class="col-xs-4 text-center">
<a href="#">Friendsa>
div>
div>
li>
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profilea>
div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign outa>
div>
li>
ul>
li>
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears">i>a>
li>
ul>
div>
nav>
header>
<aside class="main-sidebar">
<section class="sidebar">
<div class="user-panel">
<div class="pull-left image">
<img src="/webjars/AdminLTE/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
div>
<div class="pull-left info">
<p>Alexander Piercep>
<a href="#"><i class="fa fa-circle text-success">i> Onlinea>
div>
div>
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search">i>
button>
span>
div>
form>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">平台功能li>
<li class="active"><a href="#"><i class="fa fa-link">i> <span>客户管理span>a>li>
<li><a href="#"><i class="fa fa-link">i> <span>订单管理span>a>li>
<li class="treeview">
<a href="#"><i class="fa fa-link">i> <span>管理员管理span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right">i>
span>
a>
<ul class="treeview-menu">
<li><a href="#">管理账号管理a>li>
<li><a href="#">管理角色管理a>li>
ul>
li>
ul>
section>
aside>
<div class="content-wrapper">
<section class="content-header">
<h1>
Page Header
<small>Optional descriptionsmall>
h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard">i> Levela>li>
<li class="active">Hereli>
ol>
section>
<section class="content container-fluid">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Spring Boot + WebJars + AdminLTE 2.xh3>
<div class="box-tools pull-right">
<span class="label label-primary">2019-04-20span>
div>
div>
<div class="box-body">
Hello World
div>
<div class="box-footer">
北京阴天小雨
div>
div>
section>
div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
Anything you want
div>
<strong>Copyright © 2016 <a href="#">Companya>.strong> All rights reserved.
footer>
<aside class="control-sidebar control-sidebar-dark">
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home">i>a>li>
<li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears">i>a>li>
ul>
<div class="tab-content">
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activityh3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<i class="menu-icon fa fa-birthday-cake bg-red">i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthdayh4>
<p>Will be 23 on April 24thp>
div>
a>
li>
ul>
<h3 class="control-sidebar-heading">Tasks Progressh3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="pull-right-container">
<span class="label label-danger pull-right">70%span>
span>
h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%">div>
div>
a>
li>
ul>
div>
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Contentdiv>
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settingsh3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
label>
<p>
Some information about this general settings option
p>
div>
form>
div>
div>
aside>
<div class="control-sidebar-bg">div>
div>
<script src="/webjars/jquery/jquery.min.js">script>
<script src="/webjars/bootstrap/js/bootstrap.min.js">script>
<script src="/webjars/AdminLTE/dist/js/adminlte.min.js">script>
body>
html>
对本入口文件的一些说明 :
- 使用
resources/static/index.html是因为Spring MVC会自动将其映射到/; - 该页面基于
AdminLTE官网演示页面源代码改造；
运行效果
最终我们运行该应用，它会在http://localhost:8080展示该页面如下 :
参考内容
- AdminLTE官网
- AdminLTE官方文档
- AdminLTE 2的布局Layout
- AdminLTE 2的组件Component