前言
现今的互联网世界离不开 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:
$ npm install express --save
这里使用了参数 --save
,表示把 express
库保存到项目的 package.json
文件中,方便后续管理。
Hello World
接下来,使用 Express.js 来写一个简单的 Hello World 程序。首先,新建一个 app.js
文件:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ -------- ----- ---- - --------------- -------- -- ---------------- -------- -- - -------------------- --- --------- -- ---- ------- --
在命令行中运行以下命令启动程序:
$ node app.js
在浏览器中打开 http://localhost:3000/
,即可看到 "Hello World!" 字样。
路由
在 Express.js 中,路由由一个 URI 和一个特定的 HTTP 方法组成。路由的定义格式如下:
app.METHOD(PATH, HANDLER)
其中,app
表示 Express.js 的实例,METHOD
是 HTTP 请求方法,PATH
是路由的路径,HANDLER
是在路由匹配时执行的函数。
举个例子,要在应用程序中添加一个带有动态参数的路由,代码如下:
app.get('/users/:userId/books/:bookId', function (req, res) { res.send('User ID: ' + req.params.userId + ', Book ID: ' + req.params.bookId) })
运行应用程序后,在浏览器访问 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
:
$ npm install ejs --save
在应用程序中,使用以下代码来配置 EJS 视图引擎:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- -- ------ ------------- -------- ------ ------------ -------- ----- ---- - ------------------- - ------ --------- -- -- ---------------- -------- -- - -------------------- --- --------- -- ---- ------- --
在根目录下新建 views/index.ejs
文件:
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ ------- ----- ------- ---------- -- --- ----- ------ ------- -------
运行程序,浏览器访问 http://localhost:3000/
,即可看到 "Express" 字样。
静态文件
在 Express.js 中,使用内置的 express.static
中间件来托管静态文件。以下是一个将中间件函数绑定到 /public
目录的例子:
const express = require('express') const app = express() app.use(express.static('public')) app.listen(3000, function () { console.log('Example app listening on port 3000!') })
该代码中,express.static
的参数指定了静态文件存放的目录。现在,只需在 public
目录中添加静态文件即可在浏览器中访问。例如,如果将图片存储在 public/images
目录下,那么以下 URL 就可以访问该图片:
http://localhost:3000/images/kitten.jpg
数据库
在实际应用程序中,需要用到数据库来存储数据。可以选择关系型数据库或 NoSQL 数据库。
如果使用关系型数据库,比如 MySQL、PostgreSQL 等,需要使用相应的 ORM 框架,比如 Sequelize、TypeORM 等。如果使用 NoSQL 数据库,比如 MongoDB、Redis 等,则需要使用相应的客户端库和驱动。
以 MongoDB 为例,安装 mongodb
:
$ npm install mongodb --save
连接 MongoDB 数据库:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ----------- - ------------------------------ ----- --- - --------- ----- --- - --------------------------- ----- ------ - ----------- ------------------------ ------------- ------- - ---------------------- ------------ -- -------- ----- -- - ----------------- -- ---- ------------ ------------- ---- - ----- ---------- - -------------------------- ----------------------------------------- ----- - -------------- -- -- -- ----- ---------------- ---------- - ---------------------- -- ---- ------ -- --
这里,使用 MongoClient.connect
来连接数据库,db.collection
来访问集合,collection.find
来查询文档。以上例子只是入门。关于 MongoDB 的更多操作,可以参考官方文档。
这样,我们就完成了使用 Express.js 构建 Web 应用程序的学习。希望读者通过本文的学习,能够掌握 Express.js 的基础知识,并且能够使用它来开发自己的 Web 应用程序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/679724bd504e4ea9bde2ccf3