JavaEE进阶10——SpringMVC小练习
1.计算器
package cn.edu.hbpu.springbootdemo; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/calc") public class CalcController { @RequestMapping("/sum") public String calc(Integer num1,Integer num2){ if(num1 == null || num2 == null) { return "请输入两个正整数！"; } return "计算机计算结果为：" + (num1 + num2); } }2.用户登录：
后端代码（UserController）：
package cn.edu.hbpu.springbootdemo; import io.micrometer.common.util.StringUtils; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpSession; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RequestMapping("/user") @RestController public class UserController { @RequestMapping("/login") public Boolean login(String userName, String password, HttpSession session){ if(StringUtils.isEmpty(userName) || StringUtils.isEmpty(password)){ return false; } if("admin".equals(userName) && "admin".equals(password)){ session.setAttribute("loginUser", userName); return true; } return false; } @RequestMapping("/getLoginUser") public String getLoginUser(HttpServletRequest request){ //设置为false,session为null时不会创建session对象 HttpSession session = request.getSession(false); if(session != null) { String loginUser = (String) session.getAttribute("loginUser"); return loginUser; } return ""; } }前端代码（login.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({ url:"/user/login", type:"post", data:{ userName:$("#userName").val(), password:$("#password").val() }, success:function(result){ if(result){ location.href="/index.html"; }else{ alert("账号或者密码错误"); } } }); } </script> </body> </html>index.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({ url:"/user/getLoginUser", type:"post", success:function(userName){ $("#loginUser").text(userName); } }) </script> </body> </html>3.留言板：
后端（MessageInfo）:
package cn.edu.hbpu.springbootdemo; import lombok.Data; @Data public class MessageInfo { private String from; private String to; private String message; }MessageController:
package cn.edu.hbpu.springbootdemo; import io.micrometer.common.util.StringUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; import java.util.List; @RestController @RequestMapping("/message") public class MessageController { private List<MessageInfo> messageInfoList = new ArrayList<>(); @RequestMapping("/publish") public Boolean publish(@RequestBody MessageInfo messageInfo){ if(StringUtils.isEmpty(messageInfo.getFrom()) || StringUtils.isEmpty(messageInfo.getTo()) || StringUtils.isEmpty(messageInfo.getMessage())){ return false; } messageInfoList.add(messageInfo); return true; } @RequestMapping("/getList") public List<MessageInfo> getList(){ return messageInfoList; } }前端（messagewal.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({ url:"/message/getList", type:"get", success:function(messages){ for(let msg of messages){ let divE = "<div>"+msg.from +"对" + msg.to + "说:" + msg.message+"</div>"; $(".container").append(divE); } } }) 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", 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>