后端代码练习4——图书管理系统-CSDN博客

本文链接：https://blog.csdn.net/2202_76101487/article/details/141223402

1.需求

1、登录：用户输入完账号密码，完成登录功能；

2、列表：展示图书

登录页面如下：

图书列表页面如下：

创建一个spring boot项目，添加合适的依赖；

2. 约定前后端交互接口

2.1需求分析

图书管理系统是一个相对较大的案例，我们先实现这两种功能：用户登录、图书列表展示，即上面需求那的两张图。

根据需求得到，后端需要两个接口：

1、账号密码校验接口：根据输入用户名和密码校验登录是否通过。

2、图书列表：提供图书列表信息。

2.2 接口定义

1、登录接口
URL：/user/login

请求参数：userName，password

返回结果（响应）：成功 / 失败（String类型，成功返回：" " （空字符串）；失败返回失败原因）

2、图书列表接口
URL：/book/getBookList

请求参数：无

返回结果（响应）：图书列表（ [{}, {}, {}, .....] ）

图书列表的字段说明：

根据上图列表说明，我们来创建书对象的的属性和方法：

3. 服务器代码

3.1创建图书类

代码如下：

package com.example.zxslzw2014_8_11;

import lombok.Data;

import java.math.BigDecimal;

@Data
public class BookInfo {
    private Integer id;
    private String bookName;
    private String author;
    private Integer num;
    private BigDecimal price;
    private String publishName;
    private Integer status;//1-可借阅   2-不可借阅
    private String statusCN;//状态的中文含义
}

3.2 创建UserController类

创建一个UserController类，实现登录验证接口，代码如下：

package com.example.zxslzw2014_8_11;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

@RestController
@RequestMapping("/user")
public class UserController {
    @RequestMapping("/login")
    public String login(String userName, String password, HttpSession session) {
        //1、校验参数
        //2、校验密码是否正确
        //3、返回响应结果
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return "用户名或者密码为空";
        }
        if(!"admin".equals(userName) || !"admin".equals(password)) {
            return "账号或密码错误";
        }
        session.setAttribute("userName", userName);
        return "登录成功";
    }
}

3.3 创建BookController类

创建一个BookController类，实现获取图书列表接口，代码如下：

package com.example.zxslzw2014_8_11;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/book")
public class BookController {
    List<BookInfo> bookInfos = new ArrayList<>();
    @RequestMapping("/getBookList")
    public List<BookInfo> getBookList() {
        for (int i = 1; i < 15; i++) {
            BookInfo bookInfo = new BookInfo();
            bookInfo.setId(i);
            bookInfo.setBookName("图书" + i);
            bookInfo.setAuthor("作者" + i);
            bookInfo.setNum(i * 2 + 1);
            bookInfo.setPrice(new BigDecimal(i * 3));
            bookInfo.setPublishName("出版社" + i);
            if(i % 5 == 0) {
                bookInfo.setStatus(2);
                bookInfo.setStatusCN("不可借阅");
            } else {
                bookInfo.setStatus(1);
                bookInfo.setStatusCN("可借阅");
            }
            bookInfos.add(bookInfo);
        }
        return bookInfos;
    }
}

注意：

1、这里的数据采用mock的方式，实际数据应该从数据库中拿，但这里直接放在内存了，这里的数据也不是真实的数据。

2、在开发和测试过程中，由于环境不稳定或者协同开发的同事未完成等情况下，有些数据不容易构造或者不容易获取，就会创建一个虚拟的对象或者数据样本，用来辅助开发或者测试工作。这些数据简单的来说也就是假数据。

4. 调整前端页面代码

前端代码的主要编写逻辑都在前端箱后端发送的ajax请求中。

4.1 登录页面

代码如下：

<!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() {
            var userName = $("#userName").val();
            var password = $("#password").val();
            $.ajax({
                url: "/user/login",
                type: "post",
                data: {
                    userName: $("#userName").val(),
                    password: $("#password").val()
                },
                success: function(result) {
                    if(result == "") {
                    location.href = "book_list.html";
                    } else{
                        alert(result);
                    }
                }
            });
        }
    </script>
</body>
 
</html>

4.2 图书列表展示

代码如下：

<!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>
 
            </tbody>
        </table>
 
        <div class="demo">
            <ul id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
        <script>
 
            getBookList();
            function getBookList() {
                $.ajax({
                    url: "/book/getBookList",
                    type: "post",
                    success: function(books) {
                        console.log("拿到参数")
                        var finalHtml = "";
                        for(book of books) {
                            finalHtml += '<tr>';
                            finalHtml += '<td><input type="checkbox" name="selectBook" value="1" id="'+ book.id +'" class="book-select"></td>'
                            finalHtml += '<td>'+ book.id +'</td>';
                            finalHtml += '<td>'+book.bookName+'</td>';
                            finalHtml += '<td>'+ book.author +'</td>';
                            finalHtml += '<td>'+ book.num +'</td>';
                            finalHtml += '<td>'+ book.price +'</td>';
                            finalHtml += '<td>'+ book.publishName +'</td>';
                            finalHtml += '<td>'+ book.statusCN +'</td>';
                            finalHtml += '<td>';
                            finalHtml += '<div class="op">';
                            finalHtml += '<a href="book_update.html?bookId='+ book.id +'">修改</a>';
                            finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+ book.id +')">删除</a>';
                            finalHtml += '</div>';
                            finalHtml += '</td>';
                            finalHtml += '</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>

5. 运行测试

浏览器访问：http://127.0.0.1:8080/login.html，页面如下：

输入正确的账号和密码，点击登录，页面跳转到图书列表的页面：

ps：本次的内容就到这里了，如果对你有所帮助的话，就请一键三连哦！！！

本文的封面来自：bilibili苏杉杉的pv，侵权删 url：https://www.bilibili.com/video/BV1vo4y167eh/?spm_id_from=333.999.0.0&vd_source=866da5be2ef0ddd213b053523da53138
————————————————

电子签名：上嘉路