當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

node+express+mongodb初体验

發(fā)布時(shí)間：2023/12/14 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 node+express+mongodb初体验小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　從去年11月份到現(xiàn)在，一直想去學(xué)習(xí)nodejs，在這段時(shí)間體驗(yàn)了gulp、grunt、yeomen，fis，但是對(duì)于nodejs深入的去學(xué)習(xí)，去開發(fā)項(xiàng)目總是斷斷續(xù)續(xù)。

　　今天花了一天的時(shí)間，去了解整理整個(gè)學(xué)習(xí)思路，以下是我的學(xué)習(xí)分享，是入門級(jí)學(xué)習(xí)體驗(yàn)適合node+mongodb開發(fā)小白，node已玩過很久的大神這篇文章可能不適合。

　　開篇來個(gè)例子：

　　客戶端表單頁面：

<!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)：

　　這個(gè)一個(gè)簡(jiǎn)單的例子，我們實(shí)現(xiàn)前臺(tái)表單提交，后臺(tái)獲取數(shù)據(jù)。

　　通過這個(gè)簡(jiǎn)單的例子，我們可能想要做更復(fù)雜的的項(xiàng)目，那我們?cè)撊绾蜗率帜?#xff0c;node+express+mongodb：

　　第一部分，基本知識(shí)點(diǎn)概要

　　express--一個(gè)簡(jiǎn)潔而靈活的 node.js Web應(yīng)用框架

　　mongodb--適合node的關(guān)系型數(shù)據(jù)庫

　　Mongoose --?Mongoose是MongoDB的一個(gè)對(duì)象模型工具，既類似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/ 手冊(cè)

　　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)了
　　　　許多功能，其中包括：
　　　　? 路由控制；
　　　　? 模板解析支持；
　　　　? 動(dòng)態(tài)視圖；
　　　　? 用戶會(huì)話；
　　　　? CSRF 保護(hù)；
　　　　? 靜態(tài)文件服務(wù)；
　　　　? 錯(cuò)誤控制器；
　　　　? 訪問日志；
　　　　? 緩存；
　　　　? 插件支持。

　　?Express 提供了路由控制權(quán)轉(zhuǎn)移的方法，即回調(diào)函數(shù)的第三個(gè)參數(shù)next，通過調(diào)用next()，會(huì)將路由控制權(quán)轉(zhuǎn)移給后面的規(guī)則。

?　　這里重點(diǎn)分析一下ejs模板引擎，因?yàn)橐院蟮捻?xiàng)目了，可能我將大多用ejs，因?yàn)樗趾?jiǎn)單，而且與 Express 集成良好。由于它是標(biāo)準(zhǔn) JavaScript 實(shí)現(xiàn)的，因此它不僅可以運(yùn)行在服務(wù)器端，還可以運(yùn)行在瀏覽器中。

　　我們?cè)?app.js 中通過以下兩個(gè)語句設(shè)置了模板引擎和頁面模板的位置：

app.set('views', __dirname + '/views'); app.set('view engine', 'ejs');

　　如何將ejs模版引擎的后綴.ejs設(shè)置為.html

// 定義EJS模板引擎和模板文件位置，也可以使用jade或其他模型引擎 app.set("views",path.join(__dirname,'ejviews'));//注冊(cè)html模板引擎將模版頁后綴換成.html app.engine('.html',ejs.__express);//將模板引擎換成html app.set('view engine', 'html');

　　ejs 的標(biāo)簽系統(tǒng)非常簡(jiǎn)單，它只有以下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代碼:

　　　第二部分，配置開發(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是一個(gè)輕量級(jí)、簡(jiǎn)潔、易用的Node.js Web MVC開發(fā)框架
　　　　全局安裝，可以快速建立目錄結(jié)構(gòu)web mvc目錄結(jié)構(gòu)

npm install -g express-generator

　　創(chuàng)建 express webmvc目錄結(jié)構(gòu)項(xiàng)目

express devexpress　

　　　　③安裝node module包依賴npm install express

npm install express //web應(yīng)用框架 npm install jade //模版引擎 npm install ejs //模版引擎 npm install mongoose //MongoDB的一個(gè)對(duì)象模型工具，操作更簡(jiǎn)單 npm install mongodb //MongoDB的驅(qū)動(dòng) npm install serve-favicon //統(tǒng)一設(shè)置網(wǎng)站icon npm install morgan //HTTP 請(qǐng)求日志中間件 npm install cookie-parser //cookie解析器 npm install body-parser //定義數(shù)據(jù)解析器 npm install bower -g bower install bootstrap

　　　　注意：提出一個(gè)問題，就是我們?cè)诿畲翱?#xff0c;執(zhí)行npm install ?會(huì)執(zhí)行package.json里面的包依賴，則我們通過express 項(xiàng)目名稱 ?這樣去執(zhí)行，之后在通過npm install 就可以了執(zhí)行項(xiàng)目案例里面的依賴，從而安裝整個(gè)項(xiàng)目框架

　　　　⑤啟動(dòng)express項(xiàng)目

npm start //貌似現(xiàn)在的項(xiàng)目變成這樣啟動(dòng)了

?　　　　簡(jiǎn)單的路由相關(guān)方面案例:

　　　　第三部分，mongodb的坑 ?---mongodb文檔（有些老舊的api以作更改）

　　 ? ?　1.安裝

　　　　?首先，安裝mongodb,直接解壓安裝，這里不再贅述。

　　　　?下面，我們來講mongodb和node連接起來，在工程文件夾webapp下新建data用來存放數(shù)據(jù)

　　　　?啟動(dòng)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 : 啟動(dòng)程序命令 --dbpath : 的數(shù)據(jù)庫存放路徑 --logpath : 的日志文件路徑 --logappend : 以追加方式，寫日志文件 --auth : 是否進(jìn)行用戶認(rèn)證，加上后,MongoDB會(huì)使用用戶認(rèn)證方式登錄。 --port : 端口號(hào)，可以自定義，默認(rèn) 27017 --fork : 服務(wù)是否以后臺(tái)運(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ù)庫

　　　　插入一個(gè)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還會(huì)有很多的坑，我也沒有找到好的解決方案，給大家提供一些好的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ù)啟動(dòng)　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

　　注意一個(gè)問題：我們?cè)诓僮鱩ongodb時(shí)，可能很多時(shí)候通過安裝模塊 npm install ?mongodb ?驅(qū)動(dòng)模版，或者npm install mongoose ? ?通常來說mongoose 更好用，但是我們?cè)谙妊b了mongodb驅(qū)動(dòng)之后，會(huì)導(dǎo)致mongoose安裝出錯(cuò)，解決辦法:

　　錯(cuò)誤圖片：

npm unistall mongodb npm cache clean npm install

安裝成功圖片:

　　注意一個(gè)問題：可能我們?cè)谶\(yùn)行的時(shí)候經(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時(shí)遇到的問題(解決辦法)：

　　當(dāng)我們使用mongoose操作mongodb時(shí)，會(huì)遇到如下問題（非常頭痛）：

　　解決辦法如下：

　　其實(shí)我們只需要找到\node_modules\mongoose\node_modules\bson\node_modules\bson-ext\ext文件下的index.js文件：

　　我們只需要將路徑改為指定的bson模塊即可，簡(jiǎn)單粗暴的方法：

　　安裝 bson ? npm install ?bson

　　將其路徑改為 ?bson = require('bson');

? ? ?mongoodb模塊下參照http://www.tuicool.com/articles/NNbiYr

　　注意問題：

　　使用mongoose和mongoodb時(shí)遇到的問題：

　　http://www.cnblogs.com/scaleworld/p/4314742.html#3195147

　　http://blog.csdn.net/sanjay_f/article/details/44941077

　　這里講一個(gè)我認(rèn)為的express與http.createServer之間容易產(chǎn)生的一個(gè)誤區(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ù)器：

　　兩者對(duì)比，其實(shí)express也只有一個(gè)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錯(cuò)誤問題匯總：

　　http://www.cnblogs.com/liuswi/p/4030216.html

轉(zhuǎn)載于:https://www.cnblogs.com/pingfan1990/p/4531573.html

總結(jié)

以上是生活随笔為你收集整理的node+express+mongodb初体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python在tk界面播放本地视频_tk
下一篇： STM32 输入捕获测量脉冲周期/频率