mongodb+jq分页案例

文件目录

数据库 db.js

var mongodb = require('mongodb'); // 引入mongodb

var MongoClient = mongodb.MongoClient;

var dbUrl = "mongodb://localhost:27017"; // 数据库的地址及端口

var dbName = "myFiult";  // 库名

// 连接数据库
function connectMGDB(cb, res) {
    MongoClient.connect(dbUrl, {useNewUrlParser: true}, function(err, db) {
        // console.log('db==========', db);
        if(err) {
            console.log("数据库连接失败：", err);
            res.send({error: 1}); // 数据库连接失败
        } else {
            console.log("数据库连接成功");
            // 关联数据库
            var dbase = db.db(dbName);
            // 进行增删改查操作
            cb(dbase, db);
        }
    })
}
// 插入方法
module.exports.insert = function(res, cName, obj, cb) {
    connectMGDB(function(dbase, db) {
        dbase.collection(cName).insert(obj, function(err, result) {
            cb(err, result, db);
        })
    }, res)
}

// 查询方法
module.exports.find = function(res, cName, whereObj, cb) {
    connectMGDB(function(dbase, db) {
        whereObj.find ? whereObj.find : whereObj.find = {}; // whereObj对象中有find属性 则执行whereObj.find 
        whereObj.sort ? whereObj.sort : whereObj.sort = {};
        whereObj.limit ? whereObj.limit : whereObj.limit = 0;
        whereObj.skip ? whereObj.skip : whereObj.skip = 0;
        // 查询 age>16 的数据  跳过3条数据  显示3条数据     
        dbase.collection(cName).find().count().then(function(count) { // 查询当前数据总量
            dbase.collection(cName).find(whereObj.find).limit(whereObj.limit)
            .skip(whereObj.skip).collation({"locale": "zh", numericOrdering:true}).sort(whereObj.sort).toArray(function(err, result) { // 根据查询条件返回对应数据
                cb(err, result, db, count);
            })
        })
    }, res);
}

// 删除方法
module.exports.delete = function(res, cName, obj, cb) {
    connectMGDB(function(dbase, db) {
        dbase.collection(cName).deleteMany(obj, function(err, result) {
            cb(err, result, db)
        })
    }, res);
}

// 修改方法
module.exports.update = function(res, cName, whereObj, updatePbj, cb) {
    connectMGDB(function(dbase, db) {
        dbase.collection(cName).updateOne(whereObj, updatePbj, function(err, result) {
            cb(err, result, db)
        })
    }, res);
}

后台 index.js

// 写录入系统的接口
var express = require('express');
var router = express.Router();
// 引入数据库
var db = require('../modules/db.js');
console.log("db:", db);
// 引入mongodb  解决id问题
var mongodb = require('mongodb');

var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({extended: false});

//cors跨域
router.use("*", function(req, res, next) {
	res.header('Access-Control-Allow-Origin', '*');
	res.header("Access-Control-Allow-Methods", "*");
	res.header("Access-Control-Allow-Headers", "*");
	next();
}); 

/* GET users listing. */
router.get('/', function(req, res, next) {
    res.sendFile(__dirname+'/index.html');
  });

var urls = "shoppingList33"

//添加
router.post('/addPost', urlencodedParser, function(req, res) {
    var obj = req.body;
    db.insert(res, urls, obj, function(err, result, db) {
        if(err) {
            console.log("数据存入失败：", err);
            res.send({error: 2});
        } else {
            console.log("数据存入成功");
            res.send(result.result);
            db.close();
        }
    })
});
// 渲染
router.get('/getContent', function(req, res) {
    var obj = req.query;
    db.find(res, urls, obj, function(err, result, db) {
        if(err) {
            console.log("数据查询失败：", err);
            res.send({error: 2});
        } else {
            console.log("数据查询成功");
            res.send(result);
            db.close();
        }
    })
});
// 删除接口 delePost
router.post('/delePost', urlencodedParser, function(req, res) {
    var obj = req.body;
    var key = Object.keys(obj)[0];
    var id = mongodb.ObjectId(obj[key]);
    var data = {
        _id: id
    }
     db.delete(res, urls, data, function(err, result, db) {
        if(err) {
            console.log("数据删除失败：", err);
            res.send({error: 2});
        } else {
            console.log("数据删除成功");
            res.send(result.result);
            db.close();
        }
    })
});

// 修改  
router.post("/updatePost", urlencodedParser, function(req, res) {
    var data = req.body;
    var id = mongodb.ObjectId(data.id);
    data.shopPrice = data.shopPrice - 0;
    // 修改    条件    修改后的数据
    var whereObj = {
        _id: id
    }
    var updateObj = {
        $set: data
    }
    db.update(res, urls, whereObj, updateObj, function(err, result, db) {
        if(err) {
            console.log("数据修改失败：", err);
            res.send({error: 2});
        } else {
            console.log("数据修改成功");
            res.send(result.result);
            db.close();
        }
    })
});

// 搜索
router.post('/tabData', urlencodedParser, function(req, res) {
    var obj = req.body;
	if(obj._id){
		obj._id = mongodb.ObjectId(obj._id);
	}
    var whereObj = {
        find: obj
    }
    db.find(res, urls, whereObj, function(err, result, db) {
        if(err) {
            console.log("数据查找失败：", err);
            res.send({error: 2});
        } else {
            res.send(result);
            db.close();
        }
    })
});

// 排序
router.post('/sortPost', urlencodedParser, function(req, res) {
    var obj = req.body;
	var key = Object.keys(obj)[0];
    obj[key] ? obj[key] = obj[key] - 0 : "";
    var whereObj = {
        sort: obj
    }
    db.find(res, urls, whereObj, function(err, result, db) {
        if(err) {
            console.log("数据查找失败：", err);
            res.send({error: 2});
        } else {
            res.send(result);
            db.close();
        }
    })
})

//全部删除
router.post('/alldelPost', urlencodedParser, function(req, res) {
    var obj ={}
    
     db.delete(res, urls, obj, function(err, result, db) {
        if(err) {
            console.log("数据删除失败：", err);
            res.send({error: 2});
        } else {
            console.log("数据删除成功");
            res.send(result.result);
            db.close();
        }
    })
});

// 分页
router.post('/fyData', urlencodedParser, function(req, res) {
    var obj = req.body;
    var whereObj = {
        limit:Number(obj.limit),
        skip:Number(obj.skip)
    }
    db.find(res, urls, whereObj, function(err, result, db) {
        if(err) {
            console.log("数据查找失败：", err);
            res.send({error: 2});
        } else {
            res.send(result);
            db.close();
        }
    })
});


module.exports = router;

前端

index.ltml

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>前端云计算.学员就业信息系统</h1>
		<p>
			&emsp;&emsp;姓名: <input type="text" class="user">
		</p>
		<p>
			&emsp;&emsp;薪资: <input type="number" class="salary">
		</p>
		<p>
			公司名称: <input type="text" class="company">
		</p>
		<p>
			<button type="button" class="add">添加</button>
		</p>
		<table border="1" cellspacing="0" cellpadding="0" width="700px">
			<thead>
				<tr>
					<th>录入序号</th>
					<th>姓名</th>
					<th>薪资</th>
					<th>公司名称</th>
					<th>录入时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td>${i+1}</td>
					<td>${arr[i].user}</td>
					<td>${arr[i].salary}</td>
					<td>${arr[i].company}</td>
					<td>${arr[i].id}</td>
					<td>
						<a href="javascript:void(0)" onclick=del('${arr[i]._id}')>删除</a>
					</td>
				</tr> -->
			</tbody>
		</table>
		<p class="p"></p>
		<button type="button" class="sy">首页</button>
		<button type="button" class="syy">上一页</button>
		<button type="button" class="xyy">下一页</button>
		<button type="button" class="my">末页</button>
	</body>
	<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
	<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
</html>

new_file.css

*{
	margin: 0;
	padding: 0;
	outline: none;
	text-decoration: none;
	flex-direction: row;
}
.add{
	background-color: darkgreen;
	color: white;
}
a{
	color: #000;
}
a:hover{
	cursor: pointer;
}

new_file.js

fenYe()
function getDateTime(){
    var time = new Date()
    var n = time.getFullYear()
    var y = time.getMonth() + 1
    var d = time.getDate()
    var h = time.getHours()
    var f = time.getMinutes()
    var m = time.getSeconds()
    y < 10 ? y = '0' + y : y
    d < 10 ? d = '0' + d : d
    h < 10 ? h = '0' + h : h
    f < 10 ? f = '0' + f : f
    m < 10 ? m = '0' + m : m
    return n+'年'+ y + '月' + d + '日' + '' + h + ':' + f +':'+ m
}

// skip:(p-1)*3,
// limit:3,
$('.add').click(function(){
    if ($('.user').val()==''||$('.salary').val()==''||$('.company').val()=='') {
        alert('不能为空')    
    } else {
        var obj = {
            id:getDateTime(),
            user:$('.user').val(),
            salary:$('.salary').val(),
            company:$('.company').val()
        }
        $.ajax({
            type:'post',
            url:'/addPost',
            data:obj,
            success:function(res){
                fenYe()
            }
        });
    }
    $('.user').val('')
    $('.salary').val('')
    $('.company').val('')
})

//渲染
function showDom (arr) {
    var str = ''
    for(var i=0; i<arr.length; i++){
        str +=`
        <tr>
            <td>${i+1}</td>
            <td>${arr[i].user}</td>
            <td>${arr[i].salary}</td>
            <td>${arr[i].company}</td>
            <td>${arr[i].id}</td>
            <td>
                <a href="javascript:void(0)" onclick=del('${arr[i]._id}')>删除</a>
            </td>
        </tr>
    `
    }
    $('tbody').html(str)
}
function del(myid){
    $.ajax({
        type:'post',
        url:'/delePost',
        data:{
            k:myid
        },
        success:function(res){
            fenYe()
        }
    });
}

function fenYe(){
    ss()
    var obj = {
        limit:3,
        skip:(p - 1) * 3
    }
    $.ajax({
        type:'post',
        data:obj,
        url:'/fyData',
        success:function(res){
            showDom(res)
        }
    });
}

var b
var p = 1 //页数
function ss(){
    $.ajax({
        type:'get',
        url:'/getContent',
        success:function(res){
            b = Math.ceil(res.length/3) 
            var str = ''
            str = `每页最多显示3条==>共<span class="a2">${b}</span>页==>当前是第<span class="a3">${p}</span>页`
            $('.p').html(str)
        }
    });
}

$('.sy').click(function(){
    p=1
    ss()
    var obj = {
        limit:3,
        skip:0
    }
    $.ajax({
        type:'post',
        data:obj,
        url:'/fyData',
        success:function(res){
            showDom(res)
        }
    });
})

$('.syy').click(function(){
    p = p-1
    if (p<1) {
        alert('已经是第一页')
        p=1
    }else{
        p=p
    }
    ss()
    var obj = {
        limit:3,
        skip:(p - 1) * 3
    }
    $.ajax({
        type:'post',
        data:obj,
        url:'/fyData',
        success:function(res){
            showDom(res)
        }
    });
})

$('.xyy').click(function(){
    p = p+1
    if (p>b) {
        alert('已经是最后一页')
        p=b
    } else {
        p=p
    }
    ss()
    var obj = {
        limit:3,
        skip:(p - 1) * 3
    }
    $.ajax({
        type:'post',
        data:obj,
        url:'/fyData',
        success:function(res){
            showDom(res)
        }
    });
})

$('.my').click(function(){
    p = b
    ss()
    var obj = {
        limit:3,
        skip:(b - 1) * 3
    }
    $.ajax({
        type:'post',
        data:obj,
        url:'/fyData',
        success:function(res){
            showDom(res)
        }
    });
})