• Java单体应用


    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-index.html
    更多教程:光束云 - 免费课程

    首页布局

    序号 文内章节 视频
    1 概述 -
    2 代码实现 -
    3 实例源码 -

    请参照如上章节导航进行阅读

    1.概述

    我们参照 AdminLTE-3.0.2/index3.html 的页面布局进行改造,改造后的效果如下:

    2.代码实现

    主页 main.jsp 的页面代码如下:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>控制台 | IoT-Admin</title>
        <!-- Font Awesome Icons -->
        <link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
        <link rel="icon" href="/static/assets/img/favicon.ico">
    </head>
    <body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="/" class="nav-link">首页</a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="/auth/manager/list" class="nav-link">后台账户</a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a href="/auth/tenant/list" class="nav-link">租户</a>
                </li>
            </ul>
    
            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="#">
                        <i class="nav-icon fas fa-user-circle"></i>
                        ${manager.userName}
                        <i class="fas fa-angle-down right"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-md dropdown-menu-right">
                        <a href="/my/profile" class="dropdown-item">
                            <i class="fas fa-address-card mr-2"></i>我的资料
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="/my/change-password" class="dropdown-item">
                            <i class="fas fa-lock mr-2"></i>修改密码
                        </a>
                        <div class="dropdown-divider"></div>
                        <a href="/logout" class="dropdown-item">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
        <!-- /.navbar -->
    
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a href="/" class="brand-link">
                <img src="/static/assets/img/logo-128x128.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                     style="opacity: .8">
                <span class="brand-text font-weight-light">IoT-Admin</span>
            </a>
    
            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
                             with font-awesome or any other icon font library -->
                        <li class="nav-item">
                            <a href="/main" class="nav-link">
                                <i class="nav-icon fas fa-tachometer-alt"></i>
                                <p>
                                    控制台
                                </p>
                            </a>
                        </li>
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-user"></i>
                                <p>
                                    后台账户
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="/auth/manager/add" class="nav-link">
                                        <i class="far fa-edit nav-icon"></i>
                                        <p>新增</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="/auth/manager/list" class="nav-link">
                                        <i class="far fa-list-alt nav-icon"></i>
                                        <p>查询列表</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-store-alt"></i>
                                <p>
                                    租户
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="/auth/tenant/add" class="nav-link">
                                        <i class="far fa-edit nav-icon"></i>
                                        <p>新增</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="/auth/tenant/list" class="nav-link">
                                        <i class="far fa-list-alt nav-icon"></i>
                                        <p>查询列表</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-user-friends"></i>
                                <p>
                                    租户账户
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="/auth/tenant/user/add" class="nav-link">
                                        <i class="far fa-edit nav-icon"></i>
                                        <p>新增</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="/auth/tenant/user/list" class="nav-link">
                                        <i class="far fa-list-alt nav-icon"></i>
                                        <p>查询列表</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>
    
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark">控制台</h1>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item active">控制台</li>
                            </ol>
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->
    
            <!-- Main content -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header border-0">
                                    <div class="d-flex justify-content-between">
                                        <h3 class="card-title">图表1</h3>
                                        <a href="javascript:void(0);">查看</a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    图表1-内容
                                </div>
                            </div>
                            <!-- /.card -->
    
                            <div class="card">
                                <div class="card-header border-0">
                                    <h3 class="card-title">表格1</h3>
                                    <div class="card-tools">
                                        <a href="#" class="btn btn-tool btn-sm">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        <a href="#" class="btn btn-tool btn-sm">
                                            <i class="fas fa-bars"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    表格1-内容
                                </div>
                            </div>
                            <!-- /.card -->
                        </div>
                        <!-- /.col-md-6 -->
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header border-0">
                                    <div class="d-flex justify-content-between">
                                        <h3 class="card-title">图表2</h3>
                                        <a href="javascript:void(0);">查看</a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    图表2-内容
                                </div>
                            </div>
                            <!-- /.card -->
    
                            <div class="card">
                                <div class="card-header border-0">
                                    <h3 class="card-title">表格2</h3>
                                    <div class="card-tools">
                                        <a href="#" class="btn btn-sm btn-tool">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm btn-tool">
                                            <i class="fas fa-bars"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="card-body">
                                    表格2-内容
                                </div>
                            </div>
                        </div>
                        <!-- /.col-md-6 -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
    
        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
    
        <!-- Main Footer -->
        <footer class="main-footer">
            <strong>Copyright &copy; 2019-2020 <a href="http://www.work100.net">光束云</a>.</strong>
            All rights reserved.
            <div class="float-right d-none d-sm-inline-block">
                <b>Version</b> 1.0.0-beta
            </div>
        </footer>
    </div>
    <!-- ./wrapper -->
    
    <!-- REQUIRED SCRIPTS -->
    
    <!-- jQuery -->
    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE -->
    <script src="/static/assets/js/adminlte.js"></script>
    
    </body>
    </html>
    

    3.实例源码

    实例源码已经托管到如下地址:


    上一篇:后台登录
    下一篇:后台账户管理


    如果对课程内容感兴趣,可以扫码关注我们的 公众号QQ群,及时关注我们的课程更新

  • 相关阅读:
    matlab代码学习_2018728
    理解面向对象过程中创造一个对象的步骤
    html字符及空格占位问题
    div中img(及文字等inline元素和block元素)的自动换行
    css布局居中
    css3前缀解决方案
    自己写一个树形导航菜单
    《JavaScript核心概念及实践》 读书笔记
    css常用属性
    windows下有个目录名称中间有空格 java读目录空格变成%20 处理方法
  • 原文地址:https://www.cnblogs.com/liuxiaojun/p/training-monolithic-project-iot-cloud-admin-index.html
Copyright © 2020-2023  润新知