前奏：
登陆界面
主界面
其他界面
servlet3.0-xml
用户信息的主页面
用户信息的插入界面
用户信息的更新界面
用户信息的提示界面
刚开始接触博客园写博客，就是写写平时学的基础知识，慢慢发现大神写的博客思路很清晰，知识很丰富，非常又价值，反思自己写的，顿时感觉非常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
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> 选择皮肤</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>
将用户信息列表界面的原型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 }
最后这里暂时还没有直接将插入的信息直接显示在页面上，下篇博客将实现此功能，
下面演示一下实现的效果，如果想看代码结构和源码可以去上面的连接下载即可。
提示信息如下所示：
最后可以先去数据库查看测试数据是否插入成功：
