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

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.登录展示

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

java 复制代码

@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进行交互，代码如下所示：

html 复制代码

<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进行方法的编写；

javascript 复制代码

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拿到这里的返回的值，所以再判断返回的值是如何的，为真那么就跳转到另一个页面；

javascript 复制代码

<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需求分析

后端需要提供两个服务

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

2.2接口定义

1.校验接口

请求路径：message/getList

请求方法：GET

接口的描述：全部留⾔信息, 我们⽤List来表⽰, 可以⽤JSON来描述这个List数据

2参数的定义

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

2.3后端代码实现

1.lombok的使用

在这个环节, 我们介绍⼀个新的⼯具包 lombok

Lombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发.

依赖的引入：

XML 复制代码

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

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

java 复制代码

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中进行查看：

java 复制代码

 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.输入存储的判断

代码如下所示：

java 复制代码

@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.返回列表

java 复制代码

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

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

4.进行postman检查

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

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

2.4前端代码实现

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

html 复制代码

<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的网址；

javascript 复制代码

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，如果为真，那么及构造节点，再将节点进行前端页面的展示；最后清空输入框，反之弹出输入数据不合法的弹框

javascript 复制代码

  $.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然后添加在节点上，最后进行拼接，实现刷新后数据仍然是保留的状态；

最后演示如下所示：

此时我们提交后，就会在下面的面板中进行展示，此时我们进行刷新后，数据仍然存在

注意：但是数据此时是存储在服务器的内存中 ( private List<Message> messages = new
ArrayList<Message>(); ), ⼀旦服务器重启, 数据仍然会丢失

📚️4.总结

本期小编主要讲解了关于前后端交互中提到的接口文档的简单实例，然后通过登录跳转，和留言板的简单案例，具体为大家演示了前后端的交互；

🌅🌅🌅~~~~最后希望与诸君共勉，共同进步！！！

💪💪💪以上就是本期内容了，感兴趣的话，就关注小编吧。

😊😊 期待你的关注~~~