实例:创建一个表格,分页显示数据(MongoDB数据库存储),功能:实现增删改查

需求:创建一个表格,分页显示数据,功能:实现增删改查
效果图:
在这里插入图片描述
在这里插入图片描述
自动创建一个项目

命令行:

express mongodb-demo --view=ejs
cd mongodb-demo
npm install
npm install mongodb --save
npm start

在这里插入图片描述
mongo数据库的stu集合的users表 循环输入100条数据

// 插入100条数据
    for (let i = 1; i <= 100; i++) {
        db.collection('users').save({
            name: 'abc' + i,
            password: '123456',
            sex: true
        }).then(function(err, result){
            client.close();
        })
    }
    
    // 取第2页的数据
    /* db.collection('users').find().skip((2-1)*10).limit(10).toArray(function(err, result){
        client.close();
        console.log(result);
    }); */

    // 数据按名称倒序后,取第2页的数据。
    db.collection('users').find().sort({name: -1}).skip((2-1)*10).limit(10).toArray(function(err, result){
        client.close();
        console.log(result);
    });

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
重启 node app
在这里插入图片描述

分页,每页显示10个数据
在这里插入图片描述
在这里插入图片描述
样式 index.ejs
在这里插入图片描述
style.css
在这里插入图片描述
在这里插入图片描述

让第五个选中
在这里插入图片描述
name倒序
在这里插入图片描述


加一个搜索框.
在这里插入图片描述
样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
后台要得到name和sex
在这里插入图片描述
先把index.ejs 数据获取,get请求,默认query获取

在这里插入图片描述
判断
在这里插入图片描述
模糊查找
在这里插入图片描述


删除
在这里插入图片描述
在这里插入图片描述
index.ejs
引入jquary
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
.ejs
在这里插入图片描述
index.js
在这里插入图片描述
删不掉;id打印出来 obj类型的id怎么删
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
刷新
在这里插入图片描述
删除提示
在这里插入图片描述
封装模块
在这里插入图片描述
在这里插入图片描述


作业:编辑和批量删除
mongodb其他语言的驱动文档入口:http://www.mongodb.org.cn/drivers/

阅读:
https://www.yiibai.com/mongodb
http://www.mongodb.org.cn/tutorial/

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/82986431