-
ArthurSlog
-
SLog-88
-
Year·1
-
Guangzhou·China
-
October 1th 2018
在你前进的时候 有的东西 你该扔的就扔了 要不然他耽误你的前途 他成为你最大的阻力 当你成功了 你可以把扔了的东西再捡回来 但是 如果你都不扔 你永远办不成功这件事
开发环境MacOS(Mojave 10.14 (18A391))
需要的信息和信息源：
开始编码
-
JSON是 REST API 的请求和响应正文中首选的数据编码格式
-
Express 是一个迷你但灵活的web应用框架
-
Express 自己做的事情很少，通过依赖其他模块（中间件）来提供大部分应用所需要的功能
-
Express 的核心是一个路由器，它接收一个客户端的请求，将其匹配到可用的路由上
-
并执行路由所关联的处理程序函数
-
一个路由是由以下部分组成的：
1. 一个HTTP方法（GET、POST等）2. 一个用于匹配请求的URI的路径规范3. 路由处理程序 处理程序会接收一个请求对象和一个响应对象复制代码
-
Express 基本组成部分包括了 路由（请求匹配、路由参数、路由查找）、处理程序函数（请求对象、响应对象）、中间件
-
具体的说明，请参考 Express官方手册
-
首先新建一个文件夹，并初始化开发环境
cd ~/Desktop && mkdir ArthurSlogStore
cd ArthurSlogStore
sudo npm init -y
sudo npm i express
-
创建一个js文件 main.js
-
完整的代码如下：
main.js
const express = require('express')// 因为express无法解析POST的body数据，所以需要引入中间件body-parser来解析数据const bodyParser = require('body-parser')const app = express()app.use(express.static('static'))app.use(bodyParser.json())// 接收到请求后返回的数据const issues = [ { id: 1, status: 'Open' }, { id: 2, status: 'Close' },]// 接收到一个GET请求之后，返回一些数据app.get('/api/issues', (req, res) => { const metadata = { total_count: issues.length } res.json({ _metadata: metadata, records: issues })})// 接收到一个POST请求之后，返回一些数据app.post('/api/issues', (req, res) => { const newIssue = req.body newIssue.id = issues.length + 1 newIssue.created = new Date() if(!newIssue.status) newIssue.status = 'New' issues.push(newIssue) res.json(newIssue) console.log('have a req from client')})app.listen(3000, () => { console.log('Server start on port 3000 ')})复制代码 - 基本代码：
const express = require('express')const app = express()app.use(express.static('static'))app.listen(3000, () => { console.log('Server start on port 3000 ')})复制代码 -
上面的代码，实现了一个基本的web服务器，地址为localhost，端口为3000
-
然后我们来添加一个处理程序：
const express = require('express')const app = express()app.use(express.static('static'))// 接收到请求后返回的数据const issues = [ { id: 1, status: 'Open' }, { id: 2, status: 'Close' },]// 接收到一个GET请求之后，返回一些数据app.get('/api/issues', (req, res) => { const metadata = { total_count: issues.length } res.json({ _metadata: metadata, records: issues })})app.listen(3000, () => { console.log('Server start on port 3000 ')})复制代码 -
这里添加了一个GET请求的处理程序
-
其中
const metadata = { total_count: issues.length }res.json({ _metadata: metadata, records: issues })复制代码 - 当接收到客户端的请求时，返回一个json对象 issues
[ { id: 1, status: 'Open' }, { id: 2, status: 'Close' },]复制代码 - 此时启动服务器
node main.js
-
然后打开浏览器，输入地址localhost:3000/api/issues
-
客户端会得到服务端返回的json对象，并在页面上显示出来
{"_metadata":{"total_count":2},"records":[{"id":1,"status":"Open"},{"id":2,"status":"Close"}]}复制代码 -
ok，实现GET方法之后，来实现POST方法
-
由于Express 无法直接解析POST方法里的body数据，所以引入中间件body-parser
sudo npm i body-parser
- 更新代码：
const express = require('express')// 因为express无法解析POST的body数据，所以需要引入中间件body-parser来解析数据const bodyParser = require('body-parser')const app = express()app.use(express.static('static'))// 在Express 框架中引入中间件body-parserapp.use(bodyParser.json())// 接收到请求后返回的数据const issues = [ { id: 1, status: 'Open' }, { id: 2, status: 'Close' },]// 接收到一个GET请求之后，返回一些数据app.get('/api/issues', (req, res) => { const metadata = { total_count: issues.length } res.json({ _metadata: metadata, records: issues })})// 接收到一个POST请求之后，返回一些数据app.post('/api/issues', (req, res) => { const newIssue = req.body newIssue.id = issues.length + 1 newIssue.created = new Date() if(!newIssue.status) newIssue.status = 'New' issues.push(newIssue) // 解析并返回json对象 res.json(newIssue) console.log('have a req from client')})app.listen(3000, () => { console.log('Server start on port 3000 ')})复制代码 -
重启服务器
-
我们使用curl工具向服务端发送一个POST请求，打开命令行，输入：
curl -s --data '{"title": "Test Test", "owner": "me"}' --header 'Content-Type: application/json' | json_pp { "title": "Test Test", "owner": "me", "created": "2018-10-01T10:20:36.579Z", "status": "New", "id": 3 }
- 服务端返回json对象：
{ "owner" : "me", "status" : "New", "created" : "2018-09-30T22:02:21.025Z", "title" : "Test Test", "id" : 3}复制代码 - 至此，使用Express 框架实现了一个简单的web服务器。