从零开始学习Node.js系列教程四：多页面实现数学运算的client端和server端示例

针对这个题目，我将分成以下几个部分进行讲解：

文章介绍
环境搭建
代码编写
示例说明

文章介绍

本文是从零开始学习Node.js系列教程的第四部分，主要探讨如何在client端和server端实现数学运算。本文的主要内容包括：

如何搭建client-server基本架构
如何实现多路径的路由
如何在client端和server端实现数学运算

环境搭建

在进行代码编写之前，我们需要先搭建Node.js的环境。具体步骤如下：

安装Node.js
Node.js 官网下载地址：https://nodejs.org/en/
启动Node.js环境
在终端或命令行中输入 node -v 命令，如果显示出当前Node.js版本号，则表示运行成功
安装npm
npm 是 Node.js 内置的包管理工具，可以使用 npm 来安装、升级、卸载应用程序依赖项。在终端或命令行中输入 npm -v, 如果显示出当前npm版本号，则表示安装成功。

代码编写

接下来我们将开始编写代码，具体步骤如下：

在Node.js环境中创建一个目录，命名为 "node-calc"，并进入此目录，在终端或命令行中输入 cd node-calc。
在 "node-calc" 目录下，创建 client 文件夹和 server 文件夹，并在 client 文件夹中创建 index.html 文件，在 server 文件夹中创建 server.js 文件。创建文件的方式可以使用文本编辑器或命令行进行。
编辑 index.html 文件。index.html 文件将作为我们的client端，我们需要在这里实现一个表单，用来接收用户输入的数值。代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
</head>
<body>

  <h1>计算器</h1>

  <form>
    <label>第一个数：<input type="number" name="x"></label><br><br>
    <label>第二个数：<input type="number" name="y"></label><br><br>
    <input type="submit" value="计算">
  </form>

  <div id="result"></div>

  <script>
    const form = document.querySelector('form')
    const result = document.querySelector('#result')

    form.addEventListener('submit', (event) => {
      event.preventDefault()

      const x = form.elements.x.value
      const y = form.elements.y.value

      fetch(`/add?x=${x}&y=${y}`)
        .then(response => response.text())
        .then(text => {
          result.innerHTML = `结果为 ${text}`
        })
    })
  </script>

</body>
</html>

编辑 server.js 文件。server.js 文件将作为我们的server端，我们需要在这里实现一个路由机制和数学运算。代码示例：

const http = require('http')
const url = require('url')

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((req, res) => {
  const { pathname, query } = url.parse(req.url, true)

  if (pathname === '/add') {
    const x = parseInt(query.x)
    const y = parseInt(query.y)
    const sum = x + y

    res.statusCode = 200
    res.setHeader('Content-Type', 'text/plain')
    res.end(`${sum}`)
  } else {
    res.statusCode = 404
    res.setHeader('Content-Type', 'text/plain')
    res.end('404 Not Found')
  }
})

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`)
})