学习目标：

运用Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat技术。实现用户信息的增删改查操作(添加功能及界面实现)。

---

步骤：

1.通过list.jsp界面点击添加按钮请求,跳转到add.jsp. <a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a> 2.根据add.jsp界面的提交表单去的servlet,写对应的servlet层代码(主要工作:获取add.jsp传来的参数,然后将数据封装),例这里的AddUserServlet. <form action="${pageContext.request.contextPath}/addUserServlet" method="post"> 3.在AddUserServlet中向service层进行数据保存(实际保存是由:dao层完成.过程:AddUserServlet-->UserService-->UserDao).

      AddUserServlet:

@WebServlet("/addUserServlet") public class AddUserServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.设置编码 request.setCharacterEncoding("utf-8"); //2.获取参数 Map<String, String[]> map = request.getParameterMap(); //3.封装对象 User user = new User(); try { BeanUtils.populate(user,map); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } System.out.println(user.toString()); //4.调用service进行保存 IUserService service = new UserServiceImpl(); service.addUser(user); //5.跳转到UserListServlet response.sendRedirect(request.getContextPath()+"/userListServlet"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request,response); } }

      UserService:

      UserDao:

4.添加的步骤就像上面一样,下面进行提交数据的表单校验.

      add_form.js:

/* 表单校验 分析： 1.给表单绑定submit事件。监听器中判断每一个方法校验的结果。 如果都为true，则监听器方法返回true。 如果有一个为false，则监听器方法返回false. 2.定义一些方法，分别校验各个表单项。 3.给各个表单项绑定blur事件。 */ $(function () { // 绑定表单事件 $("#add_form").submit(function () { //调用方法（用方法名，不要括号） if($("#name").val()==""){ alert("姓名不能为空"); } if($("#age").val()==""){ alert("年龄不能为空"); } if($("#qq").val()==""){ alert("qq号不能为空"); } if($("#email").val()==""){ alert("邮箱不能为空"); } return checkName() && checkAge() && checkQq() && checkEmail(); }); //校验名字 function checkName() { //1.获取用户名的值 var name = $("#name").val(); //2.定义正则表达式 var reg_name = /^[\u4E00-\u9FA5]{2,4}$/; //3.判断值是否符合正则表达式的规则 var flag = reg_name.test(name); //4.提示信息 if(flag){ $("#s_name").show().html("√"); }else{ $("#s_name").show().html("×"); } return flag; } //当失焦时判断 $("#name").blur(function () { checkName(); }); //校验年龄 function checkAge() { //1.获取用户名的值 var age = $("#age").val(); //2.定义正则表达式 var reg_age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/; //3.判断值是否符合正则表达式的规则 var flag = reg_age.test(age); //4.提示信息 if(flag){ $("#s_age").show().html("√"); }else{ $("#s_age").show().html("×"); } return flag; } $("#age").blur(function () { checkAge(); }); //校验qq function checkQq() { var qq = $("#qq").val(); var reg_qq = /^[1-9][0-9]{4,14}$/; var flag = reg_qq.test(qq); if(flag){ $("#s_qq").show().html("√"); }else{ $("#s_qq").show().html("×"); } return flag; } //绑定离焦事件 $("#qq").blur(function () { checkQq(); }); //校验邮箱 function checkEmail() { var email = $("#email").val(); var reg_email = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/; var flag = reg_email.test(email); if(flag){ $("#s_email").show().html("√"); }else{ $("#s_email").show().html("×"); } return flag; } //绑定离焦事件 $("#email").blur(function () { checkEmail(); }); });

在add.jsp中引用:

<%--表单校验js--%> <script type="text/javascript" src="js/add_form.js"></script>

---

总结：

web项目实现添加(增)的过程：