node+express+mongodb初体验
從去年11月份到現(xiàn)在，一直想去學(xué)習(xí)nodejs，在這段時間體驗(yàn)了gulp、grunt、yeomen，fis，但是對于nodejs深入的去學(xué)習(xí)，去開發(fā)項(xiàng)目總是斷斷續(xù)續(xù)。
今天花了一天的時間，去了解整理整個學(xué)習(xí)思路，以下是我的學(xué)習(xí)分享，是入門級學(xué)習(xí)體驗(yàn)適合node+mongodb開發(fā)小白，node已玩過很久的大神這篇文章可能不適合。
開篇來個例子：
客戶端表單頁面：
<!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title>表單頁面</title> </head> <body><form action="http://localhost:3000/" method ="post"><input type="text" name="title"/><textarea name="text" id="" cols="30" rows="10"></textarea><input type="submit" /></form> </body> </html>服務(wù)器的頁面(注意通過http.createServer創(chuàng)建的服務(wù)端，只支持post提交，get提交不行，get是取url)：
var http = require("http"); //注意require 引入的是module里面的模塊可以不用加../ ./ ../../這種相對符，其他如果是同級也得加./才能引入成功 var open = require("child_process"); var querystring = require("querystring");var server = http.createServer(function(req,res){var post = '';req.on('data',function(chunk){post += chunk;});req.on('end',function(){post = querystring.parse(post);res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});res.write(post.title);res.write(post.text);res.end();}); }).listen(3000,'127.0.0.1');open.exec("start http://127.0.0.1:3000");這個一個簡單的例子，我們實(shí)現(xiàn)前臺表單提交，后臺獲取數(shù)據(jù)。
通過這個簡單的例子，我們可能想要做更復(fù)雜的的項(xiàng)目，那我們該如何下手呢，node+express+mongodb：
第一部分，基本知識點(diǎn)概要
express--一個簡潔而靈活的 node.js Web應(yīng)用框架
mongodb--適合node的關(guān)系型數(shù)據(jù)庫
Mongoose --?Mongoose是MongoDB的一個對象模型工具，既類似ORM，讓NodeJS更容易操作Mongodb數(shù)據(jù)庫，Mongoose文檔
node模版引擎--ejs，jade ?node模版引擎的深入探討?
Web 模板 Jade、EJS、Handlebars 萬行代碼解釋效率比較，Jade 完敗 https://cnodejs.org/topic/50e70edfa7e6c6171a1d70fa
EJS --http://www.embeddedjs.com/ github文檔 -- https://github.com/tj/ejs
Jade —— 源于 Node.js 的 HTML 模板引擎 http://segmentfault.com/a/1190000000357534
JadeAPI --- http://www.nodeclass.com/api/jade.html#doctype
mongodb --- http://docs.mongodb.org/manual/ 手冊
MongoDB介紹及安裝 -- ?http://www.cnblogs.com/lipan/archive/2011/03/08/1966463.html
什么是MongoDB ? --- ?http://www.w3cschool.cc/mongodb/mongodb-intro.html
Express （ http://expressjs.com/ ） 除了為 http 模塊提供了更高層的接口外，還實(shí)現(xiàn)了
許多功能，其中包括：
? 路由控制；
? 模板解析支持；
? 動態(tài)視圖；
? 用戶會話；
? CSRF 保護(hù)；
? 靜態(tài)文件服務(wù)；
? 錯誤控制器；
? 訪問日志；
? 緩存；
? 插件支持。
?Express 提供了路由控制權(quán)轉(zhuǎn)移的方法，即回調(diào)函數(shù)的第三個參數(shù)next，通過調(diào)用next()，會將路由控制權(quán)轉(zhuǎn)移給后面的規(guī)則。
? 這里重點(diǎn)分析一下ejs模板引擎，因?yàn)橐院蟮捻?xiàng)目了，可能我將大多用ejs，因?yàn)樗趾唵?#xff0c;而且與 Express 集成良好。由于它是標(biāo)準(zhǔn) JavaScript 實(shí)現(xiàn)的，因此它不僅可以運(yùn)行在服務(wù)器端，還可以運(yùn)行在瀏覽器中。
我們在 app.js 中通過以下兩個語句設(shè)置了模板引擎和頁面模板的位置：
app.set('views', __dirname + '/views'); app.set('view engine', 'ejs');如何將ejs模版引擎的后綴.ejs設(shè)置為.html
// 定義EJS模板引擎和模板文件位置，也可以使用jade或其他模型引擎 app.set("views",path.join(__dirname,'ejviews'));//注冊html模板引擎 將模版頁后綴換成.html app.engine('.html',ejs.__express);//將模板引擎換成html app.set('view engine', 'html');ejs 的標(biāo)簽系統(tǒng)非常簡單，它只有以下3種標(biāo)簽。
? <% code %>：JavaScript 代碼。
? <%= code %>：顯示替換過 HTML 特殊字符的內(nèi)容。
? <%- code %>：顯示原始 HTML 內(nèi)容。
我們可以用它們實(shí)現(xiàn)頁面模板系統(tǒng)能實(shí)現(xiàn)的任何內(nèi)容。
注意：由于新版本不支持layout.ejs，解決方案
安裝模塊express-partials var partials = require('express-partials');app.use(partials());可以在layout里面設(shè)置指定layout層app.get('/',function(req,res){res.render('index',{title:'imooc home',name:"pfan",content:"大家好，我來自火星，我的任務(wù)是奮斗！",layout:"layout"});res.send('The time is ' + new Date().toString());});在 app.js 的中 app.configure 中添加以下內(nèi)容，這樣頁面布局功能就被關(guān)閉了。 app.set('view options', { layout: false });
或者用第二種方案:上傳代碼例子
index.html文件代碼:
<% include header.html %> <h1><%= title %></h1> <p>Welcome to <%= name %></p> <div class="red_txt"><%= content %> </div> <% include footer.html %>header.html代碼:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <meta charset="UTF-8"> <meta name="keywords" content="express"> <meta name="description" content="express"> <meta name="author" content="pingfan"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body>footer.html代碼:
<link rel='stylesheet' href='/javascripts/fastclick.js' /> </body> </html>?
第二部分，配置開發(fā)安裝包
①?配置package.json ---?npm init初始配置package包依賴
{"name": "pfan","version": "1.0.1","description": "pfan","main": "app.js","dependencies": {"express": "^4.12.4","jade": "^1.10.0","mongoose": "^4.0.3"},"devDependencies": {"body-parser": "^1.12.4"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC" }這里注意：其實(shí)配置package.json非常重要，我們寫好所需的依賴模塊，然后通過 npm install 就可以將參數(shù)里面的依賴一起進(jìn)行安裝，這里其實(shí)，我們可以在安裝 npm install express?generator 生成node項(xiàng)目的目錄結(jié)構(gòu)和依賴模塊的package.json
②快速建立web mvc 目錄結(jié)構(gòu)
Express是一個輕量級、簡潔、易用的Node.js Web MVC開發(fā)框架
全局安裝，可以快速建立目錄結(jié)構(gòu)web mvc目錄結(jié)構(gòu)
創(chuàng)建 express webmvc目錄結(jié)構(gòu)項(xiàng)目
express devexpress ?、郯惭bnode module包依賴npm install express
注意：提出一個問題，就是我們在命令窗口，執(zhí)行npm install ?會執(zhí)行package.json里面的包依賴，則我們通過express 項(xiàng)目名稱 ?這樣去執(zhí)行，之后在通過npm install 就可以了執(zhí)行項(xiàng)目案例里面的依賴，從而安裝整個項(xiàng)目框架
⑤啟動express項(xiàng)目
npm start //貌似現(xiàn)在的項(xiàng)目變成這樣啟動了? 簡單的路由相關(guān)方面案例:
var express = require("express"); var app = express(); var open = require("child_process"); var path = require('path'); var port = process.env.PORT || 3000;//新增 var server = app.listen(3000,function(){console.log("listening on port %d",server.address().port); });//設(shè)置引擎 app.set("views","./views"); app.set("view engine","jade");//設(shè)置樣式路徑 app.use(express.static(path.join(__dirname, 'public'))); console.log(path.join(__dirname, 'public'));//設(shè)置路由 app.get('/',function(req,res){res.render('index',{title:'imooc home',content:"I am welcome you"}); }); app.get('/users:22',function(req,res){res.render('users',{title:'imooc details'}); }); open.exec("start http://127.0.0.1:3000")第三部分，mongodb的坑 ?---mongodb文檔（有些老舊的api以作更改）
? ? 1.安裝
?首先，安裝mongodb,直接解壓安裝，這里不再贅述。
?下面，我們來講mongodb和node連接起來，在工程文件夾webapp下新建data用來存放數(shù)據(jù)
?啟動mongodb服務(wù)器 ?訪問http://localhost:27017判斷是否開啟成功
?
cd D:\Program Files\mongodb\bin //進(jìn)入到mongodb 中bin文件下 mongod -- dbpath "D:\Program Files\mongodb\data" //關(guān)聯(lián)新建的data文件來存放數(shù)據(jù)?解釋：
mongod : 啟動程序命令 --dbpath : 的數(shù)據(jù)庫存放路徑 --logpath : 的日志文件路徑 --logappend : 以追加方式，寫日志文件 --auth : 是否進(jìn)行用戶認(rèn)證，加上后,MongoDB會使用用戶認(rèn)證方式登錄。 --port : 端口號，可以自定義，默認(rèn) 27017 --fork : 服務(wù)是否以后臺運(yùn)行的方式運(yùn)行 --bind_ip : 限制特定IP地址訪問關(guān)聯(lián)項(xiàng)目
?
cd node/webapp mkdir data //新建data文件用來存放數(shù)據(jù)出現(xiàn)這樣的結(jié)果，說明連接mongodb成功了！
、
2.創(chuàng)建數(shù)據(jù)庫
進(jìn)入mongodb的安裝目錄D:\Program Files\mongodb\bin，敲命令mongo，切換數(shù)據(jù)庫webapp
cd D:\Program Files\mongodb\bin //進(jìn)入目錄 mongo //執(zhí)行mongo use webapp //使用webapp數(shù)據(jù)庫，切換數(shù)據(jù)庫插入一個usercollection表，執(zhí)行：
db.usercollection.insert({ "username" : "testuser1", "email" : "testuser1@testdomain.com" })執(zhí)行，查看插入的數(shù)據(jù)，是否成功
db.usercollection.find().pretty() //查看插入的數(shù)據(jù)，是否成功3.給數(shù)據(jù)庫配置用戶名和密碼
cd D:\Program Files\mongodb\bin //進(jìn)入目錄 mongo //執(zhí)行mongo use webapp //使用webapp數(shù)據(jù)庫，切換數(shù)據(jù)庫 db.createUser({createUser:"test",pwd:"test",roles:[{role:"dbOwner",db:"webapp"}]}) //設(shè)置用戶名密碼，老版本用的是db.addUser注意 show users //webapp現(xiàn)在已存在的用戶
安裝mongodb還會有很多的坑，我也沒有找到好的解決方案，給大家提供一些好的mongodb參考資料:
Node.js與MongoDB在Windows環(huán)境下的安裝 ?https://cnodejs.org/topic/524040e9101e574521760713
MongoDB在windows下安裝配置?http://www.cnblogs.com/lsc183/archive/2012/08/16/mongodb.html
MongoDB 學(xué)習(xí)筆記 - 1、如何將MongoDB做一項(xiàng)Windows服務(wù)啟動 http://www.cnblogs.com/sslshopper/archive/2012/11/26/2789241.html
? Nodejs學(xué)習(xí)筆記（十）--- 與MongoDB的交互（mongodb/node-mongodb-native）、MongoDB入門 ?http://www.cnblogs.com/zhongweiv/p/node_mongodb.html
注意一個問題：我們在操作mongodb時，可能很多時候通過安裝模塊 npm install ?mongodb ?驅(qū)動模版，或者npm install mongoose ? ?通常來說mongoose 更好用，但是我們在先裝了mongodb驅(qū)動之后，會導(dǎo)致mongoose安裝出錯，解決辦法:
錯誤圖片：
npm unistall mongodb npm cache clean npm install
安裝成功圖片:
注意一個問題：可能我們在運(yùn)行的時候經(jīng)常遇到亂碼的情況，這里給大家?guī)追N解決方案
1.檢查所有的js和html文件以及引擎模版都用UTF-8編碼保存
2.設(shè)置res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});或者res.header("Content-Type", "application/json; charset=utf-8");
?
? ? ?使用mongoose和mongoodb時遇到的問題(解決辦法)：
當(dāng)我們使用mongoose操作mongodb時，會遇到如下問題（非常頭痛）：
解決辦法如下：
其實(shí)我們只需要找到\node_modules\mongoose\node_modules\bson\node_modules\bson-ext\ext文件下的index.js文件：
我們只需要將路徑改為指定的bson模塊即可，簡單粗暴的方法：
安裝 bson ? npm install ?bson
將其路徑改為 ?bson = require('bson');
? ? ?mongoodb模塊下參照http://www.tuicool.com/articles/NNbiYr
注意問題：
使用mongoose和mongoodb時遇到的問題：
http://www.cnblogs.com/scaleworld/p/4314742.html#3195147
http://blog.csdn.net/sanjay_f/article/details/44941077
?
這里講一個我認(rèn)為的express與http.createServer之間容易產(chǎn)生的一個誤區(qū)（以下是express3.0的創(chuàng)建服務(wù)器的寫法）：
var express = require('express'), //引入express模塊app = express(),server = require('http').createServer(app); app.use('/', express.static(__dirname + '/www')); //指定靜態(tài)HTML文件的位置 server.listen(80);但其實(shí)我們用http模塊創(chuàng)建服務(wù)器：
var http = require("http"),fs = require("fs"),url = require("url") , //解析請求urlquerystring = require("querystring") //獲取hash值; var server = http.createServer(function(req,res){var url = url.parse(req.url);var data = fs.readFileSync(url,"uth-8");res.writeHead(200, {"Content-Type": "text/html;charset=UTF-8"});res.write(data);res.end(); }).listen(3000,function(){console.log("服務(wù)器已經(jīng)開始監(jiān)聽3000端口")});兩者對比，其實(shí)express也只有一個server的實(shí)例，然后app.use,app.get,app.set，等都是express里面的回調(diào)方法而實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)返還給客戶端而已。
?
?
?
?
最后資源分享：
express例子：https://github.com/pingfanren/express
express與數(shù)據(jù)庫的例子：https://github.com/pingfanren/expressSimpleBlog
博文：http://www.cnblogs.com/myzhibie/
express例子：https://github.com/nswbmw/N-blog/wiki/_pages
葉小釵博文：http://www.cnblogs.com/yexiaochai/p/3527418.html
nodejs教程（很全面的課程） ：https://github.com/alsotang/node-lessons
NodeJS實(shí)戰(zhàn)：Express+Mongoose+ejs :?http://www.cnblogs.com/highsea90/p/4308794.html
MongoDB的應(yīng)用 ：?http://javascript.ruanyifeng.com/nodejs/mongodb.html
?
node錯誤問題匯總：
http://www.cnblogs.com/liuswi/p/4030216.html
?
轉(zhuǎn)載于:https://www.cnblogs.com/pingfan1990/p/4531573.html
總結(jié)
以上是生活随笔為你收集整理的node+express+mongodb初体验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python在tk界面播放本地视频_tk
- 下一篇： STM32 输入捕获测量脉冲周期/频率