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