Spring Web MVC
MVC
建立连接
@RequestMapping注释介绍
@RequestMapping的使用
@RequestMapping是get还是post请求？
指定GET/POST方法类型
请求
传递单个参数
传递两个参数
服务器端报错如下
传递多个参数或者传递一个对象
将这些参数封装为一个对象
public class Person {
Integer id;
String name ;
Integer age;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
@Override
public String toString() {
return "Person{" +
"id=" + id +
", name='" + name + '\'' +
", age=" + age +
'}';
}
}
后端参数重命名
浏览器发送get请求和postman发送get请求
传递数组
传递集合
传递JSON数据
传递JSON对象
获取URL中的路径变量
上传文件
保存文件到某一个地方
Cookie和Session
获取Cookie
伪造Cookie值
Spring下获取Cookie
获取Session
通过Spring获取Session
第3种方式获取Session
获取header
复习Cookie和Session
创建静态页面
返回数据
返回html代码片段
返回json
返回集合
设置状态码
修改content-type的类型
练习
计算器
后端代码设计以及验证
登录页面
编写后端代码并单独测试后端代码
补充前端代码的内容
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.***/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function login() {
$.ajax({
url:"/user/login",
type:"post",
data:{
userName:$("#userName").val(),
password:$("#password").val()
},
su***ess: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-***patible" content="ie=edge">
<title>用户登录首页</title>
</head>
<body>
登录人: <span id="loginUser"></span>
<script src="https://cdn.bootcdn.***/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.ajax({
url: "/user/getUserInfo",
type: "get",
su***ess: function (username) {
$("#loginUser").text(username);
}
});
</script>
</body>
</html>
登录验证
留言板
接口定义
package ***.example.demo.controller;
import lombok.Data;
/**
* Created with IntelliJ IDEA.
* Description:
* User: Home-pc
* Date: 2024-01-17
* Time: 10:13
*/
@Data
public class MessageInfo {
private String from;
private String to;
private String message;
}
导入lombok工具箱
安装插件，实现SpringBoot对某些依赖包的管理
上述的操作表示，不需要去maven网址寻找lombok的依赖包了
编写后端代码并单独测试后端代码
补充前端代码
<!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.***/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
//当刷新页面或者加载时，请求后端，能够显示出所有留言
$.ajax({
url: '/message/getMessageInfo',
type: 'get',
su***ess: function (messages) {
for(var m of messages){
//2. 构造节点
var divE = "<div>" + m.from + "对" + m.to + "说:" + m.message + "</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
}
}
});
function submit() {
//1. 获取留言的内容
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if (from == '' || to == '' || say == '') {
return;
}
//提交留言
$.ajax({
url: '/message/publish',
type: 'POST',
data: {
"from": from,
"to": to,
"message": say
},
su***ess: function (result) {
if (result) {
//2. 构造节点
var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#say').val("");
} else {
alert("留言失败");
}
}
});
}
</script>
</body>
</html>
验证
图书管理系统
搭建框架
编写后端代码并单独验证后端代码
补充前端代码
验证
应用分层
对类进行分层
对代码进行分层
企业规范
