怎样用 Express.js 做一个酷炫的 web 应用

面试官：小伙子，你的数组去重方式惊艳到我了

简介

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

阅读全文

猜你喜欢

  • RxJS 操作符 filter 的使用及注意事项

    RxJS 是一款广泛使用的 JavaScript reactive programming 库。RxJS 中的 filter 操作符是常用的一种，它用于过滤数据流中的数据。

    14 天前
  • 利用 ES6 实现一个简单的单例模式

    单例模式是一个常用的软件设计模式，其目的是保证一个类只有一个实例，并提供一个访问该实例的全局入口。在实际开发中，单例模式有许多应用场景，比如全局配置、日志记录、数据库连接等，可以有效解决实例化对象过多...

    14 天前
  • 解决超宽或超高元素溢出的响应式设计问题

    在响应式设计中，我们经常会遇到超宽或超高的元素溢出的问题，这不仅会影响页面的美观度和用户体验，还会导致页面排版混乱。为解决这个问题，我们需要采取一些措施，本篇文章将介绍一些解决方法。

    14 天前
  • 如何优化深度学习模型的性能

    深度学习是现代人工智能应用的关键技术之一，深度学习模型可以自动从数据中学习潜在的规律和特征，对各种现实世界的问题有着广泛的应用，如计算机视觉、语音识别、自然语言处理等领域。

    14 天前
  • 使用 Deno 进行静态文件服务器搭建

    前言 在前端开发过程中，静态资源的处理和传递是必不可少的，最常见的做法就是使用类似 Apache 或 Nginx 的服务器软件来托管文件。但是，为了更好地实现前端开发的持续性和跨平台性，我们需要更强大...

    14 天前
  • Vue 项目中如何与 TypeScript 进行集成

    Vue.js 是一款流行的前端框架，而 TypeScript 则是一种语言，它是 JavaScript 的一个超集，可以为 Vue 项目带来更强的类型检查和更好的可维护性。

    14 天前
  • 解决在 Material Design 中使用 ViewPager 的 bug

    在 Android 中，Material Design 是一种让应用程序外观更加现代化和绚丽的设计语言。Material Design 中的 ViewPager 是一种常见的 UI 控件，用于在不同的...

    14 天前
  • 在GraphQL中使用Prisma 2构建数据库驱动型应用

    前言 GraphQL是一种用于API的查询语言，它被广泛应用于构建现代Web应用程序。最近，Prisma 2这款工具成为了创建数据库驱动型GraphQL应用程序的首选库。

    14 天前
  • Node.js 出现的版本兼容性问题

    Node.js 是一种前端开发的工具，But 在使用 Node.js 进行版本更新时，会遇到版本兼容性问题。这篇文章将深入讨论这些问题，包括其学习和指导意义，同时提供示例代码用于参考。

    14 天前
  • Angular 应用中 RxJS bufferTime 的使用

    在 Angular 应用的开发中，我们经常需要处理异步数据流，而 RxJS 是一个功能强大的 Reactive Programming 库，在处理数据流方面有着很大的优势。

    14 天前
  • 从框架的角度去了解 Redux 与 Flux 的区别

    在前端开发中，管理应用程序状态是一个非常关键的问题。随着应用程序规模的增长，你将逐渐发现，难以维护、修改和测试应用程序状态变得越来越困难。Redux 和 Flux 都是解决这个问题的库，它们通过数据流...

    14 天前
  • Redis 在集群环境下的数据一致性保证

    引言 Redis 是一种高性能的 NoSQL 数据库，可以实现快速读取和写入数据的操作。它可以存储键值对、哈希表、列表、集合等各种数据结构。在互联网应用中，使用 Redis 的场景非常多，例如缓存和会...

    14 天前
  • ESLint 如何配合 Web Components 提高代码质量？

    在现代 Web 开发过程中，Web 组件已成为构建高效、可维护、重复利用的前端应用程序的重要部分。而在开发 Web 组件的过程中，如何保证代码的质量是非常关键的。本文将介绍如何利用 ESLint 在开...

    14 天前
  • 利用 ES10 集齐 7 个优秀的技巧

    ES10 是 JavaScript 的一个重要版本，它为前端开发带来了一些令人兴奋的新特性。在本篇文章中，我们将介绍七个利用 ES10 的优秀技巧，这些技巧将有助于提高前端开发效率和代码质量。

    14 天前
  • 解决 Vue.js SPA 应用切换路由时页面闪烁问题

    如果你使用 Vue.js 来构建单页面应用（SPA），你可能会遇到页面切换时出现短暂的闪烁或白屏的问题。这个问题通常出现在切换路由时，用户会感到不舒服，甚至会对应用的体验造成负面影响。

    14 天前
  • 使用 Node.js 和 Webpack 优化前端性能的方法

    使用 Node.js 和 Webpack 优化前端性能的方法 在现代化的 Web 开发中，尤其是在前端开发中，性能优化一直是一个非常重要的话题。为了能够提供更好的用户体验和更快的加载速度，开发者们需要...

    14 天前
  • Express.js 中的 AJAX 请求处理方法

    AJAX 是一种用于在不重新加载整个页面的情况下更新页面的技术，它使用 JavaScript，XML 和 HTTP 请求来实现局部更新。Express.js 是一种流行的 Node.js 框架，提供了...

    14 天前
  • TypeScript 中如何定义类属性的可选性

    在 TypeScript 中，我们可以通过使用可选属性来定义一个类属性是否必须被赋值。这在实际开发中非常有用，因为在某些情况下我们可能并不知道一个属性的值是否会存在。

    14 天前
  • 无障碍性技术的 6 个关键点

    在现代化的网页中，无障碍性技术对于许多人来说是一个必不可少的部分，尤其是对于那些有视力、听力以及其他障碍的用户。在本文中，我们将要讨论无障碍性技术的 6 个关键点，这些点包括： 基本 HTML 标签...

    14 天前
  • Material Design 中的列表规范详解

    在 Material Design 中，列表是在用户界面中经常使用的交互元素之一。因此，关于列表的设计规范就显得尤为重要。在本文中，我们将深入研究 Material Design 中的列表规范，包括列...

    14 天前

相关推荐

    暂无文章