您好,登錄后才能下訂單哦!
前言
本文介紹了如何用Node開發(fā)web程序,并通過一個todo list練習來介紹如何創(chuàng)建符合RESTful風格的API接口。
創(chuàng)建HTTP服務器
用Node創(chuàng)建HTTP服務器是非常方便的。
創(chuàng)建HTTP服務器要調用http.createServer()
函數(shù),它只有一個參數(shù),是個回調函數(shù),服務器每次收到HTTP請求后都會調用這個回調函數(shù)。這個回調會收到兩個參數(shù),請求和響應對象,通常簡寫為req和res:
var http = require('http') var server = http.createServer(function(req, res){ res.end('Hello World') }) server.listen(3000, '127.0.0.1')
運行上面的代碼,在瀏覽器中訪問http://localhost:3000。然后你應該能看到一個包含“Hello World.”的普通文本頁面。
服務器每收到一條HTTP請求,都會用新的req和res對象觸發(fā)
回調函數(shù)。
在觸發(fā)回調函數(shù)之前,Node會解析請求的HTTP頭,并將它們作為req對象的一部分提供給請求回調。但Node不會在回調函數(shù)被觸發(fā)之前開始對請求體的解析。這種做法跟某些服務端框架不同,比如PHP就是在程序邏輯運行前就把請求頭和請求體都解析出來了。
Node不會自動往客戶端寫任何響應。在調用完請求回調函數(shù)之后,就要由你負責用res.end()方法結束響應了(見下圖)。這樣在結束響應之前,你可以在請求的生命期內運行任何你想運行的異步邏輯。如果你沒能結束響應,請求會掛起,直到客戶端超時,或者它會一直處于打開狀態(tài)。
搭建HTTP服務器僅僅是個開始。接下來我們來看看如何設定響應狀態(tài)碼和響應頭中的字段,如何正確處理異常。
設置響應頭
可以用res.setHeader(field, value)來設置相應的響應頭,下面是代碼:
var http = require('http') var server = http.createServer(function(req, res){ var body = '<h2>Hello Node</h2>' res.setHeader('Content-Length', body.length) res.setHeader('Content-Type', 'text/html') res.end(body) }) server.listen(3000)
設置狀態(tài)碼
我們經常需要返回默認狀態(tài)碼200之外的HTTP狀態(tài)碼。比較常見的情況是當所請求的資源不存在時返回一個404 Not Found狀態(tài)碼。
這可以通過設定res.statusCode屬性
來實現(xiàn)。在程序響應期間可以隨時給這個屬性賦值,但必須在第一次調用res.write()或res.end()之前。
var http = require('http') var server = http.createServer(function(req, res) { var body = '<p>頁面丟失了</p>' res.setHeader('Content-Type', 'text/html;charset=utf-8') res.statusCode = 404 res.end(body) }) server.listen(3000, '127.0.0.1')
Node的策略是提供小而強的網(wǎng)絡API,不同于Rails或Django之類的框架。像會話這種高級概念以及HTTP cookies這樣的基礎組件都沒有包括在Node的內核之中。那些都要由第三方模塊提供。
構建 RESTful Web 服務
Roy Fielding博士在2000年提出了表征狀態(tài)轉移 (REST)。它是一種基于 HTTP 協(xié)議的網(wǎng)絡應用的接口風格。
依照規(guī)定,比如GET、POST、PUT和DELETE,分別與資源的獲取、創(chuàng)建、更新和刪除相對應。
HTTP 協(xié)議定義了以下8種標準的方法:
創(chuàng)建標準的REST服務需要實現(xiàn)四個HTTP謂詞。每個謂詞會覆蓋一個操作:
POST和GET請求
接下來,通過一個todo list練習來編寫RESTful風格的GET和POST接口。
需求分析
項目采用前后端分離,交互數(shù)據(jù)格式約定為json,前端添加的數(shù)據(jù)提交到服務器后,由服務器存入服務器內存中。前端界面如下:
首先,我們先編寫前端部分。
前端部分
前端采用vue.js作為框架,ajax請求采用axios庫。代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h2>Todo List</h2> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <input type="text" v-model="item"> <button @click="postApi">button</button> </div> <script> new Vue({ el: '#app', data: { items: [], item: '' }, created () { axios.get('http://localhost:3000/') .then(response => { this.items = response.data }) .catch(function (error) { console.log(error) }) }, methods: { postApi () { axios.post('http://localhost:3000/', { item: this.item }) .then(response => { this.items = response.data }) .catch(function (error) { console.log(error) }) } } }) </script> </body> </html>
后端部分
var http = require('http') var items = [] http.createServer(function(req, res) { // 設置cors跨域 res.setHeader('Access-Control-Allow-Origin', '*') res.setHeader('Access-Control-Allow-Headers', 'Content-Type') res.setHeader('Content-Type', 'application/json') switch (req.method) { // 設置了cors跨域 // post請求時,瀏覽器會先發(fā)一次options請求,如果請求通過,則繼續(xù)發(fā)送正式的post請求 case 'OPTIONS': res.statusCode = 200 res.end() break case 'GET': let data = JSON.stringify(items) res.write(data) res.end() break case 'POST': let item = '' req.on('data', function (chunk) { item += chunk }) req.on('end', function () { // 存入 item = JSON.parse(item) items.push(item.item) // 返回到客戶端 let data = JSON.stringify(items) res.write(data) res.end() }) break } }).listen(3000) console.log('http server is start...')
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。