需求描述:
前台显示一个基本的输入框和显示计算结果的框,用户输入基本的数据,选择相应的计算方式后,向后台发送请求;
后台获取相应的数据进行计算,向前台返回相应的结果。
1、项目框架内容
springboot项目
2、前台技术实现
使用ajax实现异步操作显示计算结果;
ajax的基本使用方式:https://www.cnblogs.com/caifenglin/p/7797811.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<form action="/calculate" method="post">-->
<table border="1">
<tr>
<td><input type="text" id="num1" placeholder="请输入第一个数"/></td>
<td>
<select id="operation">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
<td><input type="text" id="num2" placeholder="请输入第二个数"/></td>
<td><input type="button" value="=" onclick="calculate();"/></td>
<td><input type="text" name="result" id="result" />
<!--<input th:text="${result}" />-->
</td>
</tr>
</table>
<input type="button" onclick="getResult()" value="获得结果" />
<!--</form>-->
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
/*function calculate() {
var a = parseInt(document.getElementById("num1").value);
var b = document.getElementById("operation").value;
var c = parseInt(document.getElementById("num2").value);
var result = '';
switch (b) {
case '+':
result = a + c;
alert(result);
break;
case '-':
result = a - c;
alert(result);
break;
case '*':
result = a * c;
alert(result);
break;
case '/':
if (c != 0) {
result = a / c;
alert(result);
}else{
alert("除法运算分母不能为0!");
}
break;
}
//设置输入框的计算结果
document.getElementById("result").value = result;
}*/
function getResult() {
var a = parseInt(document.getElementById("num1").value);
var b = document.getElementById("operation").value;
var c = parseInt(document.getElementById("num2").value);
$.ajax({
url:"/calculate", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步,默认为异步,这也是ajax重要特性
data:{
a:a,
b:b,
c:c
}, //参数值
type:"POST", //请求方式
success:function(req){
//请求成功时处理
// console.log(req)
alert(req);
document.getElementById("result").value=req;
},
error:function () {
console.log("error");
}
});
}
</script>
</html>
3、后台实现
将计算表达式对应的每一项,提取出来封装成一个类Expression
public class Expression implements Serializable {
private Integer numOne;
private Character operation;
private Integer numTwo;
//.....
}
在web层实现接收请求的方法,获取请求的参数并计算,向前台返回相应的结果。
@Controller
public class CalculateController {
@PostMapping("/calculate")
@ResponseBody
// public Model calculate
public String calculate( String a,Character b,String c/*, Model model*/){
int num1 = Integer.parseInt(a);
char oper = b;
int num2 = Integer.parseInt(c);
Expression expression = new Expression(num1,oper,num2);
Integer result = 0;
switch(oper){
case '+':
result = expression.getNumOne() + expression.getNumTwo();
break;
case '-':
result = expression.getNumOne() - expression.getNumTwo();
break;
case '*':
result = expression.getNumOne() * expression.getNumTwo();
break;
case '/':
try{
if(expression.getNumTwo() != 0){
result = expression.getNumOne() / expression.getNumTwo();
}else{
throw new RuntimeException("除法运算,分母不能为0!");
}
}catch(Exception e){
e.printStackTrace();
}
break;
}
// model.addAttribute("result",result);
// System.out.println(a);
return result.toString();
// return model;
}
拓展:
spring、springmvc中Model返回类型的方式?
参考链接:https://blog.csdn.net/qq_21223653/article/details/81365770
https://blog.csdn.net/Wanger_tt/article/details/50846912
什么是json?以及阿里巴巴fastjson的详细使用方式(maven下导入依赖坐标)
参考链接:https://blog.csdn.net/srj1095530512/article/details/82529759
spring mvc标单数据的获取:https://www.cnblogs.com/ChromeT/p/9964768.html