一、寫在前面

  人人都想成為全棧碼農(nóng)，作為一個web前端開發(fā)人員，通往全棧的簡潔之路，貌似就是node.js了。前段時間學習了node.js，來談談新手如何快速的搭建自己的web服務，開啟全棧之路。

二、安裝node.js

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

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

三、使用express框架

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

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

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

  express myapp 其中的myapp是你的項目名稱

3、通過cd myapp 進入項目文件中

  通過npm install 初始化依賴模塊

  通過set DEBUG=myapp & npm start 啟動web服務器

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

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

四、介紹express 生成器的項目

1、myapp項目的機構(gòu)如下：

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

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

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

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

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

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

8、views是項目的模版文件，是jade模版引擎，這個模版很簡潔，但是坑也比較多，比如對空格的要求都非常嚴格，多一個少一個空格都會報錯的，曾經(jīng)踩過很多坑，其實它的性能也不是很高還不如用ejs呢。 

五、安裝mongoDB

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

2、簡單的下一步進行安裝，有默認的就讓其默認，有選擇的就全選了

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

4、接下來是啟動mongoDB服務

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

6、MongoDB監(jiān)聽的是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命令鏈接數(shù)據(jù)庫，出現(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就安裝成功了。

補充：

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

　　start mongod --dbpath F:\MongoDB\data

10、當然了，你也可以將MongoDB以服務的方式啟動，不過我覺得在學習的過程中用處不大，小伙伴們可以自己嘗試一下，如果有需要的話，我在后面會補上。

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

六、在node項目中使用monogDB

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

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

3、在app.js文件中

　a、導入mongoose模塊：  

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

mongoose.connect('mongodb://localhost/myDB') //連接本地數(shù)據(jù)庫
 4、在項目根目錄下新建文件夾schemas，這個是數(shù)據(jù)集模塊，在模塊下新建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()
  }
 }
})

//每次執(zhí)行都會調(diào)用,時間更新操作
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文件，這個是數(shù)據(jù)模型模塊，在模塊下新增users.js文件

 var mongoose = require('mongoose')
 var UsersSchema = require('../schemas/users') //拿到導出的數(shù)據(jù)集模塊
 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');//導入模型數(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的格式直接返回數(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，查看效果。到這里一個從數(shù)據(jù)庫到前端展現(xiàn)的項目就完成了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

最新評論