server.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
var handleData = require("./apps/handleData");
app.use(express.static(__dirname + "/public"));
app.use(express.static(__dirname + "/views"));
// 添加接口
app.post("/add", handleData.postAdd);
// 渲染的接口
app.get("/show", handleData.getShow);
// 删除的接口
app.get("/del", handleData.getDel);
app.listen(3000, function () {
console.log("server is running at http://localhost:3000");
})
handleData.js
var db = require("../modules/db");
var mongodb = require("mongodb");
module.exports.postAdd = function (req, res) {
var obj = req.body;
// console.log(obj);
if (obj.sname) {
obj.time = new Date().getTime();
db.insertOne(res, obj, "case119", function (err, result, db1) {
if (err) {
res.send({ code: 404, msg: "数据添加失败" });
} else {
res.send({ code: 200, msg: "数据添加成功" });
db1.close();
}
})
} else {
res.send({ code: 404, msg: "前端字段错误" });
}
}
module.exports.getShow = function (req, res) {
var obj = req.query;
db.find(res, obj, "case119", function (err, result, db1) {
if (err) {
res.send({ code: 404, msg: "数据渲染失败" });
} else {
res.send({ code: 200, msg: "数据渲染成功", info: result });
db1.close();
}
})
}
module.exports.getDel = function (req, res) {
var id = req.query.id;
var obj = {
_id: mongodb.ObjectId(id)
}
db.deleteOne(res, obj, "case119", function (err, result, db1) {
if (err) {
res.send({ code: 404, msg: "数据删除失败" });
} else {
res.send({ code: 200, msg: "数据删除成功" });
db1.close();
}
})
}
index.js
$(function () {
// 数据渲染
getDataShow();
})
// tab切换
$(".btns>button").click(function () {
$(this).addClass("active").siblings().removeClass("active");
getDataShow({ stype: $(this).text() });
})
// 添加
$(".add").click(function () {
var sname = $(".sname").val();
var stype = $("select").val();
var yprice = $(".yprice").val();
var xprice = $(".xprice").val();
var snum = $(".snum").val();
var isRed = $(":radio:checked").val();
if (sname && yprice && xprice && snum) {
var obj = {
sname,
stype,
yprice: (+yprice).toFixed(2),
xprice: (+xprice).toFixed(2),
snum,
isRed
}
$.post("/add", obj, function (res) {
if (res.code == 200) {
// 渲染数据
getDataShow();
// 清空数据
$(".sname").val("");
$("select").val($("select option:first").val());
$(".yprice").val("");
$(".xprice").val("");
$(".snum").val("");
$(":radio:last").prop("checked", true);
// 默认选中全部
$(".btns>button:first").addClass("active").siblings().removeClass("active");
} else {
alert(res.msg);
}
})
} else {
alert("请完善信息!");
}
})
// 获取渲染请求
function getDataShow (obj) {
// if (!obj) {
// obj = {};
// }
obj ? obj : obj = {};
obj.stype == "全部" ? obj = {} : obj;
var findObj = {
find: obj,
limit: obj.stype ? 7 : 0,
sort: { time: -1 }
}
$.get("/show", findObj, function (res) {
if (res.code == 200) {
// 渲染页面
show(res.info);
} else {
alert(res.msg);
}
})
}
// 渲染页面
function show (arr) {
var str = "";
$.each(arr, function (i, n) {
str += `
<tr>
<td class=${n.isRed == "true" ? "active" : ""}>${n.sname}</td>
<td>${n.stype}</td>
<td class="textStyle">¥${n.yprice}</td>
<td>¥${n.xprice}</td>
<td>${n.snum}</td>
<td>${n.isRed}</td>
<td>
<button type="button" onclick="del('${n._id}')">删除</button>
</td>
</tr>
`;
})
$("tbody").html(str);
// 隔行变色
$("tbody>tr:even").addClass("bgdStyle");
}
// 删除
function del (id) {
$.get("/del", { id }, function (res) {
if (res.code == 200) {
// 渲染
getDataShow();
} else {
alert(res.msg);
}
})
}