阅读 60

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

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

static中间件

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

示例代码:/lesson02/server.js

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

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

这段代码的含义如下:

  1. server.use方法使用中间件。
  2. express.static中间件方法,告知静态文件存放地址为./static/,若有请求静态文件,则自动根据请求地址返回相应的文件。
  3. 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的使用。

  1. 新建一个/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>
    复制代码
  2. 使用bodyParser.urlencoded处理表单提交数据

    示例代码:/lesson02/server.js

    // 处理表单提交,对应请求头application/x-www-form-urlencoded
    server.use(bodyParser.urlencoded({
      extended: false
    }))
    复制代码
  3. 使用bodyParser.json处理Fetch请求数据

    示例代码:/lesson02/server.js

    // 处理fetch请求,对应请求头application/json
    server.use(bodyParser.json())
    复制代码
  4. 接收处理后的数据

    处理后的数据会被保存在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: '登陆成功'
      })
    })
    复制代码
关注下面的标签,发现更多相似文章
评论