图书馆理论与建设网站百度排行
目录
一、计算器
1、前端页面
2、服务器处理请求
3、效果
二、用户登陆系统
1、前端页面
（1）登陆页面
（2）欢迎页面
2、前端页面发送请求--服务器处理请求
3、效果
三、留言板
1、前端页面
2、前端页面发送请求
（1）获取之前的页面留言
（2）发送填写的留言
3、服务器处理请求
（1）针对获取之前留言的请求
（2）针对发送留言的请求
4、前端页面处理服务器的响应
（1）处理获取到全部留言的响应
（2）处理发表留言后的响应
5、效果
一、计算器
1、前端页面
<!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>
发送的是form请求，请求路径为：calc/sum，请求方法为：post。
页面效果：
2、服务器处理请求
3、效果
二、用户登陆系统
1、前端页面
前端有两个页面：登录页面和欢迎页面。登陆成功可以跳转欢迎页面。
（1）登陆页面
<!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() {}</script>
</body></html>（2）欢迎页面
<!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></script>
</body></html>效果：
2、前端页面发送请求--服务器处理请求
在登陆页面发送json请求，url为login/check：，参数有：username和password，请求方法为post。
服务器处理上面请求：
登陆页面处理来着服务器的响应：
登陆成功跳转到欢迎页面：
欢迎页面发送json请求，url："/login/index"，请求方式：get，请求内容为空。
服务器处理上面请求：
欢迎页面处理来自服务器的响应：
3、效果
三、留言板
1、前端页面
<!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(){}</script>
</body></html>
效果：
2、前端页面发送请求
在进入页面的时候，该页面希望获取到之前的页面留言；在填写完留言内容后，希望页面能显示出内容。虽然目前前端已经可以显示，但是浏览器刷新后就没了。
（1）获取之前的页面留言
请求类型：json，请求方式为get，请求数据为空，url：/message/getList
（2）发送填写的留言
请求类型：json，请求方式：post，请求数据：留言内容，url：/message/postList
3、服务器处理请求
定义留言对象
（1）针对获取之前留言的请求
（2）针对发送留言的请求
4、前端页面处理服务器的响应
（1）处理获取到全部留言的响应
（2）处理发表留言后的响应
5、效果
