修改
1-1.全部删除的三部分,index.js
// 全部删除
$(".delAll").click(function () {$.get("/delAll", function (res) {if (res.code == 200) {$(".showDiv").html("");console.log("全部删除成功");} else {alert(res.msg);}})
})
1-2全部删除的接口
app.get("/delAll", handleData.getDelAll);
1-3全部删除的handleData.js
module.exports.getDelAll = function (req, res) {db.drop(res, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "全部删除失败" });} else {res.send({ code: 200, msg: "全部删除成功" });db1.close();}})
}
2-1修改---index.js
渲染中的button按钮
function uptFn (id) {$.get("/uptShow", { id }, function (res) {if (res.code == 200) {var obj = res.obj[0];$(".user").val(obj.user);$(".age").val(obj.age);uptId = id;} else {alert(res.msg);}})
}
2-2修改--server.js 接口
app.get("/uptShow", handleData.getUptShow);
2-3 修改---handleData.js
module.exports.getUptShow = function (req, res) {var id = req.query.id;var obj = {find: {_id: mongodb.ObjectId(id)}}db.find(res, obj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据修改查找失败" });} else {res.send({ code: 200, msg: "数据修改查找成功", obj: result });db1.close();}})
}
server.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));app.use(express.static(__dirname + "/public"));
app.use(express.static(__dirname + "/views"));var handleData = require("./apps/handleData");app.post("/add", handleData.postAdd);app.get("/show", handleData.getShow);app.get("/uptShow", handleData.getUptShow);app.post("/upt", handleData.postUpt);app.get("/delAll", handleData.getDelAll);app.listen(3000, function () {console.log("server is running at http://localhost:3000");
})
index.js
$(function () {getDataShow();
})// 添加
$(".add").click(function () {var user = $(".user").val();var age = $(".age").val();if (user && age) {$.post("/add", { user, age }, function (res) {if (res.code == 200) {console.log(res);// 渲染数据getDataShow();$(".user").val("");$(".age").val("");} else {alert(res.msg);}})}
})// 获取渲染数据
function getDataShow () {$.get("/show", function (res) {if (res.code == 200) {show(res.info);} else {alert(res.msg);}})
}// 渲染页面
function show (arr) {var str = "";$.each(arr, function (i, n) {str += `姓名:${n.user}年龄:${n.age}<button type="button" onclick="uptFn('${n._id}')">修改</button>`;})$(".showDiv").html(str);
}var uptId = "";// 修改
function uptFn (id) {$.get("/uptShow", { id }, function (res) {if (res.code == 200) {var obj = res.obj[0];$(".user").val(obj.user);$(".age").val(obj.age);uptId = id;} else {alert(res.msg);}})
}// 确认修改
$(".upt").click(function () {var user = $(".user").val();var age = $(".age").val();if (user && age) {var obj = {id: uptId,uptObj: { user, age }}$.post("/upt", obj, function (res) {if (res.code == 200) {console.log(res);// 渲染数据getDataShow();$(".user").val("");$(".age").val("");} else {alert(res.msg);}})}
})// 全部删除
$(".delAll").click(function () {$.get("/delAll", function (res) {if (res.code == 200) {$(".showDiv").html("");console.log("全部删除成功");} else {alert(res.msg);}})
})
handle.js
var db = require("../modules/db");
var mongodb = require("mongodb");module.exports.postAdd = function (req, res) {var obj = req.body;db.insertOne(res, obj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据添加失败" });} else {res.send({ code: 200, msg: "数据添加成功" });db1.close();}})
}module.exports.getShow = function (req, res) {db.find(res, {}, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据渲染失败" });} else {res.send({ code: 200, msg: "数据渲染成功", info: result });db1.close();}})
}module.exports.getUptShow = function (req, res) {var id = req.query.id;var obj = {find: {_id: mongodb.ObjectId(id)}}db.find(res, obj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据修改查找失败" });} else {res.send({ code: 200, msg: "数据修改查找成功", obj: result });db1.close();}})
}module.exports.postUpt = function (req, res) {var obj = req.body;var whereObj = {_id: mongodb.ObjectId(obj.id)}var uptObj = {$set: obj.uptObj}db.updateOne(res, whereObj, uptObj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据修改失败" });} else {res.send({ code: 200, msg: "数据修改成功" });db1.close();}})
}module.exports.getDelAll = function (req, res) {db.drop(res, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "全部删除失败" });} else {res.send({ code: 200, msg: "全部删除成功" });db1.close();}})
}
html.页面
<div>姓名:<input type="text" class="user">年龄:<input type="text" class="age"><div><button type="button" class="add">添加</button><button type="button" class="upt">确认修改</button><button type="button" class="delAll">全部删除</button></div><div class="showDiv"><!-- 姓名:年龄: --></div></div><script src="index.js"></script>
修改
1-1.全部删除的三部分,index.js
// 全部删除
$(".delAll").click(function () {$.get("/delAll", function (res) {if (res.code == 200) {$(".showDiv").html("");console.log("全部删除成功");} else {alert(res.msg);}})
})
1-2全部删除的接口
app.get("/delAll", handleData.getDelAll);
1-3全部删除的handleData.js
module.exports.getDelAll = function (req, res) {db.drop(res, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "全部删除失败" });} else {res.send({ code: 200, msg: "全部删除成功" });db1.close();}})
}
2-1修改---index.js
渲染中的button按钮
function uptFn (id) {$.get("/uptShow", { id }, function (res) {if (res.code == 200) {var obj = res.obj[0];$(".user").val(obj.user);$(".age").val(obj.age);uptId = id;} else {alert(res.msg);}})
}
2-2修改--server.js 接口
app.get("/uptShow", handleData.getUptShow);
2-3 修改---handleData.js
module.exports.getUptShow = function (req, res) {var id = req.query.id;var obj = {find: {_id: mongodb.ObjectId(id)}}db.find(res, obj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据修改查找失败" });} else {res.send({ code: 200, msg: "数据修改查找成功", obj: result });db1.close();}})
}
server.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));app.use(express.static(__dirname + "/public"));
app.use(express.static(__dirname + "/views"));var handleData = require("./apps/handleData");app.post("/add", handleData.postAdd);app.get("/show", handleData.getShow);app.get("/uptShow", handleData.getUptShow);app.post("/upt", handleData.postUpt);app.get("/delAll", handleData.getDelAll);app.listen(3000, function () {console.log("server is running at http://localhost:3000");
})
index.js
$(function () {getDataShow();
})// 添加
$(".add").click(function () {var user = $(".user").val();var age = $(".age").val();if (user && age) {$.post("/add", { user, age }, function (res) {if (res.code == 200) {console.log(res);// 渲染数据getDataShow();$(".user").val("");$(".age").val("");} else {alert(res.msg);}})}
})// 获取渲染数据
function getDataShow () {$.get("/show", function (res) {if (res.code == 200) {show(res.info);} else {alert(res.msg);}})
}// 渲染页面
function show (arr) {var str = "";$.each(arr, function (i, n) {str += `姓名:${n.user}年龄:${n.age}<button type="button" onclick="uptFn('${n._id}')">修改</button>`;})$(".showDiv").html(str);
}var uptId = "";// 修改
function uptFn (id) {$.get("/uptShow", { id }, function (res) {if (res.code == 200) {var obj = res.obj[0];$(".user").val(obj.user);$(".age").val(obj.age);uptId = id;} else {alert(res.msg);}})
}// 确认修改
$(".upt").click(function () {var user = $(".user").val();var age = $(".age").val();if (user && age) {var obj = {id: uptId,uptObj: { user, age }}$.post("/upt", obj, function (res) {if (res.code == 200) {console.log(res);// 渲染数据getDataShow();$(".user").val("");$(".age").val("");} else {alert(res.msg);}})}
})// 全部删除
$(".delAll").click(function () {$.get("/delAll", function (res) {if (res.code == 200) {$(".showDiv").html("");console.log("全部删除成功");} else {alert(res.msg);}})
})
handle.js
var db = require("../modules/db");
var mongodb = require("mongodb");module.exports.postAdd = function (req, res) {var obj = req.body;db.insertOne(res, obj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据添加失败" });} else {res.send({ code: 200, msg: "数据添加成功" });db1.close();}})
}module.exports.getShow = function (req, res) {db.find(res, {}, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据渲染失败" });} else {res.send({ code: 200, msg: "数据渲染成功", info: result });db1.close();}})
}module.exports.getUptShow = function (req, res) {var id = req.query.id;var obj = {find: {_id: mongodb.ObjectId(id)}}db.find(res, obj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据修改查找失败" });} else {res.send({ code: 200, msg: "数据修改查找成功", obj: result });db1.close();}})
}module.exports.postUpt = function (req, res) {var obj = req.body;var whereObj = {_id: mongodb.ObjectId(obj.id)}var uptObj = {$set: obj.uptObj}db.updateOne(res, whereObj, uptObj, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "数据修改失败" });} else {res.send({ code: 200, msg: "数据修改成功" });db1.close();}})
}module.exports.getDelAll = function (req, res) {db.drop(res, "case1110", function (err, result, db1) {if (err) {res.send({ code: 404, msg: "全部删除失败" });} else {res.send({ code: 200, msg: "全部删除成功" });db1.close();}})
}
html.页面
<div>姓名:<input type="text" class="user">年龄:<input type="text" class="age"><div><button type="button" class="add">添加</button><button type="button" class="upt">确认修改</button><button type="button" class="delAll">全部删除</button></div><div class="showDiv"><!-- 姓名:年龄: --></div></div><script src="index.js"></script>