用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 tab标签页的制作
May 10 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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
php页面缓存方法小结
2015/01/10 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python模块导入的细节详解
2018/12/10 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
使用Python实现分别输出每个数组
2019/12/06 Python
django API 中接口的互相调用实例
2020/04/01 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年保洁工作总结
2014/11/24 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
反邪教学习心得体会
2016/01/15 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL