前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于jsp+servlet图书管理系统之后台用户信息插入操作

基于jsp+servlet图书管理系统之后台用户信息插入操作

作者头像
别先生
发布2017-12-29 19:21:12
5.1K0
发布2017-12-29 19:21:12
举报
文章被收录于专栏:别先生

前奏:

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

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

         JDK Version:1.8

       tomcat  Vsersion:7.0

详细的代码和数据库设计在这里下载即可:http://download.csdn.net/detail/biexiansheng/9728492

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

开始修改原型设计:

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

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

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

代码语言:javascript
复制
 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

代码语言:javascript
复制
  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

代码语言:javascript
复制
 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

代码语言:javascript
复制
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>

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

代码语言:javascript
复制
 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

代码语言:javascript
复制
  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

代码语言:javascript
复制
  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

代码语言:javascript
复制
 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配置文件中,代码如下:

代码语言:javascript
复制
1 drivername=com.mysql.jdbc.Driver
2 url=jdbc:mysql:///book
3 user=root
4 password=123456

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

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

    加强记忆和理解

代码语言:javascript
复制
  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层。这个实体类里面是用户信息的成员变量。

代码语言:javascript
复制
 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层(数据交互层),这里先写接口,然后写实现接口的类。

代码语言:javascript
复制
 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测试,避免后期写一大推代码,错误多的不知道哪里错了。

代码语言:javascript
复制
 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进行测试。测试结果就不粘贴了,遇到的测试错误已经在代码中注释了。

代码语言:javascript
复制
 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"方法,具体的实现细节就不做多叙述了。代码写的很详细了。

代码语言:javascript
复制
 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。

代码语言:javascript
复制
 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代表管理员和普通用户,需要注意的是这里开发的是后台,所以只可以添加管理员,所以设置固定即可。

代码语言:javascript
复制
 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 }

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

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

提示信息如下所示:

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-01-04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档