<think>
我们正在
开发一个网页版计算器，需要包含加减乘除功能。根据引用[1]和[2]，我们有两个参考：一个是支持级联调用的控制台计算器类，另一个是简单的控制台加减乘除程序。但是用户要求的是网页版，因此我们需要构建一个Web应用。
步骤：
1. 使用
IntelliJ IDEA创建一个Web项目（例如使用
Java EE，Servlet和JSP技术）。
2. 设计
前端界面：一个简单的HTML页面，包含数字按钮、运算符按钮（+、
-、*、/）、等号按钮、清除按钮和一个显示区域。
3. 后端处理：使用Servlet处理计算请求，并返回计算结果。
4. 计算逻辑：可以设计一个计算器类，该类可以处理四则运算（参考引用[1]中的级联调用或引用[2]中的原子方法）。
注意：由于是网页版，我们通常不会在网页上实现级联调用（因为级联调用是面向对象编程中的链式调用，适合在单个请求中完成一系列操作，而网页计算器通常是每次点击发送一个请求，逐步计算）。但是，我们可以有两种设计思路：
a) 每次点击运算符按钮时，将当前显示的数字和运算符发送到服务器，服务器记录状态（需要会话跟踪），然后当点击等号时进行计算。
b) 整个表达式输入完成后（比如用户输入了“100+10
-5*10”），然后一次性发送到服务器进行计算。这种需要处理运算符优先级（引用[1]中是不考虑优先级，从左到右，但通常计算器会考虑优先级）。
由于引用[1]要求不考虑优先级，从左到右，我们也按照这个规则实现（即不考虑优先级，按顺序计算）。但注意，用户要求是网页版，所以我们需要根据网页交互的特点来设计。
为了简化，我们可以采用第二种方式：在客户端构建一个表达式字符串，然后一次性提交到服务器，服务器按顺序计算（不考虑优先级）并返回结果。
然而，引用[1]中要求级联调用，并且最后用终端方法得到结果。这个特性在Web应用中不太适用，因为Web应用是基于请求/响应的无状态模型。因此，我们可以在服务器端模拟一个计算器对象，但需要为每个用户会话保持其状态（使用HttpSession）。但是，这样做会使得服务器状态管理复杂。
另一种更简单的做法：在客户端使用
JavaScript实现计算器，这样无需服务器参与，但题目要求使用
IntelliJ IDEA开发，意味着要用
Java技术栈。因此，我们采用Servlet处理表达式计算。
具体步骤：
1. 创建项目：
- 打开
IntelliJ IDEA，创建新项目，选择“
Java Enterprise”，勾选“Web Application”（如果使用较新版本，可能需要选择Jakarta EE或
Java EE，具体取决于你的服务器，如Tomcat）。
- 配置项目名称和路径，完成创建。
2. 创建
前端页面（index.jsp或calculator.html）：
- 在webapp目录下创建calculator.html（或jsp），设计一个简单的计算器界面。
- 包含一个输入框（用于显示表达式和结果），以及数字按钮（0
-9）、运算符按钮（+、
-、*、/）、等号按钮（=）和清除按钮（C）。
3. 创建Servlet（CalculatorServlet）：
- 在src目录下创建包，然后创建CalculatorServlet类，继承HttpServlet。
- 重写doPost方法（也可以使用doGet，但通常表单提交用post）。
- 获取请求参数（表达式字符串），然后按顺序解析并计算（从左到右，不考虑优先级）。
4. 计算逻辑实现：
- 表达式字符串的
格式：例如“100+10
-5*10”，我们需要将其拆分成数字和运算符，然后从左到右依次计算。
- 注意：由于不考虑优先级，我们可以按顺序读取：第一个数字，然后依次读取运算符和下一个数字，进行计算。
5. 返回计算结果：将计算结果返回给
前端，更新显示。
但是，引用[1]中要求计算器类支持级联调用。我们可以把这个计算器类作为后端计算逻辑的实现。因此，我们在后端创建一个Calc类，支持级联调用，然后在Servlet中解析表达式，并调用Calc类完成计算。
然而，表达式字符串如何转换为级联调用？我们可以这样：
表达式：100+10
-5*10
-> 转换为：new Calc(100).add(10).subtract(5).multiply(10).getResult()
但是，表达式是字符串，我们需要解析并动态构建这个调用链。这可以通过设计一个解析器，然后利用Calc类按顺序执行操作。
因此，我们设计两个类：
- Calc：实现级联调用的计算器类。
- ExpressionParser：将表达式字符串解析成操作序列，然后使用Calc类执行。
但是，为了简化，我们可以直接在Servlet中拆分表达式，然后使用Calc类逐步计算。
例如：
表达式：100+10
-5*10
步骤：
1. 初始化Calc(100)
2. 遇到+10
-> 调用add(10)
3. 遇到
-5
-> 调用subtract(5)
4. 遇到*10
-> 调用multiply(10)
5. 调用getResult()得到结果
但是，表达式字符串的解析：如何拆分？我们可以按运算符拆分，但要注意运算符可能有多个字符（比如负号），但这里我们只有单个运算符。我们可以使用正则表达式拆分。
然而，表达式字符串中可能有运算符作为正负号的情况，但题目没有要求，我们假设都是二元运算符，且表达式是合法的。
具体实现：
后端
代码：
1. 创建Calc类（只读，每次操作返回新的Calc对象）：
- 因为要求只读，所以每次操作都返回一个新的Calc对象，这样符合不可变性。
- 属性：当前结果（double或int，但题目是整数，不过除法可能产生小数，所以用double）
- 构造方法：Calc(double initialValue)
- 方法：add(double value), subtract(double value), multiply(double value), divide(double value)，每个方法都返回一个新的Calc对象，该对象的结果是当前操作后的值。
- 终端方法：getResult()，返回计算结果。
2. 在Servlet中：
- 获取表达式字符串（如"100+10
-5*10"）。
- 使用正则表达式拆分：split("(?<=[
-+*/])|(?=[
-+*/])")，这样可以将表达式拆分成数字和运算符的数组。例如：["100", "+", "10", "
-", "5", "*", "10"]
- 然后，数组第一个元素是初始值，创建一个Calc对象。
- 遍历数组的后续元素（每两个一组：运算符和数字），根据运算符调用Calc的相应方法（注意：每次调用都会返回一个新的Calc对象）。
- 最后调用getResult()得到结果。
但是，注意除法分母为0的情况（引用[3]中有处理），需要在divide方法中检查。
3. 返回结果：将计算结果写回给
前端。
前端交互：
- 用户点击按钮，我们在输入框中构建表达式字符串（比如点击100，再点击+，再点击10，输入框显示"100+10"）。
- 当点击等号时，将整个表达式发送到服务器（通过AJAX或表单提交），服务器返回计算结果，然后显示在输入框中。
为了更好的用户体验，我们使用AJAX异步提交。
考虑到时间，我们给出核心
代码。
步骤详细：
一、创建Calc类（在src/main/
java下，例如包名为com.example.calculator）
```
java
package com.example.calculator;
public class Calc {
private final double currentValue;
public Calc(double initialValue) {
this.currentValue = initialValue;
}
public Calc add(double value) {
return new Calc(this.currentValue + value);
}
public Calc subtract(double value) {
return new Calc(this.currentValue
- value);
}
public Calc multiply(double value) {
return new Calc(this.currentValue * value);
}
public Calc divide(double value) {
if (value == 0) {
throw new ArithmeticException("Division by zero");
}
return new Calc(this.currentValue / value);
}
public double getResult() {
return currentValue;
}
}
```
二、创建
ExpressionParser工具类（可选，也可以将解析逻辑放在Servlet中）
这里我们直接在Servlet中解析表达式。
三、创建CalculatorServlet
```
java
package com.example.calculator;
import
javax.servlet.*;
import
javax.servlet.http.*;
import
javax.servlet.annotation.*;
import
java.io.IOException;
import
java.util.Arrays;
import
java.util.List;
@WebServlet(name = "CalculatorServlet", value = "/calculate")
public class CalculatorServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String
expression = request.getParameter("
expression");
// 解析表达式：假设表达式由数字和运算符组成，没有空格，运算符只有+
- * /
// 拆分表达式：例如 "100+10
-5*10"
-> ["100", "+", "10", "
-", "5", "*", "10"]
String[] tokens =
expression.split("(?<=[
-+*/])|(?=[
-+*/])");
if (tokens.length == 0) {
response.getWriter().write("0");
return;
}
try {
// 第一个token必须是数字
double initialValue = Double.parseDouble(tokens[0]);
Calc calc = new Calc(initialValue);
// 从第二个token开始，每两个一组：运算符和数字
for (int i = 1; i < tokens.length; i += 2) {
if (i + 1 >= tokens.length) {
// 表达式不完整，比如最后只有一个运算符，没有数字，则忽略
break;
}
String operator = tokens[i];
double value = Double.parseDouble(tokens[i+1]);
switch (operator) {
case "+":
calc = calc.add(value);
break;
case "
-":
calc = calc.subtract(value);
break;
case "*":
calc = calc.multiply(value);
break;
case "/":
calc = calc.divide(value);
break;
default:
throw new IllegalArgumentException("Invalid operator: " + operator);
}
}
double result = calc.getResult();
response.getWriter().write(Double.toString(result));
} catch (NumberFormatException e) {
response.getWriter().write("Error: Invalid number format");
} catch (ArithmeticException e) {
response.getWriter().write("Error: Division by zero");
} catch (IllegalArgumentException e) {
response.getWriter().write(e.getMessage());
}
}
}
```
四、
前端页面（webapp/calculator.html）
简单实现一个带按钮的页面，使用
JavaScript构建表达式，并通过AJAX发送到服务器。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<title>Calculator</title>
<style>
.calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border
-radius: 5px;
}
#display {
width: 100%;
height: 40px;
margin
-bottom: 10px;
padding: 5px;
font
-size: 18px;
}
.buttons {
display: grid;
grid
-template
-columns: repeat(4, 1fr);
grid
-gap: 5px;
}
button {
height: 40px;
font
-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('
-')">
-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="clearDisplay()" style="grid
-column: span 2;">C</button>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
const
expression = document.getElementById('display').value;
// 发送表达式到服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', '/calculate', true);
xhr.setRequestHeader('Content
-Type', 'application/x
-www
-form
-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('display').value = xhr.responseText;
} else {
alert('Error: ' + xhr.statusText);
}
};
xhr.onerror = function() {
alert('Request failed.');
};
xhr.send('
expression=' + encodeURIComponent(
expression));
}
</script>
</body>
</html>
```
五、配置和运行：
- 将项目部署到Tomcat服务器，启动。
- 访问http://localhost:8080/项目名/calculator.html
注意：这个实现不考虑运算符优先级，按照从左到右的顺序计算。如果需要考虑优先级，则需要更复杂的解析（如逆波兰表达式）。
这个网页版计算器实现了加减乘除功能，使用了
IntelliJ IDEA进行
开发，后端
Java，
前端HTML/CSS/
JavaScript，通过Servlet处理计算请求。
注意：这个计算器在处理小数时可能产生精度
问题（这是浮点数的通病），可以根据需要改为使用BigDecimal，但题目没有要求。
以上即为
开发网页版计算器的主要步骤和
代码。
相关
问题：
1. 如何处理表达式中的运算符优先级？
2. 如何改进这个计算器以支持括号？
3. 如何实现连续计算（即每次计算后，结果显示在输入框，可以继续输入运算符和数字）？
4. 如何为计算器添加历史记录功能？
5. 如何对Servlet中的计算逻辑进行单元测试（参考引用[3]）？
</think>
### 使用
IntelliJ IDEA 开发网页版四则运算计算器的方法
#### 核心
开发步骤
1. **创建 Web 项目**
- 在
IntelliJ IDEA 中选择 `
Java Enterprise` 项目模板
- 勾选 `Web Application` (Servlet/JSP) 支持
- 配置 Tomcat 服务器作为运行环境
2. **实现计算器核心类 (Calc.
java)**
```
java
public class Calc {
private final double currentValue;
public Calc(double initialValue) {
this.currentValue = initialValue;
}
public Calc add(double value) {
return new Calc(this.currentValue + value);
}
public Calc subtract(double value) {
return new Calc(this.currentValue
- value);
}
public Calc multiply(double value) {
return new Calc(this.currentValue * value);
}
public Calc divide(double value) {
if (value == 0) throw new ArithmeticException("Division by zero");
return new Calc(this.currentValue / value);
}
public double getResult() {
return currentValue;
}
}
```
*特点：*
- 不可变对象设计（符合只读要求）
- 支持链式调用如 `new Calc(10).add(5).multiply(2)`
- 除法包含零值检查[^3]
3. **创建 Servlet 处理器 (CalculatorServlet.
java)**
```
java
@WebServlet("/calculate")
public class CalculatorServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException {
String expr = request.getParameter("
expression");
String[] tokens = expr.split("(?=[
-+*/])|((?<=[
-+*/]))");
try {
double result = parse
Expression(tokens);
response.getWriter().print(result);
} catch (Exception e) {
response.setStatus(400);
response.getWriter().print("Error: " + e.getMessage());
}
}
private double parse
Expression(String[] tokens) {
Calc calc = new Calc(Double.parseDouble(tokens[0]));
for (int i = 1; i < tokens.length; i += 2) {
String op = tokens[i];
double val = Double.parseDouble(tokens[i+1]);
switch (op) {
case "+": calc = calc.add(val); break;
case "
-": calc = calc.subtract(val); break;
case "*": calc = calc.multiply(val); break;
case "/": calc = calc.divide(val); break;
}
}
return calc.getResult();
}
}
```
*表达式处理逻辑：*
1. 拆分输入如 `"100+10
-5*10"` 为 `["100", "+", "10", "
-", "5", "*", "10"]`
2. 顺序执行运算符（不考虑优先级）
3. 使用 Calc 类完成链式计算[^1]
4. **
前端页面 (index.jsp)**
```html
<div class="calculator">
<input type="text" id="display" readonly>
<div class="keys">
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button onclick="append('+')">+</button>
<!
-- 其他数字和运算符按钮
-->
<button onclick="calculate()">=</button>
</div>
</div>
<script>
function append(val) {
document.getElementById("display").value += val;
}
function calculate() {
const expr = document.getElementById("display").value;
fetch("/calculate", {
method: "POST",
body: "
expression=" + expr
})
.then(response => response.text())
.then(result => {
document.getElementById("display").value = result;
});
}
</script>
```
5. **单元测试 (使用 JUnit)**
```
java
public class CalcTest {
@Test
public void testChainCalculation() {
double result = new Calc(100)
.add(10)
.subtract(5)
.multiply(10)
.getResult();
assertEquals(1050, result, 0.001);
}
@Test(
expected = ArithmeticException.class)
public void testDivisionByZero() {
new Calc(10).divide(0);
}
}
```
使用 `Ctrl+Shift+T` 在
IntelliJ IDEA 中快速创建测试[^3]
#### 关键特性实现
1. **链式调用**
- 每个运算方法返回新的Calc实例
- 保持对象不可变性
2. **
错误处理**
- 除零异常处理 `ArithmeticException`
- 前端显示
错误信息
3. **表达式解析**
- 正则分割运算符和操作数：`split("(?=[
-+*/])|((?<=[
-+*/]))")`
- 顺序执行计算（左→右）
4. **前后端交互**
- 使用 Fetch API 异步提交表达式
- Servlet 返回纯文本结果
#### 部署运行
1. 在
IDEA 中配置 Tomcat
2. 添加项目工件（Artifact）
3. 点击运行按钮启动服务器
4. 访问 `http://localhost:8080/项目名`
---
### 相关
问题
1. **如何实现运算符优先级处理？**
*（需修改表达式解析算法为逆波兰表示法）*
2. **如何支持括号运算？**
*（需使用栈结构实现表达式树解析）*
3. **怎样保存计算历史记录？**
*（可添加数据库存储或会话管理）*
4. **如何实现连续计算功能？**
*（将计算结果作为下一次计算的初始值）*
5. **怎样增强
前端用户体验？**
*（添加实时计算预览、动画效果等）*
本文介绍了解决IDEA中JavaScript代码出现expressionexception错误的方法。该问题源于IDEA默认使用了EcmaScript5.1标准，而代码实际使用的是EcmaScript6标准。通过调整IDEA的JavaScript语言版本设置，可以消除代码编辑器中的错误提示。
扫一扫
9772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
