Spring MVC开发小练习

Ting-yu

于 2024-03-20 21:54:56 发布

阅读量795

点赞数 15

本文链接：https://blog.csdn.net/2303_78892316/article/details/136784122

版权

1. 加法计算器

需求：输入两个整数，计算和

约定前后端交互接口：

在开发项目前，根据需求先约定好前后端交互接口，双方按照接口文档进行开发，接口文档一旦写好，尽量不要轻易改变，如果要修改，必须通知另一方知晓

接口定义：

请求路径：calc/add

请求方式：GET/POST

接口描述：计算两个整数相加

请求参数：

参数名：num1 类型：Integer 是否必须：是备注：参与计算的第一个数

参数名：num2 类型：Integer 是否必须：是备注：参与计算的第二个数

响应数据：

Content-Type：text/html

响应内容：计算结果是：（num1+num2)

后端代码：

@RestController
@RequestMapping("/calc")
public class CalcController {
    @RequestMapping("/add")
    public String add(Integer num1, Integer num2) {
        Integer sum = num1 + num2;
        return "计算结果是：" + sum;
    }
}

前端代码：

这里我们放在static内：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calc</title>
</head>
<body>
    <form action="calc/add">
        <h1>计算器</h1>
        数字1：<input type="text" name="num1"><br/>
        数字2：<input type="text" name="num2"><br/>
        <input type="submit" value="计算结果">
</form>
</body>
</html>

注意: name属性决定url中的Key

2. 用户登录

接口定义：

1.登录接口

请求路径：user/login

请求方式：POST

接口描述：校验用户名密码是否正确

请求参数：

参数1：参数名：userName 类型：String 是否必须：是备注：用户名

参数2：参数名：password 类型：String 是否必须：是备注：密码

响应数据：

Content-Type：text/html

响应内容：

true：登录成功

false：登录失败

2. 查询登录用户接口

请求路径：/user/getUserName

请求方式：GET/POST

接口描述：查询当前登录的用户

请求参数：无
响应数据：Content-Type：text/html

响应内容：用户名

后端代码：

@RestController
@RequestMapping("/user")
public class LoginController {
    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        //储存当前用户的Session
        session.setAttribute("name", userName);
        return "Ting-666".equals(userName) && "666777".equals(password);
    }
    @RequestMapping("/getUserName")
    public String getUserName(@SessionAttribute("name") String name){
        return name;
    }
}

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
</head>
<body>
    <h1>用户登录</h1>
    用户名<input type="text" name="userName" id="userName"><br/>
    密码<input type="password" name="password" id="password"><br/>
    <input type="button" value="登录" onclick="login()">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        function login() {
            //使用ajax发送请求
            $.ajax({
                url:"/user/login",
                type:"post",
                data:{
                    userName:$("#userName").val(),
                    password:$("#password").val()
                },
                //HTTP 响应成功
                success:function(result) {
                    if(result) {
                        location.href = "/getUserName.html";
                    }else{
                        alert("用户名或密码错误");
                    }
                }
            });
        }
    </script>
</body>
</html>

注意Jquery不能使用本地的

getUserName.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    登录人：<span id="loginUser"></span>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $.ajax({
            url:"/user/getUserName",
            type:"get",
            success:function(UserName){
                $("#loginUser").text(UserName);
            }
        })
    </script>
</body>
</html>

3. 留言板

需求：实现一个留言板，把A对B说的话添加到留言版上

1. 发布留言

接口定义：

请求路径：/message/publish

请求方法：post

请求参数：

参数1：参数名：from 类型：String 是否必须：是备注：A

参数2：参数名：to 类型：String 是否必须：是备注：B

参数1：参数名：say 类型：String 是否必须：是备注：说的内容

返回值：true/false 备注：成功/失败

2. 展示已有的留言

接口定义：

请求路径：/message/getMessage

请求方法：get

请求参数：无

返回值：返回一个list

后端代码：

package com.example.j20240313springmvc;

import lombok.Data;

/**
 * 存储一次留言
 */
@Data
public class Message {
    private String from;
    private String to;
    private String say;
}
//@Data 是lombok中的一个注解，可以在编译时自动生成get,set，toString 等方法

@RestController
@RequestMapping("/message")
public class MessageController {
    List<Message> messages = new ArrayList<>();
    public Boolean publish(Message message) {
        if(!StringUtils.hasLength(message.getFrom())||
                !StringUtils.hasLength(message.getTo())||
                !StringUtils.hasLength(message.getSay())) {
            return false;
        }
        messages.add(message);
        return true;
    }
    public List<Message> getMessages() {
        return messages;
    }
}

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
<div class="container">
    <h1>留言板</h1>
    <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
    <div class="row">
        <span>谁:</span> <input type="text" name="" id="from">
    </div>
    <div class="row">
        <span>对谁:</span> <input type="text" name="" id="to">
    </div>
    <div class="row">
        <span>说什么:</span> <input type="text" name="" id="say">
    </div>
    <input type="button" value="提交" id="submit" onclick="submit()">
    <!-- <div>A 对 B 说: hello</div> -->
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    $.ajax({
        url:"/message/getMessages",
        type:"get",
        success:function(messages) {
            for(var message of messages) {
                var divE = "<div>"+message.from +"对" + message.to + "说:" + message.say+"</div>";
                $(".container").append(divE);
            }
        }
    });
    function submit(){
        var from = $('#from').val();
        var to = $('#to').val();
        var say = $('#say').val();
        $.ajax({
            url:"/message/publish",
            type:"post",
            data:{
                from:$("#from").val(),
                to:$("#to").val(),
                say:$("#say").val()
            },
            success:function(result) {
                if(result) {
                    //2. 构造节点
                    var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                    //3. 把节点添加到页面上
                    $(".container").append(divE);
                    //4. 清空输入框的值
                    $('#from').val("");
                    $('#to').val("");
                    $('#say').val("");
                }else{
                    $('#from').val("");
                    $('#to').val("");
                    $('#say').val("");
                    alert("非法输入");
                }
            }
        });
    }

</script>
</body>

</html>

Ting-yu

关注

15
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring MVC开发小练习

需求：输入两个整数，计算和约定前后端交互接口：在开发项目前，根据需求先约定好前后端交互接口，双方按照接口文档进行开发，接口文档一旦写好，尽量不要轻易改变，如果要修改，必须通知另一方知晓接口定义：请求路径：calc/add请求方式：GET/POST接口描述：计算两个整数相加请求参数：参数名：num1 类型：Integer 是否必须：是备注：参与计算的第一个数参数名：num2 类型：Integer 是否必须：是备注：参与计算的第二个数响应数据：Content-Type：text/html响应内容：计算结
复制链接

扫一扫