Spring MVC(五)

IKUN家族2026-08-08 9:27

目录

一.用户登录

需求:用户输入账号和密码,后端进行校验密码是否正确

约定前后端交互接口

接口定义

首页登录

查询登录用户接口

二.前端缓存的处理

三.留言板

约定前后端交互接口

接口定义

1.获取全部留言信息

2.发表新留言

前端代码

3.发生问题如何排除故障

四.企业项目开发流程

**摘要：**本文系统介绍了四个典型的Web开发实践案例：1）用户登录功能，包括前后端接口设计、Session管理及完整的前后端实现代码；2）前端缓存处理的基本方法；3）留言板系统的完整开发流程，涵盖接口定义、数据存储和前端交互；4）企业级项目开发的标准流程。文章通过具体的代码示例和接口设计，为初学者提供了从需求分析到功能实现的完整参考。

一.用户登录

需求:用户输入账号和密码,后端进行校验密码是否正确

  1. 如果不正确,前端进行用户告知
  2. 如果正确,跳转到首页,首页显示当前登录用户
  3. 后续再访问首页,可以获取到登录用户信息

约定前后端交互接口

需求分析

对于后端开发人员而言,不涉及前端页面的展示,只需要提供两个功能

  1. 登录页面:通过账号和密码,消炎输入的账号密码是否正确,并告知前端
  2. 首页:告知前端当前登录用户.如果当前已有用户登录,返回登录账号,如果没用,返回空.

接口定义

首页登录

1.校验接口

  1. 请求路径:/user/login
  2. 请求方式:get/post
  3. 接口描述:校验账号密码是否正确

请求参数

|----------|--------|------|---------|
| 参数名 | 类型 | 是否必须 | 备注 |
| userName | String | 是 | 校验登录的账号 |
| passWord | String | 是 | 校验登录的密码 |

响应数据

  1. Content-Type:text/html
  2. 响应内容:
  3. true//账号密码校验成功
  4. false//账号密码校验失败
java 复制代码 
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
public class UserController {
    @RequestMapping("/login")
    public  Boolean login(String userName,String passWord){
        if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(passWord)){
            return false;
        }
        if("admin".equals(userName)&&"admin".equals(passWord)){
            return true;
        }
        return false;
    }
}

测试接口

查询登录用户接口

  1. 请求路径:/user/getLoginUser
  2. 请求方式:get
  3. 接口描述:查询当前登录的用户

请求参数:

无

响应数据:

  1. Contet-Type:text/html
  2. 响应的内容:
  3. admin
java 复制代码 
    @RequestMapping("/getLoginUser")
    public String getLoginUSer(HttpSession session){
        return session.getAttribute("username").toString();
    }

测试

前端代码

login.html

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.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    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("账号或密码错误")
          }
        }
      });
    
    }

  </script>
</body>

</html>

页面跳转的三种方式:

  1. window.location.href="book_list.html"
  2. window.location.assign("book_list.html")
  3. window.location.replace("book_list.html)

以上写法通常把"window"省略

调整首页代码

首页代码比较简单,只显示当前登录用户即可

当前登录用户需要从后端获取,并显示到前端

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-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>
        $.ajax({
            type:"get",
            url:"/user/getLoginUser",
            success:function(result){
                $("#loginUser").text(result)
            }
        });
    </script>
</body>

</html>

Session存在内存中,如果不做任何处理,默认服务器重启.Session数据就丢失了

二.前端缓存的处理

  1. 强刷 ctr+F5
  2. 清理缓存
  3. 确认后端代码,清楚后端缓存 mvn clean 如果t

三.留言板

需求:

界面如下图所示

  1. 输入留言信息,点击提交,后端把数据存储起来
  2. 页面展示输入的表白墙的信息

约定前后端交互接口

需求分析

后端需要提供两个服务

1.提交留言:用户输入留言信息之后,后端需要把留言信息保存起来

2.展示留言:页面展示时,需要从后端获取到所有的留言信息

接口定义

1.获取全部留言信息

请求:

get

/message/getList

响应:JSON格式

{ "from": "⿊猫", "to": "⽩猫", "message": "喵" }, { "from": "⿊狗", "to": "⽩狗", "message": "汪" }, //...

java 复制代码 
    @RequestMapping("/getList")
    public List<message> getList(){
        return list;
    }
2.发表新留言

请求:body也为JSON格式

  1. post /message/publish
  2. {
  3. "from:"黑猫",
  4. "to":白猫,
  5. "message"":"喵"
  6. }

响应

  1. true//代表接受数据成功
  2. false//代表接受数据失败
java 复制代码 
    @RequestMapping("/publish")
    public Boolean publish(@RequestBody message data){
        if(StringUtils.hasLength(data.getMessage())
                &&StringUtils.hasLength(data.getTo())
                &&StringUtils.hasLength(data.getFrom())){
            list.add(data);
            return true;
        }
        return false;
    }
前端代码
html 复制代码 
<!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>

        $.ajax({
            type: "get",
            url: "/message/getList",
            success: function (messages) {
                // for (let index = 0; index < messages.length; index++) {
                //     const element = messages[index];

                // }
                for (let msg of messages) {
                    let divE = "<div>" + msg.from + "对" + msg.to + "说:" + msg.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({
                type: "post",
                url: "/message/publish",
                contentType: "application/json",
                data: JSON.stringify({
                    from: from,
                    to: to,
                    message: say
                }),
                success: 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>

3.发生问题如何排除故障

四.企业项目开发流程

  1. 需求说明会:需求评审会(PM,产品经理) 需求文档(背景,目标,需要做的事情,项目有哪些功能,逻辑是啥么)
  2. 分工干活

1)方案设计(概要设计,详细设计,数据库设计,接口设计)

2)方案review

3)开发

4)自测

3.提测

4.联调

5.上线

相关推荐
weixin_BYSJ19871 小时前
【java项目分享】springboot阅读推荐平台10600
java·javascript·spring boot·python·django·flask·php
小 黄 鸡1 小时前
JVM 核心总结
java
一路向北North1 小时前
Spring AI(11) :ChatPDF-向量数据库、PDF处理、向量写入和向量搜索
数据库·人工智能·spring
Data_Journal2 小时前
掌握网页抓取中的分页：完整指南
java·服务器·前端
莫逸风2 小时前
【AgentScope 2.0】05-文件系统（Filesystem）详解
java·ai·agent·springai·agentscope
zoyation2 小时前
Spring Boot集成OAuth2授权码模式的三种登录策略
java·spring boot·后端
mifengxing11 小时前
LeetCode 41.缺失的第一个正数｜Hard题O(n)+O(1)最优解法深度解析
java·算法·leetcode·排序算法
markinmarkin14 小时前
Spring 中Bean 的作用域有哪些？
java·后端·spring
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09历年考研数学一、数学二、数学三真题试卷及答案PDF1000 Debian字符界面如何支持中文