Node.js 是一個基於Google Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。Node.js 的包管理器 npm,是全球最大的開源庫生態系統。css
能方便地搭建響應速度快、易於擴展的網絡應用,Node.js 使用事件驅動, 非阻塞I/O 模型而得以輕量和高效,很是適合在分佈式設備上運行的數據密集型的實時應用。html
官網:https://nodejs.org/en/
中文:https://cnodejs.org/ 、http://nodejs.cn/前端
API:http://nodeapi.ucdok.com/#/api/java
簡單說Node.js就是運行在服務器端的JavaScript,是如今流行的語言中能同時運行在前端與後臺的程序語言,你能夠把JavaScript想像成Java與C#。相關技術:node
數據庫:MongoDB,非關係型數據庫,NoSQL(Not only SQL)git
MVC框架:AngularJSweb
Web服務器:Express數據庫
模板引擎:jade、ejs、htmljs、swig、hogan.jsexpress
去官網下下載最新版本的Node.js一步一步按提示安裝便可,若是安裝失敗就手動安裝,將Node.js的安裝位置配置到環境變量的path中。
安裝完成後啓動命令行,測試:
若是不使用IDE開發項目效率較低,在不少主流的集成開發環境(IDE)中均可以安裝插件支持Node.js開發,如Eclipse,這裏咱們以HBuilder爲例:
啓動HBuilder->工具->插件安裝
安裝成功後就能夠新建Node.js項目了:
這裏選擇Hello World,新建好的項目以下:
hello-world-server.js文件就是一個簡單的web服務器,右鍵選擇「運行方式」->"Node Application"
控制檯提示「Server running at http://127.0.0.1:1337/」在瀏覽器查看的效果以下:
在上面的示例中,咱們是經過IDE完成編譯與運行的,其實手動運行也能夠,好比編寫一段代碼以下:
server.js
//依賴一個http模塊,至關於java中的import,與C#中的using var http = require('http'); //建立一個服務器對象 server = http.createServer(function (req, res) { //設置請求成功時響應頭部的MIME爲純文本 res.writeHeader(200, {"Content-Type": "text/plain"}); //向客戶端輸出字符 res.end("Hello World\n"); }); //讓服務器監聽本地8000端口開始運行 server.listen(8000,'127.0.0.1'); console.log("server is runing at 127.0.0.1:8000");
在node環境下解釋運行:
運行結果:
引入 required 模塊:咱們可使用 require 指令來載入 Node.js 模塊。
建立服務器:服務器能夠監聽客戶端的請求,相似於TomCat、IIS、Apache 、Nginx 等 HTTP 服務器。
接收請求與響應請求 服務器很容易建立,客戶端可使用瀏覽器或終端發送 HTTP 請求,服務器接收請求後返回響應數據。
第一行請求(require)Node.js 自帶的 http 模塊,而且把它賦值給 http 變量。
接下來咱們調用 http 模塊提供的函數: createServer 。這個函數會返回 一個對象,這個對象有一個叫作 listen 的方法,這個方法有一個數值參數, 指定這個 HTTP 服務器監聽的端口號。
NPM是隨同NodeJS一塊兒安裝的包管理工具,能解決NodeJS代碼部署上的不少問題,常見的使用場景有如下幾種:
a)、容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
b)、容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
c)、容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。
4.一、查看npm版本
因爲新版的nodejs已經集成了npm,因此以前npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。命令以下,出現版本提示表示安裝成功:
4.二、升級npm
若是你安裝的是舊版本的 npm,能夠很容易得經過 npm 命令來升級
npm install npm -g
npm install <Module Name> -參數
若是帶參數-g表示全局安裝,不然只是安裝到某個目錄下。
如下實例,咱們使用 npm 命令安裝經常使用的 Node.js web框架模塊 express
咱們可使用如下命令來卸載 Node.js 模塊。
npm uninstall <Module Name>
如先使用安裝指令安裝bootstrap:
npm install bootstrap
再使用卸載指令刪除模塊:
npm uninstall bootstrap
能夠到 /node_modules/ 目錄下查看包是否還存在
使用模塊列表命令能夠方便的看到當前項目中依賴的包:
npm ls
咱們可使用如下命令更新模塊:
npm update 模塊名稱
npm up -g 模塊名稱
npm search 模塊名稱
4.八、NPM 經常使用命令
除了本章介紹的部分外,NPM還提供了不少功能,package.json裏也有不少其它有用的字段。
除了能夠在npmjs.org/doc/查看官方文檔外,這裏再介紹一些NPM經常使用命令。
NPM提供了不少命令,例如install和publish,使用npm help可查看全部命令。
使用npm help <command>可查看某條命令的詳細幫助,例如npm help install。
在package.json所在目錄下使用npm install . -g可先在本地安裝當前命令行程序,可用於發佈前的本地測試。
使用npm update <package>能夠把當前目錄下node_modules子目錄裏邊的對應模塊更新至最新版本。
使用npm update <package> -g能夠把全局安裝的對應命令行程序更新至最新版。
使用npm cache clear能夠清空NPM本地緩存,用於對付使用相同版本號發佈新版本代碼的人。
使用npm unpublish <package>@<version>能夠撤銷發佈本身發佈過的某個版本代碼。
由於npm的服務器在國外,在網絡狀態很差的狀況下引入一個模塊會由於網絡延遲而失敗,能夠更換成國內速度更快的鏡像服務器,這裏以使用淘寶 NPM 鏡像(http://npm.taobao.org/)爲例:
npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可使用 cnpm 命令來安裝模塊了:
$ cnpm install [name]
這是一個完整 npmjs.org 鏡像,你能夠用此代替官方版本(只讀),同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。
Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各類 Web 應用,和豐富的 HTTP 工具。
使用 Express 能夠快速地搭建一個完整功能的網站。使用Node.js做爲AngularJS開發Web服務器的最佳方式是使用Express模塊。
Express官網: http://expressjs.com/
Express4.x API:http://expressjs.com/zh-cn/4x/api.html
能夠設置中間件來響應 HTTP 請求。
定義了路由表用於執行不一樣的 HTTP 請求動做。
能夠經過向模板傳遞參數來動態渲染 HTML 頁面。
豐富的 HTTP 快捷方法和任意排列組合的 Connect 中間件,讓你建立健壯、友好的 API 變得既快速又簡單。
Express 不對 Node.js 已有的特性進行二次抽象,咱們只是在它之上擴展了 Web 應用所需的基本功能。
安裝 Express 並將其保存到依賴列表中:
npm install express --save
以上命令全局安裝express。也可安裝時指定安裝中間件。
body-parser - node.js 中間件,用於處理 JSON, Raw, Text 和 URL 編碼的數據。
cookie-parser - 這就是一個解析Cookie的工具。經過req.cookies能夠取到傳過來的cookie,並把它們轉成對象。
multer - node.js 中間件,用於處理 enctype="multipart/form-data"(設置表單的MIME編碼)的表單數據。
npminstallbody−parser−−save npm install cookie-parser --save
$ npm install multer --save
默認這些模塊都已經添加。
接下來咱們使用 Express 框架來輸出 "Hello World"。
如下實例中咱們引入了 express 模塊,並在客戶端發起請求後,響應 "Hello World" 字符串。
建立一個目錄,如Project,進入命令行:
使用npm install express 導入express模塊。
在目錄下建立hello.js文件,以下所示:
//引入express模塊 var express = require('express'); //建立一個app對象,相似一個web 應用(網站) var app = express(); //接受指定路徑的請求,指定回調函數 app.get('/', function (req, res){ res.send('Hello World'); }); //建立一個web服務器,能夠認爲就是web服務器對象 //監聽8081端口,當監聽成功時回調 var server = app.listen(8081, function () { var host = server.address().address; //地址 var port = server.address().port; //端口 console.log("應用實例,訪問地址爲 http://%s:%s", host, port); }); })
使用node執行js:
運行結果:
若是直接使用記事本效率會不高,nodeclipse插件能夠方便的建立一個Express項目,步驟以下:
建立好的項目以下:
app.js是網站:
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var index = require('./routes/index'); var users = require('./routes/users'); var app = express(); //指定視圖引擎爲ejs app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', index); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;
bin\www是web服務器:
#!/usr/bin/env node /** * 依賴模塊,導入 */ var app = require('../app'); var debug = require('debug')('nodejsexpress:server'); var http = require('http'); /** * 從上下文環境中得到監聽端口,若是空則3000 */ var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); /** * 建立Web服務器 */ var server = http.createServer(app); /** * 開始監聽 */ server.listen(port); server.on('error', onError); //指定發生錯誤時的事件 server.on('listening', onListening); //當監聽成功時的回調 /** * 規範化端口 */ function normalizePort(val) { var port = parseInt(val, 10); if (isNaN(port)) { // named pipe return val; } if (port >= 0) { // port number return port; } return false; } /** *錯誤事件監聽 */ function onError(error) { if (error.syscall !== 'listen') { throw error; } var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port; //錯誤處理 switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges'); process.exit(1); //結束程序 break; case 'EADDRINUSE': console.error(bind + ' is already in use'); process.exit(1); break; default: throw error; } } /** * 當用戶訪問服務器成功時的回調 */ function onListening() { var addr = server.address(); var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port; debug('Listening on ' + bind); }
routers/index.js路由,有點相似控制器或Servlet:
var express = require('express'); var router = express.Router(); /* 得到首頁 */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;
views/index.ejs首頁視圖:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body> </html>
在www上右鍵選擇「運行方式」->「Node Application」運行結果:
ejs是一個Express Web應用的模板引擎,在NodeJS開發中能夠選擇的模板引擎多是全部Web應用開發中範圍最廣的,如jade、ejs、htmljs、swig、hogan.js,但ejs是最容易上手的,與jsp,asp,php的原始模板引擎風格很像。
添加一個product.js路由:
var express = require('express'); var router = express.Router(); /* 產品 */ router.get('/', function(req, res, next) { var products=[]; products.push({name:"ZTE U880",price:899.8}); products.push({name:"HuWei 榮耀8",price:1899.8}); products.push({name:"iPhone 7 Plus 128G",price:5899.8}); //將product視圖與指定的對象渲染後輸出到客戶端 res.render('product', { title: '天狗商城', pdts:products}); }); module.exports = router;
在views目錄下添加product.ejs視圖,這裏是一個簡單的MVC:
<!DOCTYPE html> <html> <head> <title> <%= title %> </title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %> - 產品列表</h1> <table border="1" width="80%"> <tr> <th>序號</th> <th>名稱</th> <th>價格</th> </tr> <%pdts.forEach(function(pdt,index){%> <tr> <td> <%=index+1%> </td> <td> <%=pdt.name%> </td> <td> <%=pdt.price%> </td> </tr> <%});%> </table> <ul> <% for(var i=0; i<pdts.length; i++) {%> <li> <%=pdts[i].name%> </li> <% } %> </body> </html>
修改app,註冊定義好的模塊product:
var index = require('./routes/index'); var users = require('./routes/users'); var pdts = require('./routes/product'); var app = express(); //指定視圖引擎爲ejs app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', index); app.use('/users', users); app.use('/pdt', pdts);
運行結果:
這是一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫。能夠很是方便的操做json。
安裝:
npm i -g npm
npm i --save lodash
安裝時先用cd切換到當前項目下。
若是瀏覽器使用能夠直接引入:
<script src="lodash.js"></script>
後臺Node.js使用,能夠引入模塊:
//導入lodash模塊 var _= require('lodash'); var products=[]; products.push({name:"ZTE U880",price:899.8}); products.push({name:"HuWei 榮耀8",price:1899.8}); products.push({name:"iPhone 7 Plus 128G",price:5899.8}); //一、取出第一個元素 var obj1=_.first(products); console.log(obj1.name); //ZTE U880 //二、取出最後一個元素 var obj2=_.last(products); console.log(obj2.name); //iPhone 7 Plus 128G //三、指定查找條件返回符合條件的索引 var obj3=_.findIndex(products,function(obj){ return obj.price>=1000&&obj.name.indexOf("7")>0; }); console.log(obj3); //2 //四、指定查找條件返回查找到的對象 var obj4=_.find(products,function(obj){ return obj.price>=1000&&obj.name.indexOf("7")>0; }); console.log(obj4); //{ name: 'iPhone 7 Plus 128G', price: 5899.8 } //五、排序 var obj5=_.orderBy(products,["price","name"],["desc","asc"]); console.log(obj5); //[ { name: 'iPhone 7 Plus 128G', price: 5899.8 }, //{ name: 'HuWei 榮耀8', price: 1899.8 }, //{ name: 'ZTE U880', price: 899.8 } ] //六、查找價格爲1899.8的產品的key var obj6=_.findKey(products,{price:1899.8}); console.log(obj6); //1
API的使用很是簡單,但須要注意版本,能夠現查現用,API地址:https://lodash.com/docs/4.17.2
Checks route params (req.params), ex: /user/:id
127.0.0.1:3000/index,這種狀況下,咱們爲了獲得index,咱們能夠經過使用req.params獲得,經過這種方法咱們就能夠很好的處理Node中的路由處理問題,同時利用這點能夠很是方便的實現MVC模式;
//得到產品根據Id router.get('/:id/:category',function(request,res,next){ res.send(request.params.id+","+request.params.category); });
運行結果:
Checks query string params (req.query), ex: ?id=12
127.0.0.1:3000/index?id=12,這種狀況下,這種方式是獲取客戶端get方式傳遞過來的值,經過使用req.query.id就能夠得到,相似於PHP的get方法;
router.get('/:id',function(request,res,next){ res.send("name:"+request.query.name); });
運行結果:
在post請求中得到表單中的數據。
Checks urlencoded body params (req.body), ex: id=
127.0.0.1:300/index,而後post了一個id=2的值,這種方式是獲取客戶端post過來的數據,能夠經過req.body.id獲取,相似於PHP的post方法;
頁面:
代碼:
router.post('/add',function(request,res,next){ var entity={name:request.body.name,price:request.body.price}; products.push(entity); //將product視圖與指定的對象渲染後輸出到客戶端 res.render('product', { title: '天狗商城', pdts:products,msg:"添加成功"}); });
結果:
若是須要Node.js向外提供返回JSON的接口,Express也是很是方便的,可使用原來在瀏覽器中使用到的JSON對象,這是一個瀏覽器內置對象在服務能夠直接使用:
將對象序列化成字符:
//對象 var rose={"name":"Rose","weight":"65"}; //序列化成字符串 var str=JSON.stringify(rose); alert(str);
結果:
反序列化,將字符轉換成對象:
//將字符串轉換成JavaScript對象 var markStr='{"name":"mark","weight":"188"}'; var mark=JSON.parse(markStr); alert(mark.name+","+mark.weight);
結果:
Express已經封裝了一個json方法,直接調用該方法就能夠序列化對象:
/* 產品 */ router.get('/rest', function(req, res, next) { res.json(products); });
運行結果:
練習:完成一個圖書管理的功能,圖書包含(編號,名稱,做者,圖片,價格),實現:
a)、非AJAX的CRUD,使用Node.js+Express+ejs的動態技術。
b)、AJAX的CRUD,使用Node.js+Express+jQuery+HTML技術實現。
c)、使用RestFul風格的服務完成第個做業,get,post,delete,put請。
REST是英文Representational State Transfer的縮寫,中文稱之爲「表述性狀態轉移」
基於HTTP協議
是另外一種服務架構
傳遞是JSON、POX(Plain Old XML)而不是SOAP格式的數據
充分利用HTTP謂詞(Verb)
側重數據的傳輸,業務邏輯交給客戶端自行處理
REST是一種分佈式服務架構的風格約束,像Java、.Net(WCF、WebAPI)都有對該約束的實現,使URL變得更加有意義,更加簡潔明瞭,如:
http://www.zhangguo.com/products/1 get請求 表示得到全部產品的第1個
http://www.zhangguo.com/products/product post請求 表示添加一個產品
http://www.zhangguo.com/products/1/price get請求 表示得到第1個產品的價格
http://www.zhangguo.com/products/1 delete請求 刪除編號爲1的產品
REST設計須要遵循的原則
網絡上的全部事物都被抽象爲資源(resource);
每一個資源對應一個惟一的資源標識符(resource identifier);
經過通用的鏈接器接口(generic connector interface)對資源進行操做;
對資源的各類操做不會改變資源標識符;
全部的操做都是無狀態的(stateless)
謂詞
GET
表示查詢操做,至關於Retrieve、Select操做
POST
表示插入操做,至關於Create,Insert操做
PUT
表示修改操做,至關於Update操做
DELETE
表示刪除操做,至關於Delete操做
其它還有:
NodeJS+Express能夠很容易的實現REST
application/x-www-form-urlencoded
multipart/form-data
application/json
res.setHeader('Content-Type', 'application/json;charset=utf-8');
示例代碼cars.js:
var express = require('express'); var router = express.Router(); var _= require('lodash'); var cars=[]; cars.push({id:201701,name:"BMW",price:190,speed:"210km/h",color:"白色"}); cars.push({id:201702,name:"BYD",price:25,speed:"160km/h",color:"紅色"}); cars.push({id:201703,name:"Benz",price:300,speed:"215km/h",color:"藍色"}); cars.push({id:201704,name:"Honda",price:190,speed:"170km/h",color:"黑色"}); cars.push({id:201705,name:"QQ",price:130,speed:"210km/h",color:"白色"}); /* Get */ /*得到全部汽車*/ /*url /cars/*/ router.get('/', function(req, res, next) { res.json(cars); }); /*Get*/ /*得到汽車經過id*/ /*url:/cars/:id */ router.get('/:id', function(req, res, next) { //從路徑中映射參數,轉換成數字 var id=parseInt(req.params.id); var car=_.find(cars,{id:id}); res.json(car); }); /*Post*/ /*添加汽車*/ /*url:/cars/car */ router.post('/car', function(req, res, next) { var car=req.body; //從請求正文中得到json對象 car.id=_.last(cars).id+1; //將編號修改成最後一輛車的編號+1 cars.push(car); //將汽車對象添加到集合中 res.json(car); //將添加成功的車以json的形式返回 }); /*Put*/ /*修改汽車*/ /*url:/cars/car */ router.put('/car', function(req, res, next) { var car=req.body; //從請求正文中得到json對象 console.log(req.body); var index=_.findIndex(cars,{id:parseInt(car.id)}); //根據id得到車在集合中的下標 cars[index]=car; //替換原對象 //res.json(car); //將修改後的車以json的形式返回 res.send({status:"success", message:"更新成功!"}); }); /*Delete*/ /*刪除汽車*/ /*url:/cars/:id */ router.delete('/id/:id', function(req, res, next) { //得到url中的編號參數 var id=parseInt(req.params.id); var index=_.findIndex(cars,{id:id}); //根據id得到車在集合中的下標 cars.splice(index,1); //在cars數組中刪除下標從index開始的1條數據 res.send({status:"success", message:"刪除成功!"}); }); module.exports = router;
示例代碼app.js:
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var index = require('./routes/index'); var users = require('./routes/users'); var pdts = require('./routes/product'); var task = require('./routes/task'); var cars = require('./routes/cars'); var app = express(); //指定視圖引擎爲ejs app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', index); app.use('/users', users); app.use('/pdt', pdts); app.use("/task",task); app.use("/cars",cars); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;
/* Get */
/*得到全部汽車*/
/*url /cars/*/
/*Get*/
/*得到汽車經過id*/
/*url:/cars/:id */
/*Post*/
/*添加汽車*/
/*url:/cars/car */
參數中的json格式必定要使用標準格式,注意引號,注意Content-Type,默認的Content-Type類型是:application/x-www-form-urlencoded
/*Put*/
/*修改汽車*/
/*url:/cars/car */
/*Delete*/
/*刪除汽車*/
/*url:/cars/:id */