如何使用 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