[JavaScript知识库]两个页面的案例

1-1复选框写法

<td>${getHobby(n.hobby)}</td>

1-2

// 复选框数据处理
function getHobby (hobby) {
    var arr = ["敲代码", "睡觉", "写bug", "吹牛逼"];
    var newArr = [];
    $.each(hobby, function (i, n) {
        newArr.push(arr[n])
    });
    return newArr.join("|");
}

1-3

 var hobby = getHobby();

1-4

// 获取复选框值
function getHobby () {
    var arr = [];
    $(":checkbox:checked").each(function (i, n) {
        arr.push(n.value);
    })
    return arr;
}

// 设置复选框为空
function setClearHobby () {
    $(":checkbox").each(function (i, n) {
        $(n).prop("checked", false);
    })
}

entry.js

$(".add").click(function () {
    var user = $(".user").val();
    var age = $(".age").val();
    var sex = $(":radio:checked").val();
    var sel = $("select").val();
    var hobby = getHobby();
    var msg = $("textarea").val();

    if (user) {
        var obj = {
            user,
            age,
            sex,
            sel,
            hobby,
            msg
        }

        $.post("/add", obj, function (res) {
            if (res.code == 200) {
                // 清空数据
                $(".user").val("");
                $(".age").val("");
                $(":radio:first").prop("checked", true);
                $("select").val("0");
                setClearHobby();
                $("textarea").val("");
                // 跳转到展示
                location.href = "/show";
            } else {
                alert(res.msg);
            }
        })
    }
})

// 获取复选框值
function getHobby () {
    var arr = [];
    $(":checkbox:checked").each(function (i, n) {
        arr.push(n.value);
    })
    return arr;
}

// 设置复选框为空
function setClearHobby () {
    $(":checkbox").each(function (i, n) {
        $(n).prop("checked", false);
    })
}

// 修改数据渲染
if (sessionStorage.obj) {
    var obj = JSON.parse(sessionStorage.obj);
    $(".user").val(obj.user);
    $(".age").val(obj.age);
    $(":radio").eq(obj.sex).prop("checked", true);
    $("select").val(obj.sel);
    setHobby(obj.hobby);
    $("textarea").val(obj.msg);

    $(".add").hide();
    $(".uptBtn").show();
}

// 复选框设置
function setHobby (arr) {
    $.each(arr, function (i, n) {
        $(":checkbox").eq(n).prop("checked", true);
    })
}

// 确认修改
$(".uptBtn").click(function () {
    var user = $(".user").val();
    var age = $(".age").val();
    var sex = $(":radio:checked").val();
    var sel = $("select").val();
    var hobby = getHobby();
    var msg = $("textarea").val();

    if (user) {
        var uptObj = {
            user,
            age,
            sex,
            sel,
            hobby,
            msg
        }

        var obj = {
            id: JSON.parse(sessionStorage.obj)._id,
            uptObj
        }

        $.post("/upt", obj, function (res) {
            if (res.code == 200) {
                // 清空数据
                $(".user").val("");
                $(".age").val("");
                $(":radio:first").prop("checked", true);
                $("select").val("0");
                setClearHobby();
                $("textarea").val("");

                $(".add").show();
                $(".uptBtn").hide();

                sessionStorage.removeItem("obj");

                // 跳转到展示
                location.href = "/show";
            } else {
                alert(res.msg);
            }
        })
    }
})

show.js

$(".add").click(function () {
    var user = $(".user").val();
    var age = $(".age").val();
    var sex = $(":radio:checked").val();
    var sel = $("select").val();
    var hobby = getHobby();
    var msg = $("textarea").val();

    if (user) {
        var obj = {
            user,
            age,
            sex,
            sel,
            hobby,
            msg
        }

        $.post("/add", obj, function (res) {
            if (res.code == 200) {
                // 清空数据
                $(".user").val("");
                $(".age").val("");
                $(":radio:first").prop("checked", true);
                $("select").val("0");
                setClearHobby();
                $("textarea").val("");
                // 跳转到展示
                location.href = "/show";
            } else {
                alert(res.msg);
            }
        })
    }
})

// 获取复选框值
function getHobby () {
    var arr = [];
    $(":checkbox:checked").each(function (i, n) {
        arr.push(n.value);
    })
    return arr;
}

// 设置复选框为空
function setClearHobby () {
    $(":checkbox").each(function (i, n) {
        $(n).prop("checked", false);
    })
}

// 修改数据渲染
if (sessionStorage.obj) {
    var obj = JSON.parse(sessionStorage.obj);
    $(".user").val(obj.user);
    $(".age").val(obj.age);
    $(":radio").eq(obj.sex).prop("checked", true);
    $("select").val(obj.sel);
    setHobby(obj.hobby);
    $("textarea").val(obj.msg);

    $(".add").hide();
    $(".uptBtn").show();
}

// 复选框设置
function setHobby (arr) {
    $.each(arr, function (i, n) {
        $(":checkbox").eq(n).prop("checked", true);
    })
}

// 确认修改
$(".uptBtn").click(function () {
    var user = $(".user").val();
    var age = $(".age").val();
    var sex = $(":radio:checked").val();
    var sel = $("select").val();
    var hobby = getHobby();
    var msg = $("textarea").val();

    if (user) {
        var uptObj = {
            user,
            age,
            sex,
            sel,
            hobby,
            msg
        }

        var obj = {
            id: JSON.parse(sessionStorage.obj)._id,
            uptObj
        }

        $.post("/upt", obj, function (res) {
            if (res.code == 200) {
                // 清空数据
                $(".user").val("");
                $(".age").val("");
                $(":radio:first").prop("checked", true);
                $("select").val("0");
                setClearHobby();
                $("textarea").val("");

                $(".add").show();
                $(".uptBtn").hide();

                sessionStorage.removeItem("obj");

                // 跳转到展示
                location.href = "/show";
            } else {
                alert(res.msg);
            }
        })
    }
})

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

app.get("/entry", function (req, res) {
    res.sendFile(__dirname + "/views/entry/entry.html");
})

app.get("/show", function (req, res) {
    res.sendFile(__dirname + "/views/show/show.html")
})

var handleData = require("./apps/handleData");

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

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

// 删除接口
app.get("/del", handleData.getDel);

// 修改获取数据接口
app.get("/uptObj", handleData.getUptObj);

// 修改接口
app.post("/upt", handleData.postUpt);

// 数据总条数接口
app.get("/count", handleData.getCount);

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;
    obj.age = +obj.age;
    db.insertOne(res, obj, "case1111", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "添加数据失败" });
        } else {
            res.send({ code: 200, msg: "添加数据成功" });
            db1.close();
        }
    })
}

module.exports.getList = function (req, res) {
    var obj = req.query;
    db.find(res, obj, "case1111", 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, "case1111", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "删除数据失败" });
        } else {
            res.send({ code: 200, msg: "删除数据成功" });
            db1.close();
        }
    })
}

module.exports.getUptObj = function (req, res) {
    var id = req.query.id;
    var obj = {
        find: { _id: mongodb.ObjectId(id) }
    }
    db.find(res, obj, "case1111", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "修改数据查找失败" });
        } else {
            res.send({ code: 200, msg: "修改数据查找成功", info: result });
            db1.close();
        }
    })
}

module.exports.postUpt = function (req, res) {
    var obj = req.body;
    obj.uptObj.age = +obj.uptObj.age;
    var whereObj = {
        _id: mongodb.ObjectId(obj.id)
    }
    var uptObj = {
        $set: obj.uptObj
    };
    db.updateOne(res, whereObj, uptObj, "case1111", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "修改数据失败" });
        } else {
            res.send({ code: 200, msg: "修改数据成功" });
            db1.close();
        }
    })
}

module.exports.getCount = function (req, res) {
    db.count(res, {}, "case1111", function (count, db1) {
        res.send({ code: 200, msg: "数据查找总条数成功", count });
        db1.close();
    })
}