Your SlideShare is downloading. ×
0
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Node.js從無到有 基本課程

2,968

Published on

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,968
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
76
Comments
0
Likes
21
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Node.js從無到有 MiCloud Team Simon https://sites.google.com/a/mitac.com.tw/training/
  • 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. Objective ● 簡介Node.js ● 從安裝開始 ● 第一個Node.js程式 ● 基礎介紹 ● NPM(Node.js Package Management) ● Node.js的MVC - Express + EJS
  • 4. Node.js簡介
  • 5. 一鍵安裝 http://nodejs.org/download/
  • 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. ● 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. 檢視是否安裝成功 ● node -v ● npm -v ● which node (for linux) # node > console.log(‘Hello Word’); Hello Word > Node.js直譯模式
  • 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. Lab 1 - Hello World app ● 建立一個Hello World網站
  • 11. 基礎介紹 ● 基礎語法介紹 ● 基本模組介紹 ● JSON
  • 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. 模組的使用 載入模組 ● var fs = require(‘fs’); ● var mylib = require(‘./mylib’); 發佈模組 ● exports.fn = function(...){...}
  • 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. 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. child_process.exec var exec = require('child_process').exec; /** * 透過exec執行”command”,並於callback中接收回傳結果 */ child = exec("command", function (error, stdout, stderr) { … } );
  • 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. Node.js的物件 - JSON
  • 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. Lab 2 - Lightware HTTP Server ● 透過fs模組讀取某個目錄底下的文件,並提供 給http模組做呈現
  • 21. NPM ● 基本操作 ● 好用的模組工具
  • 22. 模組的安裝 - NPM 搜尋 ● npm search [模組名稱] 安裝 ● npm install [模組全名] [-g] [--save] ● npm install [模組全名]@[版本] 詳細檢視 ● npm show [模組全名] 刪除 ● npm remove [模組全名] [-g]
  • 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. 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. 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. express 基本資訊 ● https://github.com/visionmedia/express ● http://expressjs.com 安裝 ● npm install express -g 操作 ● express -e -s [project name] ● cd [project name] && npm install
  • 27. Node.js MVC - ExpressJS ● Express基本結構 ● EJS ● EJS-Partial
  • 28. Express基本結構 專案定義檔,包含模組相依 程式啟動點,包含route設定 預設靜態資源位置,可存放 html, js, image, css... route相關設定,存放從app.js模組化出來 的routes views相關設定,存放ejs檔案,為view層顯 示相關的檔案
  • 29. 基本資訊 ● Github: https://github.com/visionmedia/ejs 優點: ● 採用html語法作為基礎 ● 結合express-partials可以提供樣板功能 操作: ● app.js ● views/index.ejs ● routes/index.js EJS模組
  • 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. EJS - index.ejs # views/index.ejs <%= title %> Welcome to <%= title %> 使用<%=...%>將後方title參數值做呈現 <% if(title == ‘express’){ %> Default title: <%- title %> <% } %> 使用<%...%>內嵌Node.js運算語法 使用<%-...%>將title值帶入 (與<%=..%>不同的是,此處帶入的 值將不 會做html標籤跳脫)
  • 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. Lab 3 - Express + MySQL的應用 ● 建立Express+Ejs網站,使用jetstrap樣板 ● 連線MySQL實作用戶資料的新、刪、改、查
  • 34. 自建npm模組 ● 基本設定 ● 發佈
  • 35. 自建NPM模組 ● Got your npm account: https://npmjs. org/signup ● Prepare: ○ package.json ○ module dependency and you implements
  • 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. Lab 4 - 建立自己的Hello World模組 ● 申請NPM帳戶 ● 寫個Hello World模組 ● 發佈到NPM
  • 38. 更多Node.js模組介紹 http://opennodes.arecord.us 按 個 讚 吧 ~
  • 39. END - Q&A

×