node+express+mongodb初體驗

時間 2019-11-13

標籤 node+express+mongodb node express mongodb 體驗欄目 MongoDB 简体版

原文原文鏈接

　　從去年11月份到如今，一直想去學習nodejs，在這段時間體驗了gulp、grunt、yeomen，fis，可是對於nodejs深刻的去學習，去開發項目老是斷斷續續。javascript

　　今天花了一天的時間，去了解整理整個學習思路，如下是個人學習分享，是入門級學習體驗適合node+mongodb開發小白，node已玩過好久的大神這篇文章可能不適合。css

　　開篇來個例子：html

　　客戶端表單頁面：java

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

　　服務器的頁面(注意經過http.createServer建立的服務端，只支持post提交，get提交不行，get是取url)：node

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");

　　這個一個簡單的例子，咱們實現前臺表單提交，後臺獲取數據。git

　　經過這個簡單的例子，咱們可能想要作更復雜的的項目，那咱們該如何下手呢，node+express+mongodb：github

　　第一部分，基本知識點概要web

　　express--一個簡潔而靈活的 node.js Web應用框架mongodb

　　mongodb--適合node的關係型數據庫數據庫

　　Mongoose -- Mongoose是MongoDB的一個對象模型工具，既相似ORM，讓NodeJS更容易操做Mongodb數據庫，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 模塊提供了更高層的接口外，還實現了
　　　　許多功能，其中包括：
　　　　 路由控制；
　　　　 模板解析支持；
　　　　 動態視圖；
　　　　 用戶會話；
　　　　 CSRF 保護；
　　　　 靜態文件服務；
　　　　 錯誤控制器；
　　　　 訪問日誌；
　　　　 緩存；
　　　　 插件支持。

　　 Express 提供了路由控制權轉移的方法，即回調函數的第三個參數next，經過調用next()，會將路由控制權轉移給後面的規則。

　　這裏重點分析一下ejs模板引擎，由於之後的項目了，可能我將大多用ejs，由於它十分簡單，並且與 Express 集成良好。因爲它是標準 JavaScript 實現的，所以它不只能夠運行在服務器端，還能夠運行在瀏覽器中。

　　咱們在 app.js 中經過如下兩個語句設置了模板引擎和頁面模板的位置：

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

　　如何將ejs模版引擎的後綴.ejs設置爲.html

// 定義EJS模板引擎和模板文件位置，也可使用jade或其餘模型引擎
app.set("views",path.join(__dirname,'ejviews'));

//註冊html模板引擎 將模版頁後綴換成.html  
app.engine('.html',ejs.__express);

//將模板引擎換成html
app.set('view engine', 'html');

　　ejs 的標籤系統很是簡單，它只有如下3種標籤。

　　 <% code %>：JavaScript 代碼。
　　 <%= code %>：顯示替換過 HTML 特殊字符的內容。
　　 <%- code %>：顯示原始 HTML 內容。
　　咱們能夠用它們實現頁面模板系統能實現的任何內容。

　　注意：因爲新版本不支持layout.ejs，解決方案

　　安裝模塊express-partials 
　　var partials = require('express-partials');
　　app.use(partials());
　　能夠在layout裏面設置指定layout層
　　app.get('/',function(req,res){
　　res.render('index',{title:'imooc home',name:"pfan",content:"你們好，我來自火星，個人任務是奮鬥！",layout:"layout"});
　　　　res.send('The time is ' + new Date().toString());
　　});

在 app.js 的中 app.configure 中添加如下內容，這樣頁面佈局功能就被關閉了。
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>

　　　第二部分，配置開發安裝包

　　　① 配置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"
}

　　這裏注意：其實配置package.json很是重要，咱們寫好所需的依賴模塊，而後經過 npm install 就能夠將參數裏面的依賴一塊兒進行安裝，這裏其實，咱們能夠在安裝 npm install express generator 生成node項目的目錄結構和依賴模塊的package.json　

　　　②快速創建web mvc 目錄結構

　　　　Express是一個輕量級、簡潔、易用的Node.js Web MVC開發框架
　　　　全局安裝，能夠快速創建目錄結構web mvc目錄結構

npm install -g express-generator

　　建立 express webmvc目錄結構項目

express devexpress

　　　　③安裝node module包依賴npm install express

npm install express              //web應用框架
npm install jade              //模版引擎 
npm install ejs                  //模版引擎 
npm install mongoose          //MongoDB的一個對象模型工具，操做更簡單
npm install mongodb          //MongoDB的驅動
npm install serve-favicon     //統一設置網站icon
npm install morgan               //HTTP 請求日誌中間件
npm install cookie-parser               //cookie解析器
npm install body-parser               //定義數據解析器
npm install bower -g                
bower install bootstrap

　　　　注意：提出一個問題，就是咱們在命令窗口，執行npm install 會執行package.json裏面的包依賴，則咱們經過express 項目名稱這樣去執行，以後在經過npm install 就能夠了執行項目案例裏面的依賴，從而安裝整個項目框架

　　　　⑤啓動express項目

npm start    //貌似如今的項目變成這樣啓動了

　　　　簡單的路由相關方面案例:

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);
});

//設置引擎
app.set("views","./views");
app.set("view engine","jade");

//設置樣式路徑
app.use(express.static(path.join(__dirname, 'public')));
console.log(path.join(__dirname, 'public'));

//設置路由
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用來存放數據

　　　　啓動mongodb服務器訪問http://localhost:27017判斷是否開啓成功

cd  D:\Program Files\mongodb\bin  //進入到mongodb 中bin文件下
mongod  -- dbpath  "D:\Program Files\mongodb\data"    //關聯新建的data文件來存放數據

解釋：

mongod      : 啓動程序命令
--dbpath     : 的數據庫存放路徑
--logpath     : 的日誌文件路徑
--logappend : 以追加方式，寫日誌文件
--auth      : 是否進行用戶認證，加上後,MongoDB會使用用戶認證方式登陸。
--port      : 端口號，能夠自定義，默認 27017
--fork      : 服務是否之後臺運行的方式運行
--bind_ip    : 限制特定IP地址訪問

　　　　關聯項目

cd node/webapp
mkdir data   //新建data文件用來存放數據

　　　　出現這樣的結果，說明鏈接mongodb成功了！

、

　　　　2.建立數據庫

　　　　進入mongodb的安裝目錄D:\Program Files\mongodb\bin，敲命令mongo，切換數據庫webapp

cd  D:\Program Files\mongodb\bin  //進入目錄
mongo           //執行mongo
use  webapp    //使用webapp數據庫，切換數據庫

　　　　插入一個usercollection表，執行：

db.usercollection.insert({ "username" : "testuser1", "email" : "testuser1@testdomain.com" })

　　　　執行，查看插入的數據，是否成功

db.usercollection.find().pretty()   //查看插入的數據，是否成功

　　　　3.給數據庫配置用戶名和密碼

cd  D:\Program Files\mongodb\bin  //進入目錄
mongo           //執行mongo
use  webapp    //使用webapp數據庫，切換數據庫
db.createUser({createUser:"test",pwd:"test",roles:[{role:"dbOwner",db:"webapp"}]})  //設置用戶名密碼，老版本用的是db.addUser注意
show users   //webapp如今已存在的用戶

　　安裝mongodb還會有不少的坑，我也沒有找到好的解決方案，給你們提供一些好的mongodb參考資料:

　　Node.js與MongoDB在Windows環境下的安裝 https://cnodejs.org/topic/524040e9101e574521760713　

　　MongoDB在windows下安裝配置 http://www.cnblogs.com/lsc183/archive/2012/08/16/mongodb.html

　　MongoDB 學習筆記 - 一、如何將MongoDB作一項Windows服務啓動　http://www.cnblogs.com/sslshopper/archive/2012/11/26/2789241.html

　 Nodejs學習筆記（十）--- 與MongoDB的交互（mongodb/node-mongodb-native）、MongoDB入門 http://www.cnblogs.com/zhongweiv/p/node_mongodb.html

　　注意一個問題：咱們在操做mongodb時，可能不少時候經過安裝模塊 npm install mongodb 驅動模版，或者npm install mongoose 一般來講mongoose 更好用，可是咱們在先裝了mongodb驅動以後，會致使mongoose安裝出錯，解決辦法:

　　錯誤圖片：

npm unistall mongodb
npm cache clean
npm install

安裝成功圖片:

　　注意一個問題：可能咱們在運行的時候常常遇到亂碼的狀況，這裏給你們幾種解決方案

　　1.檢查全部的js和html文件以及引擎模版都用UTF-8編碼保存

　　2.設置res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});或者res.header("Content-Type", "application/json; charset=utf-8");

使用mongoose和mongoodb時遇到的問題(解決辦法)：

　　當咱們使用mongoose操做mongodb時，會遇到以下問題（很是頭痛）：

　　解決辦法以下：

　　其實咱們只須要找到\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

　　這裏講一個我認爲的express與http.createServer之間容易產生的一個誤區（如下是express3.0的建立服務器的寫法）：

var express = require('express'), //引入express模塊
    app = express(),
    server = require('http').createServer(app);
app.use('/', express.static(__dirname + '/www')); //指定靜態HTML文件的位置
server.listen(80);

　　但其實咱們用http模塊建立服務器：

var  http = require("http"),
      fs = require("fs"),
      url = require("url") , //解析請求url
      querystring = 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("服務器已經開始監聽3000端口")});