前言
本文介紹了如何用Node開發web程序，并通過一個todo list練習來介紹如何創建符合RESTful風格的API接口。
創建HTTP服務器
用Node創建HTTP服務器是非常方便的。
創建HTTP服務器要調用http.createServer()函數，它只有一個參數，是個回調函數，服務器每次收到HTTP請求后都會調用這個回調函數。這個回調會收到兩個參數，請求和響應對象，通常簡寫為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對象觸發回調函數。
在觸發回調函數之前，Node會解析請求的HTTP頭，并將它們作為req對象的一部分提供給請求回調。但Node不會在回調函數被觸發之前開始對請求體的解析。這種做法跟某些服務端框架不同，比如PHP就是在程序邏輯運行前就把請求頭和請求體都解析出來了。
Node不會自動往客戶端寫任何響應。在調用完請求回調函數之后，就要由你負責用res.end()方法結束響應了（見下圖）。這樣在結束響應之前，你可以在請求的生命期內運行任何你想運行的異步邏輯。如果你沒能結束響應，請求會掛起，直到客戶端超時，或者它會一直處于打開狀態。
搭建HTTP服務器僅僅是個開始。接下來我們來看看如何設定響應狀態碼和響應頭中的字段，如何正確處理異常。
設置響應頭
可以用res.setHeader(field, value)來設置相應的響應頭，下面是代碼：
var http = require('http')var server = http.createServer(function(req, res){ var body = '<h1>Hello Node</h1>' res.setHeader('Content-Length', body.length) res.setHeader('Content-Type', 'text/html') res.end(body)})server.listen(3000)設置狀態碼
我們經常需要返回默認狀態碼200之外的HTTP狀態碼。比較常見的情況是當所請求的資源不存在時返回一個404 Not Found狀態碼。
這可以通過設定res.statusCode屬性來實現。在程序響應期間可以隨時給這個屬性賦值，但必須在第一次調用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的策略是提供小而強的網絡API，不同于Rails或Django之類的框架。像會話這種高級概念以及HTTP cookies這樣的基礎組件都沒有包括在Node的內核之中。那些都要由第三方模塊提供。
構建 RESTful Web 服務
Roy Fielding博士在2000年提出了表征狀態轉移 （REST）。它是一種基于 HTTP 協議的網絡應用的接口風格。
依照規定，比如GET、POST、PUT和DELETE，分別與資源的獲取、創建、更新和刪除相對應。
HTTP 協議定義了以下8種標準的方法：
創建標準的REST服務需要實現四個HTTP謂詞。每個謂詞會覆蓋一個操作：
POST和GET請求
接下來，通過一個todo list練習來編寫RESTful風格的GET和POST接口。
需求分析
項目采用前后端分離，交互數據格式約定為json，前端添加的數據提交到服務器后，由服務器存入服務器內存中。前端界面如下：
首先，我們先編寫前端部分。
前端部分
前端采用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"> <h1>Todo List</h1> <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請求時，瀏覽器會先發一次options請求，如果請求通過，則繼續發送正式的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...')以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
