四则运算器
使用
运行springboot项目
网页中输入localhost:8080/outer.html (即前端所在路径)
如下
并没做视觉效果
输入数值并选择相应算符,点击"获取结果"按键即可计算
功能介绍
- 该计算器支持小数(使用duoble定义)
- 前端使用javascript配合正则表达式对输入数据进行筛选,因此输入框中只能输入浮点数,否则将会报错
3.后端中使用throw语句对除数为0以及数据溢出进行报错(在mathAPI源码中得到的思路)(然而只能在控制台中看到)
不足之处
- 原本想写前端数据异常阻止submit提交以及在前端实现除数为零的判断,前者因技术原因出了bug实在是改不了.后者涉及到String类型的比较,想用char数组转换在进行遍历比较但好像在前端实现不了
- 理想中是前端传给数据,后端接受处理并传回前端,前端用alert方式输出,可增强该计算器的复用性(不用再返回上一页面)但是静态页面无法接受变量,所以寄
- 难以实现多项四则运算
学习
以javaweb的学习为主.学了一下前后端的基本知识
一开始想用servlet实现前后端交互,后来发现controller类中有相关方法
前端用表单标签接受数据,JavaScript处理后用正则表达式判断
后端由于前后端交互问题学了tomcat,servlet,http相关,request以及response语句
处理异常时了解了throw语句,以及若干功能类,同时对url了解更深了
代码
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四则运算器</title>
</head>
<body>
<form action="/count" method="get" >
请输入数字
<input type="text" name = "variable1" id = "variable1">
请输入操作
<select name = "choose" id ="choose">
<option value="plus">加</option>
<option value="minus">减</option>
<option value="multiple">乘</option>
<option value="divide">除</option>
</select>
请输入数字
<input type="text" name="variable2" id = "variable2">
<input type="submit" value="获取结果" id = "submit">
<br>
<div style="display: none" id = "error"> <span style="color: red" >数据有误,重新输入</span></div>
<div style="display: none" id = "error3"> <span style="color: red" >提交失败</span></div>
</form>
<script>
var v1 = document.getElementById("variable1")
var v2 = document.getElementById("variable2")
var choose = document.getElementById("choose")
var reg = /(^-?[1-9]\d*\.\d+$|^-?0\.\d+$|^-?[1-9]\d*$|^0$)/
var index = true//记录是否两个数据都符合条件
v1.onblur = function(){
var input1 = v1.value.trim();//不能用在function外(花了我一个小时找bug,哭了)
var res = reg.test(input1)
if(res){
error.style.display= "none"
}else{
error.style.display= ""
index = false;
}
}
v2.onblur = function (){
var input2 = v2.value.trim();
var res =reg.test(input2)
if(res){
error.style.display= "none"
}else{
error.style.display= ""
index = false;
}
}//此处为在两个输入框失去焦点后判断数据是否符合标准
var submit = document.getElementById("submit")
submit.onsubmit = function (){
if(index){
error3.style.display="none"
}else{
error3.style.display = ""
return false
}//原本想实现不符合条件点击时报错并阻止提交,但好像没实现
}
</script>
</body>
</html>后端
package com.example.demo.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.io.PrintWriter;
@RestController
public class Controller {
@GetMapping("/count")
public double count(@RequestParam String variable1,String choose ,String variable2){
//得到的数据类型为string类型,用相关方法转换为Double类型
double a = Double.parseDouble(variable1);
double b = Double.parseDouble(variable2);
double result;
switch(choose) {
case "plus" -> {
result = a + b;
}
case "minus" -> {
result = a - b;
}
case "multiple" -> {
result = a * b;
}
case "divide" -> {
if(b == 0){
throw new ArithmeticException("除数不可为零");
}
else{
result = a / b;
}
}
default -> {
result = 0;//实际不可能为这种情况
}
}
return result;
}
public void check(double result){
if(result > Double.MAX_VALUE||result < Double.MIN_VALUE){
throw new ArithmeticException("数据溢出");
}
}
}
