案例:年龄排序,所搜

排序有三个地方需要写,

1.自己排序的代码,

$(".sort").click( function (){
    var obj ={
       sort:{age:1}
    }
    getDataShow(obj);
})

2.对应获取数据函数的地方

function getDataShow(obj){
    obj? obj :obj={}
    $.get("/show",obj,function(res){
        if(res.code == 200){
            show(res.info);
        }else{
            alert(res.msg);
        }
    })
}

3.后端的一个代码,不用写接口,与渲染一个接口

module.exports.postAdd=function(req,res){
    var obj =req.body;
    obj.age = +obj.age;
   db.insertOne(res,obj,"case1111a",function(err,result,db1){...}

搜索有三个地方需要改

1.搜索自己代码

$(".searchBtn").click(function () {
    var obj = {
        find: {
            user: $(".search").val()
        }
    }
    if (!$(".search").val()) {
        obj = {};
    }
    getDataShow(obj);
    $(".search").val("");
})

2.渲染 数据函数穿对象obj

function getDataShow (obj) {
    obj ? obj : obj = {};
    $.get("/show", obj, function (res) {
        if (res.code == 200) {
            // 渲染页面
            show(res.info);
        } else {
            alert(res.msg);
        }
    })

3.后端的代码,渲染的对象由{ },转换成对样的对象obj

module.exports.getShow = function (req, res) {
    var obj = req.query;
    db.find(res, obj, "case119a", function (err, result, db1) {...}

server.js

var express = require("express");
var bodyParser = require("body-parser");
var app = express();

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.get("/uptFind", handleData.getUptFind);

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

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

index.js

// 全局id
var uptId = "";

$(function () {
    getDataShow();
})

// 添加
$(".add").click(function () {
    var user = $(".user").val();
    var age = $(".age").val();
    var sex = $(":radio:checked").val();
    if (user && age) {
        $.post("/add", {
            user,
            age,
            sex
        }, function (res) {
            if (res.code == 200) {
                // 数据渲染
                getDataShow();
                // 清空数据
                $(".user").val("");
                $(".age").val("");
                $(":radio:first").prop("checked", true);
            } else {
                alert(res.msg);
            }
        })
    }
})


// 请求渲染数据
function getDataShow (obj) {
    obj ? obj : obj = {};
    $.get("/show", obj, function (res) {
        if (res.code == 200) {
            // 渲染页面
            show(res.info);
        } else {
            alert(res.msg);
        }
    })
}

// 渲染页面
function show (arr) {
    var str = "";
    $.each(arr, function (i, n) {
        str += `
            
                ${i + 1}
                ${n.user}
                ${n.age}
                ${n.sex == "0" ? "男" : "女"}
                
                    
                    
                
            
        `;
    })
    $("tbody").html(str);
}

// 删除
function del (id) {
    $.get("/del", { id }, function (res) {
        if (res.code == 200) {
            // 渲染页面
            getDataShow();
        } else {
            alert(res.msg);
        }
    })
}

// 修改
function upt (id, self) {
    if ($(self).html() == "修改") {
        $.get("/uptFind", { id }, function (res) {
            if (res.code == 200) {
                var obj = res.info[0];
                $(".user").val(obj.user);
                $(".age").val(obj.age);
                $(":radio").eq(obj.sex).prop('checked', true);
                uptId = obj._id;
                // 确认修改
                $(self).html("确认修改");
            } else {
                alert(res.msg);
            }
        })
    } else {
        var user = $(".user").val();
        var age = $(".age").val();
        var sex = $(":radio:checked").val();
        if (user && age) {
            var obj = {
                id: uptId,
                uptObj: {
                    user,
                    age,
                    sex
                }
            }
            $.post("/upt", obj, function (res) {
                if (res.code == 200) {
                    // 数据渲染
                    getDataShow();
                    // 清空数据
                    $(".user").val("");
                    $(".age").val("");
                    $(":radio:first").prop("checked", true);
                } else {
                    alert(res.msg);
                }
            })
        }
    }
}

// 按年龄升序
$(".ageSort").click(function () {
    var obj = {
        sort: { age: 1 }
    }
    getDataShow(obj);
})

// 搜索
$(".searchBtn").click(function () {
    var obj = {
        find: {
            user: $(".search").val()
        }
    }
    if (!$(".search").val()) {
        obj = {};
    }
    getDataShow(obj);
    $(".search").val("");
})

handleData.js

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

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

module.exports.getUptFind = function (req, res) {
    var id = req.query.id;
    var obj = {
        find: {
            _id: mongodb.ObjectId(id)
        }
    }
    db.find(res, obj, "case119a", 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;
    db.updateOne(res, { _id: mongodb.ObjectId(obj.id) }, { $set: obj.uptObj }, "case119a", function (err, result, db1) {
        if (err) {
            res.send({ code: 404, msg: "数据修改失败" });
        } else {
            res.send({ code: 200, msg: "数据修改成功" });
            db1.close();
        }
    })
}

你可能感兴趣的:(javascript,前端,开发语言)