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

Question

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

Opened this issue 5 years ago · 0 comments

chencl1986 commented 5 years ago

static中间件

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

示例代码：/lesson02/server.js

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

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

这段代码的含义如下：

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接口将无法被访问。

接口数据处理

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

GET请求数据

Express已经自动处理了GET请求的数据，只需要通过req.query就可以获取：

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进行处理。

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

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

示例代码：/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请求数据

示例代码：/lesson02/server.js

// 处理fetch请求，对应请求头application/json
server.use(bodyParser.json())

接收处理后的数据

处理后的数据会被保存在req.body属性中，可以在路由的配置中获取数据。

路由的配置必须卸载body-parser中间件之后。

示例代码：/lesson02/server.js
```
server.post('/login', (req, res, next) => {
  console.log(req.body)
  res.send({
    error: 0,
    data: req.body,
    msg: '登陆成功'
  })
})
```

阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。

static中间件

接口数据处理

GET请求数据

POST请求数据