Node.js 中的 Web 应用之 Express 详细教程

什么是 Express?

Express 是一个基于 Node.js 平台的 Web 应用框架,可以帮助开发者构建 Web 应用程序和 API。它是一个小巧、灵活,而且功能强大的框架。Express 提供了一个丰富的 HTTP 请求和响应 API,同时支持视图渲染、错误处理、中间件等一系列常用功能。

Express 的安装和使用

  1. 安装 Node.js

要使用 Express,首先需要在本地计算机安装 Node.js。具体安装方法可以参考官方文档:https://nodejs.org/en/download/

  1. 创建新的项目

使用终端命令行创建一个新的项目,命令如下:

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

这里会生成一个新的 package.json 文件,用于管理我们项目中的依赖。

  1. 安装 Express

在命令行中输入以下命令,安装 Express:

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

--save 表示将 Express 加入该项目的依赖列表当中。

  1. 创建一个简单的 Express 应用

在项目目录中创建一个新的文件 app.js,输入以下代码:

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

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

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

-- ----
---------------- -- -- -
  -------------------- --- --------- -- ---- -------
--
  1. 启动应用

在命令行中输入以下命令,启动应用:

---- ------

访问 http://localhost:3000 可以看到页面输出了 "Hello World!"。

Express 应用开发

下面将介绍如何使用 Express 来开发一个真实的 Web 应用。

1. 安装和配置模板引擎

在 Express 中,视图渲染使用的是模板引擎,此处以 EJS 为例。

  1. 安装 EJS

在项目目录中安装 EJS:

--- ------- --- ------
  1. 修改 app.js

app.js 中添加以下代码:

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

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

2. 定义路由

在 Express 中,路由就是匹配 URL 和 HTTP 方法(如 GET、POST 等)的处理程序。

  1. 定义一个路由

app.js 中添加以下代码来定义一个路由:

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

其中 app.get 表示当收到 HTTP GET 请求时,会执行其回调函数。res.render 表示使用 EJS 模板引擎来渲染 about.ejs 模板文件。

  1. 渲染模板

可以在 views 目录下创建一个 about.ejs 文件,添加以下代码:

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

3. 中间件

中间件是 Express 的一大特性。它是一种能够处理 HTTP 请求和响应的函数,可以在应用程序的多个地方使用,通常用于:

  • 执行请求之前的处理
  • 执行请求之后的处理
  • 控制请求流程
  1. 使用内置中间件

Express 预先定义了许多有用的中间件,例如 express.static 帮助开发者提供静态资源的编译和缓存:

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

这里的 public 是一个包含了静态资产的文件夹。在浏览器中访问 http://localhost:3000/images/logo.png 就能看到静态资源 logo.png 了。

  1. 使用自定义中间件
---------------- ----- ---- ----- -
  -------------------- -----------
  ------
--

在每个请求中,都会打印当前时间。

4. 错误处理

在开发 Web 应用程序时,错误处理是重要的一环。

  1. 404 页面处理

app.js 末尾添加以下代码:

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

这段代码会匹配所有未定义的路由,并返回 "Sorry, this page does not exist."。

  1. 全局错误处理

使用以下代码来处理全局错误:

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

5. 实现 API

Express 同样支持实现 APIs。实现 API 的方式和实现 Web 应用程序类似。

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

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

在浏览器中访问 http://localhost:3000/api/user/123 可以得到如下 JSON 结果:

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

总结

在本文中,我们介绍了 Express 的基本概念和使用方法,包括安装和配置模板引擎、定义路由、使用中间件、处理错误和实现 API 等。Express 是一个小巧、灵活而又功能强大的框架,可以满足大部分 Web 应用程序和 API 的需求。希望这篇文章能够帮助大家更好地理解和使用 Express,开发出更加优秀的 Web 应用程序。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6454dc59968c7c53b0899a8a


猜你喜欢

  • Web Components:开源的组件库解决方案

    在前端开发中,组件库是不可或缺的工具之一。众多的组件库为前端开发提供了强大的支持,同时也为开发者提供了更高效的开发方式。而 Web Components 则是一种更加先进的组件库解决方案,可以为开发者...

    1 年前
  • TypeScript 中的枚举详解

    TypeScript 中的枚举详解 枚举(enums)是 TypeScript 中一种比较常见的数据类型,它主要用于描述一组有限的值,能够提高代码的可读性和可维护性,也可以让我们在编程时更加清晰地表达...

    1 年前
  • 使用 GraphQL 优化 API 设计

    什么是 GraphQL? GraphQL 是一种用于 API 的查询语言和运行时环境,它提供了一种更高效、强类型和简单的 API 设计方式,解决了 REST API 中存在的一些问题。

    1 年前
  • Vue.js 中 Vuex 状态管理详解

    引言 在日益复杂的前端开发中,状态管理已经逐渐成为前端开发的一个重要问题。在 Vue.js 中,我们可以通过 Vuex 来管理复杂的应用级别的状态。本文将深入探讨 Vuex 的相关知识,帮助读者快速上...

    1 年前
  • Serverless 架构下的消息队列设计

    在 Serverless 架构中,我们可以通过无需运维的 serverless 服务来处理业务逻辑,这大大减轻了开发人员的工作量。然而,在处理一些耗时的任务时(比如文件上传,数据格式转换等),我们需要...

    1 年前
  • SASS 中的导入规则与注意事项

    概述 在 CSS 中,我们可以使用 @import 规则来引入其他样式文件,SASS 也支持使用 @import 来进行样式的模块化开发。使用 SASS 进行样式开发,可以提升开发效率,使代码更具可维...

    1 年前
  • Sequelize 如何实现数据迁移?

    简介 Sequelize 是一款基于 Node.js 的 ORM 框架,它可以方便地操作各类数据库,包括 MySQL、PostgreSQL、SQLite 等。Sequelize 提供了丰富的 API,...

    1 年前
  • 解决 SPA 应用中的跨域问题

    随着单页面应用 (SPA) 的流行,前端开发中的跨域问题也随之而来。当前端应用通过 AJAX 发起跨域请求时,由于浏览器的安全限制,服务器会拒绝该请求并返回一个错误。

    1 年前
  • Redux 中使用 Reselect 提升性能

    在前端开发中,我们通常使用 Redux 来管理应用程序的状态。Redux 提供了一种可预测的状态管理方案,这使得我们的代码更易于维护和测试。然而,随着应用程序变得越来越复杂,我们可能会遇到一些性能问题...

    1 年前
  • 如何在 React Native 中使用 Enzyme 进行组件测试

    在 React Native 中使用 Enzyme 测试组件是一种相对简单和有效的测试方法。Enzyme 是一个由 Airbnb 所开发的 JavaScript 库,可以轻松地模拟/渲染组件,从而使测...

    1 年前
  • 支付宝 Dubbo 分析 + 性能优化

    在支付宝的架构中,Dubbo 是一个非常重要的技术,它是一个高性能、轻量级的开源 Java RPC 框架,用于实现分布式服务调用。本文将分析支付宝的 Dubbo 实现,并介绍一些性能优化的技巧,以便开...

    1 年前
  • PM2+Webpack 打造 Node.js 多线程服务

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,由于其优异的性能表现和灵活多变的特性,在最近几年得到了广泛的应用。如今,在 Web 应用程序的前端、后端和全栈开...

    1 年前
  • Hapi.js 与 Swagger 的集成指南

    随着前端领域的不断发展,前端开发变得越来越复杂。为了提高开发效率和代码质量,许多开发者开始使用各种框架和库。这篇文章将介绍 Hapi.js 和 Swagger 的集成,详细介绍它们的优势和用法。

    1 年前
  • Mongoose 中的 pre 和 post 钩子详解

    Mongoose 是 Node.js 上使用最多的 MongoDB 连接库之一,它提供了一些强大的特性来简化 MongoDB 数据库的使用。其中,pre 和 post 钩子是 Mongoose 中非常...

    1 年前
  • MongoDB 突然停止工作的解决方法

    背景 MongoDB 是一款非常流行的 NoSQL 数据库,它的特点是高性能、高可扩展性、易于开发和维护等。不过有时候你会遇到 MongoDB 突然停止工作的情况,这时候需要进行故障排除和解决问题。

    1 年前
  • 如何在 Jest 中使用 setupFiles 配置文件

    随着前端开发的迅速发展,测试已经成为一个不可或缺的环节。前端框架和库的出现,使得测试变得更加简单、快速和高效。其中 Jest 是一种非常流行的测试框架,它可以轻松地进行单元测试、集成测试和快照测试。

    1 年前
  • LESS 中的自动化工具推荐

    LESS 是一种 CSS 预处理语言,通过 LESS 可以使 CSS 的编写更加高效、灵活和易于维护。随着前端技术的发展,越来越多的自动化工具应运而生,使 LESS 的应用更加普及和便捷。

    1 年前
  • Web 组件:使用 Custom Elements 封装功能

    Web 组件是一种 Web 开发技术,它允许开发者通过封装 HTML、CSS 和 JavaScript 代码来创建一组自定义元素,这些元素可以在网页中被复用。Custom Elements 是 Web...

    1 年前
  • 利用 Headless CMS 来管理网站的多语言内容

    在全球化的互联网时代中,拥有一个多语言网站已经成为越来越多企业的需求。然而,对于前端开发者来说,管理网站上的多语言内容会比较麻烦,而 Headless CMS 则成为了一个高效的解决方案。

    1 年前
  • # 详解 ES12 中全局对象 globalThis

    详解 ES12 中全局对象 globalThis 在过去,JavaScript 中访问全局对象的方法因不同的运行环境而异,例如 Node.js 中的全局对象是 global,而浏览器中的全局对象则是 ...

    1 年前

相关推荐

    暂无文章