搭建簡單的node+express+mongodb項目

時間 2019-11-06

標籤搭建簡單 node+express+mongodb node express mongodb 項目欄目 MongoDB 简体版

原文原文鏈接

簡單的介紹下node+express+mongodb這三個東西。

node：是運行在服務器端的程序語言，表面上看過去就是javascript同樣的東西，可是呢，確實就是服務器語言，我的以爲在必定層次上比c靈活，java就不提了。反正你只要認爲node能夠幹不少事就好了，絕對不僅是web開發。
express：這貨呢，就是node的一種框架，node有不少的開源框架，express是一個大神開發的（這尊神已經移駕到go語言的開發去了）。express可讓你更方便的操做node（由於原生的node寫起來比較麻煩，並且由於node是事件驅動的，因此有不少異步回調，寫多了就看着暈...）
mongodb：這是一種非關係數據庫（nosql），太深的東西我也不清楚，反正這貨也有很強大的地方，缺點就是不適合數據一致性要求高的好比金融方面的開發。可是優勢就快。
總結：也就是說node和mongodb組合起來特別適合一個應用場景——速度快，處理量大的狀況。javascript

下面先說說準備工做：（以windows8.1系統環境爲例）
1.node：先下載安裝nodejs，下載地址http://www.nodejs.org/，安裝好了以後檢查是否在系統環境變量裏自動配置好了path，若是沒有，請把node的安裝地址配置到path裏去。而後在cmd裏敲入node，若是能夠，那麼這一步ok了，很簡單吧。
2.express：這個安裝分兩種，一種是全局安裝，一種是本地安裝。網絡上說的玄乎玄乎的，可是實際操做中你會發現不一樣的系統環境會出現問題，好比win8.1中文用戶名狀況下，你得改變npm的全局路徑（npm是node模塊包管理程序，在你安裝好node的時候已經自帶npm了），操做：
prefix = 自定義模塊目錄
cache = 自定義緩存目錄
接着安裝express（新版本4.X以上要安裝express-generator）
npm i -g express（舊版本npm i -g express+版本號）
npm i -g express-generator
（若是想本地安裝在和npm同一個目錄下，先cd到node_modules目錄，再使用npm i express-generator命令，而後再將node_modules目錄下的./bin配置到環境變量path裏去）
測試：
express -V 成功的話會顯示版本號
3.mongodb：這個數據庫安裝很簡單，下載地址http://www.mongodb.org/。安裝好了，就在cmd裏cd到mongodb安裝目錄下的bin目錄，而後敲命令：
mongod --dbpath="mongodb安裝目錄\data" --logpath="mongodb安裝目錄\log\log.txt" --install --serviceName MongoDB --serviceDisplayName MongoDB
操做完，你會發現，你的電腦的服務裏多了一個MongoDB服務，沒錯，就是它，而後你運行這個服務就好了。css

《如何在Node中裝上mongoDB模塊》html

在nodejs目錄下，npm install mongodb --save java

正題：搭建簡單的node+express+mongodb項目

先在cmd控制檯裏cd到一個目錄下面，記住這你的workspace，而後是用是用express建立一個app項目
express mysite -e （-e表示支持ejs模板引擎，默認是jade。）
而後切換到mysite 咱們再下載依賴包 npm install。node

至此項目就建完，在mysite更目錄下用命令npm start便可啓動項目。。mysql

咱們研究下express建立項目
你須要瞭解的項目主要目錄爲：routes和views，你最好再在項目裏新建一個目錄叫models（做用後面講）
routes裏index.js配置的都是get和post請求的路徑映射關係。
views裏index.ejs就至關於一個html文件，裏面就是一些html標籤和<%%>標籤，感受和jsp差很少哦。
看起來不錯的樣子，標準的MVC框架（models裏放模型，views裏面放展現，routes裏面放控制）web

上面咱們已經生成好了app原型，接着咱們設計數據庫
cmd命令行裏：
mongo //進入數據庫
use hello-world //建立項目數據庫
而後，咱們就爲這個hello-world數據庫建立collection（collection就至關於oracle和mysql裏的table）
db.createCollection("users") //建立一個集合，也就是表
db.users.insert({userid: "admin", password: "123456"}) //給users裏添加一個文檔，也就是一條記錄帳號admin，密碼123456
ok，如今檢查一下：
db.users.find() //若是看到你剛剛添加的文檔記錄，就ok咯
sql

好簡單的數據庫集合以及文檔設置好，咱們就回到express建立的node項目裏，咱們須要：

在models下建立一個user.js,做爲實體類映射數據庫的users集合
在views下作幾個頁面（能夠用ejs也能夠用html，我就用ejs吧）
在routes下的index.js配置路由，也就是請求映射處理mongodb

1在models下建立一個user.js,做爲實體類映射數據庫的users集合 數據庫

user.js

var mongoose = require("mongoose");	//	頂會議用戶組件
var Schema = mongoose.Schema;	//	建立模型
var userScheMa = new Schema({
	userid: String,
	password: String
});	//	定義了一個新的模型，可是此模式還未和users集合有關聯
exports.user = mongoose.model('users', userScheMa); //	與users集合關聯

2在views下面建index.ejs, errors.ejs, login.ejs, logout.ejs, homepage.ejs。 （index是自帶的，不用建）

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <p><a href="login">登錄</a></p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <form action="homepage" method="post">
	    <p>
	    	<span>userId:</span>
	    	<br>
	    	<input id="userid" name="userid" type="text">
	    </p>
	    <p>
	    	<span>password:</span>
	    	<br>
	    	<input id="password" name="password" type="password">
	    </p>
	    <p><input type="submit" value="submit"></p>
    </form>
  </body>
</html>

logout.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <p>正在登出...</p>
    <script type="text/javascript">
    	setTimeout(function(){
    		window.location.href = "/";
    	}, 500);
    </script>
  </body>
</html>

homepage.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <p><a href="logout">登出</a></p>
  </body>
</html>

error.ejs 出錯頁面，我沒作，你有興趣能夠本身試試玩玩。

3 在routes下的index.js配置路由，也就是請求映射處理

index.js

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var user = require('../models/user').user;
mongoose.connect('mongodb://localhost/hello-world');

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

/*login*/
router.get('/login', function(req, res) {
 	 res.render('login', { title: 'login' });
});

/*logout*/
router.get('/logout', function(req, res) {
  	res.render('logout', { title: 'logout' });
});

/*hompage*/
router.post('/homepage', function(req, res) {
	var query_doc = {userid: req.body.userid, password: req.body.password};
	(function(){
		user.count(query_doc, function(err, doc){
			if(doc == 1){
				console.log(query_doc.userid + ": login success in " + new Date());
				res.render('homepage', { title: 'homepage' });
			}else{
				console.log(query_doc.userid + ": login failed in " + new Date());
				res.redirect('/');
			}
		});
	})(query_doc);
});

module.exports = router;

ok，基本上大功告成，能夠試試咯。

D:\nodejs\mysite>npm start //啓動項目

> mysite@0.0.0 start D:\nodejs\mysite
> node ./bin/www

GET /favicon.ico 404 62.607 ms - 1379
GET / 200 16.668 ms - 201
GET /stylesheets/style.css 200 20.130 ms - 111
GET /favicon.ico 404 5.290 ms - 1379
GET /login 200 16.315 ms - 544
GET /stylesheets/style.css 304 13.173 ms - -
GET /login 304 6.234 ms - -
GET /stylesheets/style.css 304 6.354 ms - -
GET /logout 200 4.969 ms - 349
GET /stylesheets/style.css 304 6.385 ms - -
GET / 304 6.899 ms - -
GET /stylesheets/style.css 304 1.123 ms - -
GET /homepage 404 6.678 ms - 1379
GET /homepage 404 4.173 ms - 1379
GET /homepage 404 3.277 ms - 1379
GET / 200 6.312 ms - 243
GET /stylesheets/style.css 304 1.250 ms - -
GET /login.ejs 404 9.421 ms - 1379
GET / 200 11.765 ms - 239
GET /stylesheets/style.css 304 1.438 ms - -
GET /login 304 1.987 ms - -
GET /stylesheets/style.css 304 3.251 ms - -
123@qq.com: login failed in Tue Jun 06 2017 20:0
POST /homepage 302 181.048 ms - 46
GET / 304 3.514 ms - -
GET /stylesheets/style.css 304 1.490 ms - -
GET /login 304 4.701 ms - -
GET /stylesheets/style.css 304 8.011 ms - -
GET /logout 304 9.862 ms - -
GET /stylesheets/style.css 304 5.513 ms - -
GET / 304 13.703 ms - -
GET /stylesheets/style.css 304 4.041 ms - -

下面講講如何調試服務器端的代碼： 咱們最好藉助一個叫node-inspector的工具包 npm i -g node-inspector //安裝node-inspector 而後在cmd裏運行 node-inspector 再新打開一個cmd，cd到項目hello-world目錄下 node --debug ./bin/www （或者 node --debug-brk ./bin/www , 舊版本express建立的node程序請使用 node --debug app.js）在瀏覽器裏打開http://127.0.0.1:8080/debug?port=5858 再新建窗口打開http://127.0.0.1:3000/ 就在瀏覽器能夠調試服務器端代碼。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。