快速入坑 node.js
超強全端開發神器!
About Me
Lorex L. Yang(普羅)
joe50613@gmail.com
• 黑丟,我就是那隻普羅 <3
• 萬年高中生一枚XD
• 興趣是玩電腦跟養雞養伺服器
個人經歷
哥只是個徘徊在新手村的 NPC
高雄市公車到站時間 & 誤點紀錄
環境監控系統
車載式救護車道路預警系統
經歷
• Lorex’s Sour Flog 工程濕的酸筆記 站長
• SITA 學生電腦與資訊技術交流聯盟 理事長
• SintaDesign 學生資訊社群 副社長
• 徘徊於資訊界新手村的正太控NPC
專長 & 興趣
• 「養雞」
• 伺服器架設
• 網管相關技術
• Arduino & RPi 程式開發
• C & C++、C#、VB.NET、node.js
• 略懂 Python、Ruby、PHP
• 養小正太
如何寫 node.js
對不起,放錯圖了……
免責聲明
什麼?這年頭演講還要擔心會不會變成消波塊?
歡迎發問、回答
ლ(◉◞౪◟◉ )ლ
安安,雖然講的很雷,但多少請給我點互動 ❤❤❤
這次要介紹的是
新手無痛上…(?)
新手無痛上手 node.js (O)
But 講者不是程設專家
就只是略懂略懂的路人
<(_ _)>
因為等等會有一些 Live Demo
不小心 NG 的話就別笑我惹QQ
真的想笑的話,請小聲點 QQ
聽完回家你也不一定能馬上開發
出成熟的網站(靠杯)
如果喜歡這個 Slide
歡迎找我索取
記得餵普羅吃精靈乾糧 OU<
正片開始
咳,各位可以先趴下去睡了 (無誤)
WTF is Node.js
• A script language
• A dynamic programming language
• “JavaScript on the server”
• Node.js is “NOT” a web framework!
等等!
JavaScript on the server ???
你是說那個醜不拉機的東西?
奇怪的運作原理
語法設計差
效能悲劇
那不是複製貼上就會寫了嗎 ˊ_>ˋ
安安還記得那個會跟著你游標跑的 div 嗎?XD
ㄎㄎ,人家早進化惹
鄧__華都可以把到正咩
Node.js
V8 + APIs
從此征服網站設計三大洲
前端、後端、雲端
Why Node.js
• Easy to learn
• Super duper FAST
• Open source
• Cross platform
• Lots of modules
So this is Node.js
概觀
直接看程式碼最快XD
Javascript
• 我們熟悉的 JS 事實上是 ECMAScript + Host Environment
• Host Environment
• 就好像是工作間,不同工作間提供不同工具給你
• 在 Browser 上就是那些 DOM 物件
• 在 Node.js 上就是 Node.js API,一堆內建的 modules
Node Modules
• 函式庫?套件?模組?類別(class)?
• 一個 .js 檔就能構成一個 module
• 一個 module 就能成一支程式
• 較複雜的程式需要許多 module 完成
Module 架構解析
Example I
Require Section
Local Section
Example II
Local Section
Export Section
lorex_as_mod.js
Example III
use_lorex.js
Require Section
Local Section
Hello World!
安裝 Node.js
• Windows & Mac OS X
• 下載安裝包:https://nodejs.org/
• 執行安裝包進行安裝
• Linux
• 下載安裝包:https://nodejs.org/
• 解壓縮
• ./configure
• make & make install
Hello World!
• 建立 HelloWorld.js
• node HelloWorld.js
• 執行結果
動手自幹 HTTP Server
打開你的瀏覽器
然後輸入 http://127.0.0.1:8888
神奇的事情發生惹QUQ
來分析一下程式碼
引入 HTTP 核心模組
關於 HTTP module
• HTTP module 是 Node.js 的 core module 之一
• 提供各項 HTTP Server / Client 的操作
• API Reference:https://nodejs.org/api/http.html
創建一個 HTTP Server
http.createServer()
創建一個 HTTP Server
可是,後面那串洗殺小?
隆重介紹
Callback
一個讓人又愛又恨的婊子
Async vs. Sync
假設今天你與粉絲巧遇
不小心咻一下滑進摩鐵
Sync
• 讀國際禮儀,直到整本滾瓜爛熟
• 讓嘴巴開始麻,直到整張嘴都麻
掉為止
• 開始擁抱,直到完全感受到溫暖
Async
• 開始讀國際禮儀(讀完了,就懂了!)
• 嘴巴麻掉(麻掉了,就可以 KISS 了!)
• 擁抱(感受到溫暖,就可以上了!)
所有事情一起做
做完再來回報成果
不用一直等上一條指令跑完
最後啟動伺服器並監聽 Port 8888
有沒有比上阿帕契還簡單!
可是睿凡,這樣寫感覺好慢QQ
NPM & Modules
使用 Framework 可以讓你更快
一個人幹不出來
那就大家一起幹吧 ❤
Node Package Manager (NPM)
• Node 套件管理程式
• 155,000+ modules
• 輕鬆打包自己的 module
• npm init
• 安裝好的模組會放在 ./node_modules
Using NPM
• 安裝新模組
• npm install <module>
• 尋找模組
• npm search <string>
• 列出當前使用的模組(以及相依性關係)
• npm list
• 查看模組詳細資訊
• npm info <module>
Express
• 一個 Node.js 底下的 Framework
• MVC Framework
• rendering, routing, REST controls.
• 容易上手
安裝 Express
npm install express@3.4.8
把剛剛的東西稍微變化一下
Configure
Routing
Load Express
Module
但是
HTML 還是一樣長長又臭臭 der
身為新世代的工程濕
一定要有三大美德
懶惰、傲慢、不耐煩 (o)
Jade
• HTML 模板系統
• 幫你產生 HTML Code
• 支援巨集功能
• 簡單、好學!
• 可以少打很多字 OU<
HTML vs. Jade
安裝 Jade
npm install jade
在 express 啟用模板系統
基本 Jade 範例
新增一條 route
也可以丟參數
什麼?網站太醜了?
自己上 Bootstrap 阿XD
http://getbootstrap.com/
模板系統的進階玩法
Node.js x Express x Jade x Bootstrap
先建立好 Bootstrap Template…
把該切割的都切割好…
把剛剛的頁面套用一下 Template
十分鐘速成!!!
BEFORE AFTER
Lorex(普羅)
Q&A Time
Lorex.lionfree.net
joe50613@gmail.com

快速入坑 Node.js - 0613 SITCON 雲林定期聚