溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文介紹了如何用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 = '<h2>Hello Node</h2>'
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"> <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請求時，瀏覽器會先發一次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...')
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
