初学者指南:使用 Express.js 构建 Web 应用程序

阅读时长 8 分钟读完

前言

现今的互联网世界离不开 Web 应用程序,而 Web 应用程序的开发则离不开前端技术。其中,服务器端框架 Express.js 是一个非常优秀的选择。本篇文章就来为大家介绍使用 Express.js 构建 Web 应用程序的详细指南。

什么是 Express.js

Express.js 是一个基于 Node.js 平台的 Web 应用框架。它提供了一系列的工具和函数,帮助我们快速构建高效可扩展的 Web 应用程序。它的特点包括:

  • 快速灵活:Express.js 是一个轻量级的框架,它非常快速灵活,让开发者在不同的场景下能够快速开发出满足需求的 Web 应用程序。

  • 路由分发:Express.js 支持路由分发,可以轻松地完成搭建 REST API 和处理 HTTP 请求。

  • 中间件:Express.js 的中间件机制让开发者能够轻松地编写通用的代码逻辑,从而避免代码重复和提高代码的可维护性。

  • 视图引擎:Express.js 本身不包含视图引擎,但是它支持各种流行的视图引擎。

如何开始

在开始之前需要安装 Node.js。如果还没有安装,可以到官方网站 https://nodejs.org/en/ 下载安装包进行安装。

安装完成后,打开命令行(Windows 下的 CMD 或 PowerShell,Mac 或 Linux 下的终端),使用 npm 安装 Express.js:

这里使用了参数 --save,表示把 express 库保存到项目的 package.json 文件中,方便后续管理。

Hello World

接下来,使用 Express.js 来写一个简单的 Hello World 程序。首先,新建一个 app.js 文件:

-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------

------------ -------- ----- ---- -
  --------------- --------
--

---------------- -------- -- -
  -------------------- --- --------- -- ---- -------
--

在命令行中运行以下命令启动程序:

在浏览器中打开 http://localhost:3000/,即可看到 "Hello World!" 字样。

路由

在 Express.js 中,路由由一个 URI 和一个特定的 HTTP 方法组成。路由的定义格式如下:

其中,app 表示 Express.js 的实例,METHOD 是 HTTP 请求方法,PATH 是路由的路径,HANDLER 是在路由匹配时执行的函数。

举个例子,要在应用程序中添加一个带有动态参数的路由,代码如下:

运行应用程序后,在浏览器访问 http://localhost:3000/users/1/books/123,即可看到 "User ID: 1, Book ID: 123" 字样。

中间件

中间件可以在 Express.js 中起到处理 HTTP 请求以及响应的作用。中间件可以是一个函数,也可以是一组函数的组合。通过中间件可以完成以下一些功能:

  • 执行任何代码
  • 修改请求和响应对象
  • 终结请求-响应周期
  • 调用下一个中间件函数

在 Express.js 中,有两种类型的中间件:

  • 应用级中间件:绑定到 app 对象上,对于所有请求都会执行。
  • 路由级中间件:绑定到特定的路由上,只对该路由上的请求执行。

使用中间件的方法非常简单。比如通过以下代码使用一个应用级中间件:

-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------

-- --------
----- -------- - -------- ----- ---- ----- -
  -------------------- -----------
  ------
-

-- -----
-----------------

------------ -------- ----- ---- -
  --------------- --------
--

---------------- -------- -- -
  -------------------- --- --------- -- ---- -------
--

在浏览器中访问 http://localhost:3000/,命令行会打印出当前时间。

模板引擎

Express.js 并不包含视图引擎,但是它支持各种流行的视图引擎,比如 EJS、Pug 和 Handlebars 等。

  • EJS 是 JavaScript 模板库,可生成 HTML 标记
  • Pug (前身为 Jade)是另一种流行的 HTML 模板引擎
  • Handlebars.js 是另一种流行的 HTML 模板引擎,用于在 HTML 中构建可重复使用组件

以 EJS 为例,安装 ejs

在应用程序中,使用以下代码来配置 EJS 视图引擎:

-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------

-- ------
------------- -------- ------

------------ -------- ----- ---- -
  ------------------- - ------ --------- --
--

---------------- -------- -- -
  -------------------- --- --------- -- ---- -------
--

在根目录下新建 views/index.ejs 文件:

-- -------------------- ---- -------
--------- -----
------
------
  ---------- ----- ----------
-------
------
  ------- ----- -------
  ---------- -- --- ----- ------
-------
-------

运行程序,浏览器访问 http://localhost:3000/,即可看到 "Express" 字样。

静态文件

在 Express.js 中,使用内置的 express.static 中间件来托管静态文件。以下是一个将中间件函数绑定到 /public 目录的例子:

该代码中,express.static 的参数指定了静态文件存放的目录。现在,只需在 public 目录中添加静态文件即可在浏览器中访问。例如,如果将图片存储在 public/images 目录下,那么以下 URL 就可以访问该图片:

数据库

在实际应用程序中,需要用到数据库来存储数据。可以选择关系型数据库或 NoSQL 数据库。

如果使用关系型数据库,比如 MySQL、PostgreSQL 等,需要使用相应的 ORM 框架,比如 Sequelize、TypeORM 等。如果使用 NoSQL 数据库,比如 MongoDB、Redis 等,则需要使用相应的客户端库和驱动。

以 MongoDB 为例,安装 mongodb

连接 MongoDB 数据库:

-- -------------------- ---- -------
----- ------- - ------------------
----- ----------- - ------------------------------
----- --- - ---------

----- --- - ---------------------------
----- ------ - -----------

------------------------ ------------- ------- -
  ---------------------- ------------ -- --------

  ----- -- - -----------------

  -- ----
  ------------ ------------- ---- -
    ----- ---------- - --------------------------
    ----------------------------------------- ----- -
      --------------
    --
  --

  -- -----
  ---------------- ---------- -
    ---------------------- -- ---- ------
  --
--

这里,使用 MongoClient.connect 来连接数据库,db.collection 来访问集合,collection.find 来查询文档。以上例子只是入门。关于 MongoDB 的更多操作,可以参考官方文档。

这样,我们就完成了使用 Express.js 构建 Web 应用程序的学习。希望读者通过本文的学习,能够掌握 Express.js 的基础知识,并且能够使用它来开发自己的 Web 应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/679724bd504e4ea9bde2ccf3

纠错
反馈

程序员教程

精选优质教程,助你快速提升技术实力

程序员面试题库

海量优质面试题,助你轻松应对技术面试