node.js+express制作网页计算器

制作网页计算器的完整攻略如下：

1. 环境安装

首先，确保本地已经安装了node.js环境，然后通过npm安装express框架。

npm install express --save

2. 项目初始化

创建一个项目文件夹，初始化项目，并创建一个主文件app.js。

mkdir calculator
cd calculator
npm init
touch app.js

3. 安装模板引擎

由于我们需要展示一个页面，所以需要一个模板引擎。这里我们使用ejs模板引擎，通过npm安装并保存到依赖列表中。

npm install ejs --save

4. 编写代码

在app.js中，引入需要的模块。

const express = require('express')
const ejs = require('ejs')
const path = require('path')

然后创建一个express的实例，并设置使用ejs模板引擎。

const app = express()

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

接下来，设置app的根路由，并渲染模板。

const calculator = (req, res) => {
    res.render('calculator')
}

app.get('/', calculator)

最后，监听端口启动app。

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

5. 创建ejs模板

在项目中创建一个views文件夹，并创建一个名为calculator.ejs的模板。

mkdir views
touch views/calculator.ejs

在calculator.ejs中编写页面HTML代码和逻辑JS代码，实现计算器的基本功能。

示例1： 实现加减乘除

<h2>node.js + express 计算器</h2>

<form action="/" method="post">
    <input type="text" name="num1" placeholder="第一个数">
    <select name="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" name="num2" placeholder="第二个数">
    <input type="submit" value="计算">
</form>

<% if (result) { %>
<p><%= num1 %> <%= operator %> <%= num2 %> = <%= result %></p>
<% } %>

在app.js中设置POST路由并处理计算逻辑。

app.post('/', (req, res) => {
  const { num1, num2, operator } = req.body
  let result = null
  switch(operator) {
    case '+':
      result = Number(num1) + Number(num2)
      break
    case '-':
      result = Number(num1) - Number(num2)
      break
    case '*':
      result = Number(num1) * Number(num2)
      break
    case '/':
      result = Number(num1) / Number(num2)
      break
  }
  res.render('calculator', { num1, num2, operator, result })
})

示例2：实现平方、开方

<h2>node.js + express 计算器</h2>

<form action="/" method="post">
    <input type="text" name="num1" placeholder="数字">
    <select name="operator">
        <option value="square">平方</option>
        <option value="sqrt">开方</option>
    </select>
    <input type="submit" value="计算">
</form>

<% if (result) { %>
<p>计算结果：<%= result %></p>
<% } %>

在app.js中设置POST路由并处理计算逻辑。

app.post('/', (req, res) => {
  const { num1, operator } = req.body
  let result = null
  switch(operator) {
    case 'square':
      result = Math.pow(Number(num1), 2)
      break
    case 'sqrt':
      result = Math.sqrt(Number(num1))
      break
  }
  res.render('calculator', { num1, operator, result })
})

以上就是制作网页计算器的完整攻略。