devbox
程序安全守护者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

开发测试平台（一）平台主页面_startbootstrap-sb-admin-gh-pages

作者：程序安全守护者 | 2024-01-30 20:02:02

赞

踩

startbootstrap-sb-admin-gh-pages

整个项目依赖的层级，web也就是controller层依赖了service层，需要引入service的模块，service层需要依赖dao层，需要引入dao层的模块，

填加lombook插件，在父pom下填加

  1.    <dependency>
  2.             <groupId>org.projectlombok</groupId>
  3.             <artifactId>lombok-maven-plugin</artifactId>
  4.             <version>1.16.18.1</version>
  5.         </dependency>

然后在dao层的pom里也加上，但是不用写版本号

  1.   <dependency>
  2.         <groupId>org.projectlombok</groupId>
  3.         <artifactId>lombok-maven-plugin</artifactId>
  4.     </dependency>

模块布局

第一步，在resource下面创建templates模板文件夹

第二步，创建一个layout文件夹，并且创建一个layout.ftl文件

第三步，在resource下面创建一个static文件夹在创建个lib

第四步，把需要的组件复制到lib下面，startbootstrap-sb-admin-gh-pages、bootstrap、jquery

第五步:layout.ftl上面加入
 

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="">
  8.     <title>小蜜蜂接口测试MOCK平台</title>
  9.     <!-- Bootstrap core JavaScript-->
  10.     <script src="/lib/startbootstrap-sb-admin-gh-pages/vendor/jquery/jquery.min.js"></script>
  11.     <script src="/lib/startbootstrap-sb-admin-gh-pages/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  12.  
  13.     <!-- Core plugin JavaScript-->
  14.     <script src="/lib/startbootstrap-sb-admin-gh-pages/vendor/jquery-easing/jquery.easing.min.js"></script>
  15.  
  16.     <!-- Page level plugin JavaScript-->
  17.     <script src="/lib/startbootstrap-sb-admin-gh-pages/vendor/chart.js/Chart.min.js"></script>
  18.     <script src="/lib/startbootstrap-sb-admin-gh-pages/vendor/datatables/jquery.dataTables.js"></script>
  19.     <script src="/lib/startbootstrap-sb-admin-gh-pages/vendor/datatables/dataTables.bootstrap4.js"></script>
  20.  
  21.     <!-- Custom scripts for all pages-->
  22.     <script src="/lib/startbootstrap-sb-admin-gh-pages/js/sb-admin.min.js"></script>
  23.  
  24.     <!-- Demo scripts for this page-->
  25.     <script src="/lib/startbootstrap-sb-admin-gh-pages/js/demo/datatables-demo.js"></script>
  26.     <script src="/lib/startbootstrap-sb-admin-gh-pages/js/demo/chart-area-demo.js"></script>
  27.  
  28.  
  29.     <!-- Custom fonts for this template-->
  30.     <link href="/lib/startbootstrap-sb-admin-gh-pages/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  31.  
  32.     <!-- Page level plugin CSS-->
  33.     <link href="/lib/startbootstrap-sb-admin-gh-pages/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
  34.  
  35.     <!-- Custom styles for this template-->
  36.     <link href="/lib/startbootstrap-sb-admin-gh-pages/css/sb-admin.css" rel="stylesheet">
  37.  
  38.     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
  39.  
  40. </head>
  41. </html>

在head下面加入body

  1. <body id="page-top">
  2.  
  3. <nav class="navbar navbar-expand navbar-dark bg-dark static-top">
  4.  
  5.     <a class="navbar-brand mr-1" href="index.html">小蜜蜂接口测试平台</a>
  6.  
  7.     <button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
  8.         <i class="fas fa-bars"></i>
  9.     </button>
  10.  
  11.     <!-- Navbar Search -->
  12.     <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
  13.         <div class="input-group">
  14.             <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
  15.             <div class="input-group-append">
  16.                 <button class="btn btn-primary" type="button">
  17.                     <i class="fas fa-search"></i>
  18.                 </button>
  19.             </div>
  20.         </div>
  21.     </form>
  22.  
  23.     <!-- Navbar -->
  24.     <ul class="navbar-nav ml-auto ml-md-0">
  25.         <li class="nav-item dropdown no-arrow mx-1">
  26.             <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  27.                 <i class="fas fa-bell fa-fw"></i>
  28.                 <span class="badge badge-danger">9+</span>
  29.             </a>
  30.             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
  31.                 <a class="dropdown-item" href="#">Action</a>
  32.                 <a class="dropdown-item" href="#">Another action</a>
  33.                 <div class="dropdown-divider"></div>
  34.                 <a class="dropdown-item" href="#">Something else here</a>
  35.             </div>
  36.         </li>
  37.         <li class="nav-item dropdown no-arrow mx-1">
  38.             <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  39.                 <i class="fas fa-envelope fa-fw"></i>
  40.                 <span class="badge badge-danger">7</span>
  41.             </a>
  42.             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
  43.                 <a class="dropdown-item" href="#">Action</a>
  44.                 <a class="dropdown-item" href="#">Another action</a>
  45.                 <div class="dropdown-divider"></div>
  46.                 <a class="dropdown-item" href="#">Something else here</a>
  47.             </div>
  48.         </li>
  49.         <li class="nav-item dropdown no-arrow">
  50.             <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  51.                 <i class="fas fa-user-circle fa-fw"></i>
  52.             </a>
  53.             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
  54.                 <a class="dropdown-item" href="#">Settings</a>
  55.                 <a class="dropdown-item" href="#">Activity Log</a>
  56.                 <div class="dropdown-divider"></div>
  57.                 <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
  58.             </div>
  59.         </li>
  60.     </ul>
  61.  
  62. </nav>
  63.  
  64. <div id="wrapper">
  65.  
  66.     <!-- Sidebar -->
  67.     <ul class="sidebar navbar-nav">
  68.         <li class="nav-item active">
  69.             <a class="nav-link" href="index.html">
  70.                 <i class="fas fa-fw fa-tachometer-alt"></i>
  71.                 <span>质量保障部</span>
  72.             </a>
  73.         </li>
  74.         <li class="nav-item">
  75.             <a class="nav-link" href="charts.html">
  76.                 <i class="fas fa-fw fa-chart-area"></i>
  77.                 <span>接口管理</span></a>
  78.         </li>
  79.         <li class="nav-item">
  80.             <a class="nav-link" href="tables.html">
  81.                 <i class="fas fa-fw fa-table"></i>
  82.                 <span>用例管理</span></a>
  83.         </li>
  84.         <li class="nav-item dropdown">
  85.             <a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  86.                 <i class="fas fa-fw fa-folder"></i>
  87.                 <span>工具箱</span>
  88.             </a>
  89.             <div class="dropdown-menu" aria-labelledby="pagesDropdown">
  90.                 <h6 class="dropdown-header">Login Screens:</h6>
  91.                 <a class="dropdown-item" href="login.html">Login</a>
  92.                 <a class="dropdown-item" href="register.html">Register</a>
  93.                 <a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
  94.                 <div class="dropdown-divider"></div>
  95.                 <h6 class="dropdown-header">Other Pages:</h6>
  96.                 <a class="dropdown-item" href="404.html">404 Page</a>
  97.                 <a class="dropdown-item" href="blank.html">Blank Page</a>
  98.             </div>
  99.         </li>
  100.     </ul>
  101.  
  102.     <div id="content-wrapper">
  103.  
  104.         <div class="container-fluid">
  105.  
  106.             <!-- Breadcrumbs-->
  107.             <ol class="breadcrumb">
  108.                 <li class="breadcrumb-item">
  109.                     <a href="#">Dashboard</a>
  110.                 </li>
  111.                 <li class="breadcrumb-item active">Overview</li>
  112.             </ol>
  113.  
  114.             <!-- Icon Cards-->
  115.             <div class="row">
  116.                 <div class="col-xl-3 col-sm-6 mb-3">
  117.                     <div class="card text-white bg-primary o-hidden h-100">
  118.                         <div class="card-body">
  119.                             <div class="card-body-icon">
  120.                                 <i class="fas fa-fw fa-comments"></i>
  121.                             </div>
  122.                             <div class="mr-5">26 New Messages!</div>
  123.                         </div>
  124.                         <a class="card-footer text-white clearfix small z-1" href="#">
  125.                             <span class="float-left">View Details</span>
  126.                             <span class="float-right">
  127.                   <i class="fas fa-angle-right"></i>
  128.                 </span>
  129.                         </a>
  130.                     </div>
  131.                 </div>
  132.                 <div class="col-xl-3 col-sm-6 mb-3">
  133.                     <div class="card text-white bg-warning o-hidden h-100">
  134.                         <div class="card-body">
  135.                             <div class="card-body-icon">
  136.                                 <i class="fas fa-fw fa-list"></i>
  137.                             </div>
  138.                             <div class="mr-5">11 New Tasks!</div>
  139.                         </div>
  140.                         <a class="card-footer text-white clearfix small z-1" href="#">
  141.                             <span class="float-left">View Details</span>
  142.                             <span class="float-right">
  143.                   <i class="fas fa-angle-right"></i>
  144.                 </span>
  145.                         </a>
  146.                     </div>
  147.                 </div>
  148.                 <div class="col-xl-3 col-sm-6 mb-3">
  149.                     <div class="card text-white bg-success o-hidden h-100">
  150.                         <div class="card-body">
  151.                             <div class="card-body-icon">
  152.                                 <i class="fas fa-fw fa-shopping-cart"></i>
  153.                             </div>
  154.                             <div class="mr-5">123 New Orders!</div>
  155.                         </div>
  156.                         <a class="card-footer text-white clearfix small z-1" href="#">
  157.                             <span class="float-left">View Details</span>
  158.                             <span class="float-right">
  159.                   <i class="fas fa-angle-right"></i>
  160.                 </span>
  161.                         </a>
  162.                     </div>
  163.                 </div>
  164.                 <div class="col-xl-3 col-sm-6 mb-3">
  165.                     <div class="card text-white bg-danger o-hidden h-100">
  166.                         <div class="card-body">
  167.                             <div class="card-body-icon">
  168.                                 <i class="fas fa-fw fa-life-ring"></i>
  169.                             </div>
  170.                             <div class="mr-5">13 New Tickets!</div>
  171.                         </div>
  172.                         <a class="card-footer text-white clearfix small z-1" href="#">
  173.                             <span class="float-left">View Details</span>
  174.                             <span class="float-right">
  175.                   <i class="fas fa-angle-right"></i>
  176.                 </span>
  177.                         </a>
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.  
  182.             <!-- Area Chart Example-->
  183.             <div class="card mb-3">
  184.                 <div class="card-header">
  185.                     <i class="fas fa-chart-area"></i>
  186.                     Area Chart Example</div>
  187.                 <div class="card-body">
  188.                     <canvas id="myAreaChart" width="100%" height="30"></canvas>
  189.                 </div>
  190.                 <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
  191.             </div>
  192.  
  193.             <!-- DataTables Example -->
  194.             <div class="card mb-3">
  195.                 <div class="card-header">
  196.                     <i class="fas fa-table"></i>
  197.                     Data Table Example</div>
  198.                 <div class="card-body">
  199.                     <div class="table-responsive">
  200.                         <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
  201.                             <thead>
  202.                           
  203.                             </thead>
  204.                             <tfoot>
  205.                             
  206.                             </tbody>
  207.                         </table>
  208.                     </div>
  209.                 </div>
  210.                 <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
  211.             </div>
  212.  
  213.         </div>
  214.         <!-- /.container-fluid -->
  215.  
  216.         <!-- Sticky Footer -->
  217.         <footer class="sticky-footer">
  218.             <div class="container my-auto">
  219.                 <div class="copyright text-center my-auto">
  220.                     <span>Copyright © Your Website 2019</span>
  221.                 </div>
  222.             </div>
  223.         </footer>
  224.  
  225.     </div>
  226.     <!-- /.content-wrapper -->
  227.  
  228. </div>
  229. <!-- /#wrapper -->
  230.  
  231. <!-- Scroll to Top Button-->
  232. <a class="scroll-to-top rounded" href="#page-top">
  233.     <i class="fas fa-angle-up"></i>
  234. </a>
  235.  
  236. <!-- Logout Modal-->
  237. <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  238.     <div class="modal-dialog" role="document">
  239.         <div class="modal-content">
  240.             <div class="modal-header">
  241.                 <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
  242.                 <button class="close" type="button" data-dismiss="modal" aria-label="Close">
  243.                     <span aria-hidden="true">×</span>
  244.                 </button>
  245.             </div>
  246.             <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
  247.             <div class="modal-footer">
  248.                 <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
  249.                 <a class="btn btn-primary" href="login.html">Logout</a>
  250.             </div>
  251.         </div>
  252.     </div>
  253. </div>
  254.  
  255.  
  256.  
  257. </body>

新建一个index.ftl页面引入layout文件，引入之后启动应用打开首页，用include引入，并且用marco

 

  1. <#include "/layout/layout.ftl"/>
  2. <@body>
  3. 你好
  4. </@body>

在layout.ftl文件中加入<#marco>, body 是方法名，并且加入<#nested>,注意位置，在内容页面位置，使用的时候用 <@body>你好</body>，就显示你好

  1. <#macro body>
  2. <html...>
  3. </#macro>

表单提交

ajax提交

回显表单方式 EL表达式value="${method!}"

ajax 回显方式 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/48967
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号