Node.js 如何构建爱情计算器
在本文中,我们将创建一个爱情计算器。爱情计算器用于计算伴侣之间的爱情百分比。
功能:
- 获取用户的姓名
- 获取用户的伴侣姓名
- 显示爱情百分比
方法:
我们将使用Body Parser来捕获用户在表单中输入的值,如用户的姓名和用户的伴侣姓名。然后我们将根据这些值计算百分比,并使用EJS将结果数据发送到网页。EJS是一个中间件,可以轻松地从服务器文件(app.js或server.js)向网页发送数据。
实施:
下面是以上方法的逐步实现。
步骤1:项目设置
初始化NPM:
在终端中创建和定位您的项目文件夹,然后输入以下命令:
npm init -y
这将初始化我们的节点应用程序并创建一个package.json文件。
安装依赖项: 将您的根项目目录定位到终端,并键入命令。
npm install express ejs
在你的项目中安装Express和Ejs作为依赖项
创建服务器文件: 创建一个 ‘app.js’ 文件,在此文件中要求Express模块,并创建常量 ‘app’ 用于创建express模块的实例,然后将EJS设置为默认的视图引擎。
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
重新排列您的目录: 需要使用’.ejs’作为HTML文件的扩展名,而不是使用EJS来使用它。然后,您必须将每个’ .ejs ‘文件移到根目录中的视图目录中。 EJS默认情况下会在视图文件夹中查找’ .ejs ‘文件。
使用EJS变量: 创建一个 ‘home.ejs’, 在 ‘home.ejs’ 中,您必须使用EJS变量从服务器文件接收值。您可以像这样在EJS中声明变量
<%= variableName %>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<%= variableName %>
</body>
</html>
将数据发送到一个变量: 在您的服务器文件(app.js或index.js)中,您可以使用render方法将一个EJS文件和一些数据一起发送。
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
从表单中获取数据到app.js: 要接收表单的输入值,我们必须使用一个名为body-parser的节点包。
安装body-parser:
npm install body-parser
需要 body-parser 模块:
const bodyParser = require('body-parser')
然后:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
然后我们可以使用请求对象处理表单数据。
步骤2:创建功能:
输入用户的名字和用户的伴侣名字: 为此,我们必须在 ‘home.ejs’ 文件中创建一个表单,并在我们的 ‘app.js’ 文件中使用Body Parser处理表单数据。
<form action="/" method="post">
<input type="text" name="username" placeholder="Your Name">
<input type="text" name="partnername" placeholder="Your Partner Name">
<button type="submit">Calculator</button>
</form>
在’app.js’内处理表单数据: 我们必须使用req.body.valueName从表单中获取值,然后执行下面的操作来计算一个百分比值。
app.post('/', (req, res)=> {
userName = req.body.username;
partnerName = req.body.partnername;
var combinedNames = userName + partnerName
var lowerNames = combinedNames.toLowerCase()
console.log(lowerNames);
var t = lowerNames.split("t").length - 1;
var r = lowerNames.split("r").length - 1;
var u = lowerNames.split("u").length - 1;
var e = lowerNames.split("e").length - 1;
var firstDigit = t + r + u + e
if (firstDigit < 5) {
firstDigit = firstDigit + 5;
}
var l = lowerNames.split("l").length - 1;
var o = lowerNames.split("o").length - 1;
var v = lowerNames.split("v").length - 1;
var e = lowerNames.split("e").length - 1;
var secondDigit = l + o + v + e
var lovePercentage = firstDigit + '' + secondDigit;
});
向 ‘home.ejs’ 页面发送值: 如同前面的步骤,我们发送一个字符串 “你好Geeks!” 到主页,现在让我们发送一个百分比值到变量 ‘lovePercentage’ 。
res.render("home.ejs", {percentage: lovePercentage});
接收到的爱的百分比的值为: 要接收来自 ‘app.js’ 的值,我们必须在‘ home.ejs’ 内使用ejs变量。
<p>Love Percentage: <%= percentage %></p>
以下是使用Node.js构建爱情计算器的完整代码:
app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
const bodyParser = require('body-parser')
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
app.get('/', (req, res) => {
res.render("home.ejs", {percentage: ""});
});
app.post('/', (req, res)=> {
userName = req.body.username;
partnerName = req.body.partnername;
var combinedNames = userName + partnerName
var lowerNames = combinedNames.toLowerCase()
console.log(lowerNames);
var t = lowerNames.split("t").length - 1;
var r = lowerNames.split("r").length - 1;
var u = lowerNames.split("u").length - 1;
var e = lowerNames.split("e").length - 1;
var firstDigit = t + r + u + e
if (firstDigit < 5) {
firstDigit = firstDigit + 5;
}
var l = lowerNames.split("l").length - 1;
var o = lowerNames.split("o").length - 1;
var v = lowerNames.split("v").length - 1;
var e = lowerNames.split("e").length - 1;
var secondDigit = l + o + v + e
var lovePercentage = firstDigit + '' + secondDigit;
res.render("home.ejs", {percentage: lovePercentage});
});
app.listen(3000);
home.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Love Calculator</title>
</head>
<body>
<form action="/" method="post">
<input type="text" name="username"
placeholder="Your Name">
<input type="text" name="partnername"
placeholder="Your Partner Name">
<button type="submit">Calculator</button>
</form>
<p>Love Percentage: <%= percentage %></p>
</body>
</html>
运行应用程序的步骤: 在终端中输入命令以运行您的脚本。
node app.js
输出: