第五期：深入理解 Spring Web MVC [特殊字符]（前后端交互的综合性练习）-优快云博客

本文链接：https://blog.youkuaiyun.com/eternal__day/article/details/147025874

✨ 前言：从理解到实战，彻底掌握 Spring MVC 前后端交互

当我们学习了 Spring MVC 中的各种注解、参数绑定、请求方式、编码处理以及 Cookie/Session 操作之后，下一步就是 —— 动手实践！

理论再多，不如亲自敲一次代码。

为了帮助你真正掌握这些知识点，本期我们特别准备了 4 个实战练习案例，从最简单的 GET 请求查询，到复杂的 JSON 请求、表单提交、Cookie/Session 管理、响应处理，全方位模拟实际开发中最常见的场景。

通过这些实战练习，你将：

学会使用 @RequestParam、@PathVariable、@RequestBody 等注解完成数据传参；
体验 Cookie 与 Session 在用户状态保持中的应用；
掌握返回 JSON、HTML 片段、静态页面等多种响应形式；
深入理解前端 AJAX 与 Spring MVC 后端的数据交互过程；
遇到乱码怎么办？特殊字符如何传参？我们也准备了答案！

每一个练习都配有 功能说明 + 技术点目标 + 后端实现 + AJAX 示例，从基础到进阶，适合你一步步打通 Spring MVC 的任督二脉 💪

📚 准备好了吗？接下来，让我们一起动手做项目，走出「会看不会写」的学习阶段！

实战项目：

1 加法计算器

1.1 事前准备（项目创建）：

创建项目·选择Maven项目点击下一步

添加Maven依赖

3 导入我们准备的前端代码：

<!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>

1.2 约定前后端交互接⼝

概念介绍

约定"前后端交互接⼝"是进⾏Web开发中的关键环节.

接⼝⼜叫API（ApplicationProgrammingInterface),我们⼀般讲到接⼝或者API，指的都是同⼀个东西.

是指应⽤程序对外提供的服务的描述,⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).

简单来说,就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.

这是个特别关键的问题，尤其是做 Web 开发时必须理解的核心概念之一。我们来讲得既清楚又实战一点 👇

❓ 那么为什么要“约定”前后端交互接口？

前后端分离后，前端只管展示，后端只管数据与逻辑。为了能顺利“合作”，必须明确沟通规范——也就是所谓的“接口约定”。

🎯 简单理解：接口就像“合同”

你可以把前后端接口当作一份“合作协议”或“API合同”，它包括：

内容	作用
请求路径	前端知道请求哪个地址
请求方式	GET / POST / PUT / DELETE 等
参数名称与类型	后端告诉前端需要哪些参数，类型是什么
返回数据格式	返回的是 JSON？里面有哪些字段？
状态码规范	成功/失败怎么判断？出错时返回什么信息？

💥 如果没有接口约定，会怎样？

前端可能传了参数，但后端收不到；
后端返回了数据，但前端不知道字段名；
请求方法搞错，POST 写成了 GET；
返回的格式乱七八糟，前端根本无法解析；
后端改了接口，前端完全不知道，直接“炸裂”💥

✅ 规范接口有哪些常见方式？

接口文档（推荐）
使用 Postman、YApi、Swagger、Apifox 等工具记录 API 信息。
RESTful 风格（建议遵守）
URL 语义清晰，比如：
- /users → 获取所有用户
- /users/{id} → 获取某个用户
- /users POST → 新增用户

定义返回格式（如统一 JSON）：

{
  "code": 200,
  "message": "success",
  "data": { ... }
}

🧠 总结一句话：

前后端接口约定的本质，是让前端和后端团队像两个“契约者”，有序合作、互不踩雷。

所以在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⼝⽂档进⾏开发.

接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.

接⼝⽂档⼀旦写好,尽量不要轻易改变.

如若需要改变,必须要通知另⼀⽅知晓.

1.3 接⼝定义

请求参数:

1.4 开发代码

由此根据以上接口，我们可以写出：

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/calc")
public class computer {
   @RequestMapping("/sum")
    public String sum(Integer num1,Integer num2) {
       Integer sum = num1 + num2;
    return  "</h1>相加的结果 sum = " + sum + "</h1>" ;
}
}

1..5 结果展示：

在两个输入框内输入数字：

点击相加：

由此我们的第一个简单的项目已经完成了，有没有感觉到非常的简单呢？我们要开始加大难度了👇

2 ⽤⼾登录

需求:⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确

1. 如果不正确,前端进⾏⽤⼾告知

2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾

3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息

2.1 事前准备：

前端代码：login

<!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>

index：

<!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.2 约定前后端交互接⼝

需求分析对于后端开发⼈员⽽⾔,不涉及前端⻚⾯的展⽰,只需要提供两个功能

1. 登录⻚⾯:通过账号和密码,校验输⼊的账号密码是否正确,并告知前端

2. ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回空

2.3 接⼝定义

请求参数:

响应数据:

Content-Type: text/html

响应内容:

true //账号密码验证成功

false//账号密码验证失败

查询登录⽤⼾接⼝

请求参数:

⽆

响应数据:

2.4 开发代码

package com.example.demo;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/user")
public class userlogin {
    @PostMapping("/login")
    //判断传递的两个参数是否为空，如果为空就返回false
    //不为空就将输入名字的参数传递在session中以便在前端中中获取
    public boolean login(String username, String password, HttpServletRequest request) {
        if(!StringUtils.hasLength(username)||
                !StringUtils.hasLength(password)) {
            return false;
        }
        //校验账号密码是否正确
        //理论上应该从数据库中获取账号密码, 校验是否正确, 但当前还没讲数据库的操作, 先把
       // 账号密码固定写死
        if("zhangsan".equals(username)&&"admin".equals(password)) {
            HttpSession session = request.getSession(true);
            session.setAttribute("username", username);
            return true;
        }
        //密码验证成功, 把⽤⼾名存储在Session中

        return false;
    }
    @RequestMapping(value = "/getLoginUser",method = RequestMethod.GET)
    public String getLoginUser(HttpSession session) {
        //从Session中获取⽤⼾登录信息
        String username = (String) session.getAttribute("username");
        //如果⽤⼾已经登录, 则直接返回⽤⼾登录
        if(StringUtils.hasLength(username)) {
            return username;
        }
        return"";
    }
}

2.5 调整前端⻚⾯代码

2.5.1调整登录⻚⾯login.html

对于前端⽽⾔,当点击登录按钮时,需要把⽤⼾输⼊的信息传递到后端进⾏校验,后端校验成功,则跳转到⾸⻚:index.html,后端校验失败,则直接弹窗

function login(){
        $.ajax({
            type :"post",
            url:"/user/login",
            data:{
                "userName":$("#userName").val(),
                "password":$("#password").val()
            },
            success:function (result){
                if(result){
                    location.href = "/index.html"
                } else {
                    alert("账号或密码有错误");
                }
            }
        });
    }

⻚⾯跳转的三种⽅式:

1. window.location.href="book_list.html";

2. window.location.assign("book_list.html");

3. window.location.replace("book_list.html");

以上写法,通常把"window."省略,⽐如window.location.href = "book_list.html"; 写成location.href = "book_list.html";

三者区别参考:location.assign()、location.href、location.replace(url)的不同-阿里云开发者社区

2.5.2 调整⾸⻚代码

⾸⻚代码⽐较简单,只显⽰当前登录⽤⼾即可.

当前登录⽤⼾需要从后端获取,并显⽰到前端

  $.ajax({
        type: "get",
        url: "/user/getLoginUser",
        success: function (result) {
            $("#loginUser").text(result);
        }
    });