碼上歡樂
相關內容    簡體    繁體

Node.js、express、mongodb 入門(基於easyui datagrid增刪改查)

本文轉載自   查看原文   2015-11-04 17:08   7418    Node.js express mongodb/ Node.js

前言

     從在本機(win8.1)環境安裝相關環境到做完這個demo大概不到兩周時間，剛開始只是在本機安裝環境並沒有敲個Demo，從周末開始斷斷續續的想寫一個，按照慣性思維就寫一個增刪改查吧，一方面是體驗下node.js的魔力，二就是看看node.js、express和mongoose的API，其次就是把自己入門的過程記錄下來，方便自己查看，再就是對入門的朋友起一個引導的作用。

    敲demo的過程中感覺最爽的就是npm(Node Package Manager)是一個Node.js的包管理和分發工具。需要安裝任何第三方類庫，直接使用npm安裝，而且很方便，比如mongoosee(mongodb在node.js環境下的驅動器)。

 

node.js express mongodb安裝

    1、安裝node.js 為方便開發還是配置環境變量

        http://www.runoob.com/nodejs/nodejs-install-setup.html

    2、安裝express

        http://blog.csdn.net/u013310075/article/details/22592787

    3、安裝mongodb

       http://www.cnblogs.com/lsc183/archive/2012/08/16/mongodb.html

開發環境

    1、用DOS命令創建express項目、使用npm安裝第三方依賴庫。

    2、用DOS啟動mongodb服務端，並且用DOS啟動客戶端插入測試數據。

    3、用sublime text2開發。在demo過程中有朋友建議我用webstorm開發，因為能快速定位問題。

 

exports和module.exports的區別及使用場景

    1、簡單的理解exports=module.exports={}，也就是說exports和module.exports指向同一個引用。 exports是module.exports的輔助方法。

    2、如果只是單純收集方法或者叫導出方法，那么就可以掛到exports上。

    3、對於類，為了直接使導出的內容作為類的構造器可以供調用者使用new操作創建實例化對象，應該把構造函數掛到module.exports上。 但一旦exports和module.exports有了各自的內容后，兩者將再無關系。　　

 

注意事項

    1、使用DOS創建項目 express -e demo  cd demo npm install(安裝package.json中的第三方依賴庫)。 -e說明使用ejs模版，不過在項目中會修改成html。

    2、安裝mongoose驅動   npm install mongoose --save (--save安裝的同時更新package.json配置信息)。

    3、在DOS中批量插入數據 var listArr=[];for(i=0;i<=5;i++){listArr.push({"stuname":"stu"+i,"age":20+i,"sex":"男","address":"China"})} ，回車會提示6,

       輸入db.students.insert(listArr)回車會出現BulkWriteResult信息，也就是批量創建完成，使用db.students.find()查看所有數據。

    4、如果直接拿到的是mongodb中的id，那么在index.js中拿到時需要做個轉化：var id=mongoose.Types.ObjectId(req.params.id); req.params.id也容易寫成req.param.id。

 

示例截圖

 

 

關鍵代碼

1、mongodb.js（相當於我們常用的DAO層）

var mongoose = require('mongoose');
var db=mongoose.connect('mongodb://localhost:27017/test'); //連接test數據庫

var Schema=mongoose.Schema; //創建模型
var studentSchema=new Schema({
	stuname:String,
	age:Number,
	sex:String,
	address:String
});

studentSchema.methods.addStu=function(student,callback){
	this.stuname=student.stuname;
	this.age=student.age;
	this.sex=student.sex;
	this.address=student.address;
	this.save(callback);
}


var student=db.model('students',studentSchema);
//exports.student=student;
module.exports=student;

 

2、index.js（路由）

var express = require('express');
var router = express.Router();
var mongoose=require('mongoose');

var student = require('./../database/mongodb.js');

/* GET home page. */
router.get('/', function(req, res, next) {
   res.render('index',{title:'Index'});
});


router.post('/index/list',function(req,res){
	var students = student.find(function(err,result){
   	   if(err){
   	   	 res.send(err);
   	   }else{
   	   	  res.json(result);
   	   }
   });
});

router.post('/index/add',function(req,res){
	var obj=req.body;
	var stu02=new student();
	stu02.addStu({
		stuname:req.body.stuname,
		age:req.body.age,
		sex:req.body.sex,
		address:req.body.address
	},function(rs){
		res.json({success:true});
	});
});

router.post('/index/delete',function(req,res){
	var id=req.body.id;
	
	student.remove({_id:id},function(){
		res.json({success:true});
	});
})

router.post('/index/edit/:id',function(req,res){
	console.log('aa');
	var id=mongoose.Types.ObjectId(req.params.id);

	student.update({_id:id},{$set:{stuname:req.body.stuname,age:req.body.age,sex:req.body.sex,address:req.body.address}},function(err,rs){
		if(err){
			console.log(err);
		}else{
			res.json({success:true});
		}
		
	});

})

module.exports = router;

 

3、index.html

<!DOCTYPE html>
<html>
  <head>
     <title><%= title %></title>
     <link rel="stylesheet" type="text/css" href="/javascripts/jquery-easyui-1.4.4/themes/default/easyui.css">
	 <link rel="stylesheet" type="text/css" href="/javascripts/jquery-easyui-1.4.4/themes/icon.css">
     <script type="text/javascript" src="/javascripts/jquery-easyui-1.4.4/jquery.min.js"></script>
     <script type="text/javascript" src="/javascripts/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
	 <script type="text/javascript" src="/javascripts/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
  	<div id="tb">
    	<div>
	        <a href="javascript:openUserAddDialog()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加用戶</a> 
	        <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">修改用戶</a> 
	        <a href="javascript:deleteUser()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-delete'">刪除用戶</a>
    	</div>
  	</div>
	<table id="dg" title="學生管理" class="easyui-datagrid" style="width:500px;" singleSelect="true" idField="_id" rownumbers="true"
       url="/index/list" fit="true" toolbar="#tb">
    	<thead>
	    	<tr>
		        <th field="cb" checkbox="true" align="center"></th>
		        <th field="_id" width="250" align="center">ID</th>
		        <th field="stuname" width="100" align="center">姓名</th>
		        <th field="age" width="50" align="center">年齡</th>
		        <th field="sex" width="100" align="center">性別</th>
		        <th field="address" width="100" align="center">地址</th>
		        
	    	</tr>
    	</thead>
	</table>

	<div class="easyui-dialog" id="dlg" style="width:480px;height:330px;padding:10px 10px;" closed="true" buttons="#dlg-buttons" data-options="" >
    <form action="" method="post" id="fm">
        <table cellspacing="8px" align="center">
            <tr>
            	<input type='hidden' id="_id" name="_id" />
                <td>姓名：</td>
                <td><input type="text" id="stuname" name="stuname"  required="true" style="width: 300px;"/></td>
                <td>   </td>
            </tr>
            <tr>
                <td>年  齡：</td>
                <td><input type="text" id="age" name="age"  required="true"/></td>
                <td>   </td>
            </tr>
            <tr>
                <td>性  別：</td>
                <td><input type="text" id="sex" name="sex"  required="true"/></td>
                <td>   </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td><input type="text" id="address" name="address"   required="true"/></td>
                <td>   </td>
            </tr>
            
        </table>
    </form>
</div>


<div id="dlg-buttons">
    <a href="javascript:saveUser();" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeUserDialog();" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
</div>
  </body>
<script type="text/javascript">
	 var url="";
	   function saveUser(){
            $('#fm').form('submit', {
                url:url,
                onSubmit:function(){
                    
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if(result.success){
                        $.messager.alert("系統提示","保存成功");
                        $("#fm").form("reset");
                        $("#dlg").dialog("close");
                        $("#dg").datagrid("reload");
                    }else{
                        $.messager.alert("系統提示","保存失敗");
                        return;
                    }
                }
            });
        }

         function closeUserDialog(){
            $("#dlg").dialog("close");
            $("#fm").form("reset");
        }

          function deleteUser(){
            var selectedrow=$("#dg").datagrid('getSelected');
            if(selectedrow==null){
                $.messager.alert("系統提示","請選擇要刪除的數據！");
                return;
            }
            
            var id=selectedrow._id;
            $.messager.confirm("系統提示","您確認要刪除這條數據嗎？",function(r){
                if(r){
                    $.post("/index/delete",{id:id},function(result){  //result直接返回Object，所以無需轉換為json
                        if(result.success){
                            $.messager.alert("系統提示","數據已成功刪除！");
                            $("#dg").datagrid("reload");
                        }else{
                            $.messager.alert("系統提示","數據刪除失敗！");
                        }
                    },"json");
                }
            });
        }

	 function openUserAddDialog(){
            $("#fm").form("reset"); //打開之前先清空數據
            $("#dlg").dialog("open").dialog("setTitle","添加用戶");
            url = "/index/add";
        }

     function openUserModifyDialog(){
            var selectedrow=$("#dg").datagrid('getSelected');
            if(selectedrow ==null){
                $.messager.alert("系統提示","請選擇一條數據進行修改");
                return;
            }
            
            $("#dlg").dialog("open").dialog("setTitle","修改用戶信息");
            dispValue(selectedrow);

            url = "/index/edit/"+selectedrow._id;
        }

        function dispValue(row){
        	
            $("#stuname").val(row.stuname);
            $("#age").val(row.age);
            $("#sex").val(row.sex);
            $("#address").val(row.address);
        }
</script>
</html>

 

參考資料

 1、http://www.cnblogs.com/caiya928/p/4776437.html   node.js express sql server增刪改查。

 2、http://www.cnblogs.com/hubwiz/p/4118083.html

 3、http://www.cnblogs.com/highsea90/p/4308794.html

 4、https://cnodejs.org/topic/535601a20d7d0faf140303d8

 5、http://blog.csdn.net/jessonlv/article/details/17379535

 

總結

     這個demo是連接mongodb寫的增刪改查，本來還想寫一個基於sql server的增刪改查，基於時間敲不定的原因就先把這個代碼放上來了，隨着一個demo下來對一些語法的疑問就拋了出來，帶着這些問題去查API或者再去看node.js的教程又會加快學習速度，節省時間成本。 在demo過程中我還記錄了一些txt，主要是針對剛開始操作node不熟練或者忘記如何操作express、mongoose。需要的朋友再交流。附上代碼 http://pan.baidu.com/s/1kTCQyUz

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Node.js對MongoDB進行增刪改查操作 node.js對mongodb的連接&增刪改查（附async同步流程控制） Easyui datagrid簡單的增刪改查記錄 Node.js + MySQL 實現數據的增刪改查 node.js(express)連接mongoDB入門指導 node.js(express)連接mongoDB入門指導 asp.net EasyUI DataGrid 實現增刪改查 Easyui datagrid擴展子網格detailview增刪改查詳解 easyui增刪改查 node.js中對 mysql 進行增刪改查等操作和async，await處理
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM