简介
Express.js 是 Node.js 中最受欢迎的 web 框架之一，它提供了一些特性和强大的 API，可以帮助开发者快速构建可扩展的 web 应用程序。本文将介绍如何使用 Express.js 做一个酷炫的 web 应用。
安装
要使用 Express.js，首先必须安装 Node.js。可以从 Node.js 官网 下载并安装 Node.js。
安装 Node.js 后，可以使用 npm 包管理器来安装 Express.js。在命令行中执行以下命令：
--- ------- ------- ------
这会将 Express.js 安装到项目的 node_modules 文件夹中。
创建一个基本的 Express 应用
使用 Express.js 创建一个基本的 web 应用程序的方法很简单。以下是一个最小的 Express 应用：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
代码解释：
- 第一行导入 Express.js 模块并将其赋值给
express变量。 - 第二行创建一个新的 Express 应用程序并将其赋值给
app变量。 - 第四行使用
app.get()方法创建一个路由，并在 URL 为/的 GET 请求上发送响应Hello World!。 - 最后一行监听
3000端口，并在应用启动时打印消息。
为了运行该应用程序，请将其保存到一个 app.js 文件中并在命令行中执行以下命令：
---- ------
应用程序将在端口 3000 上启动。在浏览器中打开地址 http://localhost:3000/，就可以看到 Hello World!。
Express 应用程序的重要部分
以下是一个标准的 Express 应用程序结构：
------ ------------ ------------- -------- ------- ---------- --------- --------- ------ --------- --------- ------- -------- --------
下面一一解释每个部分。
app.js
app.js 文件是应用程序的入口文件，在其中定义了应用程序的主要逻辑。我们已经在上面介绍了一个最小的应用程序，但实际的应用程序肯定会包含更多逻辑。可以在 app.js 文件中设置路由、渲染模板、处理表单等。
package.json
package.json 文件是 Node.js 项目的配置文件，其中包含了项目所需的所有应用程序依赖以及一些其他配置信息。在应用程序中引入第三方模块时，必须将它们添加到 package.json 文件中。可以使用以下命令生成或修改 package.json 文件：
--- ----
node_modules
node_modules 文件夹是存放项目依赖的文件夹。在执行 npm install 命令时，所有依赖都会被安装到 node_modules 文件夹中。
public
public 文件夹是存放静态资源的文件夹，例如 HTML、CSS 和 JavaScript 文件等。当浏览器请求这些资源时，Express.js 会在 public 文件夹中查找并返回它们。
views
views 文件夹是存放视图文件（也称为模板）的文件夹。Express.js 支持多种视图引擎，例如 EJS、Pug 和 Handlebars 等。视图文件用于生成 HTML 页面，在视图文件中可以使用模板语言生成动态内容。
routes
routes 文件夹是存放路由文件的文件夹。路由文件负责处理 URL 请求并在响应中返回数据。可以将 URL 分配给不同的路由文件，以便组织和管理应用程序的路由。
酷炫的 web 应用示例
以下是一个使用 Express.js 和 Bootstrap 4 构建的酷炫的 web 应用示例。应用程序包括一个主页、一个关于页面和一个联系页面。
安装 Bootstrap 以及其它依赖
--- ------- --------- ------ --------- ----------- ------- ---
目录结构
- -------
-- ----
--- -------------
-- ---
--- ------------
--- ------------------
--- -------------
- ------
-- --------
-- ---------
-- -----------
- ------
- -------
-- --------app.js
----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- --- - ---------- -- ---- ------ ---------- ------------------------------- --------- ----- ---- --------------------------- -- --- ------ ------ ------------------------------------------- ------------ -- --- ---------- ---------------- -------------------- ---------- ------------- -------- ------- -- ------ ----- ----------- - -------------------------- ------------ ------------- -- ----- ------ ----- ---- - ----- ---------------- -- -- ------------------- ------- -- ---- -----------
routes/index.js
----- ------- - ------------------- ----- ------ - ----------------- --------------- ----- ---- -- -------------------- -------------------- ----- ---- -- --------------------- ---------------------- ----- ---- -- ----------------------- -------------- - -------
views/home.ejs
-- ------- --------------- -- ----- ----------- ------------------ --- -------------------- -- --- ------------ -- ----------------- -- - ---- ------- ----- ---- ---------- --- --------- ------ ------- -- ------- --------------- --
views/about.ejs
-- ------- --------------- -- ----- ----------- ------------------ --- ------------------ ------- -- --------------- --- - ---- -- --- ---------- --- ---- -- --------- ------- -- ------- --------------- --
views/contact.ejs
-- ------- --------------- --
----- ----------- ------------------
--- -------------------- -------
-- ----------------- -- --- --- --- --- -- ----- ---- -------
----
---------- ------------------------
---------- -----------------
------------ --- ---- --- ------- --------
-----
-------
-- ------- --------------- --views/partials/header.ejs
--------- -----
------
------
----------------- ------------
----- ---------------- --------------------------
-------
------
---- ------------- ---------------- ----------- ---------
-- -------------------- ------------------- --------
------- ---------------------- ------------- ---------------------- ----------------------------- ------------------------------ --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- --------------------
--- ----------------- ---------
--- --------------- --------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- -----------------------
-----
--- -----------------
-- ---------------- ---------------------------
-----
-----
------
------
---- ------------------views/partials/footer.ejs
------ ------- -------------------------------------- ------- --------------------------------- ------- -------------------------------- ------- -------
在命令行中执行以下命令来启动应用程序：
---- ------
在浏览器中打开地址 http://localhost:3000/，就可以看到网站的主页了。尝试访问 http://localhost:3000/about 和 http://localhost:3000/contact，可以看到对应页面。
结论
本文介绍了如何使用 Express.js 做一个酷炫的 web 应用。我们创建了一个基本的 Express 应用程序，并使用 Bootstrap 4 构建了一个漂亮的网站。了解了本文所介绍的技术后，可以更深入地探索 Express.js 并构建更高级的 web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703dba1d91dce0dc84ceedb