Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node.js從無到有 基本課程

21,845 views

Published on

Published in: Technology
  • Be the first to comment

Node.js從無到有 基本課程

  1. 1. Node.js從無到有 MiCloud Team Simon https://sites.google.com/a/mitac.com.tw/training/
  2. 2. Prepare Node.js: http://nodejs.org Github: https://githib.com IDE ● vi / vim ● Sublime text: http://www.sublimetext.com/ ● Eclipse based IDE: ○ Apatana: http://www.aptana.com/ ○ Titanium: http://www.appcelerator.com/platform/titanium- studio/ ● Cloud IDE: ○ cloud9: https://c9.io
  3. 3. Objective ● 簡介Node.js ● 從安裝開始 ● 第一個Node.js程式 ● 基礎介紹 ● NPM(Node.js Package Management) ● Node.js的MVC - Express + EJS
  4. 4. Node.js簡介
  5. 5. 一鍵安裝 http://nodejs.org/download/
  6. 6. 進階安裝 ● Download source code ● Install tar -zxf node-vx.x.x.tar.gz cd node-vx.x.x ./configure --prefix=/opt/node make sudo make install
  7. 7. ● Github: ● Installation: curl https://raw.github.com/creationix/nvm/master/install.sh | sh nvm install 0.10 ● Switch Node.js version: nvm use 0.10 NVM安裝 參考:http://opennodes.arecord.us/md/BasicNodeJS.md
  8. 8. 檢視是否安裝成功 ● node -v ● npm -v ● which node (for linux) # node > console.log(‘Hello Word’); Hello Word > Node.js直譯模式
  9. 9. 第一個Node.js程式 var http = require('http'); /** * 透過http模組啟動web server服務 */ http.createServer(function (req, res) { //設定回應為text文件,並回應Hello World res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(1337, '127.0.0.1'); //設定服務聽取127.0.0.1位置的1337 port
  10. 10. Lab 1 - Hello World app ● 建立一個Hello World網站
  11. 11. 基礎介紹 ● 基礎語法介紹 ● 基本模組介紹 ● JSON
  12. 12. 基礎語法 ● 語法使用上同JavaScript ● 差別 - Node.js是Server Side程式語言 ● Assertion Testing ● Buffer ● C/C++ Addons ● Child Processes ● Cluster ● Console ● Crypto ● Debugger ● DNS ● Domain ● Events ● File System ● Globals ● HTTP ● HTTPS ● Modules ● Net ● OS ● Path ● Process ● Punycode ● Query Strings ● Readline ● REPL ● Stream ● String Decoder ● Timers ● TLS/SSL ● TTY ● UDP/Datagram ● URL ● Utilities ● VM ● ZLIB
  13. 13. 模組的使用 載入模組 ● var fs = require(‘fs’); ● var mylib = require(‘./mylib’); 發佈模組 ● exports.fn = function(...){...}
  14. 14. Node.js與環境變數 /* From: http://opennodes.arecord.us/md/NodeJSEnv.md */ var param = ''; /** * 關於指令列的接入參數,可以透過process.argv這個變數來讀取 * 而process.argv[0] = node這個指令, * process.argv[1] = 要執行的node.js程式檔名 * 從argv[2]之後的才開始是讀入的參數 */ if ( process.argv[2] ) param = process.argv[2]; if(param != '') console.log(param); else console.log('No input param');
  15. 15. fs module ● var fs = require(‘fs’) ● fs.readFile(‘path’, callback) ● fs.readFileSync(‘path’) var fs = require('fs') /** * readdirSync function提供同步的資料夾列表, * 回傳值為一個file的陣列 */ var files = fs.readdirSync('.'); for ( i in files ) { console.log(files[i]); }
  16. 16. child_process.exec var exec = require('child_process').exec; /** * 透過exec執行”command”,並於callback中接收回傳結果 */ child = exec("command", function (error, stdout, stderr) { … } );
  17. 17. socket var net = require('net'); var client = new net.Socket(); //使用port與host來設定socket物件 client.connect(PORT, HOST, function() { console.log('CONNECTED TO: ' + HOST + ':' + PORT); client.write('I am Chuck Norris!'); }); //接收到data的處理 client.on('data', function(data) { console.log('DATA: ' + data); client.destroy(); });
  18. 18. Node.js的物件 - JSON
  19. 19. 初始化 ● var json = {}; ● var json = { "key" : "value" }; 賦值 ● json.key = 'value'; ● json['key'] = 'value'; ● json.fn = function(...) {...} 取值 ● json.key ● json[‘key’] 刪除屬性 ● delete json.key JSON的操作
  20. 20. Lab 2 - Lightware HTTP Server ● 透過fs模組讀取某個目錄底下的文件,並提供 給http模組做呈現
  21. 21. NPM ● 基本操作 ● 好用的模組工具
  22. 22. 模組的安裝 - NPM 搜尋 ● npm search [模組名稱] 安裝 ● npm install [模組全名] [-g] [--save] ● npm install [模組全名]@[版本] 詳細檢視 ● npm show [模組全名] 刪除 ● npm remove [模組全名] [-g]
  23. 23. mysql module 基本資訊 ● https://github.com/felixge/node-mysql 安裝 ● npm install mysql 操作 ● var mysql = new require('mysql'), ● db = mysql.createConnection({....}); ● db.query(sql, condition, function(err, rows, fields){...})
  24. 24. forever module 基本資訊 ● http://github.com/nodejitsu/forever.git 安裝 ● npm install forever -g 操作 ● forever start [path to executable js] ● forever stop [path to executable js] ● forever restart [path to executable js] ● forever list
  25. 25. underscore.js 基本資訊 ● Github: https://github.com/documentcloud/underscore.git ● 官網:http://underscorejs.org/ 安裝 ● npm install underscore 操作 ● var _ = require(‘underscore’) ● _.isEmpty(obj); ● _.pick(arr, [‘field1’, ‘field2’]); ● _.keys(obj)
  26. 26. express 基本資訊 ● https://github.com/visionmedia/express ● http://expressjs.com 安裝 ● npm install express -g 操作 ● express -e -s [project name] ● cd [project name] && npm install
  27. 27. Node.js MVC - ExpressJS ● Express基本結構 ● EJS ● EJS-Partial
  28. 28. Express基本結構 專案定義檔,包含模組相依 程式啟動點,包含route設定 預設靜態資源位置,可存放 html, js, image, css... route相關設定,存放從app.js模組化出來 的routes views相關設定,存放ejs檔案,為view層顯 示相關的檔案
  29. 29. 基本資訊 ● Github: https://github.com/visionmedia/ejs 優點: ● 採用html語法作為基礎 ● 結合express-partials可以提供樣板功能 操作: ● app.js ● views/index.ejs ● routes/index.js EJS模組
  30. 30. EJS - app.js, index.js # app.js ….(skip) app.set('view engine', 'ejs'); ….(skip) # routes/index.js exports.index = function(req, res){ //透過res.render設定導向的頁面與參數集合 res.render('index', { title: 'Express' }); }; ….(skip) 指定本專案使用ejs作為view engine routes中使用res.render()來指定要輸出的 頁面位置(在此為index),以及要帶過去的 參數集合(在此為{ title: 'Express' })
  31. 31. EJS - index.ejs # views/index.ejs <%= title %> Welcome to <%= title %> 使用<%=...%>將後方title參數值做呈現 <% if(title == ‘express’){ %> Default title: <%- title %> <% } %> 使用<%...%>內嵌Node.js運算語法 使用<%-...%>將title值帶入 (與<%=..%>不同的是,此處帶入的 值將不 會做html標籤跳脫)
  32. 32. EJS - express-partials模組 ● Github: https://github.com/publicclass/express-partials ● 安裝:npm install express-partial --save # app.js var express = require('express') , partials = require('express-partials') , app = express(); app.use(partials()); # views/index.ejs app.get('/test', function(req, res) { ... res.render('page_name', {layout: 'your_layout', obj: 'your objects...'}); });
  33. 33. Lab 3 - Express + MySQL的應用 ● 建立Express+Ejs網站,使用jetstrap樣板 ● 連線MySQL實作用戶資料的新、刪、改、查
  34. 34. 自建npm模組 ● 基本設定 ● 發佈
  35. 35. 自建NPM模組 ● Got your npm account: https://npmjs. org/signup ● Prepare: ○ package.json ○ module dependency and you implements
  36. 36. $ mkdir node_modules/mymodule $ cd node_modules/mymodule $ vi package.json $ vi index.js $ npm publish 發佈NPM模組 { "name": "application-name", "version": "0.0.1", "main":"index", "dependencies": { "nodeutil": "0.0.27" }} var exports = module.exports; exports.test = function(){ …. } var mymodule = require(‘mymodule’); mymodule.test(); use
  37. 37. Lab 4 - 建立自己的Hello World模組 ● 申請NPM帳戶 ● 寫個Hello World模組 ● 發佈到NPM
  38. 38. 更多Node.js模組介紹 http://opennodes.arecord.us 按 個 讚 吧 ~
  39. 39. END - Q&A

×