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.更容易用新的实现替换原有的层次的实现

希望能对大家有所帮助！

相关推荐
好教员好3 小时前
【Spring】整合【SpringMVC】
java·spring
浪九天4 小时前
Java直通车系列13【Spring MVC】（Spring MVC常用注解）
java·后端·spring
小斌的Debug日记5 小时前
框架基本知识总结 Day16
redis·spring
m0_748246875 小时前
maven导入spring框架
数据库·spring·maven
A boy CDEF girl7 小时前
【JavaEE】定时器
java·java-ee
A boy CDEF girl8 小时前
【JavaEE】线程池
java·java-ee
Joeysoda8 小时前
JavaEE进阶(2) Spring Web MVC: Session 和 Cookie
java·前端·网络·spring·java-ee
曹二74710 小时前
Spring-事务
数据库·spring·oracle
时雨h10 小时前
芋道源码 —— Spring Boot 缓存 Cache 入门
java·后端·spring
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04苍穹外卖面试总结05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06本地部署DeepSeek教程（Mac版本）07Coze扣子平台完整体验和实践（附国内和国际版对比）08Windows 11 安装 Dify 完整指南 非docker环境09保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型10macOS 上部署 RAGFlow