zoukankan      html  css  js  c++  java
  • 基于jsp+servlet图书管理系统之后台用户信息插入操作

    简易图书管理系统(主要是jsp+servlet的练习):https://blog.csdn.net/Biexiansheng/article/details/70240413

    免费提供源码,有偿提供服务,支持项目定制。

    前奏:

      刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识。于是静下心来钻研知识,趁着这学期的结束(马上就要放寒假了),写写最近练习的基于jsp+servlet+前台模板写的图书管理系统,一点一点写吧,详细的注释已经在代码上说明,希望对学习基于java开发的web方向的童鞋有所帮助。今天先把写的用户信息管理的添加(插入)操作分享一下,使用了一些特殊的知识,也会做一下说明。更多代码和功能会持续更新,完整可直接运行的。

      开发环境:Eclipse Version: Mars.2 Release (4.5.2) 

             JDK Version:1.8

           tomcat  Vsersion:7.0

      (由于个人掌握知识有限,如若有不足的地方,还请多多交流。)


    开始修改原型设计:

      1:设计好数据库(当然我这里设计是简单的数据库),见上面的链接,下载导入自己的数据库即可使用。

      2:我先准备好了原型模板,然后将原型模板修改好,然后才进行开发。原型模板修改如下。    

        将登录界面的原型html修改为jsp

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <%
     4     //获取绝对路径路径 
     5     String path = request.getContextPath();
     6     String basePath = request.getScheme() + "://"
     7                 + request.getServerName() + ":" + request.getServerPort()
     8                 + path + "/";
     9 %> 
    10 <!DOCTYPE html>
    11 <html lang="en">
    12 <head>
    13 <base href="<%=basePath %>" />
    14 <title>用户登录</title>
    15 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    16 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    17 <link href="resource/assets/css/bootstrap.min.css" rel="stylesheet" />
    18 <link rel="stylesheet" href="resource/assets/css/font-awesome.min.css" />
    19 <link rel="stylesheet" href="resource/assets/css/ace.min.css" />
    20 <link rel="stylesheet" href="resource/assets/css/ace-rtl.min.css" />
    21 </head>
    22 <body class="login-layout">
    23     <div class="main-container">
    24         <div class="main-content">
    25             <div class="row">
    26                 <div class="col-sm-10 col-sm-offset-1">
    27                     <div class="login-container">
    28                         <div class="center">
    29                             <h1>
    30                                 <i class="icon-leaf green"></i> <span class="red">别先生</span> <span
    31                                     class="white">图书管理系统</span>
    32                             </h1>
    33                             <h4 class="blue"></h4>
    34                         </div>
    35                         <div class="space-6"></div>
    36                         <div class="position-relative">
    37                             <div id="login-box"
    38                                 class="login-box visible widget-box no-border">
    39                                 <div class="widget-body">
    40                                     <div class="widget-main">
    41                                         <h4 class="header blue lighter bigger">
    42                                             <i class="icon-coffee green"></i> 请输入您的账号和密码
    43                                         </h4>
    44 
    45                                         <div class="space-6"></div>
    46                                         <form action="view/system/main/index.jsp" method="post" onsubmit="return check()">
    47                                             <fieldset>
    48                                                 <label class="block clearfix"> <span
    49                                                     class="block input-icon input-icon-right"> <input id="userId"
    50                                                         name="userId" type="text" class="form-control"
    51                                                         placeholder="请输入您的账号" /> <i class="icon-user"></i>
    52                                                 </span>
    53                                                 </label> <label class="block clearfix"> <span
    54                                                     class="block input-icon input-icon-right"> <input id="userPw"
    55                                                         name="passWord" type="password" class="form-control"
    56                                                         placeholder="请输入您的密码" /> <i class="icon-lock"></i>
    57                                                 </span>
    58                                                 </label>
    59 
    60                                                 <div class="clearfix">
    61                                             
    62 
    63                                                     <button type="submit"
    64                                                         class="width-35 pull-right btn btn-sm btn-primary">
    65                                                         <i class="icon-key"></i> 登陆
    66                                                     </button>
    67                                                 </div>
    68 
    69                                                 <div class="space-4"></div>
    70                                             </fieldset>
    71                                         </form>
    72 
    73                                     </div>
    74 
    75                                 </div>
    76 
    77                             </div>
    78 
    79 
    80                     </div>
    81 
    82                 </div>
    83             </div>
    84 
    85         </div>
    86 </div>
    87     </div>
    88 
    89 </body>
    90 </html>
    登陆界面

        将主界面的原型html修改为jsp

      1 <%@ page language="java" contentType="text/html; charset=UTF-8"
      2     pageEncoding="UTF-8"%>
      3 <%
      4     //获取绝对路径路径 
      5     String path = request.getContextPath();
      6     String basePath = request.getScheme() + "://"
      7                 + request.getServerName() + ":" + request.getServerPort()
      8                 + path + "/";
      9 %> 
     10 <!DOCTYPE html>
     11 <html lang="en">
     12 <head>
     13 <base href="<%=basePath %>" />
     14 <title>首页</title>
     15 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     17 <link href="resource/assets/css/bootstrap.min.css" rel="stylesheet" />
     18 <link rel="stylesheet" href="resource/assets/css/font-awesome.min.css" />
     19 <link rel="stylesheet" href="resource/assets/css/ace.min.css" />
     20 <link rel="stylesheet" href="resource/assets/css/ace-rtl.min.css" />
     21 <link rel="stylesheet" href="resource/assets/css/ace-skins.min.css" />
     22 <script src="resource/assets/js/ace-extra.min.js"></script>
     23 <script src="resource/assets/jquery.min.js"></script>
     24 </head>
     25 <body>
     26 <div class="navbar navbar-default" id="navbar">
     27         <script type="text/javascript">
     28             try {
     29                 ace.settings.check('navbar', 'fixed')
     30             } catch (e) {
     31             }
     32         </script>
     33 
     34         <div class="navbar-container" id="navbar-container">
     35             <div class="navbar-header pull-left">
     36                 <a href="view/system/main/index.jsp" class="navbar-brand"> <small> <i
     37                         class="icon-leaf"></i> 别先生后台图书管理系统
     38                 </small>
     39                 </a>
     40                 <!-- /.brand -->
     41             </div>
     42             <!-- /.navbar-header -->
     43 
     44             <div class="navbar-header pull-right" role="navigation">
     45                 <ul class="nav ace-nav">
     46                     <li class="green"><a data-toggle="dropdown"
     47                         class="dropdown-toggle" href="#"> <i
     48                             class="icon-envelope icon-animated-vertical"></i> <span
     49                             class="badge badge-success">5</span>
     50                     </a>
     51 
     52                         <ul
     53                             class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
     54                             <li class="dropdown-header"><i class="icon-envelope-alt"></i>
     55                                 5条消息</li>
     56                         </ul></li>
     57 
     58                     <li class="light-blue"><a data-toggle="dropdown" href="#"
     59                         class="dropdown-toggle"> <img class="nav-user-photo"
     60                             src="resource/assets/avatars/user.jpg" alt="Jason's Photo" /> <span
     61                             class="user-info"> <small>欢迎光临,</small>
     62                         </span> <i class="icon-caret-down"></i>
     63                     </a>
     64                         <ul
     65                             class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
     66                             
     67                             <li><a href="#"  target="mainframe"> <i class="icon-user"></i> 个人资料
     68                             </a></li>
     69 
     70                             <li class="divider"></li>
     71 
     72                             <li><a href="view/system/main/login.jsp"> <i class="icon-off"></i> 退出
     73                             </a></li>
     74                         </ul></li>
     75                 </ul>
     76                 <!-- /.ace-nav -->
     77 
     78             </div>
     79             <!-- /.navbar-header -->
     80         </div>
     81         <!-- /.container -->
     82     </div>
     83 
     84     <div class="main-container" id="main-container">
     85         <script type="text/javascript">
     86             try {
     87                 ace.settings.check('main-container', 'fixed')
     88             } catch (e) {
     89             }
     90         </script>
     91 
     92         <div class="main-container-inner">
     93             <a class="menu-toggler" id="menu-toggler" href="#"> <span
     94                 class="menu-text"></span>
     95             </a>
     96 
     97             <div class="sidebar" id="sidebar">
     98                 <script type="text/javascript">
     99                     try {
    100                         ace.settings.check('sidebar', 'fixed')
    101                     } catch (e) {
    102                     }
    103                 </script>
    104 
    105                 <div class="sidebar-shortcuts" id="sidebar-shortcuts">
    106                     <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
    107                         <button class="btn btn-success">
    108                             <i class="icon-signal"></i>
    109                         </button>
    110 
    111                         <button class="btn btn-info">
    112                             <i class="icon-pencil"></i>
    113                         </button>
    114 
    115                         <button class="btn btn-warning">
    116                             <i class="icon-group"></i>
    117                         </button>
    118 
    119                         <button class="btn btn-danger">
    120                             <i class="icon-cogs"></i>
    121                         </button>
    122                     </div>
    123 
    124                     <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
    125                         <span class="btn btn-success"></span> <span class="btn btn-info"></span>
    126 
    127                         <span class="btn btn-warning"></span> <span class="btn btn-danger"></span>
    128                     </div>
    129                 </div>
    130                 <!-- #sidebar-shortcuts -->
    131 
    132                 <ul class="nav nav-list">
    133                     <li class="active"><a
    134                         href="view/system/main/main.jsp" target="mainframe">
    135                             <i class="icon-dashboard"></i> <span class="menu-text">
    136                                 控制台 </span>
    137                     </a></li>
    138                 <li><a href="javascript:void(0)" target="mainframe"
    139                         class="dropdown-toggle"> <i class="icon-desktop"></i> <span
    140                             class="menu-text"> 系统管理 </span> <b class="arrow icon-angle-down"></b>
    141                     </a>
    142 
    143                         <ul class="submenu">
    144                             
    145                             <li><a href="view/system/userinfo/userinfo_list.jsp" target="mainframe"> <i
    146                                     class="icon-double-angle-right"></i> 用户管理
    147                             </a></li>
    148                 
    149                         </ul>
    150                 </li>
    151                         <li><a href="javascript:void(0)" target="mainframe"
    152                         class="dropdown-toggle"> <i class="icon-desktop"></i> <span
    153                             class="menu-text">图书管理 </span> <b class="arrow icon-angle-down"></b>
    154                     </a>
    155 
    156                         <ul class="submenu">
    157                             
    158                             <li><a href="view/crm/customer/customer_list.html" target="mainframe"> <i
    159                                     class="icon-double-angle-right"></i> 图书管理
    160                             </a></li>
    161                                <li><a href="view/crm/customer/customer_list.html" target="mainframe"> <i
    162                                     class="icon-double-angle-right"></i> 图书记录管理
    163                             </a></li>
    164                         
    165                         </ul>
    166                 </li>
    167                 </ul>
    168                 <!-- /.nav-list -->
    169 
    170                 <div class="sidebar-collapse" id="sidebar-collapse">
    171                     <i class="icon-double-angle-left"
    172                         data-icon1="icon-double-angle-left"
    173                         data-icon2="icon-double-angle-right"></i>
    174                 </div>
    175 
    176                 <script type="text/javascript">
    177                     try {
    178                         ace.settings.check('sidebar', 'collapsed')
    179                     } catch (e) {
    180                     }
    181                 </script>
    182             </div>
    183 
    184             <div class="main-content" id="mains">
    185                 <iframe id="mainframe" name="mainframe" src="view/system/main/main.jsp"
    186                     style=" 100%;border: 0px;"> </iframe>
    187 
    188             </div>
    189 
    190             <script type="text/javascript">
    191                 var height = jQuery(window).height() - 50;
    192                 jQuery("#mainframe").attr("height", "" + height + "px;");
    193             </script>
    194 
    195             <div class="ace-settings-container" id="ace-settings-container">
    196                 <div class="btn btn-app btn-xs btn-warning ace-settings-btn"
    197                     id="ace-settings-btn">
    198                     <i class="icon-cog bigger-150"></i>
    199                 </div>
    200 
    201                 <div class="ace-settings-box" id="ace-settings-box">
    202                     <div>
    203                         <div class="pull-left">
    204                             <select id="skin-colorpicker" class="hide">
    205                                 <option data-skin="default" value="#438EB9">#438EB9</option>
    206                                 <option data-skin="skin-1" value="#222A2D">#222A2D</option>
    207                                 <option data-skin="skin-2" value="#C6487E">#C6487E</option>
    208                                 <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
    209                             </select>
    210                         </div>
    211                         <span>&nbsp; 选择皮肤</span>
    212                     </div>
    213 
    214                     <div>
    215                         <input type="checkbox" class="ace ace-checkbox-2"
    216                             id="ace-settings-navbar" /> <label class="lbl"
    217                             for="ace-settings-navbar"> 固定导航条</label>
    218                     </div>
    219 
    220                     <div>
    221                         <input type="checkbox" class="ace ace-checkbox-2"
    222                             id="ace-settings-sidebar" /> <label class="lbl"
    223                             for="ace-settings-sidebar"> 固定滑动条</label>
    224                     </div>
    225 
    226                     <div>
    227                         <input type="checkbox" class="ace ace-checkbox-2"
    228                             id="ace-settings-breadcrumbs" /> <label class="lbl"
    229                             for="ace-settings-breadcrumbs">固定面包屑</label>
    230                     </div>
    231 
    232                     <div>
    233                         <input type="checkbox" class="ace ace-checkbox-2"
    234                             id="ace-settings-rtl" /> <label class="lbl"
    235                             for="ace-settings-rtl">切换到左边</label>
    236                     </div>
    237 
    238                     <div>
    239                         <input type="checkbox" class="ace ace-checkbox-2"
    240                             id="ace-settings-add-container" /> <label class="lbl"
    241                             for="ace-settings-add-container"> 切换窄屏 <b></b>
    242                         </label>
    243                     </div>
    244                 </div>
    245             </div>
    246             <!-- /#ace-settings-container -->
    247         </div>
    248         <!-- /.main-container-inner -->
    249 
    250         <a href="#" id="btn-scroll-up"
    251             class="btn-scroll-up btn btn-sm btn-inverse"> <i
    252             class="icon-double-angle-up icon-only bigger-110"></i>
    253         </a>
    254     </div>
    255     <!-- /.main-container -->
    256     <!-- basic scripts -->
    257 
    258 
    259 
    260 
    261     <script type="text/javascript">
    262         if ("ontouchend" in document)
    263             document
    264                     .write("<script src='resource/assets/js/jquery.mobile.custom.min.js'>"
    265                             + "<"+"script>");
    266     </script>
    267     <script src="resource/assets/js/bootstrap.min.js"></script>
    268     <script src="resource/assets/js/typeahead-bs2.min.js"></script>
    269 
    270     <!-- page specific plugin scripts -->
    271 
    272     <!--[if lte IE 8]>
    273           <script src="resource/assets/js/excanvas.min.js"></script>
    274         <![endif]-->
    275 
    276     <script src="resource/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
    277     <script src="resource/assets/js/jquery.ui.touch-punch.min.js"></script>
    278     <script src="resource/assets/js/jquery.slimscroll.min.js"></script>
    279     <script src="resource/assets/js/jquery.easy-pie-chart.min.js"></script>
    280     <script src="resource/assets/js/jquery.sparkline.min.js"></script>
    281     <script src="resource/assets/js/flot/jquery.flot.min.js"></script>
    282     <script src="resource/assets/js/flot/jquery.flot.pie.min.js"></script>
    283     <script src="resource/assets/js/flot/jquery.flot.resize.min.js"></script>
    284 
    285     <!-- ace scripts -->
    286 
    287     <script src="resource/assets/js/ace-elements.min.js"></script>
    288     <script src="resource/assets/js/ace.min.js"></script>
    289 
    290     <!-- inline scripts related to this page -->
    291 
    292     <script type="text/javascript">
    293         jQuery(function($) {
    294             $('.easy-pie-chart.percentage')
    295                     .each(
    296                             function() {
    297                                 var $box = $(this).closest('.infobox');
    298                                 var barColor = $(this).data('color')
    299                                         || (!$box.hasClass('infobox-dark') ? $box
    300                                                 .css('color')
    301                                                 : 'rgba(255,255,255,0.95)');
    302                                 var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)'
    303                                         : '#E2E2E2';
    304                                 var size = parseInt($(this).data('size')) || 50;
    305                                 $(this)
    306                                         .easyPieChart(
    307                                                 {
    308                                                     barColor : barColor,
    309                                                     trackColor : trackColor,
    310                                                     scaleColor : false,
    311                                                     lineCap : 'butt',
    312                                                     lineWidth : parseInt(size / 10),
    313                                                     animate : /msies*(8|7|6)/
    314                                                             .test(navigator.userAgent
    315                                                                     .toLowerCase()) ? false
    316                                                             : 1000,
    317                                                     size : size
    318                                                 });
    319                             })
    320 
    321             $('.sparkline').each(
    322                     function() {
    323                         var $box = $(this).closest('.infobox');
    324                         var barColor = !$box.hasClass('infobox-dark') ? $box
    325                                 .css('color') : '#FFF';
    326                         $(this).sparkline('html', {
    327                             tagValuesAttribute : 'data-values',
    328                             type : 'bar',
    329                             barColor : barColor,
    330                             chartRangeMin : $(this).data('min') || 0
    331                         });
    332                     });
    333 
    334             var placeholder = $('#piechart-placeholder').css({
    335                 'width' : '90%',
    336                 'min-height' : '150px'
    337             });
    338             var data = [ {
    339                 label : "social networks",
    340                 data : 38.7,
    341                 color : "#68BC31"
    342             }, {
    343                 label : "search engines",
    344                 data : 24.5,
    345                 color : "#2091CF"
    346             }, {
    347                 label : "ad campaigns",
    348                 data : 8.2,
    349                 color : "#AF4E96"
    350             }, {
    351                 label : "direct traffic",
    352                 data : 18.6,
    353                 color : "#DA5430"
    354             }, {
    355                 label : "other",
    356                 data : 10,
    357                 color : "#FEE074"
    358             } ]
    359             function drawPieChart(placeholder, data, position) {
    360                 $.plot(placeholder, data, {
    361                     series : {
    362                         pie : {
    363                             show : true,
    364                             tilt : 0.8,
    365                             highlight : {
    366                                 opacity : 0.25
    367                             },
    368                             stroke : {
    369                                 color : '#fff',
    370                                 width : 2
    371                             },
    372                             startAngle : 2
    373                         }
    374                     },
    375                     legend : {
    376                         show : true,
    377                         position : position || "ne",
    378                         labelBoxBorderColor : null,
    379                         margin : [ -30, 15 ]
    380                     },
    381                     grid : {
    382                         hoverable : true,
    383                         clickable : true
    384                     }
    385                 })
    386             }
    387             drawPieChart(placeholder, data);
    388 
    389             /**
    390             we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
    391             so that's not needed actually.
    392              */
    393             placeholder.data('chart', data);
    394             placeholder.data('draw', drawPieChart);
    395 
    396             var $tooltip = $(
    397                     "<div class='tooltip top in'><div class='tooltip-inner'></div></div>")
    398                     .hide().appendTo('body');
    399             var previousPoint = null;
    400 
    401             placeholder.on('plothover', function(event, pos, item) {
    402                 if (item) {
    403                     if (previousPoint != item.seriesIndex) {
    404                         previousPoint = item.seriesIndex;
    405                         var tip = item.series['label'] + " : "
    406                                 + item.series['percent'] + '%';
    407                         $tooltip.show().children(0).text(tip);
    408                     }
    409                     $tooltip.css({
    410                         top : pos.pageY + 10,
    411                         left : pos.pageX + 10
    412                     });
    413                 } else {
    414                     $tooltip.hide();
    415                     previousPoint = null;
    416                 }
    417 
    418             });
    419 
    420             var d1 = [];
    421             for (var i = 0; i < Math.PI * 2; i += 0.5) {
    422                 d1.push([ i, Math.sin(i) ]);
    423             }
    424 
    425             var d2 = [];
    426             for (var i = 0; i < Math.PI * 2; i += 0.5) {
    427                 d2.push([ i, Math.cos(i) ]);
    428             }
    429 
    430             var d3 = [];
    431             for (var i = 0; i < Math.PI * 2; i += 0.2) {
    432                 d3.push([ i, Math.tan(i) ]);
    433             }
    434 
    435             var sales_charts = $('#sales-charts').css({
    436                 'width' : '100%',
    437                 'height' : '220px'
    438             });
    439             $.plot("#sales-charts", [ {
    440                 label : "Domains",
    441                 data : d1
    442             }, {
    443                 label : "Hosting",
    444                 data : d2
    445             }, {
    446                 label : "Services",
    447                 data : d3
    448             } ], {
    449                 hoverable : true,
    450                 shadowSize : 0,
    451                 series : {
    452                     lines : {
    453                         show : true
    454                     },
    455                     points : {
    456                         show : true
    457                     }
    458                 },
    459                 xaxis : {
    460                     tickLength : 0
    461                 },
    462                 yaxis : {
    463                     ticks : 10,
    464                     min : -2,
    465                     max : 2,
    466                     tickDecimals : 3
    467                 },
    468                 grid : {
    469                     backgroundColor : {
    470                         colors : [ "#fff", "#fff" ]
    471                     },
    472                     borderWidth : 1,
    473                     borderColor : '#555'
    474                 }
    475             });
    476 
    477             $('#recent-box [data-rel="tooltip"]').tooltip({
    478                 placement : tooltip_placement
    479             });
    480             function tooltip_placement(context, source) {
    481                 var $source = $(source);
    482                 var $parent = $source.closest('.tab-content')
    483                 var off1 = $parent.offset();
    484                 var w1 = $parent.width();
    485 
    486                 var off2 = $source.offset();
    487                 var w2 = $source.width();
    488 
    489                 if (parseInt(off2.left) < parseInt(off1.left)
    490                         + parseInt(w1 / 2))
    491                     return 'right';
    492                 return 'left';
    493             }
    494 
    495             $('.dialogs,.comments').slimScroll({
    496                 height : '300px'
    497             });
    498 
    499             //Android's default browser somehow is confused when tapping on label which will lead to dragging the task
    500             //so disable dragging when clicking on label
    501             var agent = navigator.userAgent.toLowerCase();
    502             if ("ontouchstart" in document && /applewebkit/.test(agent)
    503                     && /android/.test(agent))
    504                 $('#tasks').on('touchstart', function(e) {
    505                     var li = $(e.target).closest('#tasks li');
    506                     if (li.length == 0)
    507                         return;
    508                     var label = li.find('label.inline').get(0);
    509                     if (label == e.target || $.contains(label, e.target))
    510                         e.stopImmediatePropagation();
    511                 });
    512 
    513             $('#tasks').sortable({
    514                 opacity : 0.8,
    515                 revert : true,
    516                 forceHelperSize : true,
    517                 placeholder : 'draggable-placeholder',
    518                 forcePlaceholderSize : true,
    519                 tolerance : 'pointer',
    520                 stop : function(event, ui) {//just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
    521                     $(ui.item).css('z-index', 'auto');
    522                 }
    523             });
    524             $('#tasks').disableSelection();
    525             $('#tasks input:checkbox').removeAttr('checked').on('click',
    526                     function() {
    527                         if (this.checked)
    528                             $(this).closest('li').addClass('selected');
    529                         else
    530                             $(this).closest('li').removeClass('selected');
    531                     });
    532 
    533         })
    534     </script>
    535 
    536 
    537 
    538 </body>
    539 </html>
    主界面

         将其他界面的原型html修改为jsp

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <%
     4     //获取绝对路径路径 
     5     String path = request.getContextPath();
     6     String basePath = request.getScheme() + "://"
     7                 + request.getServerName() + ":" + request.getServerPort()
     8                 + path + "/";
     9 %> 
    10 <!DOCTYPE html>
    11 <html>
    12 <head>
    13 <base href="<%=basePath %>" />
    14 <meta charset="utf-8">
    15 <title>工作台</title>
    16 <!-- 新 Bootstrap 核心 CSS 文件 -->
    17 <link rel="stylesheet" href="resource/css/bootstrap.min.css">
    18 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    19 <script src="resource/js/jquery.min.js"></script>
    20 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    21 <script src="resource/js/bootstrap.min.js"></script>
    22 </head>
    23 <body>
    24 <div style="padding:0px; margin:0px;">
    25  <ul class="breadcrumb" style=" padding:0px; padding-left:20px;" >
    26   <li ><a href="#">首页</a></li>
    27   <li>工作台</li>
    28 </ul>
    29 </div>
    30 <div class="row">
    31     <div class="col-xs-6" >
    32          <div class="panel panel-default" >
    33           <div class="panel-heading"  >
    34             <span class="glyphicon glyphicon-refresh"></span>图形报表
    35           </div>
    36               <div class="panel-body">
    37                   <img src="resource/img/test.png" height="200" width="100%">
    38               </div>
    39         </div>
    40     </div>
    41     <div class="col-xs-6" >
    42       <div class="panel panel-default" >
    43           <div class="panel-heading"  >
    44             <span class="glyphicon glyphicon-refresh"></span>图形报表
    45           </div>
    46               <div class="panel-body">
    47                   <img src="resource/img/test.png" height="200" width="100%">
    48               </div>
    49         </div>
    50     </div>
    51 
    52 
    53 </div>
    54 
    55 
    56 </body>
    57 </html>
    其他界面

         这里插一句,我使用的是servlet3.0,但是配置文件修为了默认访问登录界面login.jsp

    1 <?xml version="1.0" encoding="UTF-8"?>
    2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    3   <display-name>book</display-name>
    4   <welcome-file-list>
    5       <!-- 默认模仿的是登录界面login.jsp页面 -->
    6     <welcome-file>login.jsp</welcome-file>
    7   </welcome-file-list>
    8 </web-app>
    servlet3.0-xml

         将用户信息列表界面的原型html修改为jsp

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <%
     4     //获取绝对路径路径 
     5     String path = request.getContextPath();
     6     String basePath = request.getScheme() + "://"
     7                 + request.getServerName() + ":" + request.getServerPort()
     8                 + path + "/";
     9 %> 
    10 <!DOCTYPE html>
    11 <html>
    12 <head>
    13 <base href="<%=basePath %>" />
    14 <meta charset="UTF-8">
    15 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    16 <title>用户管理-用户查询</title>
    17 <link href="resource/css/bootstrap.min.css" rel="stylesheet" />
    18 <script type="text/javascript" src="resource/js/jquery.min.js"></script>
    19 <script type="text/javascript"
    20     src="resource/js/bootstrap.min.js"></script>
    21 </head>
    22 <body>
    23     <div>
    24         <ul class="breadcrumb" style="margin: 0px;">
    25             <li>系统管理</li>
    26             <li>用户管理</li>
    27             <li>用户查询</li>
    28         </ul>
    29     </div>
    30     <form action="" class="form-inline">
    31         <div class="row alert alert-info" style="margin: 0px; padding: 5px;">
    32             <div class="form-group">
    33                 <label>条件:</label> <select class="form-control">
    34                     <option>姓名</option>
    35                     <option>性别</option>
    36                 </select> <input type="text" class="form-control" placeholder="请输入查询条件" />
    37             </div>
    38             <input type="button" class="btn btn-danger" value="查询"> <a
    39                 href="view/system/userinfo/userinfo_add.jsp" class="btn btn-success">添加用户</a>
    40         </div>
    41         <div class="row" style="padding: 15px;">
    42             <table class="table table-hover table-condensed">
    43                 <tr>
    44                     <th>用户编号</th>
    45                     <th>用户账号</th>
    46                     <th>用户密码</th>
    47                     <th>用户姓名</th>
    48                     <th>用户性别</th>
    49                     <th>用户年龄</th>
    50                     <td>操作</td>
    51                 </tr>
    52                 <tr>
    53                     <td>1001</td>
    54                     <td>admin123</td>
    55                     <td>123456</td>
    56                     <td>高富帅</td>
    57                     <td></td>
    58                     <td>20</td>
    59                     <td><a href="view/system/userinfo/userinfo_update.jsp">修改</a> 删除</td>
    60                 </tr>
    61                 <tr>
    62                     <td>1001</td>
    63                     <td>admin123</td>
    64                     <td>123456</td>
    65                     <td>白富美</td>
    66                     <td></td>
    67                     <td>20</td>
    68                     <td>修改 删除</td>
    69                 </tr>
    70                 <tr>
    71                     <td>1001</td>
    72                     <td>admin123</td>
    73                     <td>123456</td>
    74                     <td>高富帅</td>
    75                     <td></td>
    76                     <td>20</td>
    77                     <td>修改 删除</td>
    78                 </tr>
    79                 <tr>
    80                     <td>1001</td>
    81                     <td>admin123</td>
    82                     <td>123456</td>
    83                     <td>白富美</td>
    84                     <td></td>
    85                     <td>20</td>
    86                     <td>修改 删除</td>
    87                 </tr>
    88             </table>
    89         </div>
    90     </form>
    91 </body>
    92 </html>
    用户信息的主页面

         将用户信息插入界面的原型html修改为jsp

      1 <%@ page language="java" contentType="text/html; charset=UTF-8"
      2     pageEncoding="UTF-8"%>
      3 <%
      4     //获取绝对路径路径 
      5     String path = request.getContextPath();
      6     String basePath = request.getScheme() + "://"
      7                 + request.getServerName() + ":" + request.getServerPort()
      8                 + path + "/";
      9 %> 
     10 <!DOCTYPE html>
     11 <html>
     12 <head>
     13 <base href="<%=basePath %>" />
     14 <meta charset="UTF-8">
     15 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     16 <title>用户管理-用户添加</title>
     17 <link href="resource/css/bootstrap.min.css" rel="stylesheet" />
     18 <script type="text/javascript" src="resource/js/jquery.min.js"></script>
     19 <script type="text/javascript"
     20     src="resource/js/bootstrap.min.js"></script>
     21 </head>
     22 <body>
     23     <div>
     24         <ul class="breadcrumb" style="margin: 0px;">
     25             <li>系统管理</li>
     26             <li>用户管理</li>
     27             <li>用户添加</li>
     28         </ul>
     29     </div>
     30 <form action="system/userinfoinsert" class="form-horizontal" method="post">
     31         <h5 class="page-header alert-info"
     32             style="margin: 0px; padding: 10px; margin-bottom: 10px;">基本信息</h5>
     33         <!-- 开始1 -->
     34         <div class="row">
     35             <div class="col-xs-5">
     36                 <div class="form-group ">
     37                     <label class="col-xs-3 control-label">用户学号</label>
     38                     <div class="col-xs-9 ">
     39                         <input type="text" name="userNumber" class="form-control" placeholder="请输入用户学号" />
     40                     </div>
     41                 </div>
     42             </div>
     43             <div class="col-xs-5">
     44                 <div class="form-group ">
     45                     <label class="col-xs-3 control-label">用户姓名</label>
     46                     <div class="col-xs-9 ">
     47                         <input type="text" name="userName" class="form-control" placeholder="请输入用户姓名" />
     48                     </div>
     49                 </div>
     50             </div>
     51         </div>
     52         <!--结束1 -->
     53         <!-- 开始2 -->
     54         <div class="row">
     55             <div class="col-xs-5">
     56                 <div class="form-group ">
     57                     <label class="col-xs-3 control-label">用户年龄</label>
     58                     <div class="col-xs-9 ">
     59                         <input type="text" name="userAge" class="form-control" placeholder="请输入用户年龄" />
     60                     </div>
     61                 </div>
     62             </div>
     63             <div class="col-xs-5">
     64                 <div class="form-group ">
     65                     <label class="col-xs-3 control-label">用户性别</label>
     66                     <div class="col-xs-3 ">
     67                         <select class="form-control" name="userSex">
     68                             <option>保密</option>
     69                             <option></option>
     70                             <option></option>
     71                         </select>
     72                     </div>
     73                 </div>
     74             </div>
     75 
     76         </div>
     77         <!--结束2 -->
     78 
     79 
     80         <h5 class="page-header alert-info"
     81             style="margin: 0px; padding: 10px; margin-bottom: 10px;">账号信息</h5>
     82         <!-- 开始5 -->
     83         <div class="row">
     84             <div class="col-xs-5">
     85                 <div class="form-group ">
     86                     <label class="col-xs-3 control-label">用户账号</label>
     87                     <div class="col-xs-9">
     88                         <input type="text" name="userAccount" class="form-control" placeholder="请输入用户账号" />
     89                     </div>
     90                 </div>
     91             </div>
     92             <div class="col-xs-5">
     93                 <div class="form-group ">
     94                     <label class="col-xs-3 control-label">用户密码</label>
     95                     <div class="col-xs-9 ">
     96                         <input type="text" name="userPw" class="form-control" placeholder="请输入用户密码" />
     97                     </div>
     98                 </div>
     99             </div>
    100         </div>
    101         <!--结束5 -->
    102 
    103         <div class="row">
    104             <div class="col-xs-3 col-xs-offset-4">
    105                 <input type="submit" class="btn btn-success" value="保存用户" /> <input
    106                     type="reset" class="btn btn-danger" value="重置信息" />
    107             </div>
    108 
    109         </div>
    110 
    111     </form>
    112 </body>
    113 </html>
    用户信息的插入界面

         将用户信息更改界面的原型html修改为jsp

      1 <%@ page language="java" contentType="text/html; charset=UTF-8"
      2     pageEncoding="UTF-8"%>
      3 <%
      4     //获取绝对路径路径 
      5     String path = request.getContextPath();
      6     String basePath = request.getScheme() + "://"
      7                 + request.getServerName() + ":" + request.getServerPort()
      8                 + path + "/";
      9 %> 
     10 <!DOCTYPE html>
     11 <html>
     12 <head>
     13 <base href="<%=basePath %>" />
     14 <meta charset="UTF-8">
     15 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     16 <title>用户管理-用户修改</title>
     17 <link href="resource/css/bootstrap.min.css" rel="stylesheet" />
     18 <script type="text/javascript" src="resource/js/jquery.min.js"></script>
     19 <script type="text/javascript"
     20     src="resource/js/bootstrap.min.js"></script>
     21 </head>
     22 <body>
     23     <div>
     24         <ul class="breadcrumb" style="margin: 0px;">
     25             <li>系统管理</li>
     26             <li>用户管理</li>
     27             <li>用户修改</li>
     28         </ul>
     29     </div>
     30 <form action="" class="form-horizontal">
     31         <h5 class="page-header alert-info"
     32             style="margin: 0px; padding: 10px; margin-bottom: 10px;">基本信息</h5>
     33         <!-- 开始1 -->
     34         <div class="row">
     35             <div class="col-xs-5">
     36                 <div class="form-group ">
     37                     <label class="col-xs-3 control-label">用户姓名</label>
     38                     <div class="col-xs-9 ">
     39                         <input type="text" class="form-control" placeholder="请输入用户姓名" value="高富帅" />
     40                     </div>
     41                 </div>
     42             </div>
     43             <div class="col-xs-5">
     44                 <div class="form-group ">
     45                     <label class="col-xs-3 control-label">用户年龄</label>
     46                     <div class="col-xs-9 ">
     47                         <input type="text" class="form-control" placeholder="请输入用户年龄" value="20" />
     48                     </div>
     49                 </div>
     50             </div>
     51         </div>
     52         <!--结束1 -->
     53         <!-- 开始2 -->
     54         <div class="row">
     55             <div class="col-xs-5">
     56                 <div class="form-group ">
     57                     <label class="col-xs-3 control-label">用户性别</label>
     58                     <div class="col-xs-3 ">
     59                         <select class="form-control">
     60                             <option>保密</option>
     61                             <option></option>
     62                             <option></option>
     63                         </select>
     64                     </div>
     65                 </div>
     66             </div>
     67 
     68         </div>
     69         <!--结束2 -->
     70 
     71 
     72         <h5 class="page-header alert-info"
     73             style="margin: 0px; padding: 10px; margin-bottom: 10px;">账号信息</h5>
     74         <!-- 开始5 -->
     75         <div class="row">
     76             <div class="col-xs-5">
     77                 <div class="form-group ">
     78                     <label class="col-xs-3 control-label">用户账号</label>
     79                     <div class="col-xs-9">
     80                         <input type="text" class="form-control" placeholder="请输入用户账号" value="admin123" />
     81                     </div>
     82                 </div>
     83             </div>
     84             <div class="col-xs-5">
     85                 <div class="form-group ">
     86                     <label class="col-xs-3 control-label">用户密码</label>
     87                     <div class="col-xs-9 ">
     88                         <input type="text" class="form-control" placeholder="请输入用户密码" value="123456" />
     89                     </div>
     90                 </div>
     91             </div>
     92         </div>
     93         <!--结束5 -->
     94 
     95         <div class="row">
     96             <div class="col-xs-3 col-xs-offset-4">
     97                 <input type="submit" class="btn btn-success" value="保存用户" /> <input
     98                     type="reset" class="btn btn-danger" value="重置信息" />
     99             </div>
    100 
    101         </div>
    102 
    103     </form>
    104 </body>
    105 </html>
    用户信息的更新界面

         用户信息提示信息界面的jsp

     1 <%@ page language="java" contentType="text/html; charset=UTF-8"
     2     pageEncoding="UTF-8"%>
     3 <%
     4     //获取绝对路径路径 
     5     String path = request.getContextPath();
     6     String basePath = request.getScheme() + "://"
     7                 + request.getServerName() + ":" + request.getServerPort()
     8                 + path + "/";
     9 %> 
    10 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    11 <html>
    12 <head>
    13 <base href="<%=basePath %>" />
    14 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    15 <title>Insert title here</title>
    16 </head>
    17 <body>
    18 <script type="text/javascript">
    19     //此页面用来提示添加,修改,删除信息的成功或者失败的信息
    20     alert('${info}');//提示信息,错误or成功
    21     //跳转到user_info.jsp查询页面,后面会修改为servlet
    22     window.location="view/system/userinfo/userinfo_list.jsp";
    23 </script>
    24 </body>
    25 </html>
    用户信息的提示界面

         至此用户信息的登录界面,主页面基本设计的差不多了,接下来就开始进行开发了。


    开始基于后台逻辑代码进行开发:

      1:这里我使用的是将数据库的驱动driver,数据库连接字符串,数据库账号,密码写到db.properties配置文件中,代码如下:

    1 drivername=com.mysql.jdbc.Driver
    2 url=jdbc:mysql:///book
    3 user=root
    4 password=123456

      2:写好配置文件,接下来写utils工具类,代码如下,写好连接数据库的工具类,个人习惯测试了一下,避免连接数据库就发生错误,那就糗大了。

        顺便提一下,添加信息和更改信息我直接也封装到了这个工具类中,方便使用,减少重复代码的书写,当然对于新手,多写重复代码是一件好事,

        加强记忆和理解

      1 package com.bie.utils;
      2 
      3 import java.sql.Connection;
      4 import java.sql.DriverManager;
      5 import java.sql.PreparedStatement;
      6 import java.sql.ResultSet;
      7 import java.util.ResourceBundle;
      8 
      9 /***
     10  * 1.1:写DbUtils的工具类
     11  * :utils是工具类,方便以后调用
     12  * 在main方法测试的时候出现一个错误,
     13  * 瞄了一眼立马想到了没有添加mysql的驱动,
     14  * 所以我感觉测试还是很有必要的
     15  * @author biehongli
     16  *
     17  */
     18 public class DbUtils {
     19 
     20     private static String drivername;//数据库驱动,为了加载数据库驱动
     21     private static String url;//数据库连接字符串,只要是找到自己的数据库,需要和自己的数据库一致
     22     private static String user;//数据库账号,需要和自己的一致
     23     private static String password;//数据库密码,需要和自己的一致
     24     
     25     static{
     26         drivername=ResourceBundle.getBundle("db").getString("drivername");
     27         url=ResourceBundle.getBundle("db").getString("url");
     28         user=ResourceBundle.getBundle("db").getString("user");
     29         password=ResourceBundle.getBundle("db").getString("password");
     30     }
     31     
     32     /***
     33      * 加载数据库驱动和连接到数据库,我一般是加载和连接的时候分别输出,可以快速找到哪里出错
     34      * @return
     35      * @throws Exception
     36      */
     37     public static Connection getCon() throws Exception{
     38         Class.forName(drivername);//记载数据库驱动
     39         System.out.println("测试加载数据库驱动");
     40         //连接到数据库
     41         Connection con=DriverManager.getConnection(url, user, password);
     42         System.out.println("测试连接到数据库");
     43         return con;
     44     }
     45     
     46     /***
     47      * 这个用来判断关闭数据库的方法
     48      * @param con 关闭Connection的连接
     49      * @param ps  关闭PreparedStatement
     50      * @param rs  关闭ResultSet
     51      */
     52     public static void getClose(Connection con,PreparedStatement ps,ResultSet rs){
     53         //关闭数据库,注意关闭的顺序。养成好习惯
     54         try{
     55             if(rs!=null){
     56                 rs.close();
     57             }
     58             if(ps!=null){
     59                 ps.close();
     60             }
     61             if(con!=null){
     62                 con.close();
     63             }
     64         }catch(Exception e){
     65             e.printStackTrace();
     66         }
     67     }
     68     
     69     /***
     70      * 添加(插入)和更新(更改)可以提取公共的方法写在工具类中
     71      * 删除一般使用伪删除,这样删除就是更新(更改)操作,
     72      * 所以只有查询(查找)需要写更多的代码
     73      * @param sql 外面传来的sql语句
     74      * @param arr 外面传来的数组类型的,是用户信息封装到集合传递进来
     75      * @return 返回的是一个整形的数据类型
     76      */
     77     public static int addAndUpdate(String sql,Object[] arr){
     78         Connection con=null;
     79         PreparedStatement ps=null;
     80         try{
     81             con=DbUtils.getCon();//第一步连接数据库
     82             ps=con.prepareStatement(sql);//第二步预编译
     83             //第三步给sql语句中的参数复制
     84             for(int i=0;i<arr.length;i++){
     85                 ps.setObject(i+1, arr[i]);
     86             }
     87             //第四步执行sql并且返回。
     88             return ps.executeUpdate();
     89         }catch(Exception e){
     90             e.printStackTrace();
     91         }finally{
     92             //关闭资源,如果没有ResultSet类型的,加上null即可
     93             DbUtils.getClose(con, ps, null);
     94         }
     95         return 0;
     96     }
     97     /*public static void main(String[] args) {
     98         //我一般在写好连接数据库的工具类时先测试一下,避免连接数据库都失败,测试后可注释即可
     99         try {
    100             DbUtils.getCon();
    101             System.out.println("测试连接数据库终极版!!!");
    102         } catch (Exception e) {
    103             e.printStackTrace();
    104         }
    105     }*/
    106 }

      3:开始写实体类po层。这个实体类里面是用户信息的成员变量。

     1 package com.bie.po;
     2 /***
     3  * 1.2:写用户信息的实体类
     4  * 需要和自己设计好的数据库信息相对应。
     5  * @author biehongli
     6  *
     7  */
     8 public class UserInfo {
     9 
    10     private Integer userId;//用户编号
    11     private String userAccount;//用户账号
    12     private String userPw;//用户密码
    13     private String userNumber;//用户学号
    14     private String userName;//用户姓名
    15     private Integer userAge;//用户年龄
    16     private String  userSex;//用户性别
    17     private String userMark;//用户标识,可以使用一张表,完成管理员和用户
    18     //如果对setxxx,getxxx灰常熟练了,自动生成即可
    19     public Integer getUserId() {
    20         return userId;
    21     }
    22     public void setUserId(Integer userId) {
    23         this.userId = userId;
    24     }
    25     public String getUserAccount() {
    26         return userAccount;
    27     }
    28     public void setUserAccount(String userAccount) {
    29         this.userAccount = userAccount;
    30     }
    31     public String getUserPw() {
    32         return userPw;
    33     }
    34     public void setUserPw(String userPw) {
    35         this.userPw = userPw;
    36     }
    37     public String getUserNumber() {
    38         return userNumber;
    39     }
    40     public void setUserNumber(String userNumber) {
    41         this.userNumber = userNumber;
    42     }
    43     public String getUserName() {
    44         return userName;
    45     }
    46     public void setUserName(String userName) {
    47         this.userName = userName;
    48     }
    49     public Integer getUserAge() {
    50         return userAge;
    51     }
    52     public void setUserAge(Integer userAge) {
    53         this.userAge = userAge;
    54     }
    55     public String getUserSex() {
    56         return userSex;
    57     }
    58     public void setUserSex(String userSex) {
    59         this.userSex = userSex;
    60     }
    61     public String getUserMark() {
    62         return userMark;
    63     }
    64     public void setUserMark(String userMark) {
    65         this.userMark = userMark;
    66     }
    67     //重写toString()方法
    68     @Override
    69     public String toString() {
    70         return "UserInfo [userId=" + userId + ", userAccount=" + userAccount + ", userPw=" + userPw + ", userNumber="
    71                 + userNumber + ", userName=" + userName + ", userAge=" + userAge + ", userSex=" + userSex
    72                 + ", userMark=" + userMark + "]";
    73     }
    74     
    75     
    76 }

      4:写好实体类,接着写处理业务逻辑,这里是写的插入,所以省去了dao层,如果是查询还需要先写dao层(数据交互层),这里先写接口,然后写实现接口的类。

     1 package com.bie.system.service;
     2 
     3 import com.bie.po.UserInfo;
     4 
     5 /***
     6  * 1.3:如果没有在工具类DbUtils中封装addAndUpdate,
     7  *    那么需要现在dao层(数据访问层)写和数据库相关操作的代码
     8  *    如果封装好了,直接在service(业务逻辑层)写代码即可。
     9  * 我的习惯实现写接口再写实现接口的类。
    10  * @author biehongli
    11  *
    12  */
    13 public interface UserInfoInsertService {
    14 
    15     /***
    16      * 向数据库插入(添加)数据(用户的信息)
    17      * @param user  用户的信息
    18      * @return true表示插入成功,false表示插入失败
    19      */
    20     public boolean insertUser(UserInfo user);
    21     
    22 }

      5:写好接口,写实现接口的类,作为一个新手,最好写好service业务逻辑层进行junit测试,避免后期写一大推代码,错误多的不知道哪里错了。

     1 package com.bie.system.service.impl;
     2 
     3 import java.util.ArrayList;
     4 import java.util.List;
     5 
     6 import com.bie.po.UserInfo;
     7 import com.bie.system.service.UserInfoInsertService;
     8 import com.bie.utils.DbUtils;
     9 import com.bie.utils.MarkUtils;
    10 /***
    11  * 1.4:这是业务逻辑层的实现类,实现用户信息的接口
    12  * 
    13  * 切忌新手写好service业务逻辑层需要test测试(junit)
    14  * @author biehongli
    15  *
    16  */
    17 public class UserInfoInsertServiceImpl implements UserInfoInsertService{
    18 
    19     @Override
    20     public boolean insertUser(UserInfo user) {
    21         try{
    22             //System.out.println(user);//测试传来的UserInfo里面是否够存在用户信息
    23             if(user!=null && user.getUserAccount()!=null){
    24                 String sql="INSERT INTO user_info(user_account,user_pw,"
    25                         + "user_number,user_name,user_age,user_sex,user_mark)"
    26                         + " VALUES(?,?,?,?,?,?,?)";
    27                 List<Object> list=new ArrayList<Object>();
    28                 //可以理解位将实体类中get到的信息放到数据库中,因为set设置的信息就是为了查到数据库中
    29                 list.add(user.getUserAccount());//将设置好的账号信息保存到集合中
    30                 list.add(user.getUserPw());//将设置好的账号信息保存到集合中
    31                 list.add(user.getUserNumber());//将设置好的密码信息保存到集合中
    32                 list.add(user.getUserName());//将设置好的姓名信息保存到集合中
    33                 list.add(user.getUserAge());//将设置好的年龄信息保存到集合中
    34                 list.add(user.getUserSex());//将设置好的性别信息保存到集合中
    35                 //list.add(user.getUserMark());//将设置好的标识信息保存到集合中
    36                 //后台只可以添加管理员
    37                 user.setUserMark(MarkUtils.USER_MARK_MANAGER);
    38                 //将设置为默认的管理员添加到数据库
    39                 list.add(user.getUserMark());
    40                 
    41                 //将封装到集合list中的信息和sql语句传递到DbUtils封装好的 方法中
    42                 //这里sql转化位String语句,list转化位数组类型
    43                 int count=DbUtils.addAndUpdate(sql.toString(), list.toArray());
    44                 //System.out.println(count);//测试返回值是0还是1
    45                 if(count>0){
    46                     return true;//成功返回true
    47                 }else{
    48                     return false;//失败返回false
    49                 }
    50             }
    51         }catch(Exception e){
    52             e.printStackTrace();
    53         }
    54         return false;
    55     }
    56 
    57     
    58 }

       6:写好service,业务逻辑处理层,开始使用junit进行测试。测试结果就不粘贴了,遇到的测试错误已经在代码中注释了。

     1 package com.bie.system.service.impl;
     2 
     3 import org.junit.Test;
     4 
     5 import com.bie.po.UserInfo;
     6 import com.bie.system.service.UserInfoInsertService;
     7 
     8 /***
     9  * 1.5:测试的类
    10  * @author biehongli
    11  *
    12  */
    13 public class UserInfoInsertServiceImplTest {
    14 
    15     private UserInfoInsertService service=new UserInfoInsertServiceImpl();
    16     
    17     //测试的时候出点错,String sql="INSERT INTO user_info(user_account,user_pw,user_number,user_name,user_age,user_sex,user_mark) VALUES(?,?,?,?,?,?,?)";
    18     //插入语句写字段的时候加了''导致出错,找了一会,所以写好service业务逻辑层测试还是很重要的
    19     @Test
    20     public void insert(){
    21         UserInfo user=new UserInfo();
    22         user.setUserAccount("别先生");
    23         user.setUserPw("666666");
    24         user.setUserNumber("123456789");
    25         user.setUserName("小别同志");
    26         user.setUserAge(23);
    27         user.setUserSex("爷们");
    28         user.setUserMark("1");
    29         boolean mark=service.insertUser(user);
    30         if(mark){
    31             System.out.println("插入成功!!!");
    32         }else{
    33             System.out.println("明天考试了,今天还不复习,失败了吧!!!");
    34         }
    35     }
    36 }

      7:测试好,修改好,没啥问题开始进行servlet层写代码。这里使用了RequestBeanUtils,用法和3个jar包都在上面连接里面都有。

      需要注意的是userinfo_add.jsp的form的action路径和method="post"方法,具体的实现细节就不做多叙述了。代码写的很详细了。

     1 package com.bie.system.servlet;
     2 
     3 import java.io.IOException;
     4 
     5 import javax.servlet.ServletException;
     6 import javax.servlet.annotation.WebServlet;
     7 import javax.servlet.http.HttpServlet;
     8 import javax.servlet.http.HttpServletRequest;
     9 import javax.servlet.http.HttpServletResponse;
    10 
    11 import com.bie.po.UserInfo;
    12 import com.bie.system.service.UserInfoInsertService;
    13 import com.bie.system.service.impl.UserInfoInsertServiceImpl;
    14 import com.my.web.servlet.RequestBeanUtils;
    15 
    16 /***
    17  * 1.7:这里使用servlet3.0,说明一下,
    18  * 同时使用了RequestBeanUtils,这个要求表单的name属性必须和实体类UserInfo的成员变量名称一致
    19  *         使用方法如下
    20  * 注解的要求是模块名称加功能比如/system/userinfoinsert,避免后面发生错误
    21  * @author biehongli
    22  *
    23  */
    24 @WebServlet("/system/userinfoinsert")
    25 public class UserInfoInsertServlet extends HttpServlet{
    26 
    27     private static final long serialVersionUID = 1L;//序列号
    28 
    29     @Override
    30     protected void doPost(HttpServletRequest request, HttpServletResponse response) 
    31             throws ServletException, IOException {
    32         //RequestBeanUtils的使用方法,需要导入三个包。
    33         //commons-beanutils-1.8.3.jar  commons-logging-1.1.1.jar
    34         //commy-web-0.0.1.jar
    35         UserInfo user=RequestBeanUtils.requestToSimpleBean(request, UserInfo.class);
    36         System.out.println(user);//测试到这里是否出现bug
    37         //然后在servlet层调用service逻辑处理层
    38         UserInfoInsertService service=new UserInfoInsertServiceImpl();
    39         //调用service逻辑处理层的插入方法,返回布尔类型
    40         boolean mark=service.insertUser(user);
    41         //返回提示信息到页面
    42         if(mark){
    43             request.setAttribute("info", "用户信息添加成功!!!");
    44         }else{
    45             request.setAttribute("info", "用户信息添加失败!!!");
    46         }
    47         //转发到页面(重定向)user_info.jsp提示信息,成功或者失败
    48         request.getRequestDispatcher("/view/system/userinfo/user_info.jsp").forward(request, response);
    49     }
    50             
    51 }

       8:在写servlet的时候需要考虑乱码问题,这里在工具类写了公共的方法,过滤所有请求,设置字符集为utf-8。

     1 package com.bie.utils;
     2 
     3 import java.io.IOException;
     4 
     5 import javax.servlet.Filter;
     6 import javax.servlet.FilterChain;
     7 import javax.servlet.FilterConfig;
     8 import javax.servlet.ServletException;
     9 import javax.servlet.ServletRequest;
    10 import javax.servlet.ServletResponse;
    11 import javax.servlet.annotation.WebFilter;
    12 /****
    13  * 1.8:处理乱码的过滤器
    14  * @WebFilter("/*")过滤所有的请求
    15  * @author biehongli
    16  *
    17  */
    18 @WebFilter("/*")
    19 public class UtfFilter implements Filter{
    20 
    21     @Override
    22     public void destroy() {
    23         // TODO Auto-generated method stub
    24         
    25     }
    26 
    27     @Override
    28     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, 
    29             FilterChain filterChain)throws IOException, ServletException {
    30         //处理乱码,设置字符集为utf-8
    31         servletRequest.setCharacterEncoding("utf-8");
    32         filterChain.doFilter(servletRequest, servletResponse);
    33     }
    34 
    35     @Override
    36     public void init(FilterConfig arg0) throws ServletException {
    37         // TODO Auto-generated method stub
    38         
    39     }
    40 
    41     
    42 }

      9:最后我使用一张表完成管理员和普通用户的区别,所有有一个user_mark的字段,这里设置一下,使用0和1代表管理员和普通用户,需要注意的是这里开发的是后台,所以只可以添加管理员,所以设置固定即可。

     1 package com.bie.utils;
     2 /***
     3  * 1.9用户管理标识的工具类,用来写管理员和普通用户的标识
     4  * @author biehongli
     5  *
     6  */
     7 public class MarkUtils {
     8 
     9     //用户信息的的标识
    10     public static final String USER_MARK_MEMBER="0";//0代表普通会员
    11     public static final String USER_MARK_MANAGER="1";//1代表管理员
    12     
    13     
    14 }

      最后这里暂时还没有直接将插入的信息直接显示在页面上,下篇博客将实现此功能,

      下面演示一下实现的效果,如果想看代码结构和源码可以去上面的连接下载即可。

    提示信息如下所示:

    最后可以先去数据库查看测试数据是否插入成功:

  • 相关阅读:
    WordCount C语言实现求文本的字符数,单词数,行数
    iOS 数据持久化
    Apple store加急审核
    iOSTableViewCell不等高的几种方法
    Xcode 插件(时间就是生命)
    iOS UI组件汇总
    iOS之获取经纬度并通过反向地理编码获取详细地址
    iOS 开发常用宏
    iOS让你的app一直在后台活着(运行)
    OC动画——基础动画CABasicAnimation使用
  • 原文地址:https://www.cnblogs.com/biehongli/p/6248192.html
Copyright © 2011-2022 走看看