当前位置： 首页 > article >正文

【JavaEE】SpringMVC简单练习

article 2025/3/4 9:51:23

目录

  • 一、计算器
    • 1.1 接口定义
    • 1.2 前端代码
    • 1.3 后端代码
    • 1.4 运行结果
  • 二、⽤⼾登录
    • 2.1 需求
    • 2.2 接口定义
    • 2.3 前端页面
    • 2.4 后端代码
    • 2.5 结果
  • 三、留⾔板
    • 3.1 需求:
    • 3.2 接口
    • 3.3 前端代码
    • 3.4 后端代码
    • 3.5 运行结果

一、计算器

1.1 接口定义

请求路径：calc/sum
请求⽅式：GET/POST
接⼝描述：计算两个整数相加
请求路径：calc/sub
请求⽅式：GET/POST
接⼝描述：计算两个整数相减
请求路径：calc/mul
请求⽅式：GET/POST
接⼝描述：计算两个整数相乘
请求路径：calc/div
请求⽅式：GET/POST
接⼝描述：计算两个整数相除

请求参数：

参数名类型是否必须备注
num1Integer是参与计算的第⼀个数
num2Integer是参与计算的第⼆个数

响应数据:

Content-Type: text/html
示例：num1=5&num2=3
响应内容: 计算机计算结果: 8

1.2 前端代码

前端代码如下：

<!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>
     <form action="/calc/sum" method="post">
        <h1>计算器</h1>
        数字1：<input name="num1" type="text"><br>
        数字2：<input name="num2" type="text"><br>
        <input type="submit" value=" 点击相加 ">
     </form>

         <form action="/calc/sub" method="post">
             数字1：<input name="num1" type="text"><br>
             数字2：<input name="num2" type="text"><br>
          <input type="submit" value=" 点击相减 ">
         </form>
             <form action="/calc/mul" method="post">
                 数字1：<input name="num1" type="text"><br>
                 数字2：<input name="num2" type="text"><br>
         <input type="submit" value=" 点击相乘 ">
             </form>
                 <form action="/calc/div" method="post">
                     数字1：<input name="num1" type="text"><br>
                     数字2：<input name="num2" type="text"><br>
         <input type="submit" value=" 点击相除 ">
                 </form>
</body>

</html>

1.3 后端代码

后端代码如下：
只需要处理一下非法输入即可。

package com.example.project;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("/calc")
@RestController
public class CalcController {
    @RequestMapping("/sum")
    //加
    public String sum(Integer num1, Integer num2) {
        Integer ret = null;
        if(null == num1 || null == num2) {
            return "错误输入";
        }
        ret = num1 + num2;
        return "<h1>计算机计算结果: " + ret+"</h1>";
    }
    @RequestMapping("/sub")
    //减
    public String sub(Integer num1, Integer num2) {
        Integer ret = null;
        if(null == num1 || null == num2) {
            return "错误输入";
        }
        ret = num1 - num2;
        return "<h1>计算机计算结果: " + ret +"</h1>";
    }
    @RequestMapping("/mul")
    //乘
    public String mul(Integer num1, Integer num2) {
        Integer ret = null;
        if(null == num1 || null == num2) {
            return "错误输入";
        }
        ret = num1 * num2;
        return "<h1>计算机计算结果: " + ret+"</h1>";
    }
    @RequestMapping("/div")
    //除
    public String div(Integer num1, Integer num2) {
        Float ret = null;
        if(null == num1 || null == num2 || 0 == num2) {
            return "错误输入";
        }
        ret =  num1 / (float) num2;
        return "<h1>计算机计算结果: " + ret+"</h1>";
    }
}

1.4 运行结果

结果如下：

二、⽤⼾登录

2.1 需求

⽤⼾输⼊账号和密码, 后端进⾏校验密码是否正确

  1. 如果不正确, 前端进⾏⽤⼾告知
  2. 如果正确, 跳转到⾸⻚. ⾸⻚显⽰当前登录⽤⼾
  3. 后续再访问⾸⻚, 可以获取到登录⽤⼾信息

2.2 接口定义

校验接⼝

请求路径：/user/login
请求⽅式：POST
接⼝描述：校验账号密码是否正确

请求参数：

参数名类型是否必须备注
userNameString是校验的账号
passwordString是校验的密码

响应：

Content-Type: text/html
响应内容:
true //账号密码验证成功
false//账号密码验证失败

查询登录⽤⼾接⼝

请求路径：/user/getLoginUser
请求⽅式：GET
接⼝描述：查询当前登录的⽤⼾

响应：

Content-Type: text/html
响应内容:
zhangsan

2.3 前端页面

登录⻚⾯login.html

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

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="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({
        type: "post",
        url: "/user/login",
        data: {
          "userName": $("#userName").val(),
          "password": $("#password").val()
        },
        success: function (result) {
          if (result) {
            location.href = "/index.html"
          } else {
            alert("账号或密码有误.");
          }
        }
      });

    }

  </script>
</body>

</html>

⾸⻚代码index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</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({
            type: "get",
            url: "/user/getLoginUser",
            success: function (result) {
                $("#loginUser").text(result);
            }
        });

    </script>
</body>

</html>

2.4 后端代码

StringUtils.hasLength方法是说如果字符串为空或者没长度，返回false。
由于没有数据库，直接写死。

package com.example.project;

import ch.qos.logback.core.util.StringUtil;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RequestMapping("/user")
@RestController
public class LoginController {
    @RequestMapping("/login")
    public Boolean login(String userName, String password, HttpSession session) {
        if(StringUtils.hasLength(userName) && StringUtils.hasLength(password) && "1234".equals(password)) ) {
            session.setAttribute("userName",userName);
            return true;
        }
        else
            return false;
    }

    @RequestMapping("/getLoginUser")
    public String getLoginUser(HttpSession session) {
        String userName = (String)session.getAttribute("userName");
        if(StringUtils.hasLength(userName)) {
            return userName;
        } else {
            return "";
        }
    }
}

2.5 结果

运行结果如下：

三、留⾔板

3.1 需求:

界⾯如下

  1. 输⼊留⾔信息,点击提交 后端把数据存储起来.
  2. ⻚⾯展⽰输⼊的表⽩墙的信息

3.2 接口

获取全部留⾔：

请求:
GET /message/getList
响应:JSON 格式

[
 {
 "from": "⿊猫",
 "to": "⽩猫",
 "message": "喵"
 },{
 "from": "⿊狗",
 "to": "⽩狗",
 "message": "汪"
 },
 //...
]

发表新留⾔:

请求: body 也为 JSON格式.
POST /message/publish

{
 "from": "⿊猫",
 "to": "⽩猫",
 "message": "喵"
}

响应: JSON格式.

{
 ok: 1
}

3.3 前端代码

前端代码如下：

<!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>
 
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }
            //2. 构造节点
            var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
            //3. 把节点添加到页面上    
            $(".container").append(divE);

            //4. 清空输入框的值
            $('#from').val("");
            $('#to').val("");
            $('#say').val("");
            
        }
        
    </script>
</body>

</html>

3.4 后端代码

为储存输入的信息，我们要使用一个对象：
lombok依赖，在这个包下有很多注解来表示类的get和set和hashcode等等方法。

@Getter⾃动添加 getter ⽅法
@Setter⾃动添加setter⽅法
@ToString⾃动添加toString⽅法
@EqualsAndHashCode⾃动添加equals和hashCode⽅法
@NoArgsConstructor⾃动添加⽆参构造⽅法
@AllArgsConstructor⾃动添加全属性构造⽅法，顺序按照属性的定义顺序
@NonNull属性不能为 null
@RequiredArgsConstructor⾃动添加必需属性的构造⽅法，final + @NonNull 的属性为必需

@Data=@Getter+@Setter+@ToString+@EqualsAndHashCode+@RequiredArgsConstructor
+@NoArgsConstructor

package com.example.project;

import lombok.Data;

@Data
public class MessageInfo {
    private String from;
    private String to;
    private String message;

}

还是由于没连接数据库，存在一个顺序表中

package com.example.project;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/message")
public class MessageController {
    List<MessageInfo> messageInfos = new ArrayList<>();
    @RequestMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfos;
    }
    @RequestMapping("/publish")
    public boolean publish(MessageInfo messageInfo) {
        if (StringUtils.hasLength(messageInfo.getFrom())
        && StringUtils.hasLength(messageInfo.getTo())
        && StringUtils.hasLength(messageInfo.getMessage())) {
            messageInfos.add(messageInfo);
            return true;
        } else {
            return false;
        }
    }
}

3.5 运行结果

运行结果如下：


http://www.kler.cn/a/569971.html

相关文章：

  • sql-labs靶场笔记
  • selenium grid分布式
  • 【每日八股】计算机网络篇（二）：TCP 和 UDP
  • Kotlin中RxJava用法
  • 测试工程师的DeepSeek提效2：自动化测试应用
  • android TabLayout设置tab的时候文字默认居中，选中文字加粗
  • 微信小程序接入DeepSeek模型（火山方舟），并在视图中流式输出
  • PostgreSQL全页写机制深度解析：如何平衡WAL性能与数据可靠性
  • IDEA Tab 页设置多行显示
  • Docker + Vue2 热重载：为什么需要 CHOKIDAR_USEPOLLING=true？
  • 23种设计模式之工厂方法模式（Factory Method Pattern）【设计模式】
  • 频谱泄露与加窗
  • 代码规范和简化标准
  • Java零基础入门笔记：(6)面向对象
  • Cherno C++ P60 为什么不用using namespace std
  • react 19版中路由react-router-dom v7版的使用
  • MySQL学习笔记（2）并发问题与事务隔离级别
  • kettle插件-git/svn版本管理插件
  • 实战 Elasticsearch：快速上手与深度实践-2.2.2线程池配置与写入限流
  • 乡村研学旅行小程序（论文源码调试讲解）