1. 程式人生 > >例項:建立一個表格,分頁顯示資料(MongoDB資料庫儲存),功能:實現增刪改查

例項:建立一個表格,分頁顯示資料(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/