如何使用 Express.js 实现一个在线投票系统

阅读时长 6 分钟读完

如何使用 Express.js 实现一个在线投票系统

介绍

Express.js 是一款流行的 Node.js Web 应用程序框架。它提供了一个简单且强大的 API,可以帮助您快速搭建 Web 应用。本文将带您逐步实现一个在线投票系统,并介绍一些常用的 Express.js 特性。

环境搭建

在开始之前,您需要安装 Node.js 和 NPM。接着在您的项目目录下执行以下命令安装依赖:

现在让我们从创建基本的 Express.js 应用程序开始。

简单的 Express.js 应用程序

app.js 中加入以下代码:

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

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

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

从终端运行该应用程序,在浏览器中访问 http://localhost:3000 可以看到 Hello World!

路由

路由是 Web 应用程序中的核心概念。在 Express.js 中,路由由 HTTP 请求方法、一个路径和一个或多个处理程序函数组成。让我们添加一些路由来完成我们的投票系统。

app.js 中加入以下代码:

我们添加了两个路由,一个用于 GET 请求,用于呈现投票表单,另一个用于 POST 请求,用于处理投票请求并重定向回 /poll

视图引擎

为了呈现动态内容,我们需要使用一个视图引擎。在这里,我们将使用 EJS。

app.js 中添加以下代码:

现在我们需要创建一个视图模板,用于呈现投票表单。在 views 文件夹下创建一个名为 poll.ejs 的文件,并加入以下代码:

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

处理表单提交

app.js 中添加以下代码以处理表单提交:

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

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

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

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

我们首先添加了一个中间件,用于解析表单提交的数据。接着我们定义了一个表示编程语言投票结果的对象,将 languages[language] 加 1 并重定向回表单页面。

显示投票结果

我们现在已经收集了投票结果,但是还没有将其呈现给用户。在 app.js 中加入以下代码:

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

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

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

我们添加了一个路由,用于呈现投票结果。这里我们计算了投票结果的百分比,并将结果通过一个对象传递给视图。

现在我们需要创建一个视图模板用于呈现投票结果。在 views 文件夹下创建一个名为 vote_results.ejs 的文件,并加入以下代码:

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

结论

在本文中,我们介绍了如何使用 Express.js 实现一个简单的在线投票系统。我们学习了路由、视图引擎和表单处理,并通过一个完整的示例代码展示了它们的使用。希望本文能够帮助您提高对 Express.js 的理解和掌握。

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

纠错
反馈