快速入坑 Node.js

快速入坑 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.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

打開你的瀏覽器然後輸入

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.

• 容易上手

安裝 Expressnpm install express@3.4.8

把剛剛的東西稍微變化一下

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

Lorex （普羅）

Q&A Time

Lorex.lionfree.net

joe50613@gmail.com