Spring MVC练习(前后端分离开发实例)

🙉专栏推荐:Java入门知识🙉

🐹今日诗词:二十五弦弹夜月，不胜清怨却飞来🐹

⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏

加法计算器

前端页面

约定前后端交互接口

用户登录

约定前后端交互接口

查询用户登录接口

前端页面

同步操作和异步操作

留言板

约定前后端接口

public接口

getList接口

图书管理系统

应用分层(重点)

美图分享

加法计算器

前端页面

这里的计算器是前后端交互的方式, 单纯的前端也可以实现, 但是就达不到练习的目的了

准备工作: 我们先搭建一个简单的页面, 代码和效果如下:
<!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>
</body></html>

约定前后端交互接口

简单来说,就是允许客户端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应, 不能请求A, 你给我返回B, 请求响应必须正确的
现在"前后端分离"模式开发,前端和后端代码通常由不同的团队负责开发.双⽅团队在开发之前,会提前约定好交互的方式
把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书

因此后端代码这样写
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/calc")
public class CalcController {@RequestMapping("/sum")public String sum(Integer num1, Integer num2) {Integer sum = num1 + num2;return "计算结果: " + sum;}
}
效果演示

用户登录

约定前后端交互接口

login方法(登录)

首先就是参数效验, 用户名和密码肯定不能为null或者空

参数效验: 1. 可以用if进行多次效验判断(麻烦一点)

2. 使用StringUtils类的hasLength方法进行效验(推荐)

这是登录效验代码
    @RequestMapping("/login")public Boolean login(String username, String password, HttpSession session) {//参数效验(null和空)if (!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {return false;}//效验账号密码是否正确//这里使用硬编码方式演示, 数据库操作效验密码不方便//假设账号密码是: "zhangsan" "123456"if ("zhangsan".equals(username) && "123456".equals(password)) {//设置Session, 需要创建Sessionsession.setAttribute("username", username);return true;}return false;}
测试一下接口有没问题

查询用户登录接口


@RequestMapping("/getUserInfo")public String getUserInfo(HttpSession session) {String username = (String) session.getAttribute("username");return username==null?"":username;}

这样后端接口就写好了, 接下来搞定前端

前端页面

需要用到Ajax

Ajax，全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

作用:

异步：用户在等待服务器响应时可以继续操作界面，提高了用户体验。
无需刷新：局部更新页面，不需要重新加载整个页面。
数据交换格式：虽然名字中包含 XML，但 Ajax 可以使用多种数据格式，包括 JSON、HTML 等，不仅限于 XML

同步操作和异步操作

举例解释二者区别

比如去买饭, 我要卖蛋炒饭和奶茶, 正常情况下是买完蛋炒饭, 等老板做完然后去买奶茶

这种情况就是同步操作

异步操作就是: 我先预购蛋炒饭, 然后我去买奶茶, 等蛋炒饭做好了老板通知去拿就可以了

登录界面

通过Ajax, 登录成功进行页面跳转(重定向), 登录失败就提示错误

<!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="jquery-3.7.0.min.js"></script><script>function login() {$.ajax({url: "/user/login",  //指定请求的URL地址type: "post",    //指定请求的类型data: {  //指定要发送的数据, 这里的数据是从表单中获取的用户名和密码"userName": $("#userName").val(), // 获取用户名输入框的值"password": $("#password").val() // 获取密码输入框的值},//指定请求成功时的回调函数success: function (result) {// 如果服务器返回的结果为 true，进行页面跳转if (result) {location.href = "index.html"; //重定向到index.html页面} else {alert("密码错误"); //如果结果为 false，弹出密码错误的提示}}});}</script>
</body></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="jquery-3.7.0.min.js"></script><script>$.ajax({url: "user/getUserInfo",type: "get",success: function (userName) {$("#loginUser").text(userName);}});</script>
</body></html>

留言板

约定前后端接口

设计思路:

点击提交, 要把数据拼接到留言板下方,

同时需要把数据提交到后端, 交给后端存储, 我们可以通过一个链表存储

并且第一使用留言板, 还要把以前的留言显示在下面(从后端拿到数据并显示在页面上)

因此我们要设计两个接口

message/public接口: 收集前端提交的数据
message/getList接口: 返回数据到前端

因此我们可以这样约定前后端接口

public接口

    @RequestMapping(value = "/public", method = RequestMethod.POST)public Boolean publish(@RequestBody MessageInfo messageInfo) {list.add(messageInfo);System.out.println("日志: 后端存储数据成功");return true;}

getList接口

我们来测试一下接口是否正确

这样后端的代码就没问题了, 接下来我们来写, 前端页面如何通过接口来获取后端数据的代码

前端获取后端数据的代码

分成两步:

首先将以前的留言记录显示到下面, 不能每次打开都要重新留言

由于html代码从上向下执行, 所以这串逻辑代码必须写在script的开头

创建新的留言, 将新的留言数据交给后端保存, 同时将留言显示到下方

显示留言记录

保存并显示新的留言

我们来验证一下效果吧

所有代码

留言板所有代码

<!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="jquery-3.7.0.min.js"></script><script>//$.ajax({url: "message/getList",type: "get",success: function(messages) {if(messages != null) {for(var message of messages) {var tmp = "<div>" + message.from +"对" + message.to + "说:" + message.say +"</div>";$(".container").append(tmp);}}}});//获取留言数据function submit(){let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();//不为空if(from == "" || to == "" || say == ""){return;}//保存并显示新的留言$.ajax({url: "message/public",type: "post",contentType: "application/json",data: JSON.stringify ( {"from": from,"to": to,"say": say} ),success: function(result) {if(result) {//保存成功//将留言信息显示到页面上let message = "<div>" + from +"对" + to + "说:" + say +"</div>";$(".container").append(message);//清空输入信息$("#from").val("");$("#to").val("");$("#say").val("");} else {//保存失败alert("留言失败");}}});}</script>
</body></html>

后端代码

Message对象代码

import lombok.Data;@Data
public class MessageInfo {private String from;private String to;private String say;
}

后端接口代码

import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/message")
public class MessageController {private List<MessageInfo> list = new ArrayList<MessageInfo>();@RequestMapping(value = "/public", method = RequestMethod.POST)public Boolean publish(@RequestBody MessageInfo messageInfo) {list.add(messageInfo);System.out.println("日志: 后端存储数据成功");return true;}@RequestMapping(value = "/getList", method = RequestMethod.GET)public List<MessageInfo> getList() {System.out.println("日志: 前端获取数据成功");return list;}
}

图书管理系统

界面

约定前后端接口

我们先来写登录接口: 判断账号密码是否正确, 首先要有账号密码的属性

import lombok.Data;
@Data
public class UserInfo {private String username;private String password;
}

hasLength()方法: 参数为null或者长度为空, 返回false

equal()方法: 判断二个参数是否相等

@RestController
@RequestMapping("/user")
public class UserController {@RequestMapping("/login")public String login(String username, String password) {//判断账号或密码是否为空或者长度为0, 为空或0,方法返回falseif (!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {return "账号或密码不能为空";}//硬编码方式if (!"zhangsan".equals(username) || !"123456".equals(password)) {return "账号或密码错误";}return "";}
}

图书列表: getList接口

我们通过链表存储图书, 先创建图书的属性

状态码, 因为图书状态只有可借阅和不可借阅两种情况, 所以可以用数字代替中文, 企业开发用状态码, 显示成借阅和不可借阅是前端的事情

@Data
public class BookInfo {private Integer bookId;  // 图书idprivate String bookName; // 书名private String author;   // 作者private Integer number;  // 数量private BigDecimal price;// 定价private  String publishName;// 出版社private Integer status;  // 状态码, 因为图书状态只有可借阅和不可借阅两种情况, 企业开发用状态码, 变成中文是前端的事情private String statusCN; // (可有可无)状态码对应的中文, 现在我们写项目前后端都是自己, 需要显示一下
}

getList接口, 以及接口测试

package com.white.demo;import org.springframework.util.StringUtils;
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;@RestController
@RequestMapping("/book")
public class BookController {private List<BookInfo> list = new ArrayList<BookInfo>();@RequestMapping("/getList")public List<BookInfo> getList() {list = mockData(); //mock测试(模拟测试)return list;}private List<BookInfo> mockData() {  //mock测试(从数据库调用数据进行测试),for (int i = 0; i < 15; i++) {   //由于咱们没数据库, 所以使用mockData方法模拟数据库BookInfo bookInfo = new BookInfo();bookInfo.setBookId(i);bookInfo.setBookName("书名: " + i);bookInfo.setAuthor("作者: " + i);bookInfo.setNumber(3*i+1);bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));bookInfo.setPublishName("出版社: " + i);bookInfo.setStatus(i%2==0?1:2);bookInfo.setStatusCN(i%2==0?"可借阅":"不可借阅");list.add(bookInfo);}return list;}}

使用postman测试

前端页面

我们要实现从后端拿到数据放到前端, 通过ajax拿到数据后, 如何展示页面呢?

使用HTML的话, 只能一个一个的拼接

拼接方法:

1. 先只写一对单引号''

例如:

var tmp = '<tr>123<tr>';

2. 然后把123替换成一对单引号, 变成这样

tmp = '<tr>''<tr>'; (中间两个单引号)

3.在中间两个单引号之间加上两个+号, 变成这样

tmp = '<tr>'++'<tr>';

4. 再两个 + 号中间填上属性变量即可

tmp = '<tr>'+要替换的变量+'<tr>';

比如这种形式: tmp = '<tr>'+bookId+'<tr>';

拼接结果就是前面两个单引号是一对

根据上述方法, 可以得到以下界面

运行结果

应用分层(重点)

应用分层是一种设计架构, 将代码分为多个独立的层次, 可以提高代码的可阅读性, 可维护性、可扩展性和灵活性, 并且代码出现问题非常容易找到出错的部分

应用三层一般分为三层: 表现层(Controller), 业务逻辑层(Service), 数据层(Dao), 有时候还会加入实体类层(model, pojo, DTO, VO.....)