【后端一】张子扬

SpringBoot

产品说明

界面操作

在输入框内输入两个数字点击相应的按钮计算

URL操作

URL: http://localhost:8888/cal
请求类型: POST 数据格式: JSON
参数:
type(计算方法 add/minus/multiply/divide)
valueA(数字A)
valueB（数字B）
例子:

{
  "type": "add",
  "valueA": "1",
  "valueB": "2"
}

信息提示

由于使用的是BigDecimal运算所以不会出现溢出等情况
检测是否传入了非数字或数字不合法的情况用try catch捕捉NumberFormatException等报错进行判断

成功提示: 客户端跳出Alert窗口
错误提示: 客户端提示"数据错误" 除数为0时提示"Divide By Zero"

学习历程

SpringBoot的Controller传入参数类型

一、@RequestParam与@RequestBody的区别
@RequestParam是主要用于接收请求头内的参数(比如跟在url后面的?valueA=1&valueB=2)主要用于Get请求
且@RequestParam注解是有参数的,参数为前端接收该变量的参数名,如果为空则为变量名
比如后端代码

@GetMapping("/add")
public String square(@RequestParam int number){
       do something
}

此处@RequestParam没有设置参数前端url代码localhost:8080/add?number=1
如果设置了参数如@RequestParam("param") 则继续用之前的url代码就不行了得改成localhost:8080/add?param=1
@RequestBody主要用于POST请求需要把参数写在Body里直接使后端接收实体类(DTO)
可以通过JSON等数据格式直接给后端传一个包装好的类处理数据更加方便

二、前端代码学习与Jquery AJAX的使用
通过Jquery调用ajax实现向后端发送请求
例子

$.ajax({
            url: url路径(比如http://localhost:8080/xxxx),
            type: "POST"(POST类型),
            dataType: "JSON",
            contentType: "application/json;charset=utf-8"(设置数据格式 这里用的json),
            data: JSON.stringify(ajaxData) (通过JSON.stringify函数将数据转化为json格式),
        })

三、关于@RestController和@Controller的区别与@ResponseBody的学习
@RestController注解 = @Controller + @ResponseBody
@ResponseBody可以写在类或者方法上用来表示传给前端的是数据
如果不加则会被解析为跳转路径跳转到另一个html界面(这个路径可以通过编辑application.yml更改一般在/templates/下面)

后端代码

Controller

@RestController
public class UserController {
@Resource
private UserService userService;

    @PostMapping("/cal")
    public String cal(@RequestBody Cal cal) {
        return userService.cal(cal);
    }
}

Service

@Service
public class UserServiceImpl implements UserService {
    @Override
    public String cal(Cal cal) {
        try {
            BigDecimal numberA = new BigDecimal(cal.getValueA());
            BigDecimal numberB = new BigDecimal(cal.getValueB());
            switch (cal.getType()) {
                case "add":
                    return numberA.add(numberB).toString();
                case "minus":
                    return numberA.subtract(numberB).toString();
                case "multiply":
                    return numberA.multiply(numberB).toString();
                case "divide":
                    if (numberB.equals(BigDecimal.ZERO)) {
                        return "Divide By Zero";
                    }
                    return numberA.divide(numberB).toString();
            }
        } catch (Exception e) {
            return "Number Format Error";
        }
        return "No type called " + cal.getType();
    }
}

前端

<!DOCTYPE html >
<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <meta charset="utf-8">
    <title>简单的四则运算</title>
</head>
<body>
<script>

    function cal(name) {
        var ajaxData = {
            "type": name,
            "valueA": jQuery("#valueA").val(),
            "valueB": jQuery("#valueB").val()
        }
        $.ajax({
            url: "http://localhost:8888/cal",
            type: "POST",
            dataType: "JSON",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(ajaxData),
            success: function (data) {
                alert("结果 " + data);
            },
            error: function (data) {
                alert("数据错误");
            }
        })
    }

</script>
<input id="valueA" type="text">
<br>
<input id="valueB" type="text">
<br>
<button id="add" onclick='cal(this.id)'>A+B</button>
<button id="minus" onclick='cal(this.id)'>A-B</button>
<button id="multiply" onclick='cal(this.id)'>A*B</button>
<button id="divide" onclick='cal(this.id)'>A/B</button>
</body>

</html>

Fopdoodle