ssm连接网页的编写

最新推荐文章于 2022-07-20 10:39:15 发布

ym_yx

最新推荐文章于 2022-07-20 10:39:15 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/ym_yx/article/details/107084035

版权

用户管理界面：

<body class="hold-transition skin-blue sidebar-mini">

   <div class="wrapper">

      <!-- 页面头部 -->
      <jsp:include page="header.jsp"></jsp:include>
      <!-- 页面头部 /-->

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

      <!-- 内容区域 -->
      <div class="content-wrapper">

         <!-- 内容头部 -->
         <section class="content-header">
         <h1>
            用户管理 <small>全部用户</small>
         </h1>
         <ol class="breadcrumb">
            <li><a href="#"><i
                  class="fa fa-dashboard"></i> 首页</a></li>
            <li><a
               href="#">用户管理</a></li>

            <li class="active">全部用户</li>
         </ol>
         </section>
         <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content"> <!-- .box-body -->
            <div class="box box-primary">
               <div class="box-header with-border">
                  <h3 class="box-title">列表</h3>
               </div>

               <div class="box-body">

                  <!-- 数据表格 -->
                  <div class="table-box">

                     <!--工具栏-->
                     <div class="pull-left">
                        <div class="form-group form-inline">
                           <div class="btn-group">
                              <button type="button" class="btn btn-default" title="新建"
                                    οnclick="location.href='${pageContext.request.contextPath}/pages/user-add.jsp'" >
                                 <i class="fa fa-file-o"></i> 新建
                              </button>
                              
                              <button type="button" class="btn btn-default" title="刷新">
                                 <i class="fa fa-refresh"></i> 刷新
                              </button>
                           </div>
                        </div>
                     </div>
                     <form action="#"
                          method="post">
                        <div class="col-md-4 data1">
                           <input type="text" class="form-control" name="username"
                                 placeholder="username" value="">
                        </div>
                        <button type="submit" class="btn bg-maroon">搜索</button>
                     </form>
                     <!--工具栏/-->

                     <!--数据列表-->
                     <table id="dataList"
                        class="table table-bordered table-striped table-hover dataTable">
                        <thead>
                           <tr>
                              <th class="" style="padding-right: 0px"><input
                                 id="selall" type="checkbox" class="icheckbox_square-blue">
                              </th>
                              <th class="sorting_asc">ID</th>
                              <th class="sorting_desc">用户名</th>
                              <th class="sorting_asc sorting_asc_disabled">密码</th>
                              <th class="text-center">操作</th>
                           </tr>
                        </thead>
                        <tbody>
                            
                              <tr>
                                 <td><input name="ids" type="checkbox"></td>
                                 <td>1</td>
                                 <td>1</td>
                                 <td>1</td>
                                 <td class="text-center">
                                    <a href="#" class="btn bg-olive btn-xs">更新</a>
                                    <a href="#" class="btn bg-olive btn-xs">删除</a>
                                    <a href="#" class="btn bg-olive btn-xs">添加角色</a>
                                 </td>
                              </tr>
                           
                        </tbody>
                        <!--
                            <tfoot>
                            <tr>
                            <th>Rendering engine</th>
                            <th>Browser</th>
                            <th>Platform(s)</th>
                            <th>Engine version</th>
                            <th>CSS grade</th>
                            </tr>
                            </tfoot>-->
                     </table>
                     <!--数据列表/-->

                  </div>
                  <!-- 数据表格 /-->

               </div>
               <!-- /.box-body -->
                  <div class="box-tools pull-right">
                     <ul class="pagination">
                        <li><a href="#" aria-label="Previous">首页</a></li>
                        <li><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">下一页</a></li>
                        <li><a href="#" aria-label="Next">尾页</a></li>
                     </ul>
                  </div>

               </div>
               <!-- /.box-footer-->

            </div>

            </section>
            <!-- 正文区域 /-->

         </div>
         <!-- @@close -->
         <!-- 内容区域 /-->

         <!-- 底部导航 -->
         <footer class="main-footer">
         <div class="pull-right hidden-xs">
            <b>Version</b> 1.0.8
         </div>
         <strong>Copyright &copy; 2014-2017 <a
            href="http://www.itcast.cn">研究院研发部</a>.
         </strong> All rights reserved. </footer>
         <!-- 底部导航 /-->

      </div>

      <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
      <script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
      <script>
         $.widget.bridge('uibutton', $.ui.button);
      </script>
      <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="../plugins/raphael/raphael-min.js"></script>
      <script src="../plugins/morris/morris.min.js"></script>
      <script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
      <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
      <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
      <script src="../plugins/knob/jquery.knob.js"></script>
      <script src="../plugins/daterangepicker/moment.min.js"></script>
      <script src="../plugins/daterangepicker/daterangepicker.js"></script>
      <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
      <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
      <script
         src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
      <script
         src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
      <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
      <script src="../plugins/fastclick/fastclick.js"></script>
      <script src="../plugins/iCheck/icheck.min.js"></script>
      <script src="../plugins/adminLTE/js/app.min.js"></script>
      <script src="../plugins/treeTable/jquery.treetable.js"></script>
      <script src="../plugins/select2/select2.full.min.js"></script>
      <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
      <script
         src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
      <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
      <script
         src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
      <script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
      <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
      <script src="../plugins/ckeditor/ckeditor.js"></script>
      <script src="../plugins/input-mask/jquery.inputmask.js"></script>
      <script
         src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
      <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
      <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
      <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
      <script src="../plugins/chartjs/Chart.min.js"></script>
      <script src="../plugins/flot/jquery.flot.min.js"></script>
      <script src="../plugins/flot/jquery.flot.resize.min.js"></script>
      <script src="../plugins/flot/jquery.flot.pie.min.js"></script>
      <script src="../plugins/flot/jquery.flot.categories.min.js"></script>
      <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
      <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
      <script>
         $(document).ready(function() {
            // 选择框
            $(".select2").select2();

            // WYSIHTML5编辑器
            $(".textarea").wysihtml5({
               locale : 'zh-CN'
            });
         });

         // 设置激活菜单
         function setSidebarActive(tagUri) {
            var liObj = $("#" + tagUri);
            if (liObj.length > 0) {
               liObj.parent().parent().addClass("active");
               liObj.addClass("active");
            }
         }

         $(document)
               .ready(
                     function() {

                        // 激活导航位置
                        setSidebarActive("admin-datalist");

                        // 列表按钮 
                        $("#dataList td input[type='checkbox']")
                              .iCheck(
                                    {
                                       checkboxClass : 'icheckbox_square-blue',
                                       increaseArea : '20%'
                                    });
                        // 全选操作 
                        $("#selall")
                              .click(
                                    function() {
                                       var clicks = $(this).is(
                                             ':checked');
                                       if (!clicks) {
                                          $(
                                                "#dataList td input[type='checkbox']")
                                                .iCheck(
                                                      "uncheck");
                                       } else {
                                          $(
                                                "#dataList td input[type='checkbox']")
                                                .iCheck("check");
                                       }
                                       $(this).data("clicks",
                                             !clicks);
                                    });
                     });
      </script>
</body>

login页面：

<body class="hold-transition login-page">
   <div class="login-box">
      <div class="login-logo">
         <a href="all-admin-index.html">中软<b>ETC</b>用户管理系统</a>
      </div>
      <!-- /.login-logo -->
      <div class="login-box-body">
         <p class="login-box-msg">登录系统</p>

         <form action="#" method="post">
            <div class="form-group has-feedback">
               <input type="text" name="username" class="form-control"
                  placeholder="用户名"> <span
                  class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
               <input type="password" name="password" class="form-control"
                  placeholder="密码"> <span
                  class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
               <div class="col-xs-8">
                  <div class="checkbox icheck">
                     <label><input type="checkbox"> 记住 下次自动登录</label>
                  </div>
               </div>
               <!-- /.col -->
               <div class="col-xs-4">
                  <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
               </div>
               <!-- /.col -->
            </div>
         </form>

         <a href="#">忘记密码</a><br>


      </div>
      <!-- /.login-box-body -->
   </div>
   <!-- /.login-box -->

   <!-- jQuery 2.2.3 -->
   <!-- Bootstrap 3.3.6 -->
   <!-- iCheck -->
   <script
      src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
   <script
      src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
   <script
      src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
   <script>
      $(function() {
         $('input').iCheck({
            checkboxClass : 'icheckbox_square-blue',
            radioClass : 'iradio_square-blue',
            increaseArea : '20%' // optional
         });
      });
   </script>
</body>

ym_yx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ssm连接网页的编写

用户管理界面：<body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper">  <jsp:include page="header.jsp"></jsp:include>   &lt
复制链接

扫一扫