SpringMVC 实战小项目
3.1 加法计算器3.1.1 准备前端
3.1.2 同意前后端交互接口要求分析接口定义请求参数： 响应数据：
3.1.3 服务器代码
3.2 用户登录3.2.1 准备工作3.2.2 前后端交互接口约定3.2.3 服务端代码实现
3.3 留言板实现服务器端代码
3.4 图书馆管理系统后台准备
3.1 加法计算器
要求： 输入两个整数，然后单击“添加”按钮以显示计算结果。
3.1.1 准备作
创建SpringBoot项目：引入Spring Web依赖，并在项目中放置一个前端页面（课件中提供）。
前端
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题文件/标题
/头
身体
表单操作=\’计算/求和\’方法=\’发布\’
h1计算器/h1
数字1：输入name=\’num1\’ type=\’text\’br
数字2：输入name=\’num2\’ type=\’text\’br
input type=\’提交\’ value=\’点击添加\’
/形状
/身体
/html
3.1.2 约定前后端交互接
需求分析
add计算函数将两个整数相加；客户端必须指定两个数字才能参与计算，服务器返回这两个整数的计算结果。
接定义
请求路径：计算/求和
请求方式：GET/POST
接口说明： 计算两个整数的相加。
请求参数：
示例： num1=5num2=3
响应数据：
内容类型： 文本/html
回复内容： 计算机计算结果： 8
3.1.3 服务器代码
@RestController
@RequestMapping(\’/calc\’)
公共类CalcController {
@RequestMapping(\’/sum\’)
公共字符串总和（整数num1，整数num2）{
整数之和=num1+num2；
return \’h1计算机计算结果： \’+sum+\’/h1\’;
}
}
3.2 登录
需求： 当用户输入帐号和密码时，后端验证密码是否正确。
如果没有，前端将通知用户，当用户稍后访问主页时，他们将看到当前登录的用户。用户信息。
3.2.1 准备作
将前端页面放入您的项目中（随课件提供）
码云地址： 前端代码/用户登录
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’
标题登录页面/标题
/头
身体
h1 用户登录/h1
用户名：输入name=\’userName\’ type=\’text\’ id=\’userName\’br
密码：输入name=\’password\’ type=\’password\’ id=\’password\’br
输入类型=\’按钮\’值=\’登录\’onclick=\’登录()\’
脚本src=\’https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js\’/script
脚本
函数登录（）{
$.ajax({
type: \’帖子\’,
url: \’/登录/检查\’,
数据：{
userName: $(\’#userName\’).val(),
密码： $(\’#password\’).val()
},
success: 函数（结果）{
如果（结果==真）{
//用户名和密码正确
location.href=\’index.html\’;
//location.assign(\’index.html\’);
//location.replace(\’index.html\’)
}除此之外{
alert(\’您的用户名或密码不正确！\’);
}
}
});
}
/剧本
/身体
/html
3.2.2 约定前后端交互接
需求分析
后端开发人员不需要显示前端页面；他们只需要提供两个功能。
登录页面：根据账号和密码验证输入的账号密码是否正确，如果当前有登录用户则通知前端主页：返回登录帐户，否则为空。
定义接口
验证接口
请求路径：/用户/登录
请求方式：POST
界面说明：检查您的账户密码是否正确
3.2.3 实现服务器端代码
@RequestMapping(\’/登录\’)
@RestController
公共类登录控制器{
@RequestMapping(\’/检查\’)
公共布尔检查（字符串用户名，字符串密码，HttpSession会话）{
System.out.println(\’收到参数userName:\’+userName + \’,password:\’+password);
//检查帐号和密码是否为空
//if (userName==null || \’\’.equals(userName) || 密码==null || \’\’.equals(password)){
//返回假。
//}
if (!StringUtils.hasLength(用户名) || !StringUtils.hasLength(密码)){
返回假。
}
//检查账号和密码是否正确
//数据模拟
if (\’zhangsan\’.equals(用户名) \’123456\’.equals(密码)){
session.setAttribute(\’用户名\’,用户名);
返回真。
}
返回假。
}
@RequestMapping(\’/index\’)
公共字符串索引（HttpSession会话）{
String userName=(String)session.getAttribute(\’userName\’);
返回用户名。
}
}
3.3 留板
需求：
界面如下
输入您的消息信息并单击发送。数据由后端存储。输入的白墙信息将显示在页面上。
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题公告板/标题
风格
。容器{
宽度： 350 像素；
高度： 300 像素；
margin: 0 自动。
/* border: 1px 黑色*/
文本对齐：居中；
}
。灰色的{
颜色：灰色；
}
.container .row {
宽度： 350 像素；
高度： 40 像素；
显示器： Flex。
justify-content: 之间有空格；
对齐items:中心；
}
.container .row 输入{
宽度： 260 像素；
高度： 30 像素；
}
提交{
宽度： 350 像素；
高度： 40 像素；
背景颜色： 橙色；
颜色： 白色；
border: 无。
边距： 10px；
边框半径： 5px;
字体大小： 20px；
}
/风格
/头
身体
div 类=\’容器\’
h1 公告板/h1
如果您输入p class=\’grey\’ 并单击提交，信息将出现在/p 下面的空白处。
div 类=\’行\’
spanwho:/span 输入类型=\’文本\’名称=\’\’id=\’来自\’
/div
div 类=\’行\’
:/span 输入type=\’text\’ name=\’\’ id=\’to\’
/div
div 类=\’行\’
哪个span是：/span input type=\’text\’ name=\’\’ id=\’say\’
/div
input type=\’button\’ value=\’Submit\’ id=\’submit\’ onclick=\’submit()\’
!– divA 向B 发送： hello/div —
/div
脚本src=\’https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js\’/script
脚本
//页面加载时显示消息信息
//从后端获取消息信息并显示在页面上
$.ajax({
输入： \’获取\’,
url: \’/message/getList\’,
success:函数（消息）{
for(消息变量消息){
var html=\’div\’+message.from+\’ 表示： \’+message.message+\’/div\’ 表示\’+message.to+\’;
$(\’.container\’).append(html);
}
}
});
函数提交() {
//1.获取消息内容。
var from=$(\’#from\’).val();
var to=$(\’#to\’).val();
var Say=$(\’#say\’).val();
if (从==\’\’ || 到==\’\’ || 说==\’\’) {
返回；
}
$.ajax({
type: \’帖子\’,
url: \’/消息/发布\’,
数据： {
从：开始，
至：至，
message: 说
},
success: 函数（结果）{
如果（结果==真）{
//添加成功
//2.构建节点
var divE=\’div\’ + from + \’right\’ + to + \’say :\’ +say + \’/div\’;
//3.向页面添加节点。
$(\’.container\’).append(divE);
//4.清除输入框值。
$(\’#from\’).val(\’\’);
$(\’#to\’).val(\’\’);
$(\’#say\’).val(\’\’);
}除此之外{
alert(\’发布失败\’);
}
}
});
}
/剧本
/身体
/html
实现服务器端代码
@数据
公共类消息信息{
私有整数ID；
来自私有字符串；
到私有字符串；
私人字符串消息。
私有整数删除标志；
私人日期创建时间；
私人日期更新时间；
}
@RequestMapping(\’/消息\’)
@RestController
公共类消息控制器{
@Autowired
私有MessageService消息服务；
私有ListMessageInfo messageInfos=new ArrayList();
@RequestMapping(\’/发布\’)
公共布尔公共消息（MessageInfo messageInfo）{
if (!StringUtils.hasLength(messageInfo.getFrom())
|| !StringUtils.hasLength(messageInfo.getTo())
|| !StringUtils.hasLength(messageInfo.getMessage()){
返回假。
}
//暂时保存在内存中
//messageInfos.add(messageInfo);
//将数据存入mysql
messageService.insertMessage(messageInfo);
返回真。
}
@RequestMapping(\’/getList\’)
公共ListMessageInfo getList(){
返回messageService.queryList()。
}
}
3.4 图书管理系统
需求：
登录： 用户通过输入帐号和密码完成登录功能。 列表显示： 书籍显示
准备
!DOCTYPE html
html lang=\’en\’
头
元字符集=\’UTF-8\’
元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1.0\’
标题文件/标题
链接rel=\’stylesheet\’ href=\’css/bootstrap.min.css\’
链接rel=\’stylesheet\’ href=\’css/login.css\’
脚本类型=\’text/javascript\’ src=\’js/jquery.min.js\’/script
/头
身体
div class=\’容器登录\’
div class=\’容器照片\’
img src=\’pic/computer.png\’ width=\’350px\’
/div
div class=\’登录对话框\’
h3 登录/h3
div 类=\’行\’
跨度用户名/跨度
输入类型=\’文本\’名称=\’用户名\’id=\’用户名\’类=\’表单控件\’
/div
div 类=\’行\’
跨度密码/跨度
输入类型=\’密码\’名称=\’密码\’id=\’密码\’类=\’表单控制\’
/div
div 类=\’行\’
按钮type=\’button\’ class=\’btn btn-info btn-lg\’ onclick=\’login()\’ 登录/按钮
/div
/div
/div
脚本src=\’js/jquery.min.js\’/script
脚本
函数登录（）{
$.ajax({
输入：\’帖子\’,
url: \’/用户/登录\’,
数据：{
userName: $(\”#userName\”).val(),
password: $(\”#password\”).val()
},
success:function(result){
console.log(result);
if(result.code==200 && result.data==true){
//验证成功
location.href = \”book_list.html\”;
}else{
alert(\”用户名或密码失败\”);
}
}
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang=\”en\”>
<head>
<meta charset=\”UTF-8\”>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>
<title>图书列表展示</title>
<link rel=\”stylesheet\” href=\”css/bootstrap.min.css\”>
<link rel=\”stylesheet\” href=\”css/list.css\”>
<script type=\”text/javascript\” src=\”js/jquery.min.js\”></script>
<script type=\”text/javascript\” src=\”js/bootstrap.min.js\”></script>
<script src=\”js/jq-paginator.js\”></script>
</head>
<body>
<div class=\”bookContainer\”>
<h2>图书列表展示</h2>
<div class=\”navbar-justify-between\”>
<div>
<button class=\”btn btn-outline-info\” type=\”button\” onclick=\”location.href=\’book_add.html\’\”>添加图书</button>
<button class=\”btn btn-outline-info\” type=\”button\” onclick=\”batchDelete()\”>批量删除</button>
</div>
</div>
<table>
<thead>
<tr>
<td>选择</td>
<td class=\”width100\”>图书ID</td>
<td>书名</td>
<td>作者</td>
<td>数量</td>
<td>定价</td>
<td>出版社</td>
<td>状态</td>
<td class=\”width200\”>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class=\”demo\”>
<ul id=\”pageContainer\” class=\”pagination justify-content-center\”></ul>
</div>
<script>
getBookList();
function getBookList() {
$.ajax({
type: \”get\”,
url: \”/book/getListByPage\” + location.search,
success: function (result) {
console.log(\”后端返回成功\”);
if (result.code == -1) {
alert(\”发生内部错误, 请联系管理员\”);
return;
}
var data = result.data;
var books = data.records;
console.log(books);
var finalHtml = \”\”;
for (var book of books) {
//拼接html
finalHtml += \'<tr>\’;
finalHtml += \'<td><input type=\”checkbox\” name=\”selectBook\” value=\”\’ + book.id + \’\” id=\”selectBook\” class=\”book-select\”></td>\’;
finalHtml += \'<td>\’ + book.id + \'</td>\’;
finalHtml += \'<td>\’ + book.bookName + \'</td>\’;
finalHtml += \'<td>\’ + book.author + \'</td>\’;
finalHtml += \'<td>\’ + book.count + \'</td>\’;
finalHtml += \'<td>\’ + book.price + \'</td>\’;
finalHtml += \'<td>\’ + book.publish + \'</td>\’;
finalHtml += \'<td>\’ + book.stateCN + \'</td>\’;
finalHtml += \'<td>\’;
finalHtml += \'<div class=\”op\”>\’;
finalHtml += \'<a href=\”book_update.html?bookId=\’ + book.id + \’\”>修改</a>\’;
finalHtml += \'<a href=\”javascript:void(0)\” οnclick=\”deleteBook(\’ + book.id + \’)\”>删除</a>\’;
finalHtml += \'</div>\’;
finalHtml += \'</td>\’;
finalHtml += \'</tr>\’;
}
$(\”tbody\”).html(finalHtml);
//处理翻页信息
//翻页信息
$(\”#pageContainer\”).jqPaginator({
totalCounts: data.count, //总记录数
pageSize: 10, //每页的个数
visiblePages: 5, //可视页数
currentPage: data.pageRequest.currentPage, //当前页码
first: \'<li class=\”page-item\”><a class=\”page-link\”>首页</a></li>\’,
prev: \'<li class=\”page-item\”><a class=\”page-link\” href=\”javascript:void(0);\”>上一页<\\/a><\\/li>\’,
next: \'<li class=\”page-item\”><a class=\”page-link\” href=\”javascript:void(0);\”>下一页<\\/a><\\/li>\’,
last: \'<li class=\”page-item\”><a class=\”page-link\” href=\”javascript:void(0);\”>最后一页<\\/a><\\/li>\’,
page: \'<li class=\”page-item\”><a class=\”page-link\” href=\”javascript:void(0);\”>{{page}}<\\/a><\\/li>\’,
//页面初始化和页码点击时都会执行
onPageChange: function (page, type) {
console.log(\”第\” + page + \”页, 类型:\” + type);
if (type == \”change\”) {
// console.log(\”book_list.html\”+location.search);
location.href = \”book_list.html?currentPage=\” + page;
}
}
});
},
error: function (error) {
console.log(error);
if (error != null && error.status == 401) {
location.href = \”login.html\”;
}
}
});
}
function deleteBook(id) {
var isDelete = confirm(\”确认删除?\”);//弹出确认框
if (isDelete) {
console.log(id);
//删除图书
$.ajax({
type: \”post\”,
url: \”/book/updateBook\”,
data: {
id: id,
status: 0
},
success: function (result) {
if (result.code == 200 && result.data == true) {
alert(\”删除成功\”);
location.href = \”book_list.html\”;
}
}
});
}
}
function batchDelete() {
var isDelete = confirm(\”确认批量删除?\”);
if (isDelete) {
//获取复选框的id
var ids = [];
$(\”input:checkbox[name=\’selectBook\’]:checked\”).each(function () {
ids.push($(this).val());
});
console.log(ids);
$.ajax({
type: \”post\”,
url: \”/book/batchDelete?ids=\” + ids,
success: function (result) {
if (result.code==200 && result.data == true) {
//删除成功
location.href = \”book_list.html\”;
} else {
alter(\”删除失败, 请联系管理员\”);
}
}
});
}
}
</script>
</div>
</body>
</html>
根据需求可以得知, 后端需要提供两个接⼝
账号密码校验接⼝: 根据输⼊⽤⼾名和密码校验登录是否通过图书列表: 提供图书列表信息
后端
@RequestMapping(\”/user\”)
@RestController
public class UserController {
@RequestMapping(\”/login\”)
public boolean login(String name, String password, HttpSession session){
//账号或密码为空
if (!StringUtils.hasLength(name) || !StringUtils.hasLength(password)){
return false;
}
//模拟验证数据, 账号密码正确
if(\”admin\”.equals(name) && \”admin\”.equals(password)){
session.setAttribute(\”userName\”,name);
return true;
}
//账号密码错误
return false;
}
}
@RequestMapping(\”/book\”)
@RestController
public class BookController {
@RequestMapping(\”/getList\”)
public List<BookInfo> getList(){
//获取数据
List<BookInfo> books = mockData();
//处理⻚⾯展⽰
for (BookInfo book:books){
if (book.getStatus()==1){
book.setStatusCN(\”可借阅\”);
}else {
book.setStatusCN(\”不可借阅\”);
}
}
return books;
}
/**
* 数据Mock 获取图书信息
*
* @return
*/
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;
}
}
#以上关于4、SpringMVC 实战小项目【加法计算器、用户登录、留言板、图书管理系统】的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91840.html
