开始前,我们先说一下客户端http请求服务端相应的大致过程:
上图的说法可能不准确,但能描述个大致就行了:首先我们的客户端浏览器根据域名进行请求,域名经过DNS解析后及得到我们的服务器的ip地址,此时便可根据这个ip地址找到相应的服务端,之后的三次握手通俗的说就是客户端告诉服务端我需要发起请求,服务端又告知客户端我是可以请求的,之后客户端在发起具体的请求。 之后客户端再发起具体的数据请求到服务端获取相应的数据进行渲染。
那么我们的服务端怎么接受请求,做出相应的处理就是我们今天谈到的事情: (在开始下面的之前需要确定我们的电脑已经配置好了node环境)
- 原生node 实现服务端路由请求:
- node原生提供了一个http模块帮助我们创建一个服务器模块
// 引入http模块
const http = require('http')
// querysytring 是node提供的一个原生模块,它能够帮助我们将一些特殊格式的字符串转化为对象:
// 例如: a=1&b=2 经过querystring.parse()方法进行转化后就变成了: {a: 1, b: 2}
const querystring = require('querystring')
// http.createrServer()方法可以创建一个服务器,它接收一个回调的函数进行相应的请求处理:
const server = http.createServer((req, res) => {
// 函数中的req 代表客户端请求发送过来的相关的信息, res表示的是服务端响应的一些信息
// req.method 可以获取到相应的数据请求类型, 如POST & GET ; 此时根据这个请求我们便可以进行相应的路由处理:
if(req.method === "GET"){
// GET请求中经常会带上一些query的参数,NODE中使用 req.url 可以获取到请求的地址:
// 如请求的地址为: http://localhost:8080/api?name=zhangsan 则req.url 获取到的就是 /api?name=zhangsan 这段信息; 如此我们经过相应的处理,我们就能够得到query的数据了
const query = querystring.parse(req.url.split('?'))
// 调用res 的end方法就能够给气端返回信息; 这里我们就简单将query的参数返回
res.end(query)
}
// POST请求的处理;
if(req.method === "POST"){
// POST请求中我们主要就是对于客户端发送过来的数据进行接收的问题:
// req.headers 可以获取到客户端发送的请求头的一些信息,这里就不做详细的阐述这个请求头信息, 其中有一个[Content-type]表示的是请求的数据类型需要我们关注的
console.log(req.headers['content-type'])
// 而对于客户端请求发送的POST数据是以数据流的形式流到服务端的,就好比水流流动一样, 我们就收数据就需要使用去监听这个数据流来获取客户端的数据发送:
let data = '' // 定义一个变量来接收数据
req.on('data', (chunk) => { // 使用req.on()监听客户端的数据流: data
data += chunk
})
req.on('end', () => { // 当数据发送完毕时我们可以监听end 来知道
console.log("数据接收完毕!")
// 此处我们可以使用setHeader()方法设置返回客户端的相应信息的响应头,关于响应头此处也不作过多的介绍: 此处我们设置相应的数据数据格式为json字符串
res.setHeader('Content-type', 'application/json')
res.end(data)
})
}
})
// 使我们的服务器监听一个端口,http创建的服务器上有一个listen() 方法可以帮助我们实现
server.listen(3000, () => {
console.log("Server listenning on 3000")
})
// 以上我们便使用简单的原生node实现了一个简单的服务器搭建: 对于node 成型的项目对于不同的路由接口处理都会进行一些封装的,此处就留给大家慢慢琢磨啦
- 原生node 实现这样的路由解析,或者请求处理其实是一件特别麻烦的事情,那么框架就是帮助我们减少这样的麻烦的, 首先我们来看下express框架怎么实现上面的流程:
// 引用express: 在引入之前我们需要使用npm 安装这个包:
// 注: npm 是我们node的包管理工具,在我们配置安装node的时候就已经连带着安装上了,大家可以通过在命令行输入 npm -v 查看自己的 npm 版本
const express = require("express")
const app = express()
// 我们可以使用express的Router方法进行路由分配,使用时也是直接 router.get() 或者 router.post()即可,这里我们使用的还是直接的使用get()和post()
// const router = express.Router()
// experss上的get()方法能够监听get请求
app.get('/api', (req, res) => {
// 在get 请求中获取query参数:
var name = req.query.name
// 调用res.send()方法惊醒数据返回
res.send(name)
})
app.post('/user', (req, res) => {
// 对于客户端的post请求的数据仍需要使用的原生的监听数据流的形式进行获取
let data = ''
req.on('data', (chunk) => {
data += chunk
})
req.on('end' ,() => {
res.send(data)
})
// 同时我们还可以使用req.route获取到请求的一些信息
})
// 如果使用router进行路由监听分配后在express的实例中进行注册
// app.use(router)
// 如果我们的客户端需要像服务端请求静态资源文件,我们也可以使用 express.static()进行一个静态文件的托管: express.static() 的参数为我们的静态文件的托管目录
// app.use(express.static('/pubic'))
app.listen(3000, () => {
console.log('listen on 3000')
})
备注: 在app.get()或者app.post()的路由匹配的方法中,除了上面的req, res 参数外, 在express 和 koa2 框架中都有一个 next 参数,该参数涉及到一个node框架中的洋葱模型,之后我会写一篇文章单独介绍,这里就不展开了.
- 使用koa2 实现以上的服务器
- 对于koa2 是近几年才大火的node框架,伴随者es7 中对于 async 和await 异步函数的支持后才体现的更加的方便
// 同样,在使用前我们还是需要来先安装和引入koa: npm i koa
const koa = require('koa')
// 在koa 中需要我们在安装引入koa的路由匹配插件: koa-router
const router = require('koa-router')()
// 实例化一个 koa
const app = new koa()
// 在koa中对于post data 数据的获取我们可以更方便的使用 koa-bodyparser插件帮助我们处理
// 使用 koa-bodyparser处理会将post 的数据写入到ctx.request.body 下,我们可以直接获取到
const bodyparser = require('koa-bodyparser')
// 在koa 的实例中注册bodyparser,它的参数表示的是能够接受的数据类型格式
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
// koa-router 处理get请求
router.get('/', async(ctx, next) => {
// 使用ctx.query可以获取到get请求的query参数, ctx.query 中是一个对象, 我们可以使用es6 的解构语法获取每个参数值
const { name } = ctx.query
// koa 中的返回需要放到ctx.body()中
ctx.body = name
})
// koa-router 处理post 请求
router.post('/api', async(ctx, next) => {
// koa中获取post传递过来的post data 数据就显得很方便了:
// koa 中可以使用ctx.request.body获取到(前提是我们之前注册了bodyparser, 如若没有我们还是需要使用原生的方式进行)
const data = ctx.request.body
ctx.body = data
})
// router的路由匹配需要注册到koa 的实例中
app.use(router.routes(), router.allowedMethods())
app.listen(3000, () => {
console.log('ok')
})
至此,我们今天说的使用原生 node, Express 框架 和 koa 框架简单搭建服务端路由处理器就基本实现了,关于node的更多内容,我们之后一起慢慢学习: