標籤：
前言從在本機(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開發，因為能快速定位問題。
注意事項
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
Node.js、express、mongodb 入門(基於easyui datagrid增刪改查)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
