1、寫在前面css
人人都想成爲全棧碼農,做爲一個web前端開發人員,通往全棧的簡潔之路,貌似就是node.js了。前段時間學習了node.js,來談談新手如何快速的搭建本身的web服務,開啓全棧之路。html
2、安裝node.js前端
接觸事後端開發的人都知道,首先要安裝服務。做爲新手,確定是選擇最簡單的可視化安裝了(傻瓜式下一步,其它的方式等熟悉相關操做後天然就會了的),經過官網http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi 下載電腦適配的安裝包(這個是windows的,買不起mac啊),而後根據引導安裝就能夠了,默認安裝在C:\Program Files\nodejs文件下,並將該目錄添加進PATH環境變量。具體作法,右擊」個人電腦「-」屬性「-「系統高級」-」高級「-」環境變量「-選擇「變量名:PATH」;「改變量值:在最後面添加【C:\Program Files\nodejs】(根據本身的安裝目錄而定)」。打開cmd直接運行命令:vue
node -v 能夠輸出當前版本號。node文件裏已經集成了npm,以後使用npm install XXX 來安裝須要的插件或者模塊。node
3、使用express框架git
忙活了一陣,終於可用npm命令進行初始化、安裝express框架,而後寫個hello world 爽一下了。爲何要選擇express框架了,固然有它的特別之處,對新手來講最怕的就是麻煩還容易出錯。express固然爲咱們考慮到了,因此提供了快速生成器:express-generatorgithub
一、經過命令:npm install express-generator -g 安裝到全局
web
二、在用express 命令生成項目結構
mongodb
express myapp 其中的myapp是你的項目名稱
shell
三、經過cd
myapp 進入項目文件中
經過npm install 初始化依賴模塊
經過
set DEBUG=myapp & npm start 啓動web服務器
四、在瀏覽器中打開
http://localhost:3000/
網址就能夠看到這個應用了。
默認狀況下用的模版引擎是jade,項目裏也已經配置好了這個模版,看看jade的使用語法,https://segmentfault.com/a/1190000000357534 這個的文檔不錯。express官方網站http://www.expressjs.com.cn/
4、介紹express 生成器的項目
一、myapp項目的機構以下:
二、package.json 這個能夠說是模塊管理包,項目信息和模塊的版本號,其實你會發如今項目模塊初始化的時候就是由這裏的配置去查找生成的。
三、app.js 是項目的啓動文件,能夠說是項目的核心。主要寫一些公共的功能。
四、bin 文件下有個無後綴的www文件,這是項目的入口文件,配置web服務端口和一些監聽事件。
五、node_modules是項目的依賴的的文件模塊,以後導入的包也會被放在其中,好比鏈接數據庫的mongoose模塊,後面會詳細講。
六、public 是項目的靜態資源文件集,很容易看出圖片、css文件、js文件都放在這裏。
七、routes 是項目的路由模塊,其中已經默認了index.js和user.js文件。在這裏其實也包括通常後臺語言中的控制器內容,固然在大的項目上是能夠分離開來的。
八、views是項目的模版文件,是jade模版引擎,這個模版很簡潔,可是坑也比較多,好比對空格的要求都很是嚴格,多一個少一個空格都會報錯的,曾經踩過不少坑,其實它的性能也不是很高還不如用ejs呢。
5、安裝mongoDB
一、一樣在官網(http://www.mongodb.org/downloads)上直接下載msi文件
二、簡單的下一步進行安裝,有默認的就讓其默認,有選擇的就全選了
三、而後配置環境變量,和node的同樣再也不累述,不過能夠放中圖,哈哈哈……
四、接下來是啓動mongoDB服務
五、經過命令:mongod --dbpath f:\MongoDB\data 其中 f:\MongoDB\data是文件存放路徑,看到以下信息說明成功了
六、MongoDB監聽的是27017端口,同時打開瀏覽器輸入http://127.0.0.1:27017,則會看到以下提示:
It looks like you are trying to access MongoDB over HTTP on the native driver port.
七、而後,再打開一個cmd,輸入mongo命令連接數據庫,出現以下提示:
2015-05-02T17:10:19.467+0800 I CONTROL Hotfix KB2731284 or later update is not installed, will zero-out data files MongoDB shell version: 3.0.2 connecting to: test
八、這樣windows環境下的monogDB就安裝成功了。
補充:
九、若是你嫌每次用命令打開服務麻煩的話,能夠寫成批處理文件,就是新建一個後綴.bat的文件,寫上以下代碼:
start mongod --dbpath F:\MongoDB\data
十、固然了,你也能夠將MongoDB以服務的方式啓動,不過我以爲在學習的過程當中用處不大,小夥伴們能夠本身嘗試一下,若是有須要的話,我在後面會補上。
十一、要是以爲命令行很差用,推薦一個帶圖形化界面的軟件:MongoVUE,就和navicat差很少,它有免費版的,就是功能少點,但學習過程當中徹底足夠了
傳送門:http://www.mongovue.com/
可參考:安裝https://segmentfault.com/a/119000000274430六、語法http://www.cnblogs.com/xusir/archive/2012/12/24/2830957.html
6、在node項目中使用monogDB
一、導入monogDB鏈接模塊,express 官方介紹的是mongoskin模塊,這個我就不說了,這裏介紹經過mongoose安裝
二、在myapp項目下執行命令 npm install mongoose -save 安裝保存到node_modules,也能夠在package.json中配置"mongoose": "^4.4.12",而後命令npm install 安裝。https://github.com/Automattic/mongoose
三、在app.js文件中
a、導入mongoose模塊:
1 var mongoose = require('mongoose');
b、建立數據庫鏈接
mongoose.connect('mongodb://localhost/myDB') //鏈接本地數據庫
四、在項目根目錄下新建文件夾schemas,這個是數據集模塊,在模塊下新建users.js文件
1 var mongoose = require('mongoose'); 2 3 //申明一個mongoons對象 4 var UsersSchema = new mongoose.Schema({ 5 name: String, 6 paw: String, 7 meta: { 8 createAt: { 9 type: Date, 10 default: Date.now() 11 }, 12 updateAt: { 13 type: Date, 14 default: Date.now() 15 } 16 } 17 }) 18 19 //每次執行都會調用,時間更新操做 20 UsersSchema.pre('save', function(next) { 21 if(this.isNew) { 22 this.meta.createAt = this.meta.updateAt = Date.now(); 23 }else { 24 this.meta.updateAt = Date.now(); 25 } 26 27 next(); 28 }) 29 30 //查詢的靜態方法 31 UsersSchema.statics = { 32 fetch: function(cb) { //查詢全部數據 33 return this 34 .find() 35 .sort('meta.updateAt') //排序 36 .exec(cb) //回調 37 }, 38 findById: function(id, cb) { //根據id查詢單條數據 39 return this 40 .findOne({_id: id}) 41 .exec(cb) 42 } 43 } 44 45 //暴露出去的方法 46 module.exports = UsersSchema
五、在根目錄新增modules文件,這個是數據模型模塊,在模塊下新增users.js文件
1 var mongoose = require('mongoose') 2 var UsersSchema = require('../schemas/users') //拿到導出的數據集模塊 3 var Users = mongoose.model('Users', UsersSchema) // 編譯生成Movie 模型 4 5 module.exports = Users
六、在routes文件中的users.js文件中添加路由控制器代碼
1 var express = require('express'); 2 var mongoose = require('mongoose');//導入mongoose模塊 3 4 var Users = require('../models/users');//導入模型數據模塊 5 6 var router = express.Router(); 7 8 /* GET users listing. */ 9 router.get('/', function(req, res, next) { 10 res.send('respond with a resource'); 11 }); 12 13 //查詢全部用戶數據 14 router.get('/users', function(req, res, next) { 15 Users.fetch(function(err, users) { 16 if(err) { 17 console.log(err); 18 } 19 res.render('users',{title: '用戶列表', users: users}) //這裏也能夠json的格式直接返回數據res.json({data: users}); 20 }) 21 }) 22 module.exports = router;
七、在views文件下新增users.jade
1 extends layout 2 3 block content 4 h1= title //jade取值方式 5 ul 6 each user in users //jade模版的遍歷方式 7 li 8 h4 #{user.name} 9 span #{user.paw}
八、最後在瀏覽器中打開網址:http://localhost:3000/users/users,查看效果。到這裏一個從數據庫到前端展示的項目就完成了。
7、結語
做爲一名技術人員,養成總結、共享的習慣都是提高本身,幫助他人的美事。本期的源碼待我整理以後會放到github上,想先要的的能夠私信我。node模塊此後會繼續更新,包括mongoDB的模塊、 異步操做模塊、bootstrap集成模塊、angularJS集成模塊,敬請期待……