拉黑案例c12-01

1.封装时间

 添加的数据处理中handleData.js中写了时间time

//添加数据处理 
module.exports.postAdd = function (req, res) {
    var obj = req.body;
    if (obj.user && obj.age) {
        obj.time = new Date().getTime();
        db.insertOne(res, obj, "a117", function (err, result, db) {...}
           
//渲染中str=""中写的
<td>${getTime(n.time)}</td>


// 封装时间的函数
function getTime (d) {
    var d = new Date(d);
    return d.getFullYear() + "年" +
        numFn(d.getMonth() + 1) + "月" +
        numFn(d.getDate()) + "日 " +
        numFn(d.getHours()) + ":" +
        numFn(d.getMinutes()) + ":" +
        numFn(d.getSeconds())
}

function numFn (num) {
    return num < 10 ? "0" + num : num;
}

2.tab切换

$(".topBtn>button").click(function () {
    let index = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $(".bottomDiv>div").eq(index).addClass("show").siblings().removeClass("show");
})

3.黑名单的数据请求

// 获取数据请求
function getBlockShow () {
    $.get("/listBlock", function (data) {
        console.log("后端传过来的渲染黑名单数据:", data);
        // 渲染数据
        blockShow(data.info);
    })
}


// 拉黑好友的接口
app.get("/block", handleData.getBlock);


//拉黑好友数据处理
module.exports.getBlock = function (req, res) {
    if (req.query.id) {
        var id = mongodb.ObjectId(req.query.id);
        var obj = {
            _id: id
        }
        var findObj = {};
        db.find(res, { find: obj }, "a117", function (err, result, db1) {
            if (err) {
                console.log("查找失败");
                res.send({ code: 404, msg: "拉黑查找失败失败" });
            } else {
                console.log("查找成功");
                findObj = result[0];
                db.deleteOne(res, obj, "a117", function (err, result, db2) {
                    if (err) {
                        console.log("del接口删除数据失败", err);
                        res.send({ code: 404, msg: "del接口删除失败" });
                    } else {
                        console.log("拉黑删除数据成功", result);
                        delete findObj._id;
                        db.insertOne(res, findObj, "b117", function (err, result, db3) {
                            if (err) {
                                console.log("getBlock接口添加数据失败", err);
                                res.send({ code: 404, msg: "getBlock接口添加失败" });
                            } else {
                                console.log("getBlock接口添加数据成功", result);
                                res.send({ code: 200, msg: "添加成功" });
                                // 关闭数据库
                                db1.close();
                                db2.close();
                                db3.close();
                            }
                        })
                    }
                })
            }
        })

    } else {
        console.log("前端字段错误");
        res.send({ code: 404, msg: "前端Block接口字段错误" });
    }
}

4黑名单渲染

//黑名单渲染
function blockShow (arr) {
    var str = "";
    $.each(arr, function (i, n) {
        str += `
            <div>
                <div>
                    <div>${i + 1}</div>
                    <div>${n.user}</div>
                    <div>${n.age}</div>
                    <div>${n.sex == "0" ? "男" : "女"}</div>
                    <div>${n.msg}</div>
                </div>
                <button type="button" onclick="delFn1('${n._id}')">删除</button>
            </div>
        `;
    })
    $(".blackList").html(str);
}



// 黑名单渲染接口
app.get("/listBlock", handleData.getBlockList);


// 黑名单后台处理数据
module.exports.getBlockList = function (req, res) {
    db.find(res, {}, "b117", function (err, result, db) {
        if (err) {
            console.log("listBlock接口查找数据失败", err);
            res.send({ code: 404, msg: "listBlock接口渲染失败" });
        } else {
            console.log("listBlock接口查找数据成功", result);
            res.send({ code: 200, msg: "渲染成功", info: result });
            // 关闭数据库
            db.close();
        }
    })
}

 index.js

$(function () {
    getListShow();
})

// tab切换
$(".topBtn>button").click(function () {
    var index = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $(".bottomDiv>div").eq(index).addClass("show").siblings().removeClass("show");
})

// 添加数据
$(".add").click(function () {
    // 获取到数据
    var user = $("#user").val();
    var age = $("#age").val();
    var sex = $(":radio:checked").val();
    var hobby = $("select").val();


    // 非空判断
    if (user && age) {
        var obj = {
            user,
            age,
            sex,
            hobby
        }
        $.post("/add", obj, function (res) {
            console.log(res);
            if (res.code == 200) {
                // 数据渲染
                getListShow()
            } else {
                alert(res.msg);
            }
            // 清空数据
            $("#user").val("");
            $("#age").val("");
            $(":radio:first").prop("checked", true);
            // $("select option:first").prop("selected", true);
            $("select").val($("select option:first").val());
        })
    }


})

// 好友列表获取数据
function getListShow () {
    $.get("/list", function (res) {
        if (res.code == 200) {
            // 数据处理
            var arr1 = res.info.filter(function (item) {
                return !item.isBlock;
            })
            var arr2 = res.info.filter(function (item) {
                return item.isBlock;
            })
            // 好友列表渲染数据
            listShow(arr1);
            // 黑名单渲染数据
            blockShow(arr2);
        } else {
            alert(res.msg);
        }
    })
}

// 好友列表渲染
function listShow (arr) {
    if (arr.length) {
        $("table").show();
        $(".noData").hide();
        var str = "";
        $.each(arr, function (i, n) {
            if (!n.isBlock) {
                str += `
                <tr>
                    <td>${i + 1}</td>
                    <td>${n.user}</td>
                    <td>${n.age}</td>
                    <td>${n.sex == "0" ? "男" : "女"}</td>
                    <td>${n.hobby}</td>
                    <td>${getTime(n.time)}</td>
                    <td>
                        <button type="button" onclick="block('${n._id}')">拉黑</button>
                        <button type="button" onclick="del('${n._id}')">删除</button>
                    </td>
                </tr>
            `;
            }
        })
        $("tbody").html(str);
    } else {
        $("table").hide();
        $(".noData").show();
    }
}

// 好友列表删除
// 黑名单列表删除
function del (id) {
    $.get("/del", { id }, function (res) {
        if (res.code == 200) {
            // 渲染好友列表数据
            // 渲染黑名单数据
            getListShow();
        } else {
            alert(res.msg);
        }
    })
}

// 拉黑好友
function block (id) {
    $.get("/block", { id }, function (res) {
        if (res.code == 200) {
            // 渲染好友列表数据
            // 渲染黑名单数据
            getListShow();
        } else {
            alert(res.msg);
        }
    })
}

// 黑名单列表渲染
function blockShow (arr) {
    var str = "";
    $.each(arr, function (i, n) {
        if (n.isBlock) {
            str += `
                <div>
                    <div>
                        <div>${i + 1}</div>
                        <div>${n.user}</div>
                        <div>${n.age}</div>
                        <div>${n.sex == "0" ? "男" : "女"}</div>
                        <div>${n.hobby}</div>
                    </div>
                    <button type="button" onclick="del('${n._id}')">删除</button>
                </div>
            `;
        }
    })
    $(".blackList").html(str);
}


// 封装时间函数
function getTime (time) {
    var d = new Date(time);
    return d.getFullYear() + "年" +
        numFn(d.getMonth() + 1) + "月" +
        numFn(d.getDate()) + "日 " +
        numFn(d.getHours()) + ":" +
        numFn(d.getMinutes()) + ":" +
        numFn(d.getSeconds())
}

// 时间补零
function numFn (num) {
    return num < 10 ? "0" + num : num;
}

handleData.js

var db = require("../modules/db");
var mongodb = require("mongodb");

module.exports.getList = function (req, res) {
    db.find(res, {}, "case118", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "查找数据失败" });
        } else {
            res.send({ code: 200, msg: "查找数据成功", info: result });
            db1.close();
        }
    })
}

module.exports.postAdd = function (req, res) {
    var obj = req.body;
    if (obj.user && obj.age) {
        obj.time = new Date().getTime();
        db.insertOne(res, obj, "case118", 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.getDel = function (req, res) {
    var id = req.query.id;
    var obj = {
        _id: mongodb.ObjectId(id)
    }
    db.deleteOne(res, obj, "case118", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "好友列表删除失败" });
        } else {
            res.send({ code: 200, msg: "好友列表删除成功" });
            db1.close();
        }
    })
}

module.exports.getBlock = function (req, res) {
    var id = req.query.id;
    var whereObj = {
        _id: mongodb.ObjectId(id)
    }
    var updateObj = {
        $set: { isBlock: true }
    }
    db.updateOne(res, whereObj, updateObj, "case118", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "拉黑修改失败" });
        } else {
            res.send({ code: 200, msg: "拉黑修改成功" });
            db1.close();
        }
    })
}

server.js

// 引入模块
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var handleData = require("./apps/handleData");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 静态资源
app.use(express.static(__dirname + "/public"));

// 列表渲染的接口
app.get("/list", handleData.getList);

// 添加数据的接口
app.post("/add", handleData.postAdd);

// 删除好友列表的接口
app.get("/del", handleData.getDel);

// 拉黑好友的接口
app.get("/block", handleData.getBlock);

app.listen(3000, function () {
    console.log("server is running at http://localhost:3000");
})