SSM練習--CURD以前端代碼

時間 2019-12-11

標籤 ssm 練習 curd 前端代碼简体版

原文原文鏈接

前端主要使用jQuery，Bootstrap以及Ajax，使用了Bootstrap的模態框彈框顯示新增及修改頁面javascript

代碼：css

後端校驗：html

private Integer empId;
    
    //@Pattern 自定義表達式規則
    @Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5}$)"
                    ,message="用戶名格式錯誤")
    private String empName;

    private String gender;
    
    //@Email
    @Pattern(regexp="(^[a-z\\d]+(\\.[a-z\\d]+)*@([\\da-z](-[\\da-z])?)+(\\.{1,2}[a-z]+)+$)"
            ,message="郵箱格式錯誤")
    private String email;

    private Integer dId;

1.外部文件的導入：前端

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>列表顯示</title>
<%
    //key=APP_PATH  value=request.getContextPath()拿到當前項目路徑
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑，不以/開始的相對路徑找資源，以當前資源的路徑爲基準，常常容易出問題
            以/開始的相對路徑，找資源，以服務器的路徑爲標準（http://localhost:3306/ssm）須要加上項目名
    
     -->
<script type="text/javascript"
    src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css"
    href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript"
    src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

2.新增模態框java

<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增員工</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">員工姓名</label>
                            <div class="col-sm-10">
                                <input type="text" name="empName" class="form-control"
                                    id="empName_add_input"> <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">郵箱</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control"
                                    id="email_add_input"> <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性別</label>
                            <div class="col-sm-10">
                                <label class="radio-inline"> <input type="radio"
                                    name="gender" id="gender1_add_input" value="1"
                                    checked="checked"> 男 </label> <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_add_input"
                                    value="0"> 女 </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">部門名</label>
                            <div class="col-sm-4">
                                <!-- 部門提交部門id便可 -->
                                <select class="form-control" name="dId" id="dept_add_select">

                                </select>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

3.員工編輯模態框jquery

<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">員工修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">員工姓名</label>
                            <div class="col-sm-10">
                                <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">郵箱</label>
                            <div class="col-sm-10">
                                <input type="text" name="email" class="form-control"
                                    id="email_update_input"> <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性別</label>
                            <div class="col-sm-10">
                                <label class="radio-inline"> <input type="radio"
                                    name="gender" id="gender1_update_input" value="1"
                                    checked="checked"> 男 </label> <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_update_input"
                                    value="0"> 女 </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">部門名</label>
                            <div class="col-sm-4">
                                <!-- 部門提交部門id便可 -->
                                <select class="form-control" name="dId" id="dept_update_select">

                                </select>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="emp_update_btn">修改</button>
                </div>
            </div>
        </div>
    </div>

4.頁面主體web

<div class="container">
        <!-- 分四行 -->
        <!-- 標題 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSH-CURD</h1>
            </div>
        </div>

        <!-- 按鈕 -->
        <div class="row">
            <!-- 佔4列，偏移8列 -->
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
                <button class="btn btn-danger" id="emp_delete_all_btn">刪除</button>
            </div>
        </div>

        <!-- 顯示錶格數據 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="check_all"/>
                            </th>
                            <th>#</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>

                </table>
            </div>
        </div>

        <!-- 顯示分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息 -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分頁條 信息-->
            <div class="col-md-6" id="page_nav_area"></div>
        </div>
    </div>
</body>

5.經過ajax顯示頁面信息ajax

<script type="text/javascript">
    var totalRecord;//總記錄數
    var currentPage;//當前頁
    //1.頁面加載完成後，直接去發送一個ajax請求要到分頁數據
    $(function() {
        //加載直接進入第一頁
        to_page(1);
    });

    function to_page(pn) {

        $.ajax({
            url : "${APP_PATH}/emps",
            data : "pn=" + pn,
            type : "get",
            success : function(result) {
                console.log(result);
                //1.解析並顯示員工數據
                build_emps_table(result);
                //2.解析分頁信息
                build_page_info(result);
                //3.解析顯示分頁條數據
                build_page_nav(result);

            }
        });
    }

6.構建員工表格正則表達式

function build_emps_table(result) {
        //構建前table表格，否則點擊下一頁前一頁信息會重疊在第二頁
        $("#emps_table tbody").empty();

        //包含全部員工數據
        var emps = result.extend.pageInfo.list;
        //遍歷全部的員工信息
        $.each(emps, function(index, item) {
            var checkBoxTd =$("<td>"+"<input type='checkbox' class='check_item'/>"+"</td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>")
                    .append(item.gender == "M" ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass(
                    "btn btn-primary btn-sm edit_btn").append(
                    $("<span></span>").addClass("glyphicon glyphicon-pencil")
                            .append("編輯"));
            //爲編輯按鈕添加一個自定義屬性表示當前員工id
            editBtn.attr("edit-id",item.empId);
            
            var delBtn = $("<button></button>").addClass(
                    "btn btn-danger btn-sm delete_btn").append(
                    $("<span></span>").addClass("glyphicon glyphicon-trash")
                            .append("刪除"));
                            
                //爲刪除按鈕添加一個自定義屬性表示當前員工id            
            delBtn.attr("del-id",item.empId);

            var btnTd = $("<td></td>").append(editBtn).append(" ").append(
                    delBtn);
            $("<tr></tr>").append(checkBoxTd).append(empIdTd).append(empNameTd).append(genderTd)
                    .append(emailTd).append(deptNameTd).append(btnTd).appendTo(
                            "#emps_table tbody");

        });

    }

7.分頁信息顯示數據庫

function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append(
                "當前 " + result.extend.pageInfo.pageNum + " 頁",
                "總" + result.extend.pageInfo.pages + " 頁",
                "總" + result.extend.pageInfo.total + " 條記錄");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

8.顯示分頁條

function build_page_nav(result) {
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

        //判斷是否有前一頁
        if (result.extend.pageInfo.hasPreviousPage == false) {
            //firstPageLi.addClass("disabled");
            //prePageLi.addClass("disabled");
            firstPageLi.hide();
            prePageLi.hide();
        }
        //爲元素添加翻頁事件
        firstPageLi.click(function() {
            to_page(1);
        });

        prePageLi.click(function() {
            to_page(result.extend.pageInfo.pageNum - 1);
        });

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁"));

        //判斷是否有後一頁
        if (result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");

        } else {
            nextPageLi.click(function() {
                to_page(result.extend.pageInfo.pageNum + 1);

            });

            lastPageLi.click(function() {
                to_page(result.extend.pageInfo.pages);

            });
        }

        ul.append(firstPageLi).append(prePageLi);

        //index:當前索引，item：當前元素,遍歷添加頁碼
        $.each(result.extend.pageInfo.navigatepageNums, function(index, item) {

            var numLi = $("<li></li>").append($("<a></a>").append(item));

            //若是當前頁碼是正在遍歷的頁碼
            if (result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function() {
                to_page(item);

            });
            ul.append(numLi);

        });
        ul.append(nextPageLi).append(lastPageLi);

        var nav = $("<nav></nav>").append(ul);
        nav.appendTo("#page_nav_area");
    }

9.新增

//表單清除方法
    function reset_form(ele) {
        //清空表單內容
        $(ele)[0].reset();
        //清空表單樣式
        $(ele).find("*").removeClass("has-error has-success");
        //清空信息提示框文本
        $(ele).find(".help-block").text("");
    }

    $("#emp_add_modal_btn").click(
            function() {
                //清除表單內容
                reset_form("#empAddModal form");

                //打開模態框前發送請求全部部門的信息
                getDepts("#dept_add_select");
                //模態框的js彈出方法,bootstrap
                $("#empAddModal").modal({
                    backdrop : "static"//點擊背景不關閉

                });

                //查出部門信息顯示在下拉列表中
                function getDepts(ele) {
                    //清空以前下拉列表的值
                    $(ele).empty();
                    $.ajax({
                        url : "${APP_PATH}/depts",
                        type : "GET",
                        success : function(result) {
                            console.log(result);
                            //$("#dept_add_select").append("")
                            $.each(result.extend.depts, function() {
                                var optionEle = $("<option></option>").append(
                                        this.deptName).attr("value",
                                        this.deptId);
                                optionEle.appendTo(ele);

                            });
                        }
                    });
                }
            });

10.表單的校驗

function validate_add_form() {
        //拿到校驗數據後使用正則表達式
        var empName = $("#empName_add_input").val();
        // 小/大寫的a-z，0-9，下劃線或者橫槓，要求6-16位,中文字符要求只要2-5個，二者用或鏈接的
        var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)/;

        if (!regName.test(empName)) {

            show_validate_msg("#empName_add_input", "error", "用戶名格式不正確");

            return false;
        } else {

            show_validate_msg("#empName_add_input", "success", "用戶名格式正確");

        }
        ;
        //郵箱驗證
        var email = $("#email_add_input").val();
        var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;

        if (!regEmail.test(email)) {
            show_validate_msg("#email_add_input", "error", "郵箱輸入格式不正確");

            return false;

        } else {
            show_validate_msg("#email_add_input", "success", "郵箱輸入正確");

        }
        
        return true;
    }

    function show_validate_msg(ele, status, msg) {
        //清除當前元素的校驗狀態
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }

    }

11.判斷信息與數據庫是否重複

$("#empName_add_input").change(
            function() {
                //發送ajax請求校驗用戶名是否可用
                var empName = this.value;
                $.ajax({
                    url : "${APP_PATH}/checkuser",
                    data : "empName=" + empName,
                    type : "POST",
                    success : function(result) {
                        if (result.code == 100) {
                            show_validate_msg("#empName_add_input", "success",
                                    "用戶名可用");
                            $("#emp_save_btn").attr("ajax-va", "success");
                        } else {
                            show_validate_msg("#empName_add_input", "error",
                                    "用戶名被佔用");
                            $("#emp_save_btn").attr("ajax-va", "error");
                        }
                    }

                });

            });

12.新增的保存功能

$("#emp_save_btn")
            .click(
                    function() {
                        //對提交的數據進行驗證
                        if (!validate_add_form()) {
                            return false;
                        }
                        //判斷用戶名與數據庫校驗是否成功
                        if ($(this).attr("ajax-va") == "error") {
                            return false;
                        }

                        /*serialize() 方法經過序列化表單值，建立 URL 編碼文本字符串。
                            能夠選擇一個或多個表單元素（好比 input 及/或 文本框），或者 form 元素自己。
                            序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中*/
                        console.log("獲取到的表單數據："
                                + $("#empAddModal form").serialize());
                        $
                                .ajax({
                                    url : "${APP_PATH}/emp",
                                    type : "POST",
                                    data : $("#empAddModal form").serialize(),
                                    success : function(result) {
                                        console.log(result.msg);
                                        if (result.code == 100) {
                                            //保存後關閉模態框
                                            $("#empAddModal").modal('hide');
                                            //跳轉到最後一頁顯示新增的數據，發送ajax請求顯示最後一頁數據
                                            to_page(totalRecord);
                                        } else {
                                            console.log(result);
                                            //若是不是郵箱信息未定義就是顯示郵箱錯誤信息
                                            if (undefined != result.extend.errorFields.email) {
                                                show_validate_msg(
                                                        "#email_add_input",
                                                        "error",
                                                        result.extend.errorFields.email);
                                            }

                                            if (undefined != result.extend.errorFields.empName) {
                                                show_validate_msg(
                                                        "#empName_add_input",
                                                        "error",
                                                        result.extend.errorFields.empName);
                                            }

                                        }

                                    }

                                });
                    });

13.編輯按鈕

//由於新增按鈕建立以前就綁定了click，因此要用以下方法才能綁定成功
            $(document).on("click",".edit_btn",function(){
                //查出部門信息，顯示部門列表
                getDepts("empUpdateModal select");
                //查出員工信息，顯示員工信息
                getEmp($(this).attr("edit-id"));
                //把員工id傳遞給更新按鈕
                $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
                //模態框彈出
                $("empUpdateModal").modal({
                    backdrop:"static"
                });
            
            });

14.根據id查詢須要編輯的信息

function getEmp(id){
                $.ajax({
                    url:"${APP_PATH}/emp/"+id,
                    type:"GET",
                    success:function(result){
                        console.log(result);
                        //員工數據
                        var empdata = result.extend.emp;
                        $("#empName_update_static").text(empdata.empName);
                        //給input框賦值直接用val()
                        $("#email_update_input").val(empdata.email);
                        //單選框的賦值
                        $("empUpdateModal input[name=gender]").val([empdata.gender]);
                        //下拉列表的賦值
                        $("#empUpdateModal select").val([empdata.dId]);
                        
                    }
                
                });
            
            }

15.更新按鈕

$("#emp_update_btn").click(function(){
                    // 先驗證後發送請求，驗證郵箱是否合法
                    var email = $("#email_update_input").val();
                    var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;

                if (!regEmail.test(email)) {
                    show_validate_msg("#email_update_input", "error", "郵箱輸入格式不正確");
    
                    return false;

                } else {
                    show_validate_msg("#email_update_input", "success", "郵箱輸入正確");

            }
                    //發送ajax請求保存信息
                    $.ajax({
                    url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
                    type:"PUT",
                    data:$("#empUpdateModal form").serialize(),
                    success:function(result){
                            console.log(result.msg);
                            $("#empUpdateModal").modal("hide");
                            to_page(currentPage);
                    
                    }
                    
                    });
            });

16.刪除

//======================單個刪除按鈕========================
            $(document).on("click",".delete_btn",function(){
                    //彈出確認刪除對話框
                    //找到當前元素的父節點tr下的第二個子元素td的值
                    var empName = $(this).parents("tr").find("td:eq(2)").text();
                    var empId = $(this).attr("del-id");
                        if(confirm("確認刪除【"+empName+"】嗎？")){
                                    //點擊確認發送ajax請求
                                    $.ajax({
                                        url:"${APP_PATH}/emp/"+empId,
                                        type:"DELETE",
                                        success:function(){
                                                console.log(result.msg);
                                                to_page(currentPage);
                                        }
                                    
                                    });
                                    
                        
                        }
            });
            //======================批量刪除按鈕========================
            //完成全選/全不選
            //prop正確獲取屬性的值，attr獲取自定義屬性的值
            //prop修改和讀取dom原生屬性的值
            $("#check_all").click(function(){
                $(this).prop("checked");
                $(".check_item").prop("checked",$(this).prop("checked"));
            });
            //後來動態添加的元素綁定單擊事件
                $(document).on("click",".check_item",function(){
                
                        //判斷是否選滿  .check_item:checked==被選中的
                        var flag = $(".check_item:checked").length==$(".check_item").length;
                        //選滿後head處的框就勾上
                        $("#check_all").prop("checked",flag);
                
            });    
            $("#emp_delete_all_btn").click(function(){
                //遍歷被選中的
                var empNames = "";
                var del_idstr = "";
                $.each($(".check_item:checked"),function(){
                        //找到的是員工姓名,拼接
                    empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
                    del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
                });
                //去除empNames多餘的逗號，用substring截取
                empNames = empNames.substring(0,empNames.length-1);
                del_idstr = del_idstr.substring(0,del_idstr.length-1);
                if(confirm("確認刪除【"+empNames+"】嗎？")){
                        $.ajax({
                                url:"${APP_PATH}/emp/"+del_idstr,
                                type:"DELETE",
                                succcess:function(result){
                                        alert(result.msg);
                                        to_page(currentPage);
                                }
                        
                        })
                        
                
                }
            
            });
            
</script>
</html>