从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例

下面我将详细讲解“从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例”的完整攻略。

一、Node.js基础知识

Node.js是什么：Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用事件驱动、非阻塞I/O模型，使其轻量又高效。
NPM是什么：Node.js的包管理工具，可用于安装、升级、卸载Node.js模块。

二、项目搭建

创建一个文件夹来作为我们的项目文件夹，例如：math-website
进入该文件夹，在终端（命令行）中输入：npm init，根据提示完成package.json文件的配置
在终端中输入：npm install express --save，安装Express框架
在math-website文件夹中创建一个名为index.js的文件，并将以下代码添加到文件中

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});

在终端中执行node index.js，启动服务器。访问http://localhost:3000，将看到“Hello World!”的字样，这意味着我们的服务器已成功运行。

三、页面设计

在math-website文件夹中新建一个名为views的文件夹，用来存放HTML模板文件
在views文件夹中新建一个名为home.ejs的文件，用来渲染主页
在home.ejs文件中添加以下代码

<!DOCTYPE html>
<html>
<head>
    <title>Math Website</title>
</head>
<body>
    <h1>Welcome to Math Website!</h1>
    <p>Please select a math operation:</p>
    <ul>
        <li><a href="/add">Addition</a></li>
        <li><a href="/subtract">Subtraction</a></li>
        <li><a href="/multiply">Multiplication</a></li>
        <li><a href="/divide">Division</a></li>
    </ul>
</body>
</html>

四、路由配置

在index.js文件中，配置所有的路由，代码如下：

app.get('/', (req, res) => {
    res.render('home.ejs');
});

app.get('/add', (req, res) => {
    res.send('This is an addition page');
});

app.get('/subtract', (req, res) => {
    res.send('This is a subtraction page');
});

app.get('/multiply', (req, res) => {
    res.send('This is a multiplication page');
});

app.get('/divide', (req, res) => {
    res.send('This is a division page');
});

我们通过app.get()方法来定义不同的路由，同时使用res.render()方法来渲染模板文件。

五、数学运算示例

新建一个名为math.js的文件，用来定义数学计算函数
在math.js文件中添加以下代码

exports.add = (a, b) => {
    return a + b;
};

exports.subtract = (a, b) => {
    return a - b;
};

exports.multiply = (a, b) => {
    return a * b;
};

exports.divide = (a, b) => {
    if (b === 0) {
        return 'Cannot divide by zero!';
    }
    return a / b;
};

在index.js中引入math.js，并配置路由，代码如下：

const math = require('./math.js');

app.get('/add', (req, res) => {
    const a = parseInt(req.query.a);
    const b = parseInt(req.query.b);
    const result = math.add(a, b);
    res.render('result.ejs', { operation: 'Addition', a, b, result });
});

app.get('/subtract', (req, res) => {
    const a = parseInt(req.query.a);
    const b = parseInt(req.query.b);
    const result = math.subtract(a, b);
    res.render('result.ejs', { operation: 'Subtraction', a, b, result });
});

app.get('/multiply', (req, res) => {
    const a = parseInt(req.query.a);
    const b = parseInt(req.query.b);
    const result = math.multiply(a, b);
    res.render('result.ejs', { operation: 'Multiplication', a, b, result });
});

app.get('/divide', (req, res) => {
    const a = parseInt(req.query.a);
    const b = parseInt(req.query.b);
    const result = math.divide(a, b);
    res.render('result.ejs', { operation: 'Division', a, b, result });
});

在views文件夹中新建一个名为result.ejs的文件，用来渲染运算结果页面。以下是result.ejs文件的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Math Website</title>
</head>
<body>
    <h1><%= operation %> Result</h1>
    <p><%= a %> <%= operationSymbol %> <%= b %> = <%= result %></p>
</body>
</html>

我们通过req.query对象来获取从URL中传入的查询参数，然后调用math.js中的函数来计算结果，最后渲染模板文件并将结果传递给模板文件。

六、示例说明

示例一：加法运算

在home页面，点击“Addition”链接
在加法运算页面中，输入两个数字，例如10和20，然后点击“Calculate”按钮
程序将计算10 + 20的结果，并将运算结果渲染到结果页面中，结果应该为30。

示例二：除法运算

在home页面，点击“Division”链接
在除法运算页面中，输入被除数和除数，分别为10和0，然后点击“Calculate”按钮
由于除数为0，无法进行计算，程序将输出“Cannot divide by zero!”的结果。

到此为止，我们已经完成了多页面实现数学运算的示例。希望这个例子对你的Node.js学习有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例 - Python技术站