11.09上午

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);
        }
    })
}