前奏：
刚开始接触博客园写博客，就是写写平时学的基础知识，慢慢发现大神写的博客思路很清晰，知识很丰富，非常又价值，反思自己写的，顿时感觉非常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>
servlet3.0-xml
将用户信息列表界面的原型html修改为jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 //获取绝对路径路径 5 String path = request.getContextPath(); 6 String basePath = request.getScheme() + "://" 7 + request.getServerName() + ":" + request.getServerPort() 8 + path + "/"; 9 %> 10 <!DOCTYPE html> 11 <html> 12 <head> 13 <base href="<%=basePath %>" /> 14 <meta charset="UTF-8"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 16 <title>用户管理-用户查询</title> 17 <link href="resource/css/bootstrap.min.css" rel="stylesheet" /> 18 <script type="text/javascript" src="resource/js/jquery.min.js"></script> 19 <script type="text/javascript" 20 src="resource/js/bootstrap.min.js"></script> 21 </head> 22 <body> 23 <div> 24 <ul class="breadcrumb" style="margin: 0px;"> 25 <li>系统管理</li> 26 <li>用户管理</li> 27 <li>用户查询</li> 28 </ul> 29 </div> 30 <form action="" class="form-inline"> 31 <div class="row alert alert-info" style="margin: 0px; padding: 5px;"> 32 <div class="form-group"> 33 <label>条件:</label> <select class="form-control"> 34 <option>姓名</option> 35 <option>性别</option> 36 </select> <input type="text" class="form-control" placeholder="请输入查询条件" /> 37 </div> 38 <input type="button" class="btn btn-danger" value="查询"> <a 39 href="view/system/userinfo/userinfo_add.jsp" class="btn btn-success">添加用户</a> 40 </div> 41 <div class="row" style="padding: 15px;"> 42 <table class="table table-hover table-condensed"> 43 <tr> 44 <th>用户编号</th> 45 <th>用户账号</th> 46 <th>用户密码</th> 47 <th>用户姓名</th> 48 <th>用户性别</th> 49 <th>用户年龄</th> 50 <td>操作</td> 51 </tr> 52 <tr> 53 <td>1001</td> 54 <td>admin123</td> 55 <td>123456</td> 56 <td>高富帅</td> 57 <td>男</td> 58 <td>20</td> 59 <td><a href="view/system/userinfo/userinfo_update.jsp">修改</a> 删除</td> 60 </tr> 61 <tr> 62 <td>1001</td> 63 <td>admin123</td> 64 <td>123456</td> 65 <td>白富美</td> 66 <td>女</td> 67 <td>20</td> 68 <td>修改 删除</td> 69 </tr> 70 <tr> 71 <td>1001</td> 72 <td>admin123</td> 73 <td>123456</td> 74 <td>高富帅</td> 75 <td>男</td> 76 <td>20</td> 77 <td>修改 删除</td> 78 </tr> 79 <tr> 80 <td>1001</td> 81 <td>admin123</td> 82 <td>123456</td> 83 <td>白富美</td> 84 <td>女</td> 85 <td>20</td> 86 <td>修改 删除</td> 87 </tr> 88 </table> 89 </div> 90 </form> 91 </body> 92 </html>
用户信息的主页面
将用户信息插入界面的原型html修改为jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 //获取绝对路径路径 5 String path = request.getContextPath(); 6 String basePath = request.getScheme() + "://" 7 + request.getServerName() + ":" + request.getServerPort() 8 + path + "/"; 9 %> 10 <!DOCTYPE html> 11 <html> 12 <head> 13 <base href="<%=basePath %>" /> 14 <meta charset="UTF-8"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 16 <title>用户管理-用户添加</title> 17 <link href="resource/css/bootstrap.min.css" rel="stylesheet" /> 18 <script type="text/javascript" src="resource/js/jquery.min.js"></script> 19 <script type="text/javascript" 20 src="resource/js/bootstrap.min.js"></script> 21 </head> 22 <body> 23 <div> 24 <ul class="breadcrumb" style="margin: 0px;"> 25 <li>系统管理</li> 26 <li>用户管理</li> 27 <li>用户添加</li> 28 </ul> 29 </div> 30 <form action="system/userinfoinsert" class="form-horizontal" method="post"> 31 <h5 class="page-header alert-info" 32 style="margin: 0px; padding: 10px; margin-bottom: 10px;">基本信息</h5> 33 <!-- 开始1 --> 34 <div class="row"> 35 <div class="col-xs-5"> 36 <div class="form-group "> 37 <label class="col-xs-3 control-label">用户学号</label> 38 <div class="col-xs-9 "> 39 <input type="text" name="userNumber" class="form-control" placeholder="请输入用户学号" /> 40 </div> 41 </div> 42 </div> 43 <div class="col-xs-5"> 44 <div class="form-group "> 45 <label class="col-xs-3 control-label">用户姓名</label> 46 <div class="col-xs-9 "> 47 <input type="text" name="userName" class="form-control" placeholder="请输入用户姓名" /> 48 </div> 49 </div> 50 </div> 51 </div> 52 <!--结束1 --> 53 <!-- 开始2 --> 54 <div class="row"> 55 <div class="col-xs-5"> 56 <div class="form-group "> 57 <label class="col-xs-3 control-label">用户年龄</label> 58 <div class="col-xs-9 "> 59 <input type="text" name="userAge" class="form-control" placeholder="请输入用户年龄" /> 60 </div> 61 </div> 62 </div> 63 <div class="col-xs-5"> 64 <div class="form-group "> 65 <label class="col-xs-3 control-label">用户性别</label> 66 <div class="col-xs-3 "> 67 <select class="form-control" name="userSex"> 68 <option>保密</option> 69 <option>男</option> 70 <option>女</option> 71 </select> 72 </div> 73 </div> 74 </div> 75 76 </div> 77 <!--结束2 --> 78 79 80 <h5 class="page-header alert-info" 81 style="margin: 0px; padding: 10px; margin-bottom: 10px;">账号信息</h5> 82 <!-- 开始5 --> 83 <div class="row"> 84 <div class="col-xs-5"> 85 <div class="form-group "> 86 <label class="col-xs-3 control-label">用户账号</label> 87 <div class="col-xs-9"> 88 <input type="text" name="userAccount" class="form-control" placeholder="请输入用户账号" /> 89 </div> 90 </div> 91 </div> 92 <div class="col-xs-5"> 93 <div class="form-group "> 94 <label class="col-xs-3 control-label">用户密码</label> 95 <div class="col-xs-9 "> 96 <input type="text" name="userPw" class="form-control" placeholder="请输入用户密码" /> 97 </div> 98 </div> 99 </div> 100 </div> 101 <!--结束5 --> 102 103 <div class="row"> 104 <div class="col-xs-3 col-xs-offset-4"> 105 <input type="submit" class="btn btn-success" value="保存用户" /> <input 106 type="reset" class="btn btn-danger" value="重置信息" /> 107 </div> 108 109 </div> 110 111 </form> 112 </body> 113 </html>
用户信息的插入界面
将用户信息更改界面的原型html修改为jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <% 4 //获取绝对路径路径 5 String path = request.getContextPath(); 6 String basePath = request.getScheme() + "://" 7 + request.getServerName() + ":" + request.getServerPort() 8 + path + "/"; 9 %> 10 <!DOCTYPE html> 11 <html> 12 <head> 13 <base href="<%=basePath %>" /> 14 <meta charset="UTF-8"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 16 <title>用户管理-用户修改</title> 17 <link href="resource/css/bootstrap.min.css" rel="stylesheet" /> 18 <script type="text/javascript" src="resource/js/jquery.min.js"></script> 19 <script type="text/javascript" 20 src="resource/js/bootstrap.min.js"></script> 21 </head> 22 <body> 23 <div> 24 <ul class="breadcrumb" style="margin: 0px;"> 25 <li>系统管理</li> 26 <li>用户管理</li> 27 <li>用户修改</li> 28 </ul> 29 </div> 30 <form action="" class="form-horizontal"> 31 <h5 class="page-header alert-info" 32 style="margin: 0px; padding: 10px; margin-bottom: 10px;">基本信息</h5> 33 <!-- 开始1 --> 34 <div class="row"> 35 <div class="col-xs-5"> 36 <div class="form-group "> 37 <label class="col-xs-3 control-label">用户姓名</label> 38 <div class="col-xs-9 "> 39 <input type="text" class="form-control" placeholder="请输入用户姓名" value="高富帅" /> 40 </div> 41 </div> 42 </div> 43 <div class="col-xs-5"> 44 <div class="form-group "> 45 <label class="col-xs-3 control-label">用户年龄</label> 46 <div class="col-xs-9 "> 47 <input type="text" class="form-control" placeholder="请输入用户年龄" value="20" /> 48 </div> 49 </div> 50 </div> 51 </div> 52 <!--结束1 --> 53 <!-- 开始2 --> 54 <div class="row"> 55 <div class="col-xs-5"> 56 <div class="form-group "> 57 <label class="col-xs-3 control-label">用户性别</label> 58 <div class="col-xs-3 "> 59 <select class="form-control"> 60 <option>保密</option> 61 <option>男</option> 62 <option>女</option> 63 </select> 64 </div> 65 </div> 66 </div> 67 68 </div> 69 <!--结束2 --> 70 71 72 <h5 class="page-header alert-info" 73 style="margin: 0px; padding: 10px; margin-bottom: 10px;">账号信息</h5> 74 <!-- 开始5 --> 75 <div class="row"> 76 <div class="col-xs-5"> 77 <div class="form-group "> 78 <label class="col-xs-3 control-label">用户账号</label> 79 <div class="col-xs-9"> 80 <input type="text" class="form-control" placeholder="请输入用户账号" value="admin123" /> 81 </div> 82 </div> 83 </div> 84 <div class="col-xs-5"> 85 <div class="form-group "> 86 <label class="col-xs-3 control-label">用户密码</label> 87 <div class="col-xs-9 "> 88 <input type="text" class="form-control" placeholder="请输入用户密码" value="123456" /> 89 </div> 90 </div> 91 </div> 92 </div> 93 <!--结束5 --> 94 95 <div class="row"> 96 <div class="col-xs-3 col-xs-offset-4"> 97 <input type="submit" class="btn btn-success" value="保存用户" /> <input 98 type="reset" class="btn btn-danger" value="重置信息" /> 99 </div> 100 101 </div> 102 103 </form> 104 </body> 105 </html>
用户信息的更新界面
用户信息提示信息界面的jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <%
4 //获取绝对路径路径
5 String path = request.getContextPath();
6 String basePath = request.getScheme() + "://"
7 + request.getServerName() + ":" + request.getServerPort()
8 + path + "/";
9 %>
10 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
11 <html>
12 <head>
13 <base href="<%=basePath %>" />
14 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
15 <title>Insert title here</title>
16 </head>
17 <body>
18 <script type="text/javascript">
19 //此页面用来提示添加，修改，删除信息的成功或者失败的信息
20 alert('${info}');//提示信息，错误or成功
21 //跳转到user_info.jsp查询页面，后面会修改为servlet
22 window.location="view/system/userinfo/userinfo_list.jsp";
23 </script>
24 </body>
25 </html>
用户信息的提示界面
至此用户信息的登录界面，主页面基本设计的差不多了，接下来就开始进行开发了。
开始基于后台逻辑代码进行开发：
1：这里我使用的是将数据库的驱动driver，数据库连接字符串，数据库账号，密码写到db.properties配置文件中，代码如下：
1 drivername=com.mysql.jdbc.Driver 2 url=jdbc:mysql:///book 3 user=root 4 password=123456
2：写好配置文件，接下来写utils工具类，代码如下，写好连接数据库的工具类，个人习惯测试了一下，避免连接数据库就发生错误，那就糗大了。
顺便提一下，添加信息和更改信息我直接也封装到了这个工具类中，方便使用，减少重复代码的书写，当然对于新手，多写重复代码是一件好事，
加强记忆和理解
1 package com.bie.utils;
2
3 import java.sql.Connection;
4 import java.sql.DriverManager;
5 import java.sql.PreparedStatement;
6 import java.sql.ResultSet;
7 import java.util.ResourceBundle;
8
9 /***
10 * 1.1：写DbUtils的工具类
11 * :utils是工具类，方便以后调用
12 * 在main方法测试的时候出现一个错误，
13 * 瞄了一眼立马想到了没有添加mysql的驱动，
14 * 所以我感觉测试还是很有必要的
15 * @author biehongli
16 *
17 */
18 public class DbUtils {
19
20 private static String drivername;//数据库驱动，为了加载数据库驱动
21 private static String url;//数据库连接字符串，只要是找到自己的数据库，需要和自己的数据库一致
22 private static String user;//数据库账号，需要和自己的一致
23 private static String password;//数据库密码，需要和自己的一致
24
25 static{
26 drivername=ResourceBundle.getBundle("db").getString("drivername");
27 url=ResourceBundle.getBundle("db").getString("url");
28 user=ResourceBundle.getBundle("db").getString("user");
29 password=ResourceBundle.getBundle("db").getString("password");
30 }
31
32 /***
33 * 加载数据库驱动和连接到数据库，我一般是加载和连接的时候分别输出，可以快速找到哪里出错
34 * @return
35 * @throws Exception
36 */
37 public static Connection getCon() throws Exception{
38 Class.forName(drivername);//记载数据库驱动
39 System.out.println("测试加载数据库驱动");
40 //连接到数据库
41 Connection con=DriverManager.getConnection(url, user, password);
42 System.out.println("测试连接到数据库");
43 return con;
44 }
45
46 /***
47 * 这个用来判断关闭数据库的方法
48 * @param con 关闭Connection的连接
49 * @param ps 关闭PreparedStatement
50 * @param rs 关闭ResultSet
51 */
52 public static void getClose(Connection con,PreparedStatement ps,ResultSet rs){
53 //关闭数据库，注意关闭的顺序。养成好习惯
54 try{
55 if(rs!=null){
56 rs.close();
57 }
58 if(ps!=null){
59 ps.close();
60 }
61 if(con!=null){
62 con.close();
63 }
64 }catch(Exception e){
65 e.printStackTrace();
66 }
67 }
68
69 /***
70 * 添加(插入)和更新(更改)可以提取公共的方法写在工具类中
71 * 删除一般使用伪删除，这样删除就是更新(更改)操作，
72 * 所以只有查询(查找)需要写更多的代码
73 * @param sql 外面传来的sql语句
74 * @param arr 外面传来的数组类型的，是用户信息封装到集合传递进来
75 * @return 返回的是一个整形的数据类型
76 */
77 public static int addAndUpdate(String sql,Object[] arr){
78 Connection con=null;
79 PreparedStatement ps=null;
80 try{
81 con=DbUtils.getCon();//第一步连接数据库
82 ps=con.prepareStatement(sql);//第二步预编译
83 //第三步给sql语句中的参数复制
84 for(int i=0;i<arr.length;i++){
85 ps.setObject(i+1, arr[i]);
86 }
87 //第四步执行sql并且返回。
88 return ps.executeUpdate();
89 }catch(Exception e){
90 e.printStackTrace();
91 }finally{
92 //关闭资源，如果没有ResultSet类型的，加上null即可
93 DbUtils.getClose(con, ps, null);
94 }
95 return 0;
96 }
97 /*public static void main(String[] args) {
98 //我一般在写好连接数据库的工具类时先测试一下，避免连接数据库都失败，测试后可注释即可
99 try {
100 DbUtils.getCon();
101 System.out.println("测试连接数据库终极版！！！");
102 } catch (Exception e) {
103 e.printStackTrace();
104 }
105 }*/
106 }
3：开始写实体类po层。这个实体类里面是用户信息的成员变量。
1 package com.bie.po;
2 /***
3 * 1.2:写用户信息的实体类
4 * 需要和自己设计好的数据库信息相对应。
5 * @author biehongli
6 *
7 */
8 public class UserInfo {
9
10 private Integer userId;//用户编号
11 private String userAccount;//用户账号
12 private String userPw;//用户密码
13 private String userNumber;//用户学号
14 private String userName;//用户姓名
15 private Integer userAge;//用户年龄
16 private String userSex;//用户性别
17 private String userMark;//用户标识，可以使用一张表，完成管理员和用户
18 //如果对setxxx,getxxx灰常熟练了，自动生成即可
19 public Integer getUserId() {
20 return userId;
21 }
22 public void setUserId(Integer userId) {
23 this.userId = userId;
24 }
25 public String getUserAccount() {
26 return userAccount;
27 }
28 public void setUserAccount(String userAccount) {
29 this.userAccount = userAccount;
30 }
31 public String getUserPw() {
32 return userPw;
33 }
34 public void setUserPw(String userPw) {
35 this.userPw = userPw;
36 }
37 public String getUserNumber() {
38 return userNumber;
39 }
40 public void setUserNumber(String userNumber) {
41 this.userNumber = userNumber;
42 }
43 public String getUserName() {
44 return userName;
45 }
46 public void setUserName(String userName) {
47 this.userName = userName;
48 }
49 public Integer getUserAge() {
50 return userAge;
51 }
52 public void setUserAge(Integer userAge) {
53 this.userAge = userAge;
54 }
55 public String getUserSex() {
56 return userSex;
57 }
58 public void setUserSex(String userSex) {
59 this.userSex = userSex;
60 }
61 public String getUserMark() {
62 return userMark;
63 }
64 public void setUserMark(String userMark) {
65 this.userMark = userMark;
66 }
67 //重写toString()方法
68 @Override
69 public String toString() {
70 return "UserInfo [userId=" + userId + ", userAccount=" + userAccount + ", userPw=" + userPw + ", userNumber="
71 + userNumber + ", userName=" + userName + ", userAge=" + userAge + ", userSex=" + userSex
72 + ", userMark=" + userMark + "]";
73 }
74
75
76 }
4：写好实体类，接着写处理业务逻辑，这里是写的插入，所以省去了dao层，如果是查询还需要先写dao层（数据交互层），这里先写接口，然后写实现接口的类。
1 package com.bie.system.service;
2
3 import com.bie.po.UserInfo;
4
5 /***
6 * 1.3：如果没有在工具类DbUtils中封装addAndUpdate，
7 * 那么需要现在dao层(数据访问层)写和数据库相关操作的代码
8 * 如果封装好了，直接在service(业务逻辑层)写代码即可。
9 * 我的习惯实现写接口再写实现接口的类。
10 * @author biehongli
11 *
12 */
13 public interface UserInfoInsertService {
14
15 /***
16 * 向数据库插入(添加)数据(用户的信息)
17 * @param user 用户的信息
18 * @return true表示插入成功，false表示插入失败
19 */
20 public boolean insertUser(UserInfo user);
21
22 }
5：写好接口，写实现接口的类，作为一个新手，最好写好service业务逻辑层进行junit测试，避免后期写一大推代码，错误多的不知道哪里错了。
1 package com.bie.system.service.impl;
2
3 import java.util.ArrayList;
4 import java.util.List;
5
6 import com.bie.po.UserInfo;
7 import com.bie.system.service.UserInfoInsertService;
8 import com.bie.utils.DbUtils;
9 import com.bie.utils.MarkUtils;
10 /***
11 * 1.4:这是业务逻辑层的实现类，实现用户信息的接口
12 *
13 * 切忌新手写好service业务逻辑层需要test测试(junit)
14 * @author biehongli
15 *
16 */
17 public class UserInfoInsertServiceImpl implements UserInfoInsertService{
18
19 @Override
20 public boolean insertUser(UserInfo user) {
21 try{
22 //System.out.println(user);//测试传来的UserInfo里面是否够存在用户信息
23 if(user!=null && user.getUserAccount()!=null){
24 String sql="INSERT INTO user_info(user_account,user_pw,"
25 + "user_number,user_name,user_age,user_sex,user_mark)"
26 + " VALUES(?,?,?,?,?,?,?)";
27 List<Object> list=new ArrayList<Object>();
28 //可以理解位将实体类中get到的信息放到数据库中，因为set设置的信息就是为了查到数据库中
29 list.add(user.getUserAccount());//将设置好的账号信息保存到集合中
30 list.add(user.getUserPw());//将设置好的账号信息保存到集合中
31 list.add(user.getUserNumber());//将设置好的密码信息保存到集合中
32 list.add(user.getUserName());//将设置好的姓名信息保存到集合中
33 list.add(user.getUserAge());//将设置好的年龄信息保存到集合中
34 list.add(user.getUserSex());//将设置好的性别信息保存到集合中
35 //list.add(user.getUserMark());//将设置好的标识信息保存到集合中
36 //后台只可以添加管理员
37 user.setUserMark(MarkUtils.USER_MARK_MANAGER);
38 //将设置为默认的管理员添加到数据库
39 list.add(user.getUserMark());
40
41 //将封装到集合list中的信息和sql语句传递到DbUtils封装好的 方法中
42 //这里sql转化位String语句，list转化位数组类型
43 int count=DbUtils.addAndUpdate(sql.toString(), list.toArray());
44 //System.out.println(count);//测试返回值是0还是1
45 if(count>0){
46 return true;//成功返回true
47 }else{
48 return false;//失败返回false
49 }
50 }
51 }catch(Exception e){
52 e.printStackTrace();
53 }
54 return false;
55 }
56
57
58 }
6：写好service,业务逻辑处理层，开始使用junit进行测试。测试结果就不粘贴了，遇到的测试错误已经在代码中注释了。
1 package com.bie.system.service.impl;
2
3 import org.junit.Test;
4
5 import com.bie.po.UserInfo;
6 import com.bie.system.service.UserInfoInsertService;
7
8 /***
9 * 1.5:测试的类
10 * @author biehongli
11 *
12 */
13 public class UserInfoInsertServiceImplTest {
14
15 private UserInfoInsertService service=new UserInfoInsertServiceImpl();
16
17 //测试的时候出点错，String sql="INSERT INTO user_info(user_account,user_pw,user_number,user_name,user_age,user_sex,user_mark) VALUES(?,?,?,?,?,?,?)";
18 //插入语句写字段的时候加了''导致出错，找了一会，所以写好service业务逻辑层测试还是很重要的
19 @Test
20 public void insert(){
21 UserInfo user=new UserInfo();
22 user.setUserAccount("别先生");
23 user.setUserPw("666666");
24 user.setUserNumber("123456789");
25 user.setUserName("小别同志");
26 user.setUserAge(23);
27 user.setUserSex("爷们");
28 user.setUserMark("1");
29 boolean mark=service.insertUser(user);
30 if(mark){
31 System.out.println("插入成功！！！");
32 }else{
33 System.out.println("明天考试了，今天还不复习，失败了吧！！！");
34 }
35 }
36 }
7：测试好，修改好，没啥问题开始进行servlet层写代码。这里使用了RequestBeanUtils，用法和3个jar包都在上面连接里面都有。
需要注意的是userinfo_add.jsp的form的action路径和method="post"方法，具体的实现细节就不做多叙述了。代码写的很详细了。
1 package com.bie.system.servlet;
2
3 import java.io.IOException;
4
5 import javax.servlet.ServletException;
6 import javax.servlet.annotation.WebServlet;
7 import javax.servlet.http.HttpServlet;
8 import javax.servlet.http.HttpServletRequest;
9 import javax.servlet.http.HttpServletResponse;
10
11 import com.bie.po.UserInfo;
12 import com.bie.system.service.UserInfoInsertService;
13 import com.bie.system.service.impl.UserInfoInsertServiceImpl;
14 import com.my.web.servlet.RequestBeanUtils;
15
16 /***
17 * 1.7：这里使用servlet3.0,说明一下，
18 * 同时使用了RequestBeanUtils,这个要求表单的name属性必须和实体类UserInfo的成员变量名称一致
19 * 使用方法如下
20 * 注解的要求是模块名称加功能比如/system/userinfoinsert，避免后面发生错误
21 * @author biehongli
22 *
23 */
24 @WebServlet("/system/userinfoinsert")
25 public class UserInfoInsertServlet extends HttpServlet{
26
27 private static final long serialVersionUID = 1L;//序列号
28
29 @Override
30 protected void doPost(HttpServletRequest request, HttpServletResponse response)
31 throws ServletException, IOException {
32 //RequestBeanUtils的使用方法，需要导入三个包。
33 //commons-beanutils-1.8.3.jar commons-logging-1.1.1.jar
34 //commy-web-0.0.1.jar
35 UserInfo user=RequestBeanUtils.requestToSimpleBean(request, UserInfo.class);
36 System.out.println(user);//测试到这里是否出现bug
37 //然后在servlet层调用service逻辑处理层
38 UserInfoInsertService service=new UserInfoInsertServiceImpl();
39 //调用service逻辑处理层的插入方法,返回布尔类型
40 boolean mark=service.insertUser(user);
41 //返回提示信息到页面
42 if(mark){
43 request.setAttribute("info", "用户信息添加成功！！！");
44 }else{
45 request.setAttribute("info", "用户信息添加失败！！！");
46 }
47 //转发到页面(重定向)user_info.jsp提示信息，成功或者失败
48 request.getRequestDispatcher("/view/system/userinfo/user_info.jsp").forward(request, response);
49 }
50
51 }
8：在写servlet的时候需要考虑乱码问题，这里在工具类写了公共的方法，过滤所有请求，设置字符集为utf-8。
1 package com.bie.utils;
2
3 import java.io.IOException;
4
5 import javax.servlet.Filter;
6 import javax.servlet.FilterChain;
7 import javax.servlet.FilterConfig;
8 import javax.servlet.ServletException;
9 import javax.servlet.ServletRequest;
10 import javax.servlet.ServletResponse;
11 import javax.servlet.annotation.WebFilter;
12 /****
13 * 1.8:处理乱码的过滤器
14 * @WebFilter("/*")过滤所有的请求
15 * @author biehongli
16 *
17 */
18 @WebFilter("/*")
19 public class UtfFilter implements Filter{
20
21 @Override
22 public void destroy() {
23 // TODO Auto-generated method stub
24
25 }
26
27 @Override
28 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse,
29 FilterChain filterChain)throws IOException, ServletException {
30 //处理乱码，设置字符集为utf-8
31 servletRequest.setCharacterEncoding("utf-8");
32 filterChain.doFilter(servletRequest, servletResponse);
33 }
34
35 @Override
36 public void init(FilterConfig arg0) throws ServletException {
37 // TODO Auto-generated method stub
38
39 }
40
41
42 }
9：最后我使用一张表完成管理员和普通用户的区别，所有有一个user_mark的字段，这里设置一下，使用0和1代表管理员和普通用户，需要注意的是这里开发的是后台，所以只可以添加管理员，所以设置固定即可。
1 package com.bie.utils;
2 /***
3 * 1.9用户管理标识的工具类，用来写管理员和普通用户的标识
4 * @author biehongli
5 *
6 */
7 public class MarkUtils {
8
9 //用户信息的的标识
10 public static final String USER_MARK_MEMBER="0";//0代表普通会员
11 public static final String USER_MARK_MANAGER="1";//1代表管理员
12
13
14 }
最后这里暂时还没有直接将插入的信息直接显示在页面上，下篇博客将实现此功能，
下面演示一下实现的效果，如果想看代码结构和源码可以去上面的连接下载即可。
提示信息如下所示：
最后可以先去数据库查看测试数据是否插入成功：
时间： 2024-09-11 17:58:01