一、寫在前面
人人都想成為全棧碼農,作為一個web前端開發人員,通往全棧的簡潔之路,貌似就是node.js了。前段時間學習了node.js,來談談新手如何快速的搭建自己的web服務,開啟全棧之路。
二、安裝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直接運行命令:
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 啟動web伺服器
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:\MongoDB\data 其中 f:\MongoDB\data是檔案存放路徑,看到如下資訊說明成功了
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 installed, will zero-out data files MongoDB shell version: 3.0.2 connecting to: test
8、這樣windows環境下的monogDB就安裝成功了。
補充:
9、如果你嫌每次用命令開啟服務麻煩的話,可以寫成批次檔,就是建立一個尾碼.bat的檔案,寫上如下代碼:
start mongod --dbpath F:\MongoDB\data
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 layoutblock content h1= title //jade取值方式 ul each user in users //jade模版的遍曆方式 li h4 #{user.name} span #{user.paw}
8、最後在瀏覽器中開啟網址:http://localhost:3000/users/users,查看效果。到這裡一個從資料庫到前端展現的項目就完成了。
以上就是本文的全部內容,希望對大家的學習有所協助。