【JavaEE】SpringMVC简单练习

一、计算器
- 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 运行结果
四、图书管理系统
- 4.1 需求
- 4.2 接口定义
- 4.3 后端代码

一、计算器

1.1 接口定义

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

请求参数：

参数名	类型	是否必须	备注
num1	Integer	是	参与计算的第⼀个数
num2	Integer	是	参与计算的第⼆个数

响应数据:

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 需求

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

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

2.2 接口定义

校验接⼝

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

请求参数：

参数名	类型	是否必须	备注
userName	String	是	校验的账号
password	String	是	校验的密码

响应：

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

查询登录⽤⼾接⼝

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

响应：

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

2.3 前端页面

<!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;}elsereturn 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 需求:

界⾯如下

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

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(value = "/publish", produces = "application/json")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 运行结果

运行结果如下：

四、图书管理系统

4.1 需求

后端需要提供两个接⼝

账号密码校验接 : 根据输⼊⽤⼾名和密码校验登录是否通过
图书列表: 提供图书列表信息

4.2 接口定义

登录接口:

[URL]
POST /user/login
[请求参数]
name=admin&password=admin
[响应]
true //账号密码验证成功
false//账号密码验证失败

图书列表展⽰

[URL]
POST /book/getList
[请求参数]
⽆
[响应]
返回图书列表

[{"id": 1,"bookName": "活着","author": "余华","count": 270,"price": 20,"publish": "北京⽂艺出版社","status": 1,"statusCN": "可借阅"},
...


id	图书ID
bookName	图书名称
author	作者
count	数量
price	定价
publish	图书出版社
status	图书状态 1-可借阅, 其他-不可借阅
statusCN	图书状态中⽂含义

4.3 后端代码

前端代码太多，不展示了，在bookstrap上找模板。

图书信息：

package com.example.project;import lombok.Data;import java.math.BigDecimal;
import java.util.Date;@Data
public class BookInfo {//图书IDprivate Integer id;//书名private String bookName;//作者private String author;//数量private Integer count;//定价private BigDecimal price;//出版社private String publish;//状态 0-⽆效 1-允许借阅 2-不允许借阅private Integer status;private String statusCN;//创建时间private Date createTime;//更新时间private Date updateTime;}

图书接口：

package com.example.project;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;@RequestMapping("/book")
@RestController
public class BookController {public List<BookInfo> mockData() {List<BookInfo> books = new ArrayList<>();for (int i = 0; i < 5; i++) {BookInfo book = new BookInfo();book.setId(i);book.setBookName("书籍" + i);book.setAuthor("作者" + i);book.setCount(i * 5 + 3);book.setPrice(new BigDecimal(new Random().nextInt(100)));book.setPublish("出版社" + i);book.setStatus(1);books.add(book);}return books;}@RequestMapping("/getList")public List<BookInfo> getList() {List<BookInfo> books = new ArrayList<>();books = mockData();for (BookInfo book:books) {if(book.getStatus() == 1) {book.setStatusCN("可借阅");} else {book.setStatusCN("不可借阅");}}return books;}
}

登录接口：

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)&& "admin".equals(password)&& "admin".equals(userName)) {session.setAttribute("userName",userName);return true;}elsereturn false;}@RequestMapping("/getLoginUser")public String getLoginUser(HttpSession session) {String userName = (String)session.getAttribute("userName");if(StringUtils.hasLength(userName)) {return userName;} else {return "";}}
}