Express.js 是一个基于 Node.js 平台的 web 应用开发框架,它提供了一组丰富的功能和特性,是构建 web 应用的首选框架之一。下面我们将会从不同角度对 Express.js 进行详细阐述。
一、安装与配置 Express.js
在使用 Express.js 前,需要先进行安装与配置。你可以通过npm包管理器进行安装:
npm install express
安装成功后,新建一个文件 `app.js`,对 Express 进行配置:
// 引入 Express 模块
var express = require('express');
var app = express();
// 监听端口
app.listen(3000, function () {
console.log('app listening on port 3000!');
});
在终端中输入 `node app.js`,你就可以在浏览器中访问 http://localhost:3000
,看到 Express 初始化的页面了。
二、路由与请求
在 Express 中,路由是指如何定义应用的端点(URL
)以及如何响应客户端的请求。我们可以在 Express 应用中定义路由来执行不同的任务。定义路由最基本的要素是一个 URI(或者叫做路径)和一个特定的 HTTP 方法(GET、POST 等等)。
如下例子所示,我们定义了一个简单的路由,当用户访问 URL http://localhost:3000/
时,返回“Hello World”:
// GET 请求
app.get('/', function (req, res) {
res.send('Hello World!');
});
除了 get 请求,我们还可以使用 post 请求。
// POST 请求
app.post('/', function (req, res) {
res.send('Got a POST request');
});
通过 Express 内置的中间件,可以处理 HTTP 请求体的数据,其中就包括了在 POST 请求中提交的数据。如下所示,我们先安装 `body-parser` 中间件,再使用中间件对 POST 请求的数据进行处理:
var bodyParser = require('body-parser');// 解析请求体的中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/', function (req, res) {
console.log(req.body);
res.send('POST request to the homepage');
});
三、静态文件
在 Express 中,可以使用 express.static()
函数来托管 Express 应用程序中的静态资源。所谓静态资产,通常是指图像、CSS 文件和 JavaScript 文件等。
以下代码展示如何将 public/
目录中的文件作为静态资源:
app.use(express.static('public'));
这段代码中,我们调用了 express.static
中间件来处理静态文件请求, static 中间件默认服务于 ./public
文件夹。
如果你的静态文件存储在不同的文件夹中,可以按如下方式进行更改:
app.use('/static', express.static('public'));
这里,我们修改了静态文件的目录,现在我们可以通过 http://localhost:3000/static/logo.png
访问图片 logo.png,它是存在于我们的服务器 public
目录下的。
四、使用模板引擎
Express 框架提供了多种模板引擎可供用户选择使用。常见的模板引擎有 EJS、Pug、Handlebars 等。下面我们以 EJS 为例进行介绍。
先安装 EJS 模块。
npm install ejs
以下是使用 EJS 模板引擎的一个示例。
// 引入 EJS 模块
var ejs = require('ejs');
app.set('view engine', 'ejs');// 设置模板引擎为ejs
app.set('views', './views');// 设置视图文件夹
// GET请求
app.get('/hello', function(req, res) {
res.render('hello', {
name: '张三',
message: 'Hello World!'
});});
在文件夹 `views` 下创建 hello.ejs
文件,其内容如下:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1><%= name %></h1>
<p><%= message %></p>
</body>
</html>
EJS 引入了变量表示法 `<%=value %>`、流程控制、partials 和 layout 等模板功能。
五、错误处理
错误处理在任何 web 应用程序中都是非常重要的一环,它用于在代码发生错误时,向用户返回明确的错误提示。
可以通过使用 Express 的 `error middleware` 来处理错误。下面的代码为一个比较简单的例子,展示了如何使用错误处理中间件来捕捉全局错误。
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send('Something broke!');
});
以上代码表示当应用程序抛出错误时触发错误中间件,并发送一个简单的错误响应。 Express 会将错误公开在 `err.stack` 中,以便我们在控制台或日志文件中查看。
如果你要提供给用户一个更详细的错误信息,可以使用 res.render
渲染页面。示例如下:
app.use(function (err, req, res, next) {
console.error(err.stack);
res.status(500).render('error', { error: err });
});
这里我们将错误对象通过渲染视图的方式返回给用户。
总结
本文从安装与配置、路由与请求、静态文件、使用模板引擎以及错误处理等五个方面对 Express.js 进行了详细阐述。Express.js 拥有灵活的路由和中间件,支持多种模板引擎,可以很好的适用于构建 CRUD 应用,同时还可以进行错误处理。相信通过本文你已经可以掌握 Express.js 的基本应用,并且能够基于此进行更复杂的开发与编码。