如何使用 Express.js 实现一个在线投票系统
介绍
Express.js 是一款流行的 Node.js Web 应用程序框架。它提供了一个简单且强大的 API,可以帮助您快速搭建 Web 应用。本文将带您逐步实现一个在线投票系统,并介绍一些常用的 Express.js 特性。
环境搭建
在开始之前,您需要安装 Node.js 和 NPM。接着在您的项目目录下执行以下命令安装依赖:
npm init -y npm install express body-parser ejs --save
现在让我们从创建基本的 Express.js 应用程序开始。
简单的 Express.js 应用程序
在 app.js
中加入以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- -------- ---
从终端运行该应用程序,在浏览器中访问 http://localhost:3000
可以看到 Hello World!
。
路由
路由是 Web 应用程序中的核心概念。在 Express.js 中,路由由 HTTP 请求方法、一个路径和一个或多个处理程序函数组成。让我们添加一些路由来完成我们的投票系统。
在 app.js
中加入以下代码:
app.get('/poll', (req, res) => { res.render('poll'); }); app.post('/poll', (req, res) => { res.redirect('/poll'); });
我们添加了两个路由,一个用于 GET 请求,用于呈现投票表单,另一个用于 POST 请求,用于处理投票请求并重定向回 /poll
。
视图引擎
为了呈现动态内容,我们需要使用一个视图引擎。在这里,我们将使用 EJS。
在 app.js
中添加以下代码:
app.set('views', './views'); app.set('view engine', 'ejs');
现在我们需要创建一个视图模板,用于呈现投票表单。在 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