使用 Express.js 构建 web 应用

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 引入了变量表示法 “、流程控制、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 的基本应用，并且能够基于此进行更复杂的开发与编码。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285814.html