Express教程02：使用中间件处理静态文件和数据请求

时间 2019-12-06

原文原文链接

static中间件

static是Express自带的中间件，主要用于处理客户端对于静态文件的请求，用法以下：html

示例代码：/lesson02/server.jsgit

server.use(express.static('./static/'))
复制代码

打开http://localhost:8080/index.html，便可看到页面显示。github

这段代码的含义以下：express

server.use方法使用中间件。
express.static中间件方法，告知静态文件存放地址为./static/，如有请求静态文件，则自动根据请求地址返回相应的文件。
express.static中间件建议放在接口处理以后。不然若是有请求文件名与接口同名，若有一个名为first的文件存在，而中间件的处理又在/first接口以前，以下：

server.use(express.static('./static/'))

server.get('/reg', (req, res, next) => {
  res.send({
    error: 0,
    msg: '请求成功'
  })
})
复制代码

此时中间件会直接将first文件返回到客户端，而/first接口将没法被访问。npm

接口数据处理

在Express中，接口的数据须要分开处理：json

GET请求数据

Express已经自动处理了GET请求的数据，只须要经过req.query就能够获取：bash

server.get('/reg', (req, res, next) => {
  console.log(req.query)
  res.send({
    error: 0,
    data: req.query
  })
})
复制代码

POST请求数据

POST数据能够运行命令npm install body-parser，安装中间件body-parser进行处理。app

接下来分别以表单提交和Fetch提交数据，讲解一下body-parser的使用。less

新建一个/lesson02/static/index.html文件，建立表单提交和Fetch请求提交代码async

示例代码：/lesson02/static/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h3>表单提交</h3>
  <form action="/login" method="POST">
    用户：<input type="text" name="username" id="username"><br />
    密码：<input type="text" name="password" id="password"><br />
    <input type="submit" value="表单登陆">
  </form>
  <h3>Fetch提交</h3>
  <input type="button" value="GET注册" id="reg">
  <input type="button" value="POST登陆" id="login">
  <script>
    // 注册
    document.querySelector('#reg').addEventListener('click', async function () {
      const response = await fetch(`/reg?username=${document.querySelector('#username').value}&password=${document.querySelector('#password').value}`)
      const result = await response.json()
      console.log(result)
      alert(result.msg)
    })

    // 登陆
    document.querySelector('#login').addEventListener('click', async function () {
      const response = await fetch(`/login`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: document.querySelector('#username').value,
          password: document.querySelector('#password').value
        })
      })
      const result = await response.json()
      console.log(result)
      alert(result.msg)
    })
  </script>
</body>

</html>
复制代码

使用bodyParser.urlencoded处理表单提交数据

示例代码：/lesson02/server.js

// 处理表单提交，对应请求头application/x-www-form-urlencoded
server.use(bodyParser.urlencoded({
  extended: false
}))
复制代码

使用bodyParser.json处理Fetch请求数据