基於mongodb＋node express的增刪查改（CRUD）操做

時間 2019-11-18

標籤基於 mongodb+node mongodb node express 增刪 crud 欄目 MongoDB 简体版

原文原文鏈接

＃mongodb 和node express 的神奇配合！javascript

前端工程師的福利，不再須要看後端人員的歧視了，擺脫後臺，我們也還能夠立足！廢話很少說。上🐎：html

/**
 * Created by farben on 17/6/27.
 */
//配置mongodb數據庫相關的內容
var mongodb=require('mongodb');
var MongoClient=mongodb.MongoClient;
var DB_CONN_STR='mongodb://localhost:27017/foobar';

//配置node服務器相關內容：
var express=require('express');
var app =express();
var bodyParder = require('body-parser');
app.use(bodyParder.urlencoded({extended: true}));

//設置跨域訪問
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
})

//定義post請求的接口 向數據表插入數據
app.post('/post',function(req,res){
    var username=req.body.username;
    var password=req.body.password;
    console.log(username);
    console.log(password);
    var data=[{"username":username,"password":password}];
    //拿到數據後追加到數據庫中
    var insertData= function(db,callback){
        //鏈接到數據文檔
        var collection=db.collection('persons');
        console.log(collection + '文檔連接');
        collection.insert(data,function(err,result){
            if(err){
                console.log("Error"+err);
                return;
            }
            console.log(result);
        })
    }
    MongoClient.connect(DB_CONN_STR,function(err,db){
        console.log("鏈接成功--插入成功");
        insertData(db,function(result){
            console.log(result + 'ok');
            db.close();
        })
    })
});
//定義get請求的接口 獲取數據
app.post('/get',function(req,res){
    console.log("11111111"+req.body.msg);
    var username=req.body.msg;
    //首先得從庫裏拿到數據
    var selectData=function(db,callback){
        //鏈接到數據文檔
        var collection=db.collection('persons');
        //查詢數據
        var whereStr={"username":username};  //咱們要查詢的信息是全部包含這個內容的數據。
        collection.find(whereStr).toArray(function(err,result){
            if(err){
                console.log('Error:'+err);
                return;
            }
            callback(result);
            console.log(result+'33333333333')
        })
    }

    MongoClient.connect(DB_CONN_STR,function(err,db){
        console.log("鏈接成功...");
        selectData(db,function(result){
            console.log(result + '6666666666');
            //把數據返回給前端
            res.status(200),
                res.json(result)

            db.close();
        })
    })

});

//定義modify請求的接口，好比用戶要修改密碼
app.post('/modify',function(req,res){
    var password = req.body.password;
    var username = req.body.username;
    //首先得從庫裏找到數據
    var updateData = function(db,callback){
        //鏈接到數據文檔
        console.log(123)
        var collection = db.collection('persons');
        //查詢數據
        var whereStr = {"username":username};  //咱們要修改的目標信息是全部包含這個內容的數據。
        var updataStr = {$set: {"password":password}}; //要修改的信息，使用不一樣的更新器結果不同。

        collection.update(whereStr,updataStr, function(err, result){
            if(err){
                console.log('Error:'+err);
                return;
            }
            console.log('update ok');
            callback(result);
        });
    }

    MongoClient.connect(DB_CONN_STR,function(err,db){
        console.log("鏈接成功");
        updateData(db,function(result){
            console.log('對應的信息'+result+'已經進行了修改');
            //到這裏數據庫中對應的信息已經進行了修改，
            db.close();
        });
    });
});
//定義post請求的接口，好比要刪除某個用戶的信息
app.post('/del',function(req,res){
    var username = req.body.username;
    //首先得從庫裏找到數據
    var delData = function(db,callback){
        //鏈接到數據文檔
        var collection = db.collection('persons');
        //查詢數據
        var whereStr = {"username" : username};  //咱們要刪除的目標信息是全部包含這個內容的數據。

        collection.remove(whereStr, function(err, result){
            if(err){
                console.log('Error:'+err);
                return;
            }
            callback(result);
        });
    }

    MongoClient.connect(DB_CONN_STR,function(err,db){
        console.log("鏈接成功--刪除成功");
        delData(db,function(result){
//       console.log(result);
            //到這裏數據庫中對應的信息已經進行了修改，
            db.close();
        });
    });
})

//配置服務器端口
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('服務啓動 listening at http://%s:%s', host, port);
})

上面是對mongodb數據集的一些crud操做。固然首先仍是得先安裝mongodb，這就很少說了。前端

還不懂？那來個全點的，下面是比較臃腫的頁面，調試方便把一些樣式什麼的都寫在一塊兒了java

<section style="padding: auto 20px;">
<form action="http://localhost:3000/post" id="showDataForm" method="post" style="display: flex;color: black"">
  <div style="line-height: 5rem;"><span>用戶名：</span><input type="text" name="username" /></div>
    <div style="line-height: 5rem;"><span>密  碼：</span><input type="text" name="password" /></div>
  <input type="submit" value="提交"/>
</form>

<div class="show"></div>
<div style="width: auto;height:auto;text-align: center;display:flex;vertical-align: middle">
 <!-- <div class="postButton" style="flex:1;background-color: #ff6900;line-height: 2rem;height: 2rem;border-radius: 1rem;">插入數據</div>
-->
    <div class="getButton" style="font-family: '微軟雅黑';font-size: 14px;color: black;line-height: 2rem;height: 2rem;">獲取數據:</div>
    <div style="line-height: 2rem;height: 2rem;"><input type="text" class="msg" placeholder="輸入索引"/></div>
</div>
<div class="find" style="text-align: center;height: auto;margin-top: 1rem;"></div>
<form action="http://localhost:3000/modify" method="post" style="display: -webkit-box;color: black">
    <div style="flex:1"><span>用戶名：</span><input type="text" name="username" /></div>
        <div style="flex:1"><span>新密碼：</span><input type="text" name="password" /></div>
    <input type="submit" value="修改"/>
</form>
<form action="http://localhost:3000/del" method="post" style="display: flex;color: black">
    <div style="line-height: 5rem;"><span>用戶名：</span><input type="text" name="username" /></div>
    <input type="submit" value="刪除"/>
</form>
</section>
<!--<div class="modify" style="text-align: center;height: auto;background-color: orange">change data</div>-->
</body>
<script type="text/javascript" src="api/jquery.js"></script>
<script type="text/javascript">
  window.onload = function () {
    var getButton = document.getElementsByClassName('getButton');
    var modify = document.getElementsByClassName('modify');
      function saveReport(){
          $("#showDataForm").ajaxSubmit(function(message) {
// 對於表單提交成功後處理，message爲提交頁面saveReport.htm的返回內容
          });
          return false;
      }
    getButton[0].addEventListener('click', function () {
        var msg = document.getElementsByClassName('msg')[0].value;
        $.ajax({
        type:'post',
            data: {msg:msg},
        url:'http://localhost:3000/get',
        success:function(data){
            if(data.length==0){
                alert('no msg')
            }
          for(var i = 0; i <data.length; i++)
          {
            document.getElementsByClassName('find')[0].innerHTML += '<div style="border-top:1px solid black;display:flex;line-height: 2rem;height:2rem;"><span style="flex:1">用戶名：'+data[i].username+'</span><span style="flex:1">密 碼：'+data[i].password+'</span></div>';
          }
          console.log(data+'ppp');
        },
        error:function(){
          console.log('error');
        }
      })
    });
//      modify[0].addEventListener('click',function() {
//          $.ajax({
//              type: 'post',
//              url: 'http://localhost:3000/modify',
//              success: function (data) {
//                  if (data) {
//                      console.log(data)
//                  }
//              },
//              error: function () {
//                  console.log('error');
//              }
//          })
//      });

  }

</script>