nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

//当后台返回数据是写入数据成功，让当前的tbody中的内容变空，
$("tbody").html("");
//在通过ajax读取后台在数据库中的内容，在渲染到tbody中
add(); //封装的函数
}

},error:function (msg) {//失败返回数据
console.log(msg)
}
})
});

//在这里因为后面都需要用到，所以封装到函数里，后面用的话直接调用就可以了

//包装函数
function add(){
    $.ajax({
        url:"/api/read",
        success:function(ret){
            if(ret.code==0){
                var str="";
                var data=ret.data;
                for(var i in data){
                    str+=`<tr>
                                      <td>${data[i].id}</td>
                                      <td>${data[i].name}</td>
                                      <td>${data[i].age}</td>
                                      <td>${data[i].tel}</td>
                                      <td>
                                         <button v="${data[i]._id}" type="button" class="del btn btn-warning">删除</button>
                                         <button type="button" class="xg btn btn-danger" data-toggle="modal" data-target="#myModal">修改</button>
                                      </td>
                                     </tr>`
                }
                $("tbody").html(str);
                //当渲染后（局部更新后）让当前的学号，姓名，年龄，电话框都为空
                $("#xh").val("");
                $("#xm").val("");
                $("#nl").val("");
                $("#tel").val("");
            }
        },error:function (msg) {
            console.log(msg)
        }
    })
}

## 17. 全部删除   users.js

//全部删除数据
router.get("/delAll",function (req, res, next) {
  mm.remove({},function (err) {
    if(err){
      res.send({
        code:3,
        message:"全部删除失败"
      });
    }else{
      res.send({
        code:0,
        message:"全部删除成功"
      })
    }
  })
});

## 18. 全部删除   index.ejs

//全部删除
$(".delAll").click(function () {
    $.ajax({
        url:"/api/delAll",
        success:function (ret) {
            console.log(ret);
            if(ret.code==0){
                add();
            }
        },error:function (msg) {
            console.log(msg);
        }
    })
});

## 19. 单行删除   users.js

//单行删除
router.get("/del",function (req, res, next) {
  //获取前台请求的数据
  var data=req.query;
  mm.remove(data,function (err) {
    if(err){
      res.send({
        code:4,
        message:"单行删除失败"
      });
    }else{
      res.send({
        code:0,
        message:"单行删除成功"
      })
    }
  })
});

## 20. 单行删除   index.ejs

//单行删除,需要用到事件委托
$("tbody").on("click",".del",function () {
    // alert(111)
    //获取_id的值，来确定当前行的位置（如：id,name,age,del都可）
    var a=$(this).attr("v");
    // alert(a);//检测当前弹出的_id是否不同
    $.ajax({
        url:"/api/del",
        data:{
            _id:a
        },
        success:function (ret) {
            console.log(ret);
            if(ret.code==0){
                add();
            }
        },error:function (msg) {
            console.log(msg);
        }

    })
});

## 21. 修改数据  users.js

//修改数据库内容
router.get("/xg",function (req, res, next) {
  //获取前台请求数据
  var data=req.query;
  console.log(data);
  //获取前台的_id
  console.log(data.f);
  //获取前台的数据请求
  console.log(data.da);
  //修改数据
  mm.update(data.f,data.da,function (err) {
    if(err) {
      res.send({
        code: 5,
        message: "修改数据失败"
      });
    }else{
      res.send({
        code:0,
        message:"修改数据成功"
      });

    }

  })

});

## 22. 修改数据  index.ejs

// 当点击修改时，获取他的兄弟元素删除的_id
$(".xg").click(function () {
    var a=$(this).siblings().attr("v");
    // alert(a)//检测他兄弟删除的_id

    $(".bc").attr("v",a);//将他兄弟删除的属性也添加成了自己的属性
});

// 当点击弹框保存时，修改数据,有点问题，一次只能修改一次，下次要刷新
$(".bc").click(function () {
    //attr一个参数是获取，两个参数是设置
    var _id=$(this).attr("v");
    alert(_id)
    //获取弹框里的学号，姓名，年龄，性别的内容
    //注意：这里要用class名，id名只能用一次
    var xh=$(".xh").val();
    var xm=$(".xm").val();
    var nl=$(".nl").val();
    var tel=$(".tel").val();
    // alert(xh); alert(xm); alert(nl); alert(tel);
    //ajax
    $.ajax({
        url:"/api/xg",
        data:{
            f:{
                _id:_id
            },
            da:{
                id:xh,
                name:xm,
                age:nl,
                tel:tel
            }
        },
        success:function (ret) {
            console.log(ret);
            if(ret.code==0){
                $("tbody").html("");
                add();
            }
        },error:function (msg) {
            console.log(msg)
        }

    })

});

## 23. 到这里项目就结束了，说明一下：我也是一个刚学的小白，这个修改数据里有点小问题，等你自己去发现哟！ 

             有哪位大佬解决了这个bug，请留言告诉我哟，在此不胜感激！！

 

nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

标签：container   body   ppm   mode   异步   hidden   服务   src   对象