基于mongodb＋node express的增删查改（CRUD）操做

＃mongodb 和node express 的神奇配合！

前端工程师的福利，不再须要看后端人员的歧视了，摆脱后台，我们也还能够立足！废话很少说。上🐎：

/**
 * 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，这就很少说了。

还不懂？那来个全点的，下面是比较臃肿的页面，调试方便把一些样式什么的都写在一块儿了

<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>

对express操做不熟的建议看http://expressjs.com/en/4x/api.html#req.body文档。

欢迎大神来喷哈！！