簡易圖書管理系統（主要是jsp+servlet的練習）：https://blog.csdn.net/Biexiansheng/article/details/70240413
免費提供源碼，有償提供服務，支持項目定制。
前奏：
剛開始接觸博客園寫博客，就是寫寫平時學的基礎知識，慢慢發現大神寫的博客思路很清晰，知識很豐富，非常又價值，反思自己寫的，頓時感覺非常low,有相當長一段時間沒有分享自己的知識。於是靜下心來鑽研知識，趁着這學期的結束（馬上就要放寒假了），寫寫最近練習的基於jsp+servlet+前台模板寫的圖書管理系統，一點一點寫吧，詳細的注釋已經在代碼上說明，希望對學習基於java開發的web方向的童鞋有所幫助。今天先把寫的用戶信息管理的添加（插入）操作分享一下，使用了一些特殊的知識，也會做一下說明。更多代碼和功能會持續更新，完整可直接運行的。
開發環境：Eclipse Version: Mars.2 Release (4.5.2)
JDK Version:1.8
tomcat Vsersion:7.0
（由於個人掌握知識有限，如若有不足的地方，還請多多交流。）
開始修改原型設計：
1：設計好數據庫(當然我這里設計是簡單的數據庫)，見上面的鏈接，下載導入自己的數據庫即可使用。
2：我先准備好了原型模板，然后將原型模板修改好，然后才進行開發。原型模板修改如下。
將登錄界面的原型html修改為jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 //獲取絕對路徑路徑 5 String path = request.getContextPath(); 6 String basePath = request.getScheme() + "://" 7 + request.getServerName() + ":" + request.getServerPort() 8 + path + "/"; 9 %> 10 <!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <base href="<%=basePath %>" /> 14 <title>用戶登錄</title> 15 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 17 <link href="resource/assets/css/bootstrap.min.css" rel="stylesheet" /> 18 <link rel="stylesheet" href="resource/assets/css/font-awesome.min.css" /> 19 <link rel="stylesheet" href="resource/assets/css/ace.min.css" /> 20 <link rel="stylesheet" href="resource/assets/css/ace-rtl.min.css" /> 21 </head> 22 <body class="login-layout"> 23 <div class="main-container"> 24 <div class="main-content"> 25 <div class="row"> 26 <div class="col-sm-10 col-sm-offset-1"> 27 <div class="login-container"> 28 <div class="center"> 29 <h1> 30 <i class="icon-leaf green"></i> <span class="red">別先生</span> <span 31 class="white">圖書管理系統</span> 32 </h1> 33 <h4 class="blue"></h4> 34 </div> 35 <div class="space-6"></div> 36 <div class="position-relative"> 37 <div id="login-box" 38 class="login-box visible widget-box no-border"> 39 <div class="widget-body"> 40 <div class="widget-main"> 41 <h4 class="header blue lighter bigger"> 42 <i class="icon-coffee green"></i> 請輸入您的賬號和密碼 43 </h4> 44 45 <div class="space-6"></div> 46 <form action="view/system/main/index.jsp" method="post" onsubmit="return check()"> 47 <fieldset> 48 <label class="block clearfix"> <span 49 class="block input-icon input-icon-right"> <input id="userId" 50 name="userId" type="text" class="form-control" 51 placeholder="請輸入您的賬號" /> <i class="icon-user"></i> 52 </span> 53 </label> <label class="block clearfix"> <span 54 class="block input-icon input-icon-right"> <input id="userPw" 55 name="passWord" type="password" class="form-control" 56 placeholder="請輸入您的密碼" /> <i class="icon-lock"></i> 57 </span> 58 </label> 59 60 <div class="clearfix"> 61 62 63 <button type="submit" 64 class="width-35 pull-right btn btn-sm btn-primary"> 65 <i class="icon-key"></i> 登陸 66 </button> 67 </div> 68 69 <div class="space-4"></div> 70 </fieldset> 71 </form> 72 73 </div> 74 75 </div> 76 77 </div> 78 79 80 </div> 81 82 </div> 83 </div> 84 85 </div> 86 </div> 87 </div> 88 89 </body> 90 </html>
將主界面的原型html修改為jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 //獲取絕對路徑路徑 5 String path = request.getContextPath(); 6 String basePath = request.getScheme() + "://" 7 + request.getServerName() + ":" + request.getServerPort() 8 + path + "/"; 9 %> 10 <!DOCTYPE html> 11 <html lang="en"> 12 <head> 13 <base href="<%=basePath %>" /> 14 <title>首頁</title> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 17 <link href="resource/assets/css/bootstrap.min.css" rel="stylesheet" /> 18 <link rel="stylesheet" href="resource/assets/css/font-awesome.min.css" /> 19 <link rel="stylesheet" href="resource/assets/css/ace.min.css" /> 20 <link rel="stylesheet" href="resource/assets/css/ace-rtl.min.css" /> 21 <link rel="stylesheet" href="resource/assets/css/ace-skins.min.css" /> 22 <script src="resource/assets/js/ace-extra.min.js"></script> 23 <script src="resource/assets/jquery.min.js"></script> 24 </head> 25 <body> 26 <div class="navbar navbar-default" id="navbar"> 27 <script type="text/javascript"> 28 try { 29 ace.settings.check('navbar', 'fixed') 30 } catch (e) { 31 } 32 </script> 33 34 <div class="navbar-container" id="navbar-container"> 35 <div class="navbar-header pull-left"> 36 <a href="view/system/main/index.jsp" class="navbar-brand"> <small> <i 37 class="icon-leaf"></i> 別先生后台圖書管理系統 38 </small> 39 </a> 40 <!-- /.brand --> 41 </div> 42 <!-- /.navbar-header --> 43 44 <div class="navbar-header pull-right" role="navigation"> 45 <ul class="nav ace-nav"> 46 <li class="green"><a data-toggle="dropdown" 47 class="dropdown-toggle" href="#"> <i 48 class="icon-envelope icon-animated-vertical"></i> <span 49 class="badge badge-success">5</span> 50 </a> 51 52 <ul 53 class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close"> 54 <li class="dropdown-header"><i class="icon-envelope-alt"></i> 55 5條消息</li> 56 </ul></li> 57 58 <li class="light-blue"><a data-toggle="dropdown" href="#" 59 class="dropdown-toggle"> <img class="nav-user-photo" 60 src="resource/assets/avatars/user.jpg" alt="Jason's Photo" /> <span 61 class="user-info"> <small>歡迎光臨,</small> 62 </span> <i class="icon-caret-down"></i> 63 </a> 64 <ul 65 class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> 66 67 <li><a href="#" target="mainframe"> <i class="icon-user"></i> 個人資料 68 </a></li> 69 70 <li class="divider"></li> 71 72 <li><a href="view/system/main/login.jsp"> <i class="icon-off"></i> 退出 73 </a></li> 74 </ul></li> 75 </ul> 76 <!-- /.ace-nav --> 77 78 </div> 79 <!-- /.navbar-header --> 80 </div> 81 <!-- /.container --> 82 </div> 83 84 <div class="main-container" id="main-container"> 85 <script type="text/javascript"> 86 try { 87 ace.settings.check('main-container', 'fixed') 88 } catch (e) { 89 } 90 </script> 91 92 <div class="main-container-inner"> 93 <a class="menu-toggler" id="menu-toggler" href="#"> <span 94 class="menu-text"></span> 95 </a> 96 97 <div class="sidebar" id="sidebar"> 98 <script type="text/javascript"> 99 try { 100 ace.settings.check('sidebar', 'fixed') 101 } catch (e) { 102 } 103 </script> 104 105 <div class="sidebar-shortcuts" id="sidebar-shortcuts"> 106 <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> 107 <button class="btn btn-success"> 108 <i class="icon-signal"></i> 109 </button> 110 111 <button class="btn btn-info"> 112 <i class="icon-pencil"></i> 113 </button> 114 115 <button class="btn btn-warning"> 116 <i class="icon-group"></i> 117 </button> 118 119 <button class="btn btn-danger"> 120 <i class="icon-cogs"></i> 121 </button> 122 </div> 123 124 <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini"> 125 <span class="btn btn-success"></span> <span class="btn btn-info"></span> 126 127 <span class="btn btn-warning"></span> <span class="btn btn-danger"></span> 128 </div> 129 </div> 130 <!-- #sidebar-shortcuts --> 131 132 <ul class="nav nav-list"> 133 <li class="active"><a 134 href="view/system/main/main.jsp" target="mainframe"> 135 <i class="icon-dashboard"></i> <span class="menu-text"> 136 控制台 </span> 137 </a></li> 138 <li><a href="javascript:void(0)" target="mainframe" 139 class="dropdown-toggle"> <i class="icon-desktop"></i> <span 140 class="menu-text"> 系統管理 </span> <b class="arrow icon-angle-down"></b> 141 </a> 142 143 <ul class="submenu"> 144 145 <li><a href="view/system/userinfo/userinfo_list.jsp" target="mainframe"> <i 146 class="icon-double-angle-right"></i> 用戶管理 147 </a></li> 148 149 </ul> 150 </li> 151 <li><a href="javascript:void(0)" target="mainframe" 152 class="dropdown-toggle"> <i class="icon-desktop"></i> <span 153 class="menu-text">圖書管理 </span> <b class="arrow icon-angle-down"></b> 154 </a> 155 156 <ul class="submenu"> 157 158 <li><a href="view/crm/customer/customer_list.html" target="mainframe"> <i 159 class="icon-double-angle-right"></i> 圖書管理 160 </a></li> 161 <li><a href="view/crm/customer/customer_list.html" target="mainframe"> <i 162 class="icon-double-angle-right"></i> 圖書記錄管理 163 </a></li> 164 165 </ul> 166 </li> 167 </ul> 168 <!-- /.nav-list --> 169 170 <div class="sidebar-collapse" id="sidebar-collapse"> 171 <i class="icon-double-angle-left" 172 data-icon1="icon-double-angle-left" 173 data-icon2="icon-double-angle-right"></i> 174 </div> 175 176 <script type="text/javascript"> 177 try { 178 ace.settings.check('sidebar', 'collapsed') 179 } catch (e) { 180 } 181 </script> 182 </div> 183 184 <div class="main-content" id="mains"> 185 <iframe id="mainframe" name="mainframe" src="view/system/main/main.jsp" 186 style="width: 100%;border: 0px;"> </iframe> 187 188 </div> 189 190 <script type="text/javascript"> 191 var height = jQuery(window).height() - 50; 192 jQuery("#mainframe").attr("height", "" + height + "px;"); 193 </script> 194 195 <div class="ace-settings-container" id="ace-settings-container"> 196 <div class="btn btn-app btn-xs btn-warning ace-settings-btn" 197 id="ace-settings-btn"> 198 <i class="icon-cog bigger-150"></i> 199 </div> 200 201 <div class="ace-settings-box" id="ace-settings-box"> 202 <div> 203 <div class="pull-left"> 204 <select id="skin-colorpicker" class="hide"> 205 <option data-skin="default" value="#438EB9">#438EB9</option> 206 <option data-skin="skin-1" value="#222A2D">#222A2D</option> 207 <option data-skin="skin-2" value="#C6487E">#C6487E</option> 208 <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option> 209 </select> 210 </div> 211 <span> 選擇皮膚</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 }
最后這里暫時還沒有直接將插入的信息直接顯示在頁面上，下篇博客將實現此功能，
下面演示一下實現的效果，如果想看代碼結構和源碼可以去上面的連接下載即可。
提示信息如下所示：
最后可以先去數據庫查看測試數據是否插入成功：
