一、寫在前面

  人人都想成為全棧碼農(nóng)，作為一個(gè)web前端開發(fā)人員，通往全棧的簡(jiǎn)潔之路，貌似就是node.js了。前段時(shí)間學(xué)習(xí)了node.js，來談?wù)勑率秩绾慰焖俚拇罱ㄗ约旱膚eb服務(wù)，開啟全棧之路。

二、安裝node.js

  接觸過后端開發(fā)的人都知道，首先要安裝服務(wù)。作為新手，肯定是選擇最簡(jiǎn)單的可視化安裝了（傻瓜式下一步，其它的方式等熟悉相關(guān)操作后自然就會(huì)了的），通過官網(wǎng)http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi 下載電腦適配的安裝包（這個(gè)是windows的，買不起mac?。?，然后根據(jù)引導(dǎo)安裝就可以了，默認(rèn)安裝在C:\Program Files\nodejs文件下，并將該目錄添加進(jìn)PATH環(huán)境變量。具體做法，右擊”我的電腦“-”屬性“-“系統(tǒng)高級(jí)”-”高級(jí)“-”環(huán)境變量“-選擇“變量名：PATH”；“改變量值：在最后面添加【C:\Program Files\nodejs】（根據(jù)自己的安裝目錄而定）”。打開cmd直接運(yùn)行命令：

node -v   可以輸出當(dāng)前版本號(hào)。node文件里已經(jīng)集成了npm，之后使用npm install XXX 來安裝需要的插件或者模塊。 

三、使用express框架

  忙活了一陣，終于可用npm命令進(jìn)行初始化、安裝express框架，然后寫個(gè)hello world 爽一下了。為什么要選擇express框架了，當(dāng)然有它的特別之處，對(duì)新手來說最怕的就是麻煩還容易出錯(cuò)。express當(dāng)然為我們考慮到了，所以提供了快速生成器：express-generator

1、通過命令：npm install express-generator -g 安裝到全局

2、在用express 命令生成項(xiàng)目結(jié)構(gòu)

  express myapp 其中的myapp是你的項(xiàng)目名稱

3、通過cd myapp 進(jìn)入項(xiàng)目文件中

  通過npm install 初始化依賴模塊

  通過set DEBUG=myapp & npm start 啟動(dòng)web服務(wù)器

4、在瀏覽器中打開 http://localhost:3000/ 網(wǎng)址就可以看到這個(gè)應(yīng)用了。

 默認(rèn)情況下用的模版引擎是jade，項(xiàng)目里也已經(jīng)配置好了這個(gè)模版。 

四、介紹express 生成器的項(xiàng)目

1、myapp項(xiàng)目的機(jī)構(gòu)如下：

2、package.json 這個(gè)可以說是模塊管理包，項(xiàng)目信息和模塊的版本號(hào)，其實(shí)你會(huì)發(fā)現(xiàn)在項(xiàng)目模塊初始化的時(shí)候就是由這里的配置去查找生成的。

3、app.js 是項(xiàng)目的啟動(dòng)文件，可以說是項(xiàng)目的核心。主要寫一些公共的功能。

4、bin 文件下有個(gè)無后綴的www文件，這是項(xiàng)目的入口文件，配置web服務(wù)端口和一些監(jiān)聽事件。

5、node_modules是項(xiàng)目的依賴的的文件模塊，之后導(dǎo)入的包也會(huì)被放在其中，比如連接數(shù)據(jù)庫(kù)的mongoose模塊，后面會(huì)詳細(xì)講。

6、public 是項(xiàng)目的靜態(tài)資源文件集，很容易看出圖片、css文件、js文件都放在這里。

7、routes 是項(xiàng)目的路由模塊，其中已經(jīng)默認(rèn)了index.js和user.js文件。在這里其實(shí)也包括一般后臺(tái)語言中的控制器內(nèi)容，當(dāng)然在大的項(xiàng)目上是可以分離開來的。

8、views是項(xiàng)目的模版文件，是jade模版引擎，這個(gè)模版很簡(jiǎn)潔，但是坑也比較多，比如對(duì)空格的要求都非常嚴(yán)格，多一個(gè)少一個(gè)空格都會(huì)報(bào)錯(cuò)的，曾經(jīng)踩過很多坑，其實(shí)它的性能也不是很高還不如用ejs呢。 

五、安裝mongoDB

1、同樣在官網(wǎng)(http://www.mongodb.org/downloads)上直接下載msi文件

2、簡(jiǎn)單的下一步進(jìn)行安裝，有默認(rèn)的就讓其默認(rèn)，有選擇的就全選了

3、然后配置環(huán)境變量，和node的一樣不再累述，不過可以放中圖，哈哈哈……

4、接下來是啟動(dòng)mongoDB服務(wù)

5、通過命令：mongod --dbpath f:\MongoDB\data 其中 f:\MongoDB\data是文件存放路徑，看到如下信息說明成功了

6、MongoDB監(jiān)聽的是27017端口，同時(shí)打開瀏覽器輸入http://127.0.0.1:27017，則會(huì)看到如下提示：

　　It looks like you are trying to access MongoDB over HTTP on the native driver port.

7、然后，再打開一個(gè)cmd，輸入mongo命令鏈接數(shù)據(jù)庫(kù)，出現(xiàn)如下提示：

 　　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

8、這樣windows環(huán)境下的monogDB就安裝成功了。

補(bǔ)充：

9、如果你嫌每次用命令打開服務(wù)麻煩的話，可以寫成批處理文件，就是新建一個(gè)后綴.bat的文件，寫上如下代碼：

　　start mongod --dbpath F:\MongoDB\data

10、當(dāng)然了，你也可以將MongoDB以服務(wù)的方式啟動(dòng)，不過我覺得在學(xué)習(xí)的過程中用處不大，小伙伴們可以自己嘗試一下，如果有需要的話，我在后面會(huì)補(bǔ)上。

11、要是覺得命令行不好用，推薦一個(gè)帶圖形化界面的軟件：MongoVUE，就和navicat差不多，它有免費(fèi)版的，就是功能少點(diǎn)，但學(xué)習(xí)過程中完全足夠了

六、在node項(xiàng)目中使用monogDB

1、導(dǎo)入monogDB連接模塊，express 官方介紹的是mongoskin模塊，這個(gè)我就不說了，這里介紹通過mongoose安裝

2、在myapp項(xiàng)目下執(zhí)行命令 npm install mongoose -save 安裝保存到node_modules，也可以在package.json中配置"mongoose": "^4.4.12",然后命令npm install 安裝。

3、在app.js文件中

　a、導(dǎo)入mongoose模塊：  

var mongoose = require('mongoose');
  b、創(chuàng)建數(shù)據(jù)庫(kù)連接

mongoose.connect('mongodb://localhost/myDB') //連接本地?cái)?shù)據(jù)庫(kù)
 4、在項(xiàng)目根目錄下新建文件夾schemas，這個(gè)是數(shù)據(jù)集模塊，在模塊下新建users.js文件

var mongoose = require('mongoose');

//申明一個(gè)mongoons對(duì)象
var UsersSchema = new mongoose.Schema({
 name: String,
 paw: String,
 meta: { 
  createAt: {
   type: Date,
   default: Date.now()
  },
  updateAt: {
   type: Date,
   default: Date.now()
  }
 }
})

//每次執(zhí)行都會(huì)調(diào)用,時(shí)間更新操作
UsersSchema.pre('save', function(next) {
 if(this.isNew) {
  this.meta.createAt = this.meta.updateAt = Date.now();
 }else {
  this.meta.updateAt = Date.now();
 }

 next();
})

//查詢的靜態(tài)方法
UsersSchema.statics = {
 fetch: function(cb) { //查詢所有數(shù)據(jù)
  return this
   .find()
   .sort('meta.updateAt') //排序
   .exec(cb) //回調(diào)
 },
 findById: function(id, cb) { //根據(jù)id查詢單條數(shù)據(jù)
  return this
   .findOne({_id: id})   
   .exec(cb)
 }
}

//暴露出去的方法
module.exports = UsersSchema 

5、在根目錄新增modules文件，這個(gè)是數(shù)據(jù)模型模塊，在模塊下新增users.js文件

 var mongoose = require('mongoose')
 var UsersSchema = require('../schemas/users') //拿到導(dǎo)出的數(shù)據(jù)集模塊
 var Users = mongoose.model('Users', UsersSchema) // 編譯生成Movie 模型
 
 module.exports = Users

 6、在routes文件中的users.js文件中添加路由控制器代碼

var express = require('express');
var mongoose = require('mongoose');//導(dǎo)入mongoose模塊

var Users = require('../models/users');//導(dǎo)入模型數(shù)據(jù)模塊

var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
 res.send('respond with a resource');
});

//查詢所有用戶數(shù)據(jù)
router.get('/users', function(req, res, next) {
 Users.fetch(function(err, users) {
  if(err) {
   console.log(err);
  }  
  res.render('users',{title: '用戶列表', users: users}) //這里也可以json的格式直接返回?cái)?shù)據(jù)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、最后在瀏覽器中打開網(wǎng)址：http://localhost:3000/users/users，查看效果。到這里一個(gè)從數(shù)據(jù)庫(kù)到前端展現(xiàn)的項(xiàng)目就完成了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論