动态路由（后台）：

注： url后面+“:” 动态绑定id ; findOne查询单个数据

拟态框添加（post）：

      $("#modal-id").on("click",".btn-primary",function(){
          var title =$(this).closest(".modal-content").find("#title").val();
          var content=$("#content").val();
          var top=$("#top").val()==="on";
          $.ajax({
              url:"http://localhost:3000/content",
              type:"POST",
              data:{title,content,top},
              success:function(res){
             if(res.status===200){
          console.log("添加成功");
          $("#modal-id").modal("hide");
          load();
         }else{
             alert(res.msg);           //  错误信息
         }
        }
          })

      })

拟态框需要引用文件

    <script src="./js/bootstrap-table-export.min.js"></script>

html部分：

    
 <!-- 添加 模态框 bs3-modal -->
    <!-- <a class="btn btn-primary" data-toggle="modal" href='#modal-id'>Trigger modal</a> -->
    <div class="modal fade" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-center">Modal title</h4>
                </div>
                <div class="modal-body">

                    <form action="#" method="POST" class="form-horizontal" role="form">
                        <input type="hidden" id="_id" name="_id">
                        
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" name="title" class="form-control" id="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="content" class="col-sm-2 control-label">内容</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="content" id="content" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="top" class="col-sm-2 control-label">置顶</label>
                            <div class="col-sm-10">
                                <input type="checkbox" id="top" style="width: 20px;height: 20px;">
                            </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">确定</button>
                </div>
            </div>
        </div>
    </div>

效果：

添加验证（升级版添加）： 引用文件：

        $("#modal-id form").validate({
            submitHandler:function(){
       // ===============================添加
         var id =$("#_id").val();
         var title =$("#title").val();
          var content=$("#content").val();
          var top=$("#top").prop("checked");
          //=============================获取4个属性的值
          if(id){
          //判断id是不存在  存在就是修改，不存在就是添加
          //=============================修改
            $.ajax({
              url:`http://localhost:3000/content/${id}`,
              type:"PUT",
              data:{title,content,top},
              success:function(res){
             if(res.status===200){
          console.log("修改成功");
          $("#modal-id").modal("hide");
          load();
         }else{
             alert(res.msg);           //  错误信息
         }
        }
          })
          }else{
          //==========================添加
            $.ajax({
              url:"http://localhost:3000/content",
              type:"POST",
              data:{title,content,top},
              success:function(res){
             if(res.status===200){
          console.log("添加成功");
          $("#modal-id").modal("hide");
          load();
         }else{
             alert(res.msg);           //  错误信息
         }
        }
                 })
            }
            },
    rules:{
        title:{ 
            required:true,     //必填
            minlength:6,       //最小
            maxlength:12       //最大
        },
        content:{
            required:true,     //必填
            minlength:10,       
            maxlength:50    
        }
             },
            messages:{
         //==============================中文注解
               title:{
                   required:"请输入标题",
                   minlength:"标题最少6个字符",
                   maxlength:"标题最多12个字符"
               },
               content:{
                   required:"请输入正文",
                   minlength:"标题最少10个字符",
                   maxlength:"标题最多50个字符"
               }
            }
        })


    $("#modal-id").on("click",".btn-primary",function(){
        $(this).closest(".modal-content").find("form").submit();
    })

效果：

修改显示（get）： 分三步：静态、动态、显示：

      
      //动态
      var id=$(this).parent().attr("data-id");
      

      $.ajax({
          url:`http://localhost:3000/content/${id}`,
          type:"GET",
          success:function(res){
            if(res.status===200){
                const data=res.data;

                //静态
                $(".modal-title").html("修改");
                $("#_id").val(id);
                $("#title").val(data.title);
                $("#content").val(data.content);
                $("#top").prop("checked",data.top);

                //显示
               $("#modal-id").modal("show")
            }
            console.log(res);
          }
      })
    })

注：数据需要先调用数据，再修改

修改内容（put）：

              url:`http://localhost:3000/content/${id}`,
              type:"PUT",
              data:{title,content,top},
              success:function(res){
             if(res.status===200){
          console.log("添加成功");
          $("#modal-id").modal("hide");
          load();
         }else{
             alert(res.msg);           //  错误信息
         }
        }
          })

优化（刷新清空数据）：

      $("#modal-id").on("hidden.bs.modal",function(){
          // 表单清空
          $("#_id").val("");
         $("#title").val("");
         $("#content").val("");
         $("#top").prop("checked",false);
      })