快捷導(dǎo)航

SpringMvc實現(xiàn)簡易計算器功能

更新時間：2022年07月21日 11:46:49 作者：little?源

這篇文章主要為大家詳細介紹了SpringMvc實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用SpringMvc做一個簡易計算器，供大家參考，具體內(nèi)容如下

一 .domain類

package ssm1.domain;

public class JiSuan {
? ? private int numOne;
? ? private int numTwo;
? ? private String yunSuan;
? ? private int result;

? ? public int getNumOne() {
? ? ? ? return numOne;
? ? }

? ? public void setNumOne(int numOne) {
? ? ? ? this.numOne = numOne;
? ? }

? ? public int getNumTwo() {
? ? ? ? return numTwo;
? ? }

? ? public void setNumTwo(int numTwo) {
? ? ? ? this.numTwo = numTwo;
? ? }

? ? public String getYunSuan() {
? ? ? ? return yunSuan;
? ? }

? ? public void setYunSuan(String yunSuan) {
? ? ? ? this.yunSuan = yunSuan;
? ? }

? ? public int getResult() {
? ? ? ? return result;
? ? }

? ? public void setResult(int result) {
? ? ? ? this.result = result;
? ? }

? ? @Override
? ? public String toString() {
? ? ? ? return "JiSuan{" +
? ? ? ? ? ? ? ? "numOne=" + numOne +
? ? ? ? ? ? ? ? ", numTwo=" + numTwo +
? ? ? ? ? ? ? ? ", yunSuan='" + yunSuan + '\'' +
? ? ? ? ? ? ? ? ", result=" + result +
? ? ? ? ? ? ? ? '}';
? ? }
}

二.Controller

package ssm1.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import ssm1.domain.JiSuan;


@Controller
@RequestMapping(path="/calculatorController")
public class CalculatorController {
? ? @RequestMapping(path="/calculate")
? ? @ResponseBody
? ? public JiSuan suan( Model model,@RequestBody JiSuan jiSuan)
? ? {
? ? ? ? System.out.println(jiSuan);
? ? ? ? int numThree=0;
? ? ? ? if(jiSuan.getYunSuan().equals("+"))
? ? ? ? {
? ? ? ? ? ? numThree=jiSuan.getNumOne()+jiSuan.getNumTwo();
? ? ? ? }
? ? ? ? else if(jiSuan.getYunSuan().equals("-"))
? ? ? ? {
? ? ? ? ? ? numThree=jiSuan.getNumOne()-jiSuan.getNumTwo();
? ? ? ? }
? ? ? ? else if(jiSuan.getYunSuan().equals("*"))
? ? ? ? {
? ? ? ? ? ? numThree=jiSuan.getNumOne()*jiSuan.getNumTwo();
? ? ? ? }else
? ? ? ? {
? ? ? ? ? ? numThree=jiSuan.getNumOne()/jiSuan.getNumTwo();
? ? ? ? }
? ? ? ? jiSuan.setResult(numThree);
? ? ? ? model.addAttribute("jiSuan",jiSuan);
? ? ? ? return jiSuan;
? ? }
}

三.jsp頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<html>
<head>
? ? <title>Title</title>
? ? <script language="JavaScript">
? ? ? ? $(function () {
? ? ? ? ? ? $("#btn").click(function(){
? ? ? ? ? ? ? ? let num1=$("#numOne").val();
? ? ? ? ? ? ? ? let num2=$("#numTwo").val();
? ? ? ? ? ? ? ? let yun=$("#yunsuan").val();
? ? ? ? ? ? ? ? let param='{"numOne":'+'"'+num1+'"'+',"numTwo":'+'"'+num2+'"'+',"yunSuan":'+'"'+yun+'"'+'}';
? ? ? ? ? ? ? ?// let array=new String();
? ? ? ? ?
? ? ? ? ? ? ? ? $.ajax(
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? url:"${pageContext.request.contextPath}/calculatorController/calculate",
? ? ? ? ? ? ? ? ? ? ? ? contentType:"application/json;charset=utf-8",
? ? ? ? ? ? ? ? ? ? ? ? data:param,
? ? ? ? ? ? ? ? ? ? ? ? dataType:"Json",
? ? ? ? ? ? ? ? ? ? ? ? type:"POST",
? ? ? ? ? ? ? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? var dataObj = data.result;
? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#result").html("結(jié)果="+dataObj);
? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#test2").innerHTML="success";
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? )
? ? ? ? ? ? })

? ? ? ? })

? ? ? ? function checkNum1(num) {
? ? ? ? ? ? let num1 = num.value;
? ? ? ? ? ? if (num1 == '') {
? ? ? ? ? ? ? ? alert("不能輸入為空");
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? }
? ? ? ? ? ? if (Math.round(num1) != num1) {
? ? ? ? ? ? ? ? alert("這個數(shù)不是一個數(shù)字");
? ? ? ? ? ? ? ? num.value = '';
? ? ? ? ? ? ? ? num.onfocus;
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? }
? ? ? ? ? ? return true;
? ? ? ? }
? ? </script>
</head>
<body>
<form name="form1" action="" method="post">
? ? 請輸入第一個數(shù)：<input type="text" name="numOne" id="numOne" onblur="checkNum1(this)">
? ? <select name="yunSuan" id="yunsuan">
? ? ? ? <option value="+">+</option>
? ? ? ? <option value="-">-</option>
? ? ? ? <option value="*">*</option>
? ? ? ? <option value="/">/</option>
? ? </select>
? ? 請輸入第二個數(shù)：<input type="text" name="numTwo" id="numTwo" onblur="checkNum1(this)">
? ? <input type="button" value="計算" id="btn">
? ? <label id="result"></label>
? ? <label id="test2"></label>
</form>
</body>
</html>

js包,calculator.jsp,放在webapp下。