Express框架API详解与实例演示（中）

接下来我们来学习一下app.xxx的api，

这里也是挑几个重点的学习，都是相关的
case sensitive routing必须放在最前面，用于设置大小写敏感，可通过postman进行对比

js 复制代码

app.set('case sensitive routing', true)
app.get('/style.css', (req, res, next)=> {
  res.send('style.css')
})
app.get('/STYLE.CSS', (req, res, next)=> {
  res.send('STYLE.CSS')
})

app.use(express.urlencoded())
app.use((request, response, next)=>{
  console.log(request.body)
  response.send('hi')
  next()
})

app.set('views'|'view engine',xxx)
- 新建frank/test.pug

js 复制代码

// 表示视图都在frank目录下
app.set('views', 'frank')
// 设置了视图引擎为 Pug
app.set('view engine', 'pug')
// 这是使用 ejs的模板引擎
app.set('view engine', 'ejs')

app.get('/test', (req, res, next) => {
  // pageTitle会渲染到title里
  res.render('test', {pageTitle:'吃了没'})
})

pug的代码，并且安装pug模块yarn add pug

pug 复制代码

html
  head
    title= pageTitle
  body
    h1 Welcome to My Pug Page
    p This is a paragraph in Pug syntax.
    p Another paragraph here.

ejs的代码，新建frank/test.ejs，并yarn add ejs

js 复制代码

app.set('views', 'frank')
app.set('view engine', 'ejs')

app.get('/test', (req, res, next) => {
  res.render('test', {pageTitle:'吃了没'})
})

ejs的写法

js 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%= pageTitle %>
</body>
</html>

app.xxx的其它一些api

js 复制代码

app.post('/test', (req, res, next)=> {
  res.send('post /test')
})

app.put('/test', (req, res, next)=> {
  res.send('put /test')
})

app.delete('/test', (req, res, next)=> {
  res.send('delete /test')
})

app.patch('/test', (req, res, next)=> {
  res.send('patch /test')
})
...

使用app.locals存储全局变量，基础用法

js 复制代码

app.locals.appName = 'My Express App';

app.get('/', (req, res) => {
  res.send(`Welcome to ${app.locals.appName}`);
});

进阶用法，app.locals 结合中间件，fn1.js是一个中间件

js 复制代码

const fn1 = (req, res, next)=> {
  res.render('test', {pageTitle: app.locals.appName})
}

module.exports = fn1

app.js中，直接可以和单独的中间件文件互通数据，实现跨文件数据共享，app.set也可以实现类似效果

js 复制代码

app.locals.appName = 'My Express App';
app.use(fn1)

其它一些api，见文档

request.xxx相关api，这里也只选择部分介绍一下，具体可以参考文档

req.app获取全局的app
request.params:用于获取路由中的参数。

js 复制代码

// post发送localhost:3000/users/1
app.get('/users/:userId', (req, res) => {
  const userId = req.params.userId;
  // 可以得到id，1
  console.log('userId->', userId)
  res.send('hi')
});

request.query:用于获取查询字符串参数。

js 复制代码

// post发送localhost:3000/users/1?name=frank
app.get('/users/:userId', (req, res) => {
  const query = req.query
  // 打印出 { name: 'frank' }
  console.log('query->', query)
  res.send('hi')
});

request.xhr：用于检查请求是否是通过 AJAX 发送的。
- 该属性返回一个布尔值，如果请求是通过 XMLHttpRequest 对象发起的，那么 request.xhr 的值为 true，否则为 false。
- 使用 request.xhr 可以在 Express 应用程序中根据请求是通过传统的页面加载还是通过 AJAX 发送来执行不同的逻辑。
- 这在创建响应式的、适用于不同请求类型的应用程序时非常有用。

js 复制代码

const express = require('express');
const app = express();

app.get('/example', (req, res) => {
  if (req.xhr) {
    res.send('This is an AJAX request');
  } else {
    res.send('This is a regular request');
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

req.range，用于处理客户端请求中的范围（Range）头，该头部允许客户端请求资源的部分内容。
- 范围请求对于大型文件或多媒体资源的传输很有用，因为它允许客户端只请求文件的部分内容，而不是整个文件，可以用在分片下载
- 有一个下载文件的软件叫做neat Download Manager，可以多线程下载加快下载速度，但是必须要服务器支持range
- req.range 方法用于解析客户端请求中的范围头即HEAD请求。如果请求包含有效的范围，服务器会返回部分内容
- 并且设置响应头 Content-Range，表示返回的部分内容在整个资源中的范围。
- 如果请求不包含范围头，或者范围无效，服务器将返回整个资源。

js 复制代码

const express = require('express');
const app = express();

app.get('/video', (req, res) => {
  const videoPath = 'path/to/your/video.mp4';

  // 使用 req.range 处理范围请求
  const range = req.range(videoPath.length);

  // 如果范围请求有效，返回部分内容；否则返回整个文件
  if (range) {
    const start = range[0].start;
    const end = range[0].end;
    const partialContent = videoPath.slice(start, end + 1);

    res.status(206) // 206表示部分内容
       .set('Content-Range', `bytes ${start}-${end}/${videoPath.length}`)
       .send(partialContent);
  } else {
    res.status(200) // 200表示整个内容
       .sendFile(videoPath);
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});