Java EE 进阶：Spring MVC（2）

blammmp2025-03-09 17:50

cookie和session的关系

两者都是在客户端和服务器中进行存储数据和传递信息的工具

cookie和session的区别

Cookie是客⼾端保存⽤⼾信息的⼀种机制.

Session是服务器端保存⽤⼾信息的⼀种机制.

Cookie和Session之间主要是通过SessionId关联起来的，SessionId是Cookie和Session之间的 桥梁。

Cookie和Session经常会在⼀起配合使⽤.但是不是必须配合，完全可以⽤Cookie来保存⼀些数据在客⼾端.这些数据不⼀定是⽤⼾⾝份信息,也不⼀定是 SessionId。

获取cookie

传统的获取cookie

HttpServletRequest , HttpServletResponse 是Servlet提供的两个类,是Spring MVC⽅法的内置对象.需要时直接在⽅法中添加声明即可

HttpServletRequest:对象代表客户端的请求当客户端通过Http协议访问服务端时，Http请求中的所有信息封装在这个对象中，通过这个对象提供的方法，可以获得客户端的所有信息

HttpServletResponse 对象代表服务器的响应.HTTP响应的信息都在这个对象中

java 复制代码 
 //传统的获取cookie
    @RequestMapping("t13")
    public String t13(HttpServletRequest request, HttpServletResponse response){
        Cookie[] cookies = request.getCookies();
        if(cookies!=null){
            for (Cookie cookie:cookies) {
                System.out.println(cookie.getName()+":"+cookie.getValue());
            }
        }
        return "返回cookie成功";
    }

利用注释获取cookie的方式

java 复制代码 
//利用注解获取cookie
    @RequestMapping("t14")
    public String t14(@CookieValue("java") String java){
        return "获取cookie中的java成功"+ java;
    }

session的存储与获取

session的存储

java 复制代码 
 //存储session
    @RequestMapping("/setSession")
    public String setSession(HttpServletRequest request){
        HttpSession session = request.getSession();
        session.setAttribute("username","zhangsan");
        session.setAttribute("age","17");
        return "设置session成功";
    }

session的获取

方法一：

java 复制代码 
//获取session,方法一
    @RequestMapping("/getSession1")
    public String getSession1(HttpServletRequest request){
        HttpSession session = request.getSession(/*true*/);
        if (session==null){
            return "获取失败";
        }else {
            String username =(String) session.getAttribute("username");
    //        Integer age =(Integer) session.getAttribute("age");
            return "登录的用户为"+ username;
        }

    }

方法二：

java 复制代码 
//获取session,方法二
    @RequestMapping("/getSession2")
    public String getSession2(HttpSession session){
        //HttpSession session默认session中的值为true,所以可以省略session为0

            String username =(String) session.getAttribute("username");
            return "登录的用户为"+ username;
    }

方法三：

java 复制代码 
//获取session,方法三
    @RequestMapping("/getSession3")
    public String getSession3(@SessionAttribute("username") String username){
        return "登录的用户为"+ username;
    }

获取header

传统的获取header

java 复制代码 
@RequestMapping("/getHeader1")
    public String getHeader1(HttpServletRequest request){
        String UserAgent = request.getHeader("User-Agent");
        return "从header中获取User-Agent"+UserAgent;
    }

通过抓包，发现获取的user-agent正确

简洁的获取header

java 复制代码 
@RequestMapping("/getHeader2")
    public String getHeader2(@RequestHeader("User-Agent")String UserAgent){

        return "从header中获取User-Agent"+UserAgent;
    }

响应

返回静态的页面

在创建前端的页面时，注意路径

在resources包中

比如index.html前端代码

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

</html>

后端的代码

java 复制代码 
public class ResponseController {
    @RequestMapping("/t1")
    public String returnPage(){
        return "/index.html";
    }

返回数据

@requestBody

java 复制代码 
@RequestMapping("/t2")
    @ResponseBody
    public String returnData(){
        return "返回需要的数据";
    }

返回html的代码片段

java 复制代码 
  @ResponseBody
    @RequestMapping("/t3")
    public String returnHTML(){
        return "<h1>我是一级标题</h1>";
    }

返回JSON

java 复制代码 
@ResponseBody
    @RequestMapping(value = "/t5")
    public UseInfo returnJson(){
        UseInfo useInfo=new UseInfo("zhangsan",1,1);
        return useInfo;
    }

设置状态码

java 复制代码 
@ResponseBody
    @RequestMapping(value = "/t6")
    public UseInfo steStatus(HttpServletResponse response){
        response.setStatus(404);
        UseInfo useInfo=new UseInfo("zhangsan",1,1);
        return useInfo;
    }

用户的登录

前端代码

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="js/jquery-git.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("密码错误，请确认");
          }
        },
        error: function(xhr, status, error) {
          alert("请求失败，请稍后再试：" + error);
        }
      });
    }
  </script>
</body>


</html>

后端代码

java 复制代码 
package com.blame.spring.demo;

import ch.qos.logback.core.util.StringUtil;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
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.hasLength(userName) || !StringUtils.hasLength(passWord)){
            return false;
        }
        if("admin".equals(userName) && "admin".equals(passWord)){
            session.setAttribute(userName,"userName");
            return true;
        }
        return false;
    }
    @RequestMapping("/getUserLogin")
    public String getUserLogin(String userName,HttpSession session){
        String attribute =(String) session.getAttribute("userName");
        return userName;
    }
}

接口的定义

登录界面的接口定义

javascript 复制代码 
 $.ajax({
        type: "POST",
        url: "/user/login",
        data: {
          userName: $("#userName").val(),  
          password: $("#password").val()   
        },
        success: function(result) {
          if (result) {
            location.href = "index.html";  
          } else {
            alert("密码错误，请确认");
          }
        },
        error: function(xhr, status, error) {
          alert("请求失败，请稍后再试：" + error);
        }
      });

计算器的实现

前端的代码

html 复制代码 
<!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>

后端代码

java 复制代码 
@RequestMapping("/calc")
@RestController
public class CalcController {
    @RequestMapping("/sum")
    public String sum(Integer num1,Integer num2){
        if(num1==null || num2==null){
            return "输入错误，请重新输入";
        }
        Integer sum=num1+num2;
        return "结果是"+ sum;
    }
}

留言板的实现

前端代码

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="js/jquery-git.min.js"></script>
    <script>


load();

        function load() {
            $.ajax({
                type: "get",
                url: "/message/getList",
                success: function (messages) {
                    if (messages != null && messages.length > 0) {
                        var finalHtml = "";
                        for (var m of messages) {
                            finalHtml += "<div>" + m.from + "对" + m.to + "说:" + m.message + "</div>";
                        }
                        $(".container").append(finalHtml);
                    }

                }
            });
        }
        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){
                    var jsonObj = JSON.parse(result);
                    if(jsonObj.ok==1){
                        //2. 构造节点
                        var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                        //3. 把节点添加到页面上    
                        $(".container").append(divE);

                        //4. 清空输入框的值
                        $('#from').val("");
                        $('#to').val("");
                        $('#say').val("");
                    }else{
                        alert("发布失败")
                    }
                }
            });
            
            
        }
        
    </script>
</body>

</html>

后端代码

java 复制代码 
package com.blame.spring.demo;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;



@RequestMapping("/message")
@RestController
public class MessageController {

    List<MessageInfo> messageInfoList=new ArrayList<>();

    @PostMapping(value = "/publish",produces = "application/json")
    public String publish(@RequestBody MessageInfo messageInfo){
        if(!StringUtils.hasLength(messageInfo.getMessage())
                || !StringUtils.hasLength(messageInfo.getFrom())
                || !StringUtils.hasLength(messageInfo.getTo())){
            return "{\"ok\":0}";
        }
        messageInfoList.add(messageInfo);
        return "{\"ok\":1}";
    }

    @GetMapping("getList")
    public List<MessageInfo> getList(){
        return messageInfoList;
    }
}

接口的定义

lombok工具的介绍

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

首先先引入其依赖

javascript 复制代码 
<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>
java 复制代码 
@Data
public class MessageInfo {
    private String from;
    private String to;
    private String message;
}

@Data 注解会帮助我们⾃动⼀些⽅法,包含getter/setter,equals,toString等

如下图：上面是Java程序的运行原理，下面是Lombok的作用

我们就不需要自己写getter和setter方法还有toString方法

@Data=@Getter+@Setter+@ToString+@EqualsAndHashCode+@RequiredArgsConstructor + @NoArgsConstructor

图书管理系统的实现

首先先做好前端代码的引入

前端代码仅供参考，重点看后端的代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加图书</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/add.css">

</head>

<body>

    <div class="container">

        <div class="form-inline">
            <h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                    fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16">
                    <path
                        d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                </svg>
                <span>添加图书</span>
            </h2>
        </div>

        <form id="addBook">
            <div class="form-group">
                <label for="bookName">图书名称:</label>
                <input type="text" class="form-control" placeholder="请输入图书名称" id="bookName" name="bookName">
            </div>
            <div class="form-group">
                <label for="bookAuthor">图书作者</label>
                <input type="text" class="form-control" placeholder="请输入图书作者" id="bookAuthor" name="author" />
            </div>
            <div class="form-group">
                <label for="bookStock">图书库存</label>
                <input type="text" class="form-control" placeholder="请输入图书库存" id="bookStock" name="count"/>
            </div>

            <div class="form-group">
                <label for="bookPrice">图书定价：</label>
                <input type="number" class="form-control" placeholder="请输入价格" id="bookPrice" name="price">
            </div>

            <div class="form-group">
                <label for="bookPublisher">出版社</label>
                <input type="text" id="bookPublisher" class="form-control" placeholder="请输入图书出版社" name="publish" />
            </div>
            <div class="form-group">
                <label for="bookStatus">图书状态</label>
                <select class="custom-select" id="bookStatus" name="status">
                    <option value="1" selected>可借阅</option>
                    <option value="2">不可借阅</option>
                </select>
            </div>

            <div class="form-group" style="text-align: right">
                <button type="button" class="btn btn-info btn-lg" onclick="add()">确定</button>
                <button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        function add() {
            alert("添加成功");
            location.href = "book_list.html";
        }
    </script>
</body>

</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书列表展示</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/list.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="js/jq-paginator.js"></script>

</head>

<body>
    <div class="bookContainer">
        <h2>图书列表展示</h2>
        <div class="navbar-justify-between">
            <div>
                <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button>
                <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <td>选择</td>
                    <td class="width100">图书ID</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>数量</td>
                    <td>定价</td>
                    <td>出版社</td>
                    <td>状态</td>
                    <td class="width200">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>1</td>
                    <td>大秦帝国第一册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=1">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>2</td>
                    <td>大秦帝国第二册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=2">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(2)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>3</td>
                    <td>大秦帝国第三册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=3">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(3)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>4</td>
                    <td>大秦帝国第四册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=4">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(4)">删除</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="demo">
            <ul id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
        <script>

            getBookList();
            function getBookList() {
                $.ajax({
                    type: "get",
                    url: "/book/getList",
                    success: function(books){
                        var finalHtml = "";
                        for(var book of books){
                            finalHtml += '<tr>';
                            finalHtml += '<td><input type="checkbox" name="selectBook" value="'+book.bookId+'" id="selectBook" class="book-select"></td>';
                            finalHtml += '<td>'+book.bookId+'</td>';
                            finalHtml += '<td>'+book.bookName+'</td>';
                            finalHtml += '<td>'+book.author+'</td>';
                            finalHtml += '<td>'+book.num+'</td>';
                            finalHtml += '<td>'+book.price+'</td>';
                            finalHtml += '<td>'+book.publish+'</td>';
                            finalHtml += '<td>'+book.statusCN+'</td>';
                            finalHtml += '<td><div class="op">';
                            finalHtml += '<a href="book_update.html?bookId='+book.bookId+'">修改</a>';
                            finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+book.bookId+')">删除</a>';
                            finalHtml += '</div></td></tr>';
                        }
                        $("tbody").html(finalHtml);
                    }
                });
            }
    
            //翻页信息
            $("#pageContainer").jqPaginator({
                totalCounts: 100, //总记录数
                pageSize: 10,    //每页的个数
                visiblePages: 5, //可视页数
                currentPage: 1,  //当前页码
                first: '<li class="page-item"><a class="page-link">首页</a></li>',
                prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
                next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
                last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
                page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
                //页面初始化和页码点击时都会执行
                onPageChange: function (page, type) {
                    console.log("第"+page+"页, 类型:"+type);
                }
            });
            function deleteBook(id) {
                var isDelete = confirm("确认删除?");
                if (isDelete) {
                    //删除图书
                    alert("删除成功");
                }
            }
            function batchDelete() {
                var isDelete = confirm("确认批量删除?");
                if (isDelete) {
                    //获取复选框的id
                    var ids = [];
                    $("input:checkbox[name='selectBook']:checked").each(function () {
                        ids.push($(this).val());
                    });
                    console.log(ids);
                    alert("批量删除成功");
                }
            }

        </script>
    </div>
</body>

</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改图书</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/add.css">
</head>

<body>

    <div class="container">
        <div class="form-inline">
            <h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                    fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16">
                    <path
                        d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                </svg>
                <span>修改图书</span>
            </h2>
        </div>

        <form id="updateBook">
            <input type="hidden" class="form-control" id="bookId" name="id">
            <div class="form-group">
                <label for="bookName">图书名称:</label>
                <input type="text" class="form-control" id="bookName" name="bookName">
            </div>
            <div class="form-group">
                <label for="bookAuthor">图书作者</label>
                <input type="text" class="form-control" id="bookAuthor" name="author"/>
            </div>
            <div class="form-group">
                <label for="bookStock">图书库存</label>
                <input type="text" class="form-control" id="bookStock" name="count"/>
            </div>
            <div class="form-group">
                <label for="bookPrice">图书定价：</label>
                <input type="number" class="form-control" id="bookPrice" name="price">
            </div>
            <div class="form-group">
                <label for="bookPublisher">出版社</label>
                <input type="text" id="bookPublisher" class="form-control" name="publish"/>
            </div>
            <div class="form-group">
                <label for="bookStatus">图书状态</label>
                <select class="custom-select" id="bookStatus" name="status">
                    <option value="1" selected>可借阅</option>
                    <option value="2">不可借阅</option>
                </select>
            </div>
            <div class="form-group" style="text-align: right">
                <button type="button" class="btn btn-info btn-lg" onclick="update()">确定</button>
                <button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        
        function update() {
            alert("更新成功");
            location.href = "book_list.html"
        }
    </script>
</body>

</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
    <div class="container-login">
        <div class="container-pic">
            <img src="pic/computer.png" width="350px">
        </div>
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="row">
                <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function login() {
            $.ajax({
                type:"POST",
                URL:"/user/login",
                data:{
                    name: $("#userName").val(),
                    password: $("#password").val()
                },
                success:function(result){
                    if(result){
                        //账号密码正确
                        location.href = "book_list.html";
                    }else {
                        alert("账号或密码错误");
                    }
                }
            });
            //location.href = "book_list.html";
        }
    </script>
</body>

</html>

后端代码：

首先我们创建图书类BookInfo

java 复制代码 
@Data
public class BookInfo {
    private Integer bookId;
    private String bookName;
    private String author;
    private Integer num;
    private BigDecimal price;
    private Integer status;
    private String publish;
    private String statusCN;

}

创建UserController实现登录验证接口

java 复制代码 
@RequestMapping("/user")
@RestController
public class userController {
    @RequestMapping("/login")
    public boolean login(String name, String password, HttpSession session){

        if(!StringUtils.hasLength(name) || !StringUtils.hasLength(password)){
            return false;
        }

        if("admin".equals(name) && "admin".equals(password)){
            session.setAttribute("userName",name);
            return true;
        }
        return false;
    }
}

创建BookController，来调用bookService，再调用BookDao，来实现图书列表

java 复制代码 
@RequestMapping("/book")
@RestController
public class BookController {

    @Autowired
    private BookService bookService;

    @RequestMapping("/getList")
    public List<BookInfo> getList(){
        return bookService.getList();
    }
java 复制代码 
@Service
public class bookService {
    //bookDao是数据库访问中的一个对象，现在我们对status这个对象进行修改
    @Autowired
    private BookDao bookDao;
    public static List<BookInfo> getList(){
        List<BookInfo> bookInfos=new ArrayList<>();
        for (BookInfo bookInfo:bookInfos) {
            if(bookInfo.getStatus()==1){
                bookInfo.setStatusCN("可借阅");
            }else {
                bookInfo.setStatusCN("已借出");
            }
        }
        return bookInfos;
    }
}
java 复制代码 
@Repository
public class BookDao {
    public List<BookInfo> macData(){
        //创建一个储存图书
        List<BookInfo> bookInfos=new ArrayList<>();
        for (int i = 1; i <=15 ; i++) {
            //找图书
            BookInfo bookInfo=new BookInfo();
            bookInfo.setBookId(i);
            bookInfo.setBookName("图书名称"+i);
            bookInfo.setAuthor("图书作者"+i);
            bookInfo.setNum(new Random().nextInt(100));
            bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));
            bookInfo.setStatus(i%2==0?2:1);
            bookInfo.setPublish("出版社"+i);
            bookInfos.add(bookInfo);
        }
        return bookInfos;
    }
}

最后调用前端页面的代码

应用分层

三层架构

把整体架构分为表现层、业务逻辑层和数据层.这种分层 ⽅式也称之为"三层架构".

1.表现层:就是展⽰数据结果和接受⽤⼾指令的，是最靠近⽤⼾的⼀层；

2. 业务逻辑层:负责处理业务逻辑, ⾥⾯有复杂业务的具体实现；

3. 数据层: 负责存储和管理与应⽤程序相关的数据

这三个部分，在Spring中体现为：

应用分层的好处

1.降低层与层之间的依赖，使结构更加的明确，利于各层逻辑的复用

2.开发人员可以只关注某一层，极大地降低了开发成本和维护时间

3.更容易用新的实现替换原有的层次的实现

希望能对大家有所帮助！

相关推荐
八股文领域大手子2 小时前
Spring Boot Controller 如何处理HTTP请求体
java·开发语言·sql·spring·spring cloud
小刘|2 小时前
Spring，SpringMVC，SpringBoot,SpringCloud的区别
spring boot·spring·spring cloud
为美好的生活献上中指3 小时前
java每日精进 5.07【框架之数据权限】
java·开发语言·mysql·spring·spring cloud·数据权限
一刀到底2114 小时前
spring ai alibaba 使用 SystemPromptTemplate 很方便的集成 系统提示词
spring·ai alibaba
lyrhhhhhhhh4 小时前
Spring框架（1）
java·后端·spring
喝养乐多长不高6 小时前
Spring Web MVC基础理论和使用
java·前端·后端·spring·mvc·springmvc
magic 2457 小时前
第2章——springboot核心机制
java·spring boot·spring
二十雨辰8 小时前
[Spring]-认识Spring
java·数据库·spring
曹朋羽11 小时前
Spring Cloud LoadBalancer （负载均衡）
spring·spring cloud·微服务·负载均衡
hello_ejb312 小时前
聊聊Spring AI autoconfigure模块的拆分
java·人工智能·spring
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05苍穹外卖面试总结06西电B测-计算机网络综合实验(含验收问题)07Coze扣子平台完整体验和实践（附国内和国际版对比）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09DeepSeek各版本说明与优缺点分析10YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU