文章目录
静态资源托管中间件(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创建静态资源服务器以及常用中间件的示例。通过这些配置,我们可以完成一个基本的后端项目骨架,并且可以借助其他中间件实现更多功能,如日志记录、错误处理等。