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

学习目标：

运用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项目实现添加(增)的过程：