【Spring MVC】关于Spring MVC编程中前后端交互实现简单登录跳转和留言板实例

用户11288949

发布于 2025-01-17 13:56:25

10700

代码可运行

文章被收录于专栏：学习学习

运行总次数：0

代码可运行

📚️1.前后端交互接⼝

在开始讲解实现，前后端交互的实现之前，我们需要理解一下，什么是前后端的交互接口

1.1概念介绍

约定 "前后端交互接⼝" 是进⾏ Web 开发中的关键环节. 接⼝⼜叫 API（Application Programming Interface), 我们⼀般讲到接⼝或者 API，指的都是同⼀个东西.是指应⽤程序对外提供的服务的描述, ⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).

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

接⼝：其实也就是我们前⾯⽹络模块讲的的"应⽤层协议". 把约定的内容写在⽂档上, 就是"接⼝⽂档" ,接⼝⽂档也可以理解为是应⽤程序的"操作说明书

就如下所示：

这里我们就是约定：1是唱歌，2是交通工具音效，3是睡眠儿歌......

解释：

但是这些操作说明, 如果没有⼀个⽂档来说明, ⽤⼾就不太清楚哪个按键对应哪个, 所以商品⼀般会带⼀个说明书这些按键, 就是接⼝.这个"说明书", 就是应⽤程序的"接⼝⽂档

1.2需求的分析

接口的定义：

就如同如何进行访问到后端，一般的组成就是:

后端代码地址映射：“test/test1” 请求的方式：get/post 有无参数的存在返回值的类型

以上就是我们在进行前后端开发中重要的接口的定义，实际来说更加严谨，小编这里这是简单举例了；

📚️2.登录跳转实现

2.1需求分析

对于后端开发⼈员⽽⾔, 不涉及前端⻚⾯的展⽰, 只需要提供两个功能 1. 登录⻚⾯: 通过账号和密码, 校验输⼊的账号密码是否正确, 并告知前端 2. ⾸⻚: 告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账号, 如果没有, 返回空

2.2接口定义

1.校验接口

请求的路径：“/user/login” 请求的方法：“post” 接口的描述：判断输入的是否正确，如果正确的，那么就会返回true，反之false

2.参数的定义

string：userName string：password

当然，这里还包括一个查询校验的接口，大致如下所示：

请求路径：/user/getLoginUser 请求的方法：“get” 接口的描述：接收用户的名字，实现在前端的展示参数：没有参数

那么上述我们就已经定义完了关于接口的简单文档的描述，然后我们后面就会依据这个文档进行操作，会大大的提高我们之间的代码编写的速率；

2.3后端代码实现

1.点击登录

代码如下所示：

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("user")
public class LoginController {
    @RequestMapping("/login")
    public boolean login(String userName, String password, HttpSession session){
        if(!StringUtils.hasLength(userName)||
        !StringUtils.hasLength(password)){
            return false;
        }
        if (!"zhangsan".equals(userName) || !"123456".equals(password)){
            return false;
        }
        session.setAttribute("userName",userName);
        return true;
    }

解释：

首先就是通过地址映射实现路径的访问，然后由于在接口文档中说明了存在参数的设置，所以那么就存在对应的参数，通过!StringUtils.hasLength(userName判断是这个输入是否为空的，如果存在一个为空的，那么就可以返回一个false的了，反之，若果没有问题，那么就将这个名字放在session里，并返回一个true

2.登录展示

然后在我们实现登录人展示的时候，后端代码如下所示：

@RequestMapping("/getLoginUser")
    public String getLoginUser(HttpSession httpSession){
        String name=(String) httpSession.getAttribute("userName");
        if (StringUtils.hasLength(name)){
            return name;
        }
        return "";
    }

解释：

通过地址映射进行访问，由于没有参数，所以我们只需要拿到session里userName的值，然后判断这里的值是否是合法不为空的，然后返回对应的字符串类型；

3.postman检查

此时我们能够通过postman进行实验测评：

那么此时下面面板输出的就是true，说明我们的这部分后端的代码是没有问题的，然后我们在进行一个获取：

可以看到此时的输出就是我们写进去的名字，是说明我们这段代码也是没有任何的问题的；

2.4前端代码实现

这里由于小编不是专业的前端的技术人员，所以这里小编会主要实现讲解如何通过URL进行交互，代码如下所示：

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

解释：

首先规定先建立一个登录界面的按钮，并且引入jQuery的网址，后面我们就会使用jQuery中的Ajax进行方法的编写；

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

解释：

此时就是通过URL进行后端程序的访问，由于需要参数，那么就通过data进行操作传入参数，然后传入后端后，就会通过result拿到这里的返回的值，所以再判断返回的值是如何的，为真那么就跳转到另一个页面；

<body>
登录人: <span id="loginUser"></span>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
     $.ajax({
         url:"/user/getLoginUser",
         type:"get",
         success:function (result){
             $("#loginUser").text(result);
         }
     })
</script>

解释：

这里跳转后，拿到对应路径方法的值，然后再对应的位置进行拼接；

最后我们可以进行实验测试：

可以看到此时我们进行输入地址测试后，可以看到此前端的页面，此时输入正确的值后；

可以看到，此时实现了跳转和，登录人的打印；

📚️3.留言板的实现

2.1需求分析

后端需要提供两个服务 1. 提交留⾔: ⽤⼾输⼊留⾔信息之后, 后端需要把留⾔信息保存起来 2. 展⽰留⾔: ⻚⾯展⽰时, 需要从后端获取到所有的留⾔信息

2.2接口定义

1.校验接口

请求路径：message/getList 请求方法：GET 接口的描述：全部留⾔信息, 我们⽤List来表⽰, 可以⽤JSON来描述这个List数据

2参数的定义

参数是string类型，并放在一个对象里面即可

2.3后端代码实现

1.lombok的使用

在这个环节, 我们介绍⼀个新的⼯具包 lombok Lombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发.

依赖的引入：

<dependency>
 <groupId>org.projectlombok</groupId>
 <artifactId>lombok</artifactId>
 <optional>true</optional>
</dependency>

此时我们就这样进行使用：

import lombok.Data;

@Data
public class MessageWall {
    //三个对应的属性
    private String from;
    private String to;
    private String say;
}

此时就是通过@data注解将我们这里的变量进行get set的方法构造，并且还实现了tostring方法，

原理解释：

加了 @Data 注解之后, Idea反编译的class⽂件这不是真正的字节码⽂件, ⽽是Idea根据字节码进⾏反编译后的⽂件反编译是将可执⾏的程序代码转换为某种形式的⾼级编程语⾔, 使其具有更易读的格式. 反编译是⼀种逆向⼯程，它的作⽤与编译器的作⽤相反

可以在target中进行查看：

 public void setFrom(final String from) {
        this.from = from;
    }

    @Generated
    public void setTo(final String to) {
        this.to = to;
    }
 protected boolean canEqual(final Object other) {
        return other instanceof MessageWall;
    }

    @Generated
    public int hashCode() {
        int PRIME = true;
        int result = 1;

小编这里只进行截取了一部分而已，可以看到重写的方法不止get&set所以，data更加粗暴，那么lombok还提供了其他的方法

@Getter ⾃动添加 getter ⽅法 @Setter ⾃动添加 setter ⽅法 @ToString ⾃动添加 toString ⽅法 @EqualsAndHashCode ⾃动添加 equals 和 hashCode ⽅法 @NoArgsConstructor ⾃动添加⽆参构造⽅法 @AllArgsConstructor ⾃动添加全属性构造⽅法，顺序按照属性的定义顺序

更加快速添加依赖：

首先下载一个editstarts的插件：

然后我们在pom.xml的文件中点击右键，generate找到这个插件点击后图示如下：

可以看到此时就存在lombok这一项，点击后就会自动添加引入对应的依赖；

2.输入存储的判断

代码如下所示：

@RequestMapping("/message")
@RestController
public class MessageController {
    private List<MessageWall> list=new ArrayList<>();
    @RequestMapping("/publish")
    public boolean publish(MessageWall messageWall){
        if(!StringUtils.hasLength(messageWall.getFrom())||
        !StringUtils.hasLength(messageWall.getSay())||
        !StringUtils.hasLength(messageWall.getTo())){
            //其中一个为空，那么就返回不合法
            return false;
        }
        //将这个数据对象存入到list列表里
        list.add(messageWall);
        return true;
    }

解释:

就是拿到这个对象的几个属性，进行判断如果存在为空的情况下那么就直接返回一个false，如果拿到的值是合法的情况下，就直接放入到列表里，然后返回一个true；

3.返回列表

@RequestMapping("getList")
    public List<MessageWall> getList(){  //返回拿到列表里的东西
        return list;
    }
}

这里小编就不在过多的解释，相信大家都应该了解；

4.进行postman检查

那么此时下面留言板输出的就是true，然后我们进行获取：

可以看到我们就已经拿到了这里的值，此时的数据的格式就是JSON的；

2.4前端代码实现

首先我们先将基础的前端代码演示：

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

此时就是每个from to say文本框的展示，然后实现引入jQuery的网址；

function submit(){
    //1. 获取留言的内容
    var from = $('#from').val();
    var to = $('#to').val();
    var say = $('#say').val();
    if (from== '' || to == '' || say == '') {
      return;
    }
    $.ajax({
      url:"message/publish",
      type:"post",
      data:{
        from:from,
        to:to,
        say: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("输入的数据不合法")
        }
      }

解释：

本代码就是通过点击提交后，拿到每个文本参数的值后，判断这个值是否为空，然后进行入Ajax实现核心逻辑：URL，请求的方法，参数的提供，接收返回的值是否为true，如果为真，那么及构造节点，再将节点进行前端页面的展示；最后清空输入框，反之弹出输入数据不合法的弹框

  $.ajax({
      url: "message/getList",
      type: "get",
      success:function (result){
        for (var message of result){
          var divE = '<div>'+message.from+"对" + message.to + "说:" + message.say+'</div>';
          //3. 把节点添加到页面上
          $(".container").append(divE);
        }
      }
    })

解释：

最后将留言板信息保留，通过返回对象的遍历，拿到每个对象的from,to,say然后添加在节点上，最后进行拼接，实现刷新后数据仍然是保留的状态；

最后演示如下所示：