基於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="width: 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 : /msie\s*(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 }

  最后這里暫時還沒有直接將插入的信息直接顯示在頁面上,下篇博客將實現此功能,

  下面演示一下實現的效果,如果想看代碼結構和源碼可以去上面的連接下載即可。

提示信息如下所示:

 

最后可以先去數據庫查看測試數據是否插入成功:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM