# frontEndLearning-serve-static

**Repository Path**: ayachensiyuan/express-middleware-learning

## Basic Information

- **Project Name**: frontEndLearning-serve-static
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-30
- **Last Updated**: 2022-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

首先安装依赖
```shell
npm install
```

### serve-static

这个中间间的功能是吧用户设置的目录引射在根路径“/”下，快速解决目录下所有文件的路由问题。

#### 注意

此中间件已经被express集成，也可以直接采用express.static()实现相同功能，无需额外安装serve-static。东西都是一样的，这里还是使用serve-static来介绍，实际使用建议使用express.static()。
#### 参数

serveStatic(root， [options])方法接收两个参数，

第一个是文件的目录，也就是你网页文件的目录，当用户访问服务器根目录时候，会从这个目录下找index.html文件。如果没找会调用next()转到下一个中间件处理。

第二个参数options有以下配置，基本上是设置响应头的配置，

```javascript
{
  /* default=true */
  /*  是否开启accept-ranges */
  "acceptRanges": true,
  
  /* default = 'ignore' */
  /* 当用户申请'.'开头的文件或目录处理方式 */
  /* 'allow' 允许 */
  /* 'deny' 禁用 返回403响应代码并调用next() */
  /* 'ignore' 忽略 返回404并调用next() */
  "dotfiles": "ignore",
  
  /* default = true */
  /* 是否开启etag */
  "etag": true,
  
  /* default = false */
  /* 设置文件扩展名，当用户输入的路径未找到文件时，则将扩展名添加到文件名进行搜索，匹配第一个 */
  /* 如制定一个后缀名的文件： ['html', 'htm'] */
  "extensions": false,
  
  /* default = true */
  /* 当客户端请求有错误时，如请求未存在的文件，设置为true就直接调用next()进入下一步处理，false的话直接返回next(err)进入404处理。 */
  "fallthrough": true,
  
  /* default = true */
  /* false会忽略immutable和maxAge */
  "cacheControl": true,
  
  /* defalut = false */
  /* 在cache-control上添加immutable的属性，需要开启cacheControl */
  "immutable": false,
  
  /* default = 0 */
  /* 设置在cache-control上的maxAge属性，需要开启cacheControl */
  "maxAge": 0,
  
  /* default = ['index.html'] */
  /* 当用户未制定文件名默认的文件，开启时会搜寻index.html,也可以设置自定义的入口文件 */
  "index": ['index.html'],
  
  /* default = true */
  /* 是否开启lastModified */
  "lastModified": true,
  
  /* default = true */
  /* 如果请求路径是目录的话，在目录后添加/（如果该目录有默认文件，就会找寻默认文件） */
  "redirect": true,
  
  /* 自定义headers */
  /* res 响应对象 */
  /* path 发送文件的路径 */
  /* stat 正在发送的文件的 stat 对象 */
  "setHeaders": fn(res, path, stat)
}
```

serveStatic可以多次被app.use()使用，按照顺序先查找第一个，找到第一个会忽略其后的serveStatic设置。如果第一个目录无效就会调用第二个，依次类推。但只有一个能生效。这样的使用场景是设置一个备用的目录。

#### 应用

设置一个文件资源管理服务器，用目录结构展示

##### 需要用到的技术

- javascript
- html
- Css
- Node.js
  - fs
    - readDir
    - readFile
    - writeFile
- express
  - Serve-static

  ##### 需要用到的技术

- javascript
- html
- Css
- Node.js
  - fs
    - readDir
    - readFile
    - writeFile
- express
  - Serve-static

##### 思路

- 静态托管目录为public目录，在public目录下和其下的每一个子目录都有index.html文件，当用户访问当前目录时就会进入当前目录的index.html文件。目的是在这些index.html文件中，写入的结构是当前目录下所有文件的链接，当点击该链接就可进入该文件。

- view下的base.html是生成index.html的模板文件，当服务器启动时候，自动会按照模板和目录下文件的情况自动生成index.html文件。

- 生成和读取文件用到fs模块，写入页面是动态的，我这里并没有打算使用模板引擎，自己做个简单的方法。
- 除了涉及到的技术，尽量不要使用库和框架来实现，多使用js原生的方法来实现。

这里只做学习的简单应用，还有很多细节可以优化，如参数化api，ul生成算法优化及分离模块等，完成品可以应用到服务器的文件可视化解决方案。

页面渲染有多种实现方式，我这里是后端进行处理，当然还可以使用前端的方式实现局部更新，给到客户端数据进行前端渲染。好处是不用每个文件夹新建index.html文件。具体方式大家可以自己试试看。

#### 总结

serve-static中间件处理后的目录，可以不用每一个文件设置返回的类型、缓存等等信息，可以很快捷托管文件夹中所有的文件。当你打开这些文件时候，也能返回正确的信息，简化了很多的操作过程。在加载html中包含其他需要加载的css、js、图片等等都可以都放在托管的文件夹中，总能正确显示。