使用SpringMVC实现功能

一、计算器

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>

效果：