課程來(lái)源:https://www.shiyanlou.com/courses/393【@實(shí)驗(yàn)樓】
第1節(jié) 服務(wù)器的請(qǐng)求和響應(yīng)
一、開(kāi)發(fā)準(zhǔn)備
二、實(shí)驗(yàn)步驟
2.1 Hello World
server.js
運(yùn)行
結(jié)果
2.2 代碼模塊化
server.js 重構(gòu)
server.js 封裝成一個(gè)模塊
index.js
運(yùn)行
結(jié)果
2.3 實(shí)現(xiàn)路由
2.3.1 獲取URL
server.js
運(yùn)行及結(jié)果
url == /login
url == /upload
2.3.2 編寫(xiě) router.js
2.3.3 整合路由和服務(wù)器
server.js
index.js
運(yùn)行及結(jié)果
運(yùn)行及結(jié)果
2.4 事件處理
2.4.1 打通路
requestHandlers.js
index.js
server.js
router.js
2.4.2 完善
requestHandlers.js
router.js
server.js
運(yùn)行及結(jié)果
url == /start
url == /upload
url == /foo
第2節(jié) 解決服務(wù)器的阻塞操作
一、阻塞操作
修改 requestHandlers.js 的 start()
1.1 先訪問(wèn) /upload,再訪問(wèn) /start
運(yùn)行及結(jié)果
- /upload 馬上返回了
- /start 等待了10秒才返回
1.2 在訪問(wèn) /start 的時(shí)候,馬上打開(kāi)另外一個(gè)tab來(lái)訪問(wèn) /upload
- /upload 也出現(xiàn)了延遲十秒的
二、解決阻塞操作
修改 requestHandlers.js 的 start
運(yùn)行及結(jié)果
說(shuō)明exec起作用了
之前我們都是直接將這些處理響應(yīng)的代碼放到server.js中的,而為了解決操作阻塞,我們將這些響應(yīng)的代碼放到了exec的回調(diào)函數(shù)了,這樣就不會(huì)影響到upload方法了
修改 server.js 的 start 的 onRequest
router.js
requestHandlers.js
運(yùn)行及結(jié)果
瀏覽器端運(yùn)行及結(jié)果
當(dāng)請(qǐng)求http://localhost:8888/start的時(shí)候,會(huì)花10秒鐘的時(shí)間才載入,而當(dāng)請(qǐng)求http://localhost:8888/upload的時(shí)候,會(huì)立即響應(yīng),縱然這個(gè)時(shí)候/start響應(yīng)還在處理中。
第3節(jié) 處理表單輸入
一、處理表單
修改 requestHandlers.js 的 start
運(yùn)行及結(jié)果
接下來(lái)實(shí)現(xiàn):當(dāng)用戶提交表單時(shí),觸發(fā)/upload請(qǐng)求處理程序處理POST請(qǐng)求。
修改 server.js 的 start 的 onRequest
修改 router.js
i修改 requestHandlers.js 的 upload
運(yùn)行及結(jié)果
/start 輸入 shiyanlou,點(diǎn) Submit 按鈕
自動(dòng)跳轉(zhuǎn)到 /upload
二、圖片處理
requestHandlers.js 增加 /show
在 index.js 注冊(cè) /show
運(yùn)行及結(jié)果
瀏覽器結(jié)果
修改 requestHandlers.js 的 body
運(yùn)行及結(jié)果
修改 server.js 的 start 的 onRequest
修改 router.js
修改 requestHandlers.js 的 upload
運(yùn)行及結(jié)果
瀏覽選擇圖片,點(diǎn)擊 Upload File 上傳
自動(dòng)跳轉(zhuǎn)到 /upload
結(jié)束啦~~~~~~最后附上 keke 帥照!