用Node编写RESTful API接口的示例代码


Posted in Javascript onJuly 04, 2018

前言

本文介绍了如何用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()方法结束响应了(见下图)。这样在结束响应之前,你可以在请求的生命期内运行任何你想运行的异步逻辑。如果你没能结束响应,请求会挂起,直到客户端超时,或者它会一直处于打开状态。

用Node编写RESTful API接口的示例代码

搭建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种标准的方法:

  1. GET:请求获取指定资源。
  2. HEAD:请求指定资源的响应头。
  3. POST:向指定资源提交数据。
  4. PUT:请求服务器存储一个资源。
  5. DELETE:请求服务器删除指定资源。
  6. TRACE:回显服务器收到的请求,主要用于测试或诊断。
  7. CONNECT:HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
  8. OPTIONS:返回服务器支持的HTTP请求方法。

创建标准的REST服务需要实现四个HTTP谓词。每个谓词会覆盖一个操作:

  1. GET:获取
  2. POST:新增
  3. PUT:更新
  4. DELETE:删除

POST和GET请求

接下来,通过一个todo list练习来编写RESTful风格的GET和POST接口。

需求分析

项目采用前后端分离,交互数据格式约定为json,前端添加的数据提交到服务器后,由服务器存入服务器内存中。前端界面如下:

用Node编写RESTful API接口的示例代码

首先,我们先编写前端部分。

前端部分

前端采用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...')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
简单的JS轮播图代码
Jul 18 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 #Javascript
JS实现点击按钮可实现编辑功能
Jul 03 #Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 #Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 #Javascript
基于React+Redux的SSR实现方法
Jul 03 #Javascript
VUE 3D轮播图封装实现方法
Jul 03 #Javascript
vue.js轮播图组件使用方法详解
Jul 03 #Javascript
You might like
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
JS实现div居中示例
2014/04/17 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python支付宝支付示例详解
2019/08/22 Python
Python numpy数组转置与轴变换
2019/11/15 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
2014年店长工作总结
2014/11/17 职场文书
公证书格式
2015/01/23 职场文书
房贷工资证明范本
2015/06/12 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python