一、寫在前面
人人都想成為全端碼農，作為一個web前端開發人員，通往全端的簡潔之路，貌似就是node.js了。前段時間學習了node.js，來談談新手如何快速的搭建自己的web服務，開啟全端之路。
二、安裝node.js
接觸過後端開發的人都知道，首先要安裝服務。作為新手，肯定是選擇最簡單的可視化安裝了（傻瓜式下一步，其它的方式等熟悉相關操作後自然就會了的），透過官網http://nodejs.org/dist/v0. 6.1/node-v0.6.1.msi 下載電腦適配的安裝包（這個是windows的，買不起mac啊），然後根據開機安裝就可以了，預設安裝在C:Program Filesnodejs檔案下，並將該目錄加入到PATH環境變數中。具體做法，右鍵」我的電腦「-」屬性「-「系統進階」-」進階「-」環境變數「-選擇「變數名稱：PATH」；「改變量值：在最後面加上【C:Program Filesnodejs】（依照自己的安裝目錄而定）」。開啟cmd直接執行指令：
node -v 可以輸出目前版本號。 node檔案裡已經整合了npm，之後使用npm install XXX 來安裝所需的插件或模組。
三、使用express框架
忙活了一陣，終於可用npm指令進行初始化、安裝express框架，然後寫個hello world 爽一下了。為什麼要選擇express框架了，當然有它的特別之處，對新手來說最害怕的就是麻煩還容易出錯。 express當然為我們考慮到了，所以提供了快速生成器：express-generator
1、透過指令：npm install express-generator -g 安裝到全域
2、在用express 指令產生專案結構
express myapp 其中的myapp是你的專案名稱
3、透過cd myapp 進入專案檔
透過npm install 初始化依賴模組
透過set DEBUG=myapp & npm start 啟動網頁伺服器
4、在瀏覽器中開啟 http://localhost:3000/ 網址就可以看到這個應用了。
預設用的模版引擎是jade，專案裡也已經配置了這個模版。
四、介紹express 生成器的項目
1、myapp專案的機構如下：
2、package.json 這個可以說是模組管理包，專案資訊和模組的版本號，其實你會發現在專案模組初始化的時候就是由這裡的配置去尋找產生的。
3、app.js 是專案的啟動文件，可以說是專案的核心。主要寫一些公共的功能。
4、bin 文件下有個無後綴的www文件，這是專案的入口文件，設定web服務埠和一些監聽事件。
5、node_modules是專案的依賴的檔案模組，之後導入的套件也會被放在其中，例如連接資料庫的mongoose模組，後面會詳細講。
6、public 是專案的靜態資源檔案集，很容易看出圖片、css檔案、js檔案都放在這裡。
7、routes 是專案的路由模組，其中已經預設了index.js和user.js檔。這裡其實也包括一般後台語言的控制器內容，當然在大的專案上是可以分開的。
8、views是專案的模版文件，是jade模版引擎，這個模版很簡潔，但是坑也比較多，比如對空格的要求都非常嚴格，多一個少一個空格都會報錯的，曾經踩過很多坑，其實它的性能也不是很高還不如用ejs。
五、安裝mongoDB
1.同樣在官網(http://www.mongodb.org/downloads)直接下載msi檔案
2、簡單的下一步進行安裝，有默認的就讓其默認，有選擇的就全選了
3、然後配置環境變量，和node的一樣不再累述，不過可以放中圖，哈哈哈……
4.接下來是啟動mongoDB服務
5、透過指令：mongod --dbpath f:MongoDBdata 其中 f:MongoDBdata是檔案存放路徑，看到下列資訊說明成功了
6、MongoDB監聽的是27017端口，同時打開瀏覽器輸入http://127.0.0.1:27017，則會看到以下提示：
It looks like you are trying to access MongoDB over HTTP on the native driver port.
7、然後，再開啟一個cmd，輸入mongo指令連結資料庫，出現以下提示：
2015-05-02T17:10:19.467+0800 I CONTROL Hotfix KB2731284 or later update is not shelllled, will zero-out data files M shell.
8.這樣windows環境下的monogDB就安裝成功了。
補充：
9.如果你嫌每次用指令打開服務麻煩的話，可以寫成批次文件，就是新建一個後綴.bat的文件，寫上如下程式碼：
start mongod --dbpath F:MongoDBdata
10.當然了，你也可以將MongoDB以服務的方式啟動，不過我覺得在學習的過程中用處不大，小伙伴們可以自己嘗試一下，如果有需要的話，我在後面會補上。
11.如果覺得命令列不好用，推薦一個有圖形化介面的軟體：MongoVUE，就和navicat差不多，它有免費版的，就是功能少點，但學習過程中完全足夠了
六、node專案使用monogDB
1、導入monogDB連接模組，express 官方介紹的是mongoskin模組，這個我就不說了，這裡介紹透過mongoose安裝
2、在myapp專案下執行指令 npm install mongoose -save 安裝儲存到node_modules，也可以在package.json中設定"mongoose": "^4.4.12",然後指令npm install 安裝。
3、在app.js檔
a、導入mongoose模組：
var mongoose = require('mongoose');
b、建立資料庫連線
mongoose.connect('mongodb://localhost/myDB') //連接本機資料庫
4、在專案根目錄下新建資料夾schemas，這個是資料集模組，在模組下新建users.js檔案
var mongoose = require('mongoose');
//申明一个mongoons对象
var UsersSchema = new mongoose.Schema({
name: String,
paw: String,
meta: {
createAt: {
type: Date,
default: Date.now()
},
updateAt: {
type: Date,
default: Date.now()
}
}
})
//每次执行都会调用,时间更新操作
UsersSchema.pre('save', function(next) {
if(this.isNew) {
this.meta.createAt = this.meta.updateAt = Date.now();
}else {
this.meta.updateAt = Date.now();
}
next();
})
//查询的静态方法
UsersSchema.statics = {
fetch: function(cb) { //查询所有数据
return this
.find()
.sort('meta.updateAt') //排序
.exec(cb) //回调
},
findById: function(id, cb) { //根据id查询单条数据
return this
.findOne({_id: id})
.exec(cb)
}
}
//暴露出去的方法
module.exports = UsersSchema
登入後複製
5、在根目錄新增modules文件，這個是資料模型模組，在模組下新增users.js檔案
var mongoose = require('mongoose')
var UsersSchema = require('../schemas/users') //拿到导出的数据集模块
var Users = mongoose.model('Users', UsersSchema) // 编译生成Movie 模型
module.exports = Users登入後複製
6、在routes檔案中的users.js檔案中加入路由控制器程式碼
var express = require('express');
var mongoose = require('mongoose');//导入mongoose模块
var Users = require('../models/users');//导入模型数据模块
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//查询所有用户数据
router.get('/users', function(req, res, next) {
Users.fetch(function(err, users) {
if(err) {
console.log(err);
}
res.render('users',{title: '用户列表', users: users}) //这里也可以json的格式直接返回数据res.json({data: users});
})
})
module.exports = router;
登入後複製
7、在views檔案下新增users.jade
extends layout
block content
h1= title //jade取值方式
ul
each user in users //jade模版的遍历方式
li
h4 #{user.name}
span #{user.paw}
登入後複製
8、最後在瀏覽器中開啟網址：
http://localhost:3000/users/users，查看效果。到這裡一個從資料庫到前端展現的專案就完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助。
