express快速入门——实现一个服务器

express是基于Node.js平台的，web开发框架。他对Node.js搭建服务器的经常使用操做封装了一套简易的API，使咱们能够快速的搭建出一个服务器。同时express引入了中间件的概念，可让咱们更好的组织代码。

推荐阅读路线

• Node.js基础知识——经常使用API：有耐心的话最好先过一遍基础知识，以为基础知识太枯燥能够从Node.js快速入门看起，遇到不会的API再回来查看基础知识。
• Node.js快速入门——实现一个服务器：Node.js手把手入门教程。
• express快速入门——实现一个服务器：Node.js的一个框架，能够加快咱们的开发速度。

前言

express实现一台服务器至少须要实现如下功能：

• 响应静态资源请求
• 根据不一样的请求url返回不一样的内容
• 得到前端发送的get请求的参数
• 得到前端发送的post请求的参数

准备工做

建立一个static文件夹用来存放静态资源，server.js用于写服务器代码。

// express是一个第三方包，须要先下载再引用
在终端中输入npm i express --save进行安装
复制代码

没有报错则安装成功。

1 建立一个服务器

// 使用express建立一个服务器十分简单
// 引入express
const express = require('express')

const app = express()
// 第一个参数表示路由为/home时执行第二个参数的方法(如localhost:3000/home则执行，localhost:3000/index则不执行)
app.use('/home', (req, res) => {
  res.send('home')
})
// 第一个参数直接传入一个函数时，表示任何路由均可以执行该函数
app.use((req, res) => {
  res.send('any')
})
// 监听3000端口并在运行成功后向控制台输入服务器启动成功！
app.listen(3000, () => {
  console.log('服务器启动成功！')
})
复制代码

// 在终端经过 node + 文件名运行js/ts文件
复制代码

在浏览器中访问localhost:3000/home便可看到返回的home，访问其余路径时，返回的都是any。

2 中间件

express中的中间件其实就是一个函数，它是响应客户端请求过程当中的一个环节。中间件有三个参数，第一个参数是req(request)请求对象，第二个参数是res(response)响应对象，第三个参数是next函数，调用时会跳转到下一个中间件。

下面咱们定义三个中间件，第一个中间件记录用户访问服务器的时间，第二个中间件记录用户访问的url，第三个中间件调用send方法向客户端发回响应信息。

const app = express()

app.use('/home', (req, res, next) => {
  console.log(`在控制台中记录用户访问服务器的时间：${new Date()}`)
  next()
})
app.use('/home', (req, res, next) => {
  console.log(`在控制台中记录用户访问的url：${req.baseUrl}`)
  next()
})
app.use('/home', (req, res) => {
  res.send('home')
})

app.listen(3000, () => {
  console.log('服务器启动成功！')
})
复制代码

在浏览器中访问localhost:3000/home，而后查看终端

上面的代码能够表示为：

3 实现完整的服务器功能

一个完整的服务器须要实现前言中提到的全部功能，接下来咱们来一一实现。

3.1 响应静态资源请求

// express提供了一个内置的中间件为咱们处理静态资源的请求
// 接收一个字符串参数，表示做为静态资源的目录，static目录中的全部静态资源均可以被访问了
const static = express.static('static')
app.use(static)
复制代码

// 若是不想暴露文件的存储位置，也能够增长一个参数指定虚拟路径，此时访问资源须要携带/a/b/c前缀
const static = express.static('static')
app.use('/a/b/c',static)
复制代码

直接访问静态资源的时候再也不能拿到静态资源了。

路由须要加上/a/b/c的前缀才能正确拿到文件

3.2 根据不一样的请求url返回不一样的内容

根据不一样的请求url放回不一样的内容主要依靠app.use()方法的第一个参数，第一个参数与路由匹配时则指定第二个参数传入的函中间件数。

// 请求url为localhost:3000/login或localhost:3000/login?xxx的时候都会使第二个参数传入的中间件执行
app.use('/login', (req, res) => {
  res.send('login')
})
复制代码

3.3 得到前端发送的get请求的参数

首先咱们在index.html中建立一个表单，用于提交登录信息，信息提交到/login，方式为GET

<form action='/login' method='GET'>
    <label>
        用户名：
        <input type='text' name='username' placeholder='请输入用户名'/>
    </label>
    <br>
    <label>
        密码：
        <input type="password" name='password' placeholder='请输入密码' />
    </label>
    <br>
    <input type='submit' value='提交'>
</form>
复制代码

而后对匹配/login的规则进行修改

app.get()方法只匹配请求方式为GET的请求，而app.use()方法则匹配任意请求方式的请求，除此以外还有app.post()方法只匹配请求方式为POST的请求，app.put()方法只匹配请求方式为put0的请求，app.delete()方法只匹配请求方式为DELETE的请求。

app.get('/login', (req, res) => {
  // req.query中存放get请求的参数
  console.log(req.query)
   // 伪装读取了数据库，用户名为admin，密码为123则登录成功
  if(req.query.username === 'admin' && req.query.password === '123') {
    res.send('登陆成功！')
  } else {
    res.send('您的帐号或密码有误，请重试')
  }
})
复制代码

在浏览器中打开index.html并输入帐号与密码

3.4 得到前端发送的post请求的参数

将index.html中的表格提交方式改成POST请求

<form action='/login' method='POST'>
复制代码

接下来解析POST请求参数须要用到body-parser中间件

// 引入body-parser模块
const bodyParser = require('body-parser')
// 构造bodyParser中间件
const urlencodedParser = bodyParser.urlencoded({
  extended: false
})
// 使用中间件
app.use(urlencodedParser)
复制代码

而后继续对匹配/login的规则进行修改

app.post('/login', (req, res) => {
  // req.body中存放post请求的参数
  console.log(req.body)
   // 伪装读取了数据库，用户名为admin，密码为123则登录成功
  if(req.body.username === 'admin' && req.body.password === '123') {
    res.send('登陆成功！')
  } else {
    res.send('您的帐号或密码有误，请重试')
  }
})
复制代码

再次在index.html中登陆

此时的参数存放在http的请求体中

4 交流

若是这篇文章帮到你了，以为不错的话来点个Star吧。 github.com/lizijie123