Embed Size (px)
Citation preview
快速入坑 node.js超強全端開發神器！
個人經歷哥只是個徘徊在新手村的 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.jsV8 + 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 IRequire 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
神奇的事情發生惹 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.
• 容易上手
安裝 Expressnpm install [email protected]
把剛剛的東西稍微變化一下
Configure
Routing
Load Express Module
但是HTML 還是一樣長長又臭臭
der
身為新世代的工程濕
一定要有三大美德
懶惰、傲慢、不耐煩 (o)
Jade
• HTML 模板系統
• 幫你產生 HTML Code
• 支援巨集功能
• 簡單、好學！
• 可以少打很多字 OU<
HTML vs. Jade
安裝 Jadenpm install jade
在 express 啟用模板系統
基本 Jade 範例
新增一條 route
也可以丟參數
什麼？網站太醜了？
自己上 Bootstrap 阿 XDhttp://getbootstrap.com/
模板系統的進階玩法Node.js x Express x Jade x Bootstrap
先建立好 Bootstrap Template…
把該切割的都切割好…
把剛剛的頁面套用一下 Template
十分鐘速成！！！
BEFORE AFTER
