极客教程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
输出：
