使用express 和js开发一个博客系统(四)

静态资源托管中间件（Static Resource Middleware）

介绍

在网页开发中，HTML、CSS、JS文件以及图片等都被称为静态资源。当我们在网页中发起请求时，请求接口返回的数据被称为动态资源。静态资源一般无需经过处理，直接返回给浏览器；而动态资源一般由后端处理，例如解析前端发送的请求URL和参数，并根据不同的URL和参数返回不同的JSON数据。

使用Express框架很容易创建一个静态资源服务器，只需使用express.static()方法即可。

创建静态资源服务器

在根目录下创建一个名为public的文件夹，用于存放静态资源，如CSS、JS、HTML和图片等。

首先，安装Express生成器命令行工具express-generator：

npm install express-generator -g

然后，使用Express生成器创建一个项目骨架：

express -e express-demo

其中，-e参数用于指定项目中使用的模板引擎。

创建完成后，进入项目目录并安装依赖：

cd express-demo
npm install

接着，启动项目：

DEBUG=express-demo:* npm start

项目结构介绍

创建好的项目骨架包含以下目录：

• app.js：Express的配置文件，我们需要关注此文件，大部分配置已经生成完毕，需要添加和修改的是路由配置。
• public/：用于存放静态资源文件夹，包括CSS、JS、HTML和图片等。
• routes/：存放路由模块。
• views/：存放HTML模板文件。
• bin/：存放服务器启动配置。
• package.json：项目依赖配置文件。

配置中间件

在app.js文件中配置中间件，以下为常用的配置：

模板引擎（Template Engine）

在这个项目中，使用了ejs作为模板引擎，我们可以在views文件夹中查找HTML模板。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

日志（Logger）

日志中间件用于记录请求和响应的详细信息。

app.use(logger('dev'));

解析JSON请求体（Parse JSON Request Body）

解析JSON中间件用于解析请求体中的JSON数据。

app.use(express.json());

解析URL编码请求体（Parse URL-Encoded Request Body）

解析URL编码中间件用于解析请求体中的URL编码数据。

app.use(express.urlencoded({ extended: false }));

解析Cookie（Parse Cookie）

解析Cookie中间件用于解析请求中的Cookie数据。

app.use(cookieParser());

静态资源托管中间件（Static Resource Middleware）

静态资源中间件设置静态资源的根目录。

app.use(express.static(path.join(__dirname, 'public')));

路由配置（Route Configuration）

挂载路由模块，将请求交给对应的路由处理。

app.use('/', indexRouter);
app.use('/users', usersRouter);

错误处理（Error Handling）

捕获404错误并转发到错误处理程序，渲染错误页面。

app.use(function(req, res, next) {
  next(createError(404));
});

app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  res.status(err.status || 500);
  res.render('error');
});

以上就是使用Express创建静态资源服务器以及常用中间件的示例。通过这些配置，我们可以完成一个基本的后端项目骨架，并且可以借助其他中间件实现更多功能，如日志记录、错误处理等。