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>