用Node編寫(xiě)RESTful API接口的示例代碼

更新時(shí)間：2018年07月04日 09:12:52 作者：moddx

本篇文章主要介紹了用Node編寫(xiě)RESTful API接口的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

本文介紹了如何用Node開(kāi)發(fā)web程序，并通過(guò)一個(gè)todo list練習(xí)來(lái)介紹如何創(chuàng)建符合RESTful風(fēng)格的API接口。

創(chuàng)建HTTP服務(wù)器

用Node創(chuàng)建HTTP服務(wù)器是非常方便的。

創(chuàng)建HTTP服務(wù)器要調(diào)用http.createServer()函數(shù)，它只有一個(gè)參數(shù)，是個(gè)回調(diào)函數(shù)，服務(wù)器每次收到HTTP請(qǐng)求后都會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。這個(gè)回調(diào)會(huì)收到兩個(gè)參數(shù)，請(qǐng)求和響應(yīng)對(duì)象，通常簡(jiǎn)寫(xiě)為req和res：

var http = require('http')
var server = http.createServer(function(req, res){
  res.end('Hello World')
})
server.listen(3000, '127.0.0.1')

運(yùn)行上面的代碼，在瀏覽器中訪問(wèn)http://localhost:3000。然后你應(yīng)該能看到一個(gè)包含“Hello World.”的普通文本頁(yè)面。

服務(wù)器每收到一條HTTP請(qǐng)求，都會(huì)用新的req和res對(duì)象觸發(fā)回調(diào)函數(shù)。

在觸發(fā)回調(diào)函數(shù)之前，Node會(huì)解析請(qǐng)求的HTTP頭，并將它們作為req對(duì)象的一部分提供給請(qǐng)求回調(diào)。但Node不會(huì)在回調(diào)函數(shù)被觸發(fā)之前開(kāi)始對(duì)請(qǐng)求體的解析。這種做法跟某些服務(wù)端框架不同，比如PHP就是在程序邏輯運(yùn)行前就把請(qǐng)求頭和請(qǐng)求體都解析出來(lái)了。

Node不會(huì)自動(dòng)往客戶(hù)端寫(xiě)任何響應(yīng)。在調(diào)用完請(qǐng)求回調(diào)函數(shù)之后，就要由你負(fù)責(zé)用res.end()方法結(jié)束響應(yīng)了（見(jiàn)下圖）。這樣在結(jié)束響應(yīng)之前，你可以在請(qǐng)求的生命期內(nèi)運(yùn)行任何你想運(yùn)行的異步邏輯。如果你沒(méi)能結(jié)束響應(yīng)，請(qǐng)求會(huì)掛起，直到客戶(hù)端超時(shí)，或者它會(huì)一直處于打開(kāi)狀態(tài)。

搭建HTTP服務(wù)器僅僅是個(gè)開(kāi)始。接下來(lái)我們來(lái)看看如何設(shè)定響應(yīng)狀態(tài)碼和響應(yīng)頭中的字段，如何正確處理異常。

設(shè)置響應(yīng)頭

可以用res.setHeader(field, value)來(lái)設(shè)置相應(yīng)的響應(yīng)頭，下面是代碼：

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)

設(shè)置狀態(tài)碼

我們經(jīng)常需要返回默認(rèn)狀態(tài)碼200之外的HTTP狀態(tài)碼。比較常見(jiàn)的情況是當(dāng)所請(qǐng)求的資源不存在時(shí)返回一個(gè)404 Not Found狀態(tài)碼。

這可以通過(guò)設(shè)定res.statusCode屬性來(lái)實(shí)現(xiàn)。在程序響應(yīng)期間可以隨時(shí)給這個(gè)屬性賦值，但必須在第一次調(diào)用res.write()或res.end()之前。

var http = require('http')
var server = http.createServer(function(req, res) {
 var body = '<p>頁(yè)面丟失了</p>'
 res.setHeader('Content-Type', 'text/html;charset=utf-8')
 res.statusCode = 404
 res.end(body)
})
server.listen(3000, '127.0.0.1')

Node的策略是提供小而強(qiáng)的網(wǎng)絡(luò)API，不同于Rails或Django之類(lèi)的框架。像會(huì)話(huà)這種高級(jí)概念以及HTTP cookies這樣的基礎(chǔ)組件都沒(méi)有包括在Node的內(nèi)核之中。那些都要由第三方模塊提供。

構(gòu)建 RESTful Web 服務(wù)

Roy Fielding博士在2000年提出了表征狀態(tài)轉(zhuǎn)移（REST）。它是一種基于 HTTP 協(xié)議的網(wǎng)絡(luò)應(yīng)用的接口風(fēng)格。

依照規(guī)定，比如GET、POST、PUT和DELETE，分別與資源的獲取、創(chuàng)建、更新和刪除相對(duì)應(yīng)。

HTTP 協(xié)議定義了以下8種標(biāo)準(zhǔn)的方法：

GET：請(qǐng)求獲取指定資源。
HEAD：請(qǐng)求指定資源的響應(yīng)頭。
POST：向指定資源提交數(shù)據(jù)。
PUT：請(qǐng)求服務(wù)器存儲(chǔ)一個(gè)資源。
DELETE：請(qǐng)求服務(wù)器刪除指定資源。
TRACE：回顯服務(wù)器收到的請(qǐng)求，主要用于測(cè)試或診斷。
CONNECT：HTTP/1.1 協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器。
OPTIONS：返回服務(wù)器支持的HTTP請(qǐng)求方法。

創(chuàng)建標(biāo)準(zhǔn)的REST服務(wù)需要實(shí)現(xiàn)四個(gè)HTTP謂詞。每個(gè)謂詞會(huì)覆蓋一個(gè)操作：

GET：獲取
POST：新增
PUT：更新
DELETE：刪除

POST和GET請(qǐng)求

接下來(lái)，通過(guò)一個(gè)todo list練習(xí)來(lái)編寫(xiě)RESTful風(fēng)格的GET和POST接口。

需求分析

項(xiàng)目采用前后端分離，交互數(shù)據(jù)格式約定為json，前端添加的數(shù)據(jù)提交到服務(wù)器后，由服務(wù)器存入服務(wù)器內(nèi)存中。前端界面如下：

首先，我們先編寫(xiě)前端部分。

前端部分

前端采用vue.js作為框架，ajax請(qǐng)求采用axios庫(kù)。代碼如下：

<!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) {
 // 設(shè)置cors跨域
 res.setHeader('Access-Control-Allow-Origin', '*')
 res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
 res.setHeader('Content-Type', 'application/json')

 switch (req.method) {
  // 設(shè)置了cors跨域
  // post請(qǐng)求時(shí)，瀏覽器會(huì)先發(fā)一次options請(qǐng)求，如果請(qǐng)求通過(guò)，則繼續(xù)發(fā)送正式的post請(qǐng)求
  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)
    // 返回到客戶(hù)端
    let data = JSON.stringify(items)
    res.write(data)
    res.end()
   })
   break
 }
}).listen(3000)

console.log('http server is start...')

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: