使用SSM框架，完成用戶登錄和增刪改查

本Demo相關知識點：

1、后台使用SSM框架完成前台響應

2、前台展現使用BootStrap，主要使用其table和和模態框Model

3、使用Ajax完成增刪改查功能

4.JS動態構建表格

Demo 完成后界面如下：

下面開始正式構建Demo

一、用戶登錄

前端JSP頁面主要代碼

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <form action="login" method="post">
                <div class="form-group">
                    <label>用戶名</label>
                    <input type="text" class="form-control" name="username" placeholder="username">
                </div>
                <div class="form-group">
                    <label>密碼</label>
                    <input type="password" class="form-control" name="password" placeholder="Password">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 記住密碼
                    </label>
                </div>
                <button type="submit" class="btn btn-default">登錄</button>
                <div>${msg}</div>
            </form>
        </div>
    </div>
</div>

后台Controller

    @Resource
    private UserService userService;
    //用戶登錄驗證
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String login(HttpServletRequest request, Model model){

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        Boolean result = checkUserLogin(username,password);
        if(result){
            return "userList";
        }else{
            model.addAttribute("msg", "用戶名或密碼不正確，請重新登錄");
            return "forward:/login.jsp";
        }
    }

    public boolean checkUserLogin(String username,String password){
        User user = userService.getUserByName(username);
        if (user == null || "".equals(user)){
            return  false;
        }
        if (user.getUserPwd().equals(password)){
            return true;
        }else {
            return  false;
        }
    }

當登錄成功時，則跳轉到view下的userList.jsp主頁面，登錄失敗時則提示

登錄時，只是進行了簡單的賬號密碼驗證，沒有進行復雜的驗證，還有記住密碼功能尚未完成

二、在登錄成功后開始構建主界面

在前期完成主界面時，主要是使用Bootstrap表格，主要是html，此處由於篇幅原因，不細說，Demo最后會給出listuser.jsp完整代碼

三、完成界面上查詢按鈕的功能

 

此處根據ID查詢用戶，並展示在下面的表體里，此處首先需要完成三件事，一、編寫查詢的JS方法。二、編寫查詢的Controller方法。三、根據返回的對象動態構建表體以展示出來

3.1 編寫根據用戶ID查詢的JS方法

 // 查詢單個用戶
  $("#userQueryBtn").click(function () {
      var id = $("#userID").val();
         doQuery(id);
   })

 // 查詢單個用戶調用的方法
    function doQuery(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user == null){
                    //當查詢的用戶不存在時，清空表格上面上次查詢的結果
                    $("#user_table_tbody").empty();
                    alert(data.queryinfo);
                }
                else {
                    //清空表格
                    $("#user_table_tbody").empty();
　　　　　　　　　　　　//動態構建表體
                    show_user_table(data.user);
                    console.log(data.user);
                }
            }
        });
    }

3.2 編寫查詢的Controller方法

因為需要根據其返回結果構建表體，所以Controller方法需要返回集合或對象

  //用戶查詢,(之前沒有添加@ResponseBody，導致其老是返回queryUser.jsp，從而找不到頁面而報錯)
    //根據用戶ID查找
    @ResponseBody
    @RequestMapping(value = "/queryUser/{id}")
    public Map queryUser(@PathVariable String id){
        System.out.println("進入query方法");
        System.out.println(id);
        Map<String, Object> map = new HashMap<>();
        if (id == null || "".equals(id)){
            map.put("queryinfo","請輸入用戶ID");
        }else{
            User user =  userService.getUserById(Integer.valueOf(id));
            if (user != null){
                map.put("user",user);
            }else {
                map.put("queryinfo","該用戶不存在");
            }
        }
        return map;

    }

3.3  根據返回的對象動態構建表體

此處editBtn.attr("user-edit-id",result.id); 和 delBtn.attr("user-del-id",result.id); 為編輯和刪除按鈕添加自定義屬性，以便后面對其單個編輯和刪除操作

//在table里呈現單條查詢的結果
    function show_user_table(result) {
        var useridTD = $("<td></td>").append(result.id);
        var usernameTD = $("<td></td>").append(result.userName);
        var userphoneTD = $("<td></td>").append(result.userPhone);
        var userpwdTD = $("<td></td>").append(result.userPwd);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm user-edit-btn").append("編輯");
            editBtn.attr("user-edit-id",result.id);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm user-del-btn").append("刪除");
            delBtn.attr("user-del-id",result.id);
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(useridTD)
            .append(usernameTD)
            .append(userphoneTD)
            .append(userpwdTD)
            .append(operate)
            .appendTo("#user_table_tbody");
    }

四、完成顯示所有用戶按鈕功能

顯示所有用戶和單個用戶思路大概相同

4.1 編寫查詢所有用戶Controller方法

   //查詢所有用戶
    @ResponseBody
    @RequestMapping(value = "/queryAll",method = RequestMethod.POST)
    public List<User> queryAllUser(){
        System.out.println("進入queryAll方法");
        List<User> userList = userService.getAllUser();
        return userList;
    }

4.2  編寫查詢所有用戶的JS方法

 //查詢並顯示所有用戶
        $("#allUserQueryBtn").click(function () {
            //首先清空表格殘留數據
            $("#user_table_tbody").empty();
            queryAllUsers();
        })
    //查詢所有用戶
    function queryAllUsers() {
        $.ajax({
            type:"POST",
            url:"queryAll",
            dataType:"json",
            success:function (data) {
                console.log(data);
                //遍歷data循環構建表體
                $.each(data,function (index,item) {
                    show_user_table(item);
                })
            }
        })
    }

此處重點是使用

$.each(data,function (index,item) {
                    show_user_table(item);
                })

遍歷循環動態構建表體

五、完成新增用戶功能

5.1  此處使用Bootstrap模態框功能

<%--新增用戶的模態框--%>
<div class="modal" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 35%">
        <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>
                <h5 class="modal-title" id="myModalLabel">新增</h5>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userAddModalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userName</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userName" placeholder="userName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPhone</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userPhone" placeholder="userPhone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPwd</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" name="userPwd" placeholder="userPwd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" id="userAddModalSaveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

5.2 新增用戶JS代碼：

 //點擊新增彈出模態框
        $("#userAddBtn").click(function () {
            $("#userAddModal").modal('show');
        })
        //為保存按鈕綁定click
        $("#userAddModalSaveBtn").click(function () {
            var formData = $("#userAddModalForm").serialize();
            doAdd(formData);
        })

    function doAdd(formData) {
        $.ajax({
            type:"POST",
            url:"insertUser",
            data: formData,
            success:function (result) {
                //關閉模態框
                $("#userAddModal").modal("hide");
                alert(result.addinfo);
            }
        });
    }

通過$("#userAddModalForm").serialize()將表單序列化后傳到后台，其形式為查詢字符串形式

5.3   新增用戶后台Controller

    //新增用戶
    @ResponseBody
    @RequestMapping(value = "/insertUser")
    public Map checkJosn(User user){
        System.out.println(user);
        Boolean result =  userService.insertUser(user);
        Map<String, Object> map = new HashMap<>();
        if (result){
            map.put("addinfo","添加成功");
            return map;
        }else {
            map.put("addinfo","添加失敗");
            return map;
        }
    }

5.4  新增用戶界面

六、完成對單個用戶的刪除功能

6.1  根據id刪除單個用戶前台JS

    //刪除單個用戶
    function doDelete(id) {
        $.ajax({
            type:"DELETE",
            url:"delUser/"+id,
            success:function (data) {
              console.log(data);
            }
        })
    }

//為刪除按鈕綁定事件
        $(document).on("click",".user-del-btn",function () {
            if (confirm("確定刪除該用戶")) {
                var id = $(this).attr("user-del-id");
                console.log(id);
                doDelete(id);
                //下面兩行是刪除用戶后刷新表體數據
                $("#user_table_tbody").empty();
                queryAllUsers();
            }
        })

由於JS在綁定click事件時，刪除按鈕還沒有創建，所有不能用 $(".user-del-btn").click(function () {}）方法，只能用on()方法，對應動態創建的按鈕需要綁定事件的，一般用on()方法。

 var id = $(this).attr("user-del-id");  是取出當前用戶的自定義屬性user-del-id作為其ID，因為前面在展現用戶時，使用了delBtn.attr("user-del-id",result.id); 為該刪除按鈕綁定里自定義屬性

6.2  后台單個用戶刪除的Controller方法

    //根據ID刪除用戶
    @ResponseBody
    @RequestMapping(value = "/delUser/{id}",method = RequestMethod.DELETE)
    public boolean delUserById(@PathVariable String id){
      return   userService.delUserByID(id);
    }

后台使用Restful風格接受用戶id與DELETE方法

七、完成主界面上“編輯”按鈕修改用戶功能

 在點擊編輯時，使用了Bootstrap的模態框，首先需要將當前用戶查詢出來賦值給模態框，然后再執行修改

7.1  前台JS

    //為編輯用戶按鈕綁定事件
        $(document).on("click",".user-edit-btn",function () {
            var id = $(this).attr("user-edit-id");
            console.log(id);
            doQueryByID(id);
            //顯示修改模態框
            $("#userModifyModal").modal('show');
        })
    //為修改的確定按鈕綁定事件，由於作用與此處的修改按鈕是動態創建的，所以不能使用這方法
/*    $("#userModifyModalSaveBtn").click(function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })*/
    $(document).on("click","#userModifyModalSaveBtn",function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })
    //根據ID查詢到user並賦值給模態框
    function doQueryByID(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user != null){
                    //賦值
                    $("#userModifyModal_id").val(data.user.id);
                    $("#userModifyModal_userName").val(data.user.userName);
                    $("#userModifyModal_userPhone").val(data.user.userPhone);
                    $("#userModifyModal_userPwd").val(data.user.userPwd);
                }
            }
        });
    }
    //修改用戶
    function doUpdate(formData) {
        $.ajax({
            type:"POST",
            url:"updateUser",
            data: formData,
            success:function (result) {
                //關閉模態框
                $("#userModifyModal").modal("hide");
                if (result){
                    //下面兩行是刪除用戶后刷新表體數據
                    $("#user_table_tbody").empty();
                      queryAllUsers();
                }else {
                    alert("修改失敗");
                }
            }
        });
    }

7.2 后台更新用戶方法

    //更新用戶
    @ResponseBody
    @RequestMapping(value = "/updateUser")
    public boolean updateUser(User user){
        System.out.println(user);
        Boolean result =  userService.updateUser(user);
        return result;
    }

此處如果將doUpdate()方法里的ajax請求方法改為PUT，后台同樣添加了method = RequestMethod.PUT，此處雖然配置了hiddenHttpMethodFilter，但是調試的時候發現前台發送的值正常，后台user一直是null，只有將ajax請求方法改為POST，后台不加method才正常。此處如果想使用Restful風格的PUT時使用，需要注意以下幾個方面：

/**發送PUT和DELECT請求時需要執行
 * 1、在Web.xml里配置HiddenHttpMethodFilter
 * 2、需要發送POST請求
 * 3、需要在發送POST請求時攜帶一個name="_method"的隱藏域，值為DELECT或PUT
 * **/
表單格式比如：

  <form action="checkRestfulPut/3333" method="post">
    <input type="hidden" name="_method" value="PUT"/>
    <input type="submit" name="test" value="PUT方法">測試Restful的PUT即更新操作</input>
  </form>

 

7.3  更新用戶界面

將ID設置為readyonly，防止用戶修改而報錯

<input type="text" class="form-control" id="userModifyModal_id" name="id" readonly/>

至此，該Demo的用戶登錄和增刪改查的基本功能都實現了，在描述時，可能只顧着堆代碼了，文字描述很欠缺，見諒。另外頁面上根據用戶名查詢和批量刪除按鈕功能尚未實現。最后附上主界面listuser.jsp完整代碼

listuser.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <title>userList</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/statics/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/statics/js/jquery-3.3.1.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
    <script src="${pageContext.servletContext.contextPath}/statics/js/bootstrap.js"></script>
</head>

<script type="text/javascript">
    $(document).ready(function () {
        bindEvent();
        //跳轉到該頁面時就發送ajax請求顯示所有用戶
        queryAllUsers();
        // bindBtnDel();
    });

    function bindEvent() {
        //點擊新增彈出模態框
        $("#userAddBtn").click(function () {
            $("#userAddModal").modal('show');
        })
        //為保存按鈕綁定click
        $("#userAddModalSaveBtn").click(function () {
            var formData = $("#userAddModalForm").serialize();
            doAdd(formData);
        })
        // 查詢單個用戶
        $("#userQueryBtn").click(function () {
            var id = $("#userID").val();
            doQuery(id);
        })
        //查詢並顯示所有用戶
        $("#allUserQueryBtn").click(function () {
            //首先清空表格殘留數據
            $("#user_table_tbody").empty();
            queryAllUsers();
        })

    }

    function doAdd(formData) {
        $.ajax({
            type:"POST",
            url:"insertUser",
            data: formData,
            success:function (result) {
                //關閉模態框
                $("#userAddModal").modal("hide");
                alert(result.addinfo);
            }
        });
    }
    // 查詢單個用戶調用的方法
    function doQuery(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user == null){
                    //當查詢的用戶不存在時，清空表格上面上次查詢的結果
                    $("#user_table_tbody").empty();
                    alert(data.queryinfo);
                }
                else {
                    //清空表格
                    $("#user_table_tbody").empty();
                    show_user_table(data.user);
                    console.log(data.user);
                }
            }
        });
    }
    //查詢所有用戶
    function queryAllUsers() {
        $.ajax({
            type:"POST",
            url:"queryAll",
            dataType:"json",
            success:function (data) {
                console.log(data);
                //遍歷data循環構建表體
                $.each(data,function (index,item) {
                    show_user_table(item);
                })
            }
        })
    }

    //在table里呈現單條查詢的結果
    function show_user_table(result) {
        var useridTD = $("<td></td>").append(result.id);
        var usernameTD = $("<td></td>").append(result.userName);
        var userphoneTD = $("<td></td>").append(result.userPhone);
        var userpwdTD = $("<td></td>").append(result.userPwd);
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm user-edit-btn").append("編輯");
            editBtn.attr("user-edit-id",result.id);
        var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm user-del-btn").append("刪除");
            delBtn.attr("user-del-id",result.id);
        var operate = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);
        $("<tr></tr>").append(useridTD)
            .append(usernameTD)
            .append(userphoneTD)
            .append(userpwdTD)
            .append(operate)
            .appendTo("#user_table_tbody");
    }
    //刪除單個用戶
    function doDelete(id) {
        $.ajax({
            type:"DELETE",
            url:"delUser/"+id,
            success:function (data) {
              console.log(data);
            }
        })
    }
    //為刪除按鈕綁定事件
        $(document).on("click",".user-del-btn",function () {
            if (confirm("確定刪除該用戶")) {
                var id = $(this).attr("user-del-id");
                console.log(id);
                doDelete(id);
                //下面兩行是刪除用戶后刷新表體數據
                $("#user_table_tbody").empty();
                queryAllUsers();
            }
        })
    //為編輯用戶按鈕綁定事件
        $(document).on("click",".user-edit-btn",function () {
            var id = $(this).attr("user-edit-id");
            console.log(id);
            doQueryByID(id);
            //顯示修改模態框
            $("#userModifyModal").modal('show');
        })
    //為修改的確定按鈕綁定事件，由於作用與此處的修改按鈕是動態創建的，所以不能使用這方法
/*    $("#userModifyModalSaveBtn").click(function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })*/
    $(document).on("click","#userModifyModalSaveBtn",function () {
        var formData = $("#userModifyModalForm").serialize();
        doUpdate(formData);
    })
    //根據ID查詢到user並賦值給模態框
    function doQueryByID(id) {
        $.ajax({
            type:"POST",
            url:"queryUser/"+id,
            dataType:"json",
            success:function (data) {
                if (data.user != null){
                    //賦值
                    $("#userModifyModal_id").val(data.user.id);
                    $("#userModifyModal_userName").val(data.user.userName);
                    $("#userModifyModal_userPhone").val(data.user.userPhone);
                    $("#userModifyModal_userPwd").val(data.user.userPwd);
                }
            }
        });
    }
    //修改用戶
    function doUpdate(formData) {
        $.ajax({
            type:"POST",
            url:"updateUser",
            data: formData,
            success:function (result) {
                //關閉模態框
                $("#userModifyModal").modal("hide");
                if (result){
                    //下面兩行是刪除用戶后刷新表體數據
                    $("#user_table_tbody").empty();
                      queryAllUsers();
                }else {
                    alert("修改失敗");
                }
            }
        });
    }

</script>

<body>

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h2>UserManager</h2>
        </div>
    </div>

    <div class="row">
        <%--添加用戶查詢表單--%>
        <div class="col-sm-offset-4">
            <form id="userQuery"  method="post">
                <input type="text"  id="userID" name="userID" placeholder="用戶ID"/>&nbsp;&nbsp;
                <input name="userName"  id="userName" placeholder="用戶名"/>
                <BUTTON type="button"  class="btn btn-primary btn-sm" id="userQueryBtn">查詢</BUTTON>
                <BUTTON type="button"  class="btn btn-primary btn-sm" id="allUserQueryBtn">顯示所有用戶</BUTTON>
            </form>
        </div>
        <%--添加“增加”和“批量刪除”按鈕--%>
        <div class="col-sm-4 col-sm-offset-11">
            <BUTTON type="button" class="btn btn-primary btn-sm"  data-toggle="modal" id="userAddBtn">增加</BUTTON>
            <BUTTON type="button" class="btn btn-primary btn-sm" id="userDelBtn">批量刪除</BUTTON>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table  table-hover" id="user_table">
                <thead>
                <tr>
                    <th width="20%">用戶ID</th>
                    <th width="20%">userName</th>
                    <th width="20%">userPhone</th>
                    <th width="20%">userPwd</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
                <tbody id="user_table_tbody">

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

<%--新增用戶的模態框--%>
<div class="modal" id="userAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 35%">
        <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>
                <h5 class="modal-title" id="myModalLabel">新增</h5>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userAddModalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userName</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userName" placeholder="userName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPhone</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="userPhone" placeholder="userPhone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPwd</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" name="userPwd" placeholder="userPwd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" id="userAddModalSaveBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<%--修改用戶的模態框--%>
<div class="modal" id="userModifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 35%">
        <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>
                <h5 class="modal-title">修改</h5>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userModifyModalForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用戶ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  id="userModifyModal_id" name="id" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userName</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="userModifyModal_userName" name="userName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPhone</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="userModifyModal_userPhone" name="userPhone"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">userPwd</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="userModifyModal_userPwd" name="userPwd"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" id="userModifyModalSaveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

 

 

 

參考文獻  https://www.cnblogs.com/gode/p/8194260.html