简易图书管理系统（主要是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.                                                      <button type="submit"
  63.                                                          class="width-35 pull-right btn btn-sm btn-primary">
  64.                                                          <i class="icon-key"></i> 登陆
  65.                                                      </button>
  66.                                                  </div>
  67.  
  68.                                                  <div class="space-4"></div>
  69.                                              </fieldset>
  70.                                          </form>
  71.  
  72.                                      </div>
  73.  
  74.                                  </div>
  75.  
  76.                              </div>
  77.  
  78.                      </div>
  79.  
  80.                  </div>
  81.              </div>
  82.  
  83.          </div>
  84.  </div>
  85.      </div>
  86.  
  87.  </body>
  88.  </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>&nbsp; 选择皮肤</span>
  212.                      </div>
  213.  
  214.                      <div>
  215.                          <input type="checkbox" class="ace ace-checkbox-2"
  216.                              id="ace-settings-navbar" /> <label class="lbl"
  217.                              for="ace-settings-navbar"> 固定导航条</label>
  218.                      </div>
  219.  
  220.                      <div>
  221.                          <input type="checkbox" class="ace ace-checkbox-2"
  222.                              id="ace-settings-sidebar" /> <label class="lbl"
  223.                              for="ace-settings-sidebar"> 固定滑动条</label>
  224.                      </div>
  225.  
  226.                      <div>
  227.                          <input type="checkbox" class="ace ace-checkbox-2"
  228.                              id="ace-settings-breadcrumbs" /> <label class="lbl"
  229.                              for="ace-settings-breadcrumbs">固定面包屑</label>
  230.                      </div>
  231.  
  232.                      <div>
  233.                          <input type="checkbox" class="ace ace-checkbox-2"
  234.                              id="ace-settings-rtl" /> <label class="lbl"
  235.                              for="ace-settings-rtl">切换到左边</label>
  236.                      </div>
  237.  
  238.                      <div>
  239.                          <input type="checkbox" class="ace ace-checkbox-2"
  240.                              id="ace-settings-add-container" /> <label class="lbl"
  241.                              for="ace-settings-add-container"> 切换窄屏 <b></b>
  242.                          </label>
  243.                      </div>
  244.                  </div>
  245.              </div>
  246.              <!-- /#ace-settings-container -->
  247.          </div>
  248.          <!-- /.main-container-inner -->
  249.  
  250.          <a href="#" id="btn-scroll-up"
  251.              class="btn-scroll-up btn btn-sm btn-inverse"> <i
  252.              class="icon-double-angle-up icon-only bigger-110"></i>
  253.          </a>
  254.      </div>
  255.      <!-- /.main-container -->
  256.      <!-- basic scripts -->
  257.  
  258.      <script type="text/javascript">
  259.          if ("ontouchend" in document)
  260.              document
  261.                      .write("<script src='resource/assets/js/jquery.mobile.custom.min.js'>"
  262.                              + "<"+"script>");
  263.      </script>
  264.      <script src="resource/assets/js/bootstrap.min.js"></script>
  265.      <script src="resource/assets/js/typeahead-bs2.min.js"></script>
  266.  
  267.      <!-- page specific plugin scripts -->
  268.  
  269.      <!--[if lte IE 8]>
  270.            <script src="resource/assets/js/excanvas.min.js"></script>
  271.          <![endif]-->
  272.  
  273.      <script src="resource/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
  274.      <script src="resource/assets/js/jquery.ui.touch-punch.min.js"></script>
  275.      <script src="resource/assets/js/jquery.slimscroll.min.js"></script>
  276.      <script src="resource/assets/js/jquery.easy-pie-chart.min.js"></script>
  277.      <script src="resource/assets/js/jquery.sparkline.min.js"></script>
  278.      <script src="resource/assets/js/flot/jquery.flot.min.js"></script>
  279.      <script src="resource/assets/js/flot/jquery.flot.pie.min.js"></script>
  280.      <script src="resource/assets/js/flot/jquery.flot.resize.min.js"></script>
  281.  
  282.      <!-- ace scripts -->
  283.  
  284.      <script src="resource/assets/js/ace-elements.min.js"></script>
  285.      <script src="resource/assets/js/ace.min.js"></script>
  286.  
  287.      <!-- inline scripts related to this page -->
  288.  
  289.      <script type="text/javascript">
  290.          jQuery(function($) {
  291.              $('.easy-pie-chart.percentage')
  292.                      .each(
  293.                              function() {
  294.                                  var $box = $(this).closest('.infobox');
  295.                                  var barColor = $(this).data('color')
  296.                                          || (!$box.hasClass('infobox-dark') ? $box
  297.                                                  .css('color')
  298.                                                  : 'rgba(255,255,255,0.95)');
  299.                                  var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)'
  300.                                          : '#E2E2E2';
  301.                                  var size = parseInt($(this).data('size')) || 50;
  302.                                  $(this)
  303.                                          .easyPieChart(
  304.                                                  {
  305.                                                      barColor : barColor,
  306.                                                      trackColor : trackColor,
  307.                                                      scaleColor : false,
  308.                                                      lineCap : 'butt',
  309.                                                      lineWidth : parseInt(size / 10),
  310.                                                      animate : /msie\s*(8|7|6)/
  311.                                                              .test(navigator.userAgent
  312.                                                                      .toLowerCase()) ? false
  313.                                                              : 1000,
  314.                                                      size : size
  315.                                                  });
  316.                              })
  317.  
  318.              $('.sparkline').each(
  319.                      function() {
  320.                          var $box = $(this).closest('.infobox');
  321.                          var barColor = !$box.hasClass('infobox-dark') ? $box
  322.                                  .css('color') : '#FFF';
  323.                          $(this).sparkline('html', {
  324.                              tagValuesAttribute : 'data-values',
  325.                              type : 'bar',
  326.                              barColor : barColor,
  327.                              chartRangeMin : $(this).data('min') || 0
  328.                          });
  329.                      });
  330.  
  331.              var placeholder = $('#piechart-placeholder').css({
  332.                  'width' : '90%',
  333.                  'min-height' : '150px'
  334.              });
  335.              var data = [ {
  336.                  label : "social networks",
  337.                  data : 38.7,
  338.                  color : "#68BC31"
  339.              }, {
  340.                  label : "search engines",
  341.                  data : 24.5,
  342.                  color : "#2091CF"
  343.              }, {
  344.                  label : "ad campaigns",
  345.                  data : 8.2,
  346.                  color : "#AF4E96"
  347.              }, {
  348.                  label : "direct traffic",
  349.                  data : 18.6,
  350.                  color : "#DA5430"
  351.              }, {
  352.                  label : "other",
  353.                  data : 10,
  354.                  color : "#FEE074"
  355.              } ]
  356.              function drawPieChart(placeholder, data, position) {
  357.                  $.plot(placeholder, data, {
  358.                      series : {
  359.                          pie : {
  360.                              show : true,
  361.                              tilt : 0.8,
  362.                              highlight : {
  363.                                  opacity : 0.25
  364.                              },
  365.                              stroke : {
  366.                                  color : '#fff',
  367.                                  width : 2
  368.                              },
  369.                              startAngle : 2
  370.                          }
  371.                      },
  372.                      legend : {
  373.                          show : true,
  374.                          position : position || "ne",
  375.                          labelBoxBorderColor : null,
  376.                          margin : [ -30, 15 ]
  377.                      },
  378.                      grid : {
  379.                          hoverable : true,
  380.                          clickable : true
  381.                      }
  382.                  })
  383.              }
  384.              drawPieChart(placeholder, data);
  385.  
  386.              /**
  387.              we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
  388.              so that's not needed actually.
  389.               */
  390.              placeholder.data('chart', data);
  391.              placeholder.data('draw', drawPieChart);
  392.  
  393.              var $tooltip = $(
  394.                      "<div class='tooltip top in'><div class='tooltip-inner'></div></div>")
  395.                      .hide().appendTo('body');
  396.              var previousPoint = null;
  397.  
  398.              placeholder.on('plothover', function(event, pos, item) {
  399.                  if (item) {
  400.                      if (previousPoint != item.seriesIndex) {
  401.                          previousPoint = item.seriesIndex;
  402.                          var tip = item.series['label'] + " : "
  403.                                  + item.series['percent'] + '%';
  404.                          $tooltip.show().children(0).text(tip);
  405.                      }
  406.                      $tooltip.css({
  407.                          top : pos.pageY + 10,
  408.                          left : pos.pageX + 10
  409.                      });
  410.                  } else {
  411.                      $tooltip.hide();
  412.                      previousPoint = null;
  413.                  }
  414.  
  415.              });
  416.  
  417.              var d1 = [];
  418.              for (var i = 0; i < Math.PI * 2; i += 0.5) {
  419.                  d1.push([ i, Math.sin(i) ]);
  420.              }
  421.  
  422.              var d2 = [];
  423.              for (var i = 0; i < Math.PI * 2; i += 0.5) {
  424.                  d2.push([ i, Math.cos(i) ]);
  425.              }
  426.  
  427.              var d3 = [];
  428.              for (var i = 0; i < Math.PI * 2; i += 0.2) {
  429.                  d3.push([ i, Math.tan(i) ]);
  430.              }
  431.  
  432.              var sales_charts = $('#sales-charts').css({
  433.                  'width' : '100%',
  434.                  'height' : '220px'
  435.              });
  436.              $.plot("#sales-charts", [ {
  437.                  label : "Domains",
  438.                  data : d1
  439.              }, {
  440.                  label : "Hosting",
  441.                  data : d2
  442.              }, {
  443.                  label : "Services",
  444.                  data : d3
  445.              } ], {
  446.                  hoverable : true,
  447.                  shadowSize : 0,
  448.                  series : {
  449.                      lines : {
  450.                          show : true
  451.                      },
  452.                      points : {
  453.                          show : true
  454.                      }
  455.                  },
  456.                  xaxis : {
  457.                      tickLength : 0
  458.                  },
  459.                  yaxis : {
  460.                      ticks : 10,
  461.                      min : -2,
  462.                      max : 2,
  463.                      tickDecimals : 3
  464.                  },
  465.                  grid : {
  466.                      backgroundColor : {
  467.                          colors : [ "#fff", "#fff" ]
  468.                      },
  469.                      borderWidth : 1,
  470.                      borderColor : '#555'
  471.                  }
  472.              });
  473.  
  474.              $('#recent-box [data-rel="tooltip"]').tooltip({
  475.                  placement : tooltip_placement
  476.              });
  477.              function tooltip_placement(context, source) {
  478.                  var $source = $(source);
  479.                  var $parent = $source.closest('.tab-content')
  480.                  var off1 = $parent.offset();
  481.                  var w1 = $parent.width();
  482.  
  483.                  var off2 = $source.offset();
  484.                  var w2 = $source.width();
  485.  
  486.                  if (parseInt(off2.left) < parseInt(off1.left)
  487.                          + parseInt(w1 / 2))
  488.                      return 'right';
  489.                  return 'left';
  490.              }
  491.  
  492.              $('.dialogs,.comments').slimScroll({
  493.                  height : '300px'
  494.              });
  495.  
  496.              //Android's default browser somehow is confused when tapping on label which will lead to dragging the task
  497.              //so disable dragging when clicking on label
  498.              var agent = navigator.userAgent.toLowerCase();
  499.              if ("ontouchstart" in document && /applewebkit/.test(agent)
  500.                      && /android/.test(agent))
  501.                  $('#tasks').on('touchstart', function(e) {
  502.                      var li = $(e.target).closest('#tasks li');
  503.                      if (li.length == 0)
  504.                          return;
  505.                      var label = li.find('label.inline').get(0);
  506.                      if (label == e.target || $.contains(label, e.target))
  507.                          e.stopImmediatePropagation();
  508.                  });
  509.  
  510.              $('#tasks').sortable({
  511.                  opacity : 0.8,
  512.                  revert : true,
  513.                  forceHelperSize : true,
  514.                  placeholder : 'draggable-placeholder',
  515.                  forcePlaceholderSize : true,
  516.                  tolerance : 'pointer',
  517.                  stop : function(event, ui) {//just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
  518.                      $(ui.item).css('z-index', 'auto');
  519.                  }
  520.              });
  521.              $('#tasks').disableSelection();
  522.              $('#tasks input:checkbox').removeAttr('checked').on('click',
  523.                      function() {
  524.                          if (this.checked)
  525.                              $(this).closest('li').addClass('selected');
  526.                          else
  527.                              $(this).closest('li').removeClass('selected');
  528.                      });
  529.  
  530.          })
  531.      </script>
  532.  
  533.  </body>
  534.  </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.  </div>
  53.  
  54.  </body>
  55.  </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.          <h5 class="page-header alert-info"
  80.              style="margin: 0px; padding: 10px; margin-bottom: 10px;">账号信息</h5>
  81.          <!-- 开始5 -->
  82.          <div class="row">
  83.              <div class="col-xs-5">
  84.                  <div class="form-group ">
  85.                      <label class="col-xs-3 control-label">用户账号</label>
  86.                      <div class="col-xs-9">
  87.                          <input type="text" name="userAccount" class="form-control" placeholder="请输入用户账号" />
  88.                      </div>
  89.                  </div>
  90.              </div>
  91.              <div class="col-xs-5">
  92.                  <div class="form-group ">
  93.                      <label class="col-xs-3 control-label">用户密码</label>
  94.                      <div class="col-xs-9 ">
  95.                          <input type="text" name="userPw" class="form-control" placeholder="请输入用户密码" />
  96.                      </div>
  97.                  </div>
  98.              </div>
  99.          </div>
  100.          <!--结束5 -->
  101.  
  102.          <div class="row">
  103.              <div class="col-xs-3 col-xs-offset-4">
  104.                  <input type="submit" class="btn btn-success" value="保存用户" /> <input
  105.                      type="reset" class="btn btn-danger" value="重置信息" />
  106.              </div>
  107.  
  108.          </div>
  109.  
  110.      </form>
  111.  </body>
  112.  </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.          <h5 class="page-header alert-info"
  72.              style="margin: 0px; padding: 10px; margin-bottom: 10px;">账号信息</h5>
  73.          <!-- 开始5 -->
  74.          <div class="row">
  75.              <div class="col-xs-5">
  76.                  <div class="form-group ">
  77.                      <label class="col-xs-3 control-label">用户账号</label>
  78.                      <div class="col-xs-9">
  79.                          <input type="text" class="form-control" placeholder="请输入用户账号" value="admin123" />
  80.                      </div>
  81.                  </div>
  82.              </div>
  83.              <div class="col-xs-5">
  84.                  <div class="form-group ">
  85.                      <label class="col-xs-3 control-label">用户密码</label>
  86.                      <div class="col-xs-9 ">
  87.                          <input type="text" class="form-control" placeholder="请输入用户密码" value="123456" />
  88.                      </div>
  89.                  </div>
  90.              </div>
  91.          </div>
  92.          <!--结束5 -->
  93.  
  94.          <div class="row">
  95.              <div class="col-xs-3 col-xs-offset-4">
  96.                  <input type="submit" class="btn btn-success" value="保存用户" /> <input
  97.                      type="reset" class="btn btn-danger" value="重置信息" />
  98.              </div>
  99.  
  100.          </div>
  101.  
  102.      </form>
  103.  </body>
  104.  </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.  }

　　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.  }

　　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.  }

　　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.  }

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

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

提示信息如下所示：

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

基于jsp+servlet图书管理系统之后台万能模板的更多相关文章

  1. 基于jsp+servlet图书管理系统之后台用户信息删除操作

    上一篇的博客写的是修改操作,且附有源码和数据库,这篇博客写的是删除操作,附有从头至尾写的代码(详细的注释)和数据库! 此次删除操作的源码和数据库:http://download.csdn.net/de ...

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

    前奏: 刚开始接触博客园写博客,就是写写平时学的基础知识,慢慢发现大神写的博客思路很清晰,知识很丰富,非常又价值,反思自己写的,顿时感觉非常low,有相当长一段时间没有分享自己的知识.于是静下心来钻研 ...

  3. 基于jsp+servlet图书管理系统之后台用户信息修改操作

    上一篇的博客写的是查询操作,且附有源码和数据库,这篇博客写的是修改操作,附有从头至尾写的代码(详细的注释)和数据库! 此次修改操作的源码和数据库:http://download.csdn.net/de ...

  4. 基于jsp+servlet图书管理系统之后台用户信息查询操作

    上一篇的博客写的是插入操作,且附有源码和数据库,这篇博客写的是查询操作,附有从头至尾写的代码(详细的注释)和数据库! 此次查询操作的源码和数据库:http://download.csdn.net/de ...

  5. 基于JSP+Servlet开发高校社团管理系统（前台+后台） 源码

    基于JSP+Servlet开发高校社团管理系统(前台+后台): 开发环境:    Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MYSQL数据库 运行效果 ...

  6. 基于JSP+Servlet开发手机销售购物商城系统（前台+后台）源码

    基于JSP+Servlet开发手机销售购物商城系统(前台+后台) 开发环境: Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MySQL数据库 运行效果图: ...

  7. 基于JSP+SERVLET的新闻发布系统(一)

    本系统使用的是基于JSP+SERVLET+TOMCAT6 数据库使用的是MYSQL IDE是MYECLIPSE8.5,页面编辑使用的是百度的ueditor,比较适合咱国人 采用MVC模式,使用的关键技 ...

  8. 11 基于django的图书管理系统 多表

    1.需求 作业需求:1.列出图书列表.出版社列表.作者列表2.点击作者,会列出其出版的图书列表3.点击出版社,会列出旗下图书列表4.可以创建.修改.删除 图书.作者.出版社 踩分点:1.满足需求1,2 ...

  9. 基于JSP+Servlet的学生信息管理系统

    JavaWeb期末项目,一个基于JSP和Servlet的学生信息管理系统实现,前端用了bootstrap和一些自定义的css样式,数据库用了mysql 传送门: GitHub 实现功能 登录(教师, ...

随机推荐

  1. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  2. HttpClient的替代者 - RestTemplate

    需要的包 ,除了Spring的基础包外还用到json的包,这里的数据传输使用json格式 客户端和服务端都用到一下的包 <!-- Spring --> <dependency> ...

  3. 札记：Fragment基础

    Fragment概述 在Fragment出现之前,Activity是app中界面的基本组成单位,值得一提的是,作为四大组件之一,它是需要"注册"的.组件的特性使得一个Activit ...

  4. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  5. C#中如何给Excel添加水印

    我们知道Microsoft Excel并没有内置的功能直接给Excel表添加水印,但是其实我们可以用其他变通的方式来解决此问题,如通过添加页眉图片或艺术字的方法来模仿水印的外观.所以在这篇文章中,我将 ...

  6. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  7. 在Windows上编译和调试CoreCLR

    生成CoreCLR - Windows篇 本文的唯一目的就是让你运行Hello World 运行环境 Window 7+ Visual studio 2015 确保C++ 工具已经被安装,默认是不安装 ...

  8. php注册审核

    通过注册审核,判断刚创建的账户是否可以使用. 后台管理员审核通过后,账号可以使用. 通过session 设置只能通过登录入口进入网页. 原理:通过数据库设置账号的一个字段状态,例: isok:1, i ...

  9. es6小白学习笔记(一)

    1.let和const命令 1.es6新增了let和const命令,与var用法类似,但它声明的变量只在let所在的代码块内有效(块级作用域,es5只有全局和函数作用域) { let a = 1; v ...

  10. 【从零开始学BPM，Day4】业务集成

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第四天课程] 1.课程概要 Step 1 软件下载:H3 BP ...