今天我们来一个大练习，我们要实现一个登录界面，登录进去了先获取到登录人信息，可以选择计算器和留言板两个功能，另外我们是学后端的，对于前端我们会些基础的就行了，知道ajax怎么用，知道怎么关联到后端的参数即可，对于那些漂亮的页面，我们可以去Bootstrap找到各种各样的模版。
1，定义接口文档
我们后端程序员要学会根据接口文档写代码，工作上就是这样的，我们根据接口文档来写写属于我们那部分的代码，我们现在来定义下面4个功能的接口文档：
1，登录接口文档：
请求路径：User/Login
请求方式：Post
请求参数：
参数名 类型 是否必须 备注
userName String 是 需要校验的第一个参数
password String 是 需要校验的第二个参数
响应数据：
Content-Type：text/html
响应内容：
返回true or false
2，计算器接口文档
请求路径：Calc/Count
请求方式：Get
请求参数：
参数名 类型 是否必须 备注
num1 Double 是 参与计算的第一个参数
num2 Double 是 参与计算的第二个参数
op String 是 运算符
响应数据：
Content-Type：text/html
响应内容：
返回计算结果Integer
3，留言板接口文档
1)获取内存历史留言
请求路径：Message/getList
请求方式：get
请求参数：无
相应数据：
Content-Type：application/json
响应内容：
集合都是json，传的对象
2)打印留言
请求路径：Message/publish
请求方式：get
请求参数：
MessageInfo messageinfo
对象中有String from String to String say
响应数据
Content-Type：text/html
响应内容：
json内容，如{"ok":0}
2，登录功能实现
我们现在就来根据接口文档来写代码:
@RequestMapping("/User")
@RestController
public class UserController {
@RequestMapping("/Login")
public boolean Login(String userName, String password, HttpServletRequest httpServletRequest){
if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
return false;
}
if("admin".equals(userName) && "admin".equals(password)){
httpServletRequest.setAttribute("userName",userName);
return true;
}
return false;
}
}
这里推荐大家去模版王找一些模版的前端代码，我觉得很方便
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Hotair Login Form Responsive Widget Template</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"/>
<meta name="keywords"
content="Hotair Login Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
<!-- //Meta tag Keywords -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700;900&display=swap"
rel="stylesheet">
<!--/Style-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<!--//Style-CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<!-- form section start -->
<section class="w3l-hotair-form">
<h1>Hotair Log In Form</h1>
<div class="container">
<!-- /form -->
<div class="workinghny-form-grid">
<div class="main-hotair">
<div class="alert-close">
<span class="fa fa-close"></span>
</div>
<div class="content-wthree">
<h2>Log In</h2>
<p>To Your Account</p>
<form action="#" method="post">
<input type="text" class="text" name="userName" placeholder="User Name" required=""
id="userName">
<input type="password" class="password" name="password" placeholder="User Password" required=""
id="password">
<button class="btn" type="submit" onclick="heihei()">Log In</button>
</form>
</div>
<div class="w3l_form align-self">
<div class="left_grid_info">
</div>
</div>
</div>
</div>
<!-- //form -->
</div>
<!-- copyright-->
<div class="copyright text-center">
<p class="copy-footer-29">© 2020 Hotair Log In Form. All rights reserved | <a target="_blank"
href="http://www.mobanwang.com/"
title="网页模板">网页模板</a></p>
</div>
<!-- //copyright-->
</section>
<!-- //form section start -->
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function (c) {
$('.alert-close').on('click', function (c) {
$('.main-hotair').fadeOut('slow', function (c) {
$('.main-hotair').remove();
});
});
});
function heihei() {
$.ajax({
type: "post",
url: "User/Login",
data: {
userName: $("#userName").val(),
password: $("#password").val()
},
success: function (result) {
if (result == false) {
alert("用户名或者密码出错")
} else {
location.href = "calc.html"
}
}
})
}
</script>
</body>
</html>我把html的文件放上去了，css，js都没有，大家去模版王找就行，之后，在Script中关联好后端传来的数据就行了；
来看看效果：
密码正确则成功跳转，
3，跳转界面实现
这块就是纯前端的内容了，对点击的框框进行页面的跳转，
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Hotair Login Form Responsive Widget Template</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"/>
<meta name="keywords"
content="Hotair Login Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
<!-- //Meta tag Keywords -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700;900&display=swap"
rel="stylesheet">
<!--/Style-CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<!--//Style-CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<!-- form section start -->
<section class="w3l-hotair-form">
<h1>小 工 具</h1>
<div class="container">
<!-- /form -->
<div class="workinghny-form-grid">
<div class="main-hotair">
<div class="alert-close">
<span class="fa fa-close"></span>
</div>
<div class="content-wthree">
<h2>Log In</h2>
<p>To Your Account</p>
<form action="#" method="post">
<input type="text" class="text" name="userName" placeholder="User Name" required=""
id="userName">
<input type="password" class="password" name="password" placeholder="User Password" required=""
id="password">
<button class="btn" type="submit" onclick="heihei()">Log In</button>
</form>
</div>
<div class="w3l_form align-self">
<div class="left_grid_info">
</div>
</div>
</div>
</div>
<!-- //form -->
</div>
<!-- copyright-->
<!-- //copyright-->
</section>
<!-- //form section start -->
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function (c) {
$('.alert-close').on('click', function (c) {
$('.main-hotair').fadeOut('slow', function (c) {
$('.main-hotair').remove();
});
});
});
function heihei() {
$.ajax({
type: "post",
url: "User/Login",
data: {
userName: $("#userName").val(),
password: $("#password").val()
},
success: function (result) {
if (result == false) {
alert("用户名或者密码出错")
location.href = "index.html"
} else {
location.href = "choose.html"
}
}
})
}
</script>
</body>
</html>4，计算器功能实现
我们计算器呢就先不使用模版了，用模版的话在前端中就都写好了，没我们什么事了，我们自己来！
先来看后端代码：
@RequestMapping("/Calc")
@RestController
public class CalcController {
@RequestMapping("/count")
public Double count(Double num1,Double num2,String op){
Double num=0.0;
if(num1==null || num2==null){
return null;
} else {
if("+".equals(op)){
num=num1+num2;
} else if ("-".equals(op)) {
num=num1-num2;
} else if ("*".equals(op)){
num=num1*num2;
} else if ("/".equals(op)) {
if(num1==0){
return null;
}
num=num1/num2;
} else if ("%".equals(op)) {
num=num1%num2;
}
}
System.out.println(num);
return num;
}
}
前端的：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>计算器</h1>
<button type="button" onclick="clean()">AC</button><br>
数字1：<input name="num1" type="text" id="num1"><br>
数字2：<input name="num2" type="text" id="num2"><br>
<select id="op" name="op1">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/" selected>/</option>
<option value="%">%</option>
</select><br>
<span id="result"></span><br>
<button type="submit" onclick="count()">计算结果</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function count(){
$.ajax({
type:"get",
url:"Calc/count",
data:{
num1:$("#num1").val(),
num2:$("#num2").val(),
op:$("#op").val()
},
success:function (result) {
if(result==null){
alert("输入参数有问题呀")
}else {
$("#result").html(result);
}
}
})
}
function clean() {
$("#num1").val("")
$("#num2").val("")
$("#result").html("")
}
</script>
</body>
</html>5，留言板功能实现
@Data
public class MessageInfo {
private String from;
private String to;
private String say;
}
先来publish：
这里我们使用链表，这个是在内存中的，我们看publish方法，我们如果想要传入json数据给后端我们要使用produces，这样messageinfo对象就能接收到json格式的数据转化成对应的对象中的内容，之后我们想要输出json，我们就要使用produces，这个之前讲过，可以指定我们返回的类型；
@RequestMapping("/Message")
@RestController
public class MessageController {
List<MessageInfo> arrayList = new ArrayList<>();
@RequestMapping(value = "/publish",produces = "application/json")
public String publish(@RequestBody MessageInfo messageInfo){
if (messageInfo==null){
return "{\"ok\":0}";
}
if(messageInfo.getTo()!=null || messageInfo.getFrom()!=null ||
messageInfo.getSay()!=null){
arrayList.add(messageInfo);
return "{\"ok\":1}";
}
return "{\"ok\":0}";
}
}
<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>
在点击按钮后就会调用这个方法，重点！我们接收要使用Post方法接收JSON请求体 ，
ContentType："application/json"表明我们传入的JSON数据会转化为对象，所以result就是对象了，这个data：JSON.stringify就是把data对象转变为json为啥呢，因为参数类型是json吗，所以我们就要前端上也写类型为json，
function submit() {
var from1 = $("#from").val();
var to1 = $("#to").val();
var say1 = $("#say").val();
var data1 = {
from : $('#from').val(),
to : $('#to').val(),
say : $('#say').val(),
}
$.ajax({
type:"post",
url:"/Message/publish",
contentType: "application/json",
data: JSON.stringify(data1),
success: function (result) {
if(result.ok==0){
alert("留言失败")
}else{
//2. 构造节点
var divE = "<div>"+ from1 +"对" + to1 + "说:" + say1+"</div>";
//3. 把节点添加到页面上
$(".container").append(divE);
//4. 清空输入框的值
$('#from').val("");
$('#to').val("");
$('#say').val("");
}
}
})
}
下面来getLIst方法，这个方法的主要目的就是我们刷新之后自动加载我们之前写的内容，容器是存活在内存中，所以关机或者长时间不使用都会发生错误的；
后端代码：
@RequestMapping("/getList")
public List<MessageInfo> getList(){
return arrayList;
}前端代码：ajax：
$.ajax({
type: "get",
url: "/Message/getList",
success: function (result) {
if(result!=null && result.length>0){
var html1=" ";
for( var a of result){
html1 += "<div>"+a.from +"对" + a.to + "说:" + a.say+"</div>";
}
$(".container").append(html1);
}
}
}) 
我们点击刷新之后还是有这些留言的：
