用js实现计算器功能,包含加减等于,并与相应的html界面相关联,要求将js文件放在服务器,用户发送请求,在服务器计算后返回给浏览器并且使用node.js,express和axios实现服务器相关功能
时间: 2024-03-24 12:35:49 浏览: 30
好的,我可以为您提供一个基于node.js、express和axios的简单实现。首先,您需要安装这些依赖项。您可以使用以下命令来安装它们:
```
npm install express axios
```
接下来,您可以使用以下代码实现服务器:
```javascript
const express = require('express');
const axios = require('axios');
const path = require('path');
const app = express();
app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));
app.post('/calculate', async (req, res) => {
const { num1, num2, operator } = req.body;
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
result = '未知操作符';
}
res.send({ result });
});
app.listen(3000, () => {
console.log('服务器已启动,监听端口 3000');
});
```
在此示例中,我们使用了 `express` 和 `axios` 模块。我们定义了一个 `POST` 路由 `/calculate`,它将接收来自客户端的两个数字和一个操作符,并返回计算结果。我们使用 `express.json()` 中间件来解析 JSON 请求正文,并使用 `express.static()` 中间件来提供静态文件服务。
在 `POST` 路由处理程序中,我们使用 `switch` 语句根据操作符计算结果。然后,我们将结果作为 JSON 对象发送回客户端。
最后,我们在端口 `3000` 上启动服务器。您需要在服务器的 `public` 目录中创建一个 HTML 文件,其中包含用户界面和 JavaScript 代码,以便用户可以与计算器交互。在 HTML 文件中,您可以使用 `axios` 模块向服务器发送 `POST` 请求,并将结果显示在页面上。例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<input type="text" id="num1">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2">
<button onclick="calculate()">计算</button>
<div id="result"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function calculate() {
const num1 = document.getElementById('num1').value;
const num2 = document.getElementById('num2').value;
const operator = document.getElementById('operator').value;
axios.post('/calculate', { num1, num2, operator })
.then(response => {
const result = response.data.result;
document.getElementById('result').innerHTML = result;
})
.catch(error => {
console.error(error);
});
}
</script>
</body>
</html>
```
在此 HTML 文件中,我们创建了一个表单,其中包含两个输入框、一个下拉列表和一个按钮,用户可以使用它们输入数字和操作符,并点击按钮来计算结果。我们使用 `axios` 模块向服务器发送 `POST` 请求,并在成功响应后将结果显示在页面上。