简单使用SpringMVC写一个图书管理系统的登入功能和图书展示功能

最新推荐文章于 2024-11-12 21:14:07 发布

冷瞳

最新推荐文章于 2024-11-12 21:14:07 发布

阅读量578

点赞数 5

文章标签：状态模式 java spring maven

本文链接：https://blog.csdn.net/2202_76092586/article/details/140639538

版权

准备好前端的代码

这里已经准备好了前端的代码，这里仅仅简单的介绍登入功能，和展示图书列表的功能。

如图：

如上图所示，这里的前端代码还是比较多的，在这里我介绍，login.html还有book_list.html这两个。

login.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({
            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);
                }
            }
        });
        // location.href = "book_list.html";
    }
</script>
</body>

</html>

上述代码的核心在这一块，如图：

这里的代码是和后端做交互的，后端的url为/user/login ，请求的类型为post请求，然后传递数据，后端再返回结果，如果登入成功就跳转到，“book_list.html”的界面，展示图书。

book_list.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> -->


        </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){
                    if(books==null){
                        return;
                    }
                    var finalHtml = "";
                    for(var book of books){
                        //拼接HTML
                        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.publishName+'</td>';
                        finalHtml +='<td>'+book.stateCN+'</td>';
                        finalHtml +='<td>';
                        finalHtml +='<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>';
                        finalHtml +='</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>

上述代码，不做介绍了，我是主要写后端的代码的，关于这篇文章，仅仅展示图书即可，没涉及到增删改查。

后端代码

第一步：我们就先准备好图书的实体类

如代码：

package com.bite.springbook.model;

import lombok.Data;

import java.math.BigDecimal;
@Data
public class BookInfo {
    private Integer bookId;
    private String bookName;
    private String author;
    private Integer num;
    private BigDecimal price;
    private String publishName;
    private Integer state; //1- 可借阅   2- 不可借阅
    private String stateCN;
}

这里我们需要学习，@Data这个注解的作用，这个注解是lombok这个工具里面的，这里他会自动封装好get和set方法，还会重写toStirng方法。

以上就是实体的属性。

第二步：这里我们先写登入功能

如代码：

package com.bite.springbook.controller;

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 String login(String userName , String password , HttpSession session){
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
            return "用户不能为空";
        }
        if(!"zhangsan".equals(userName) || !"123456".equals(password)){
            return "用户或密码错误";
        }
        session.setAttribute("username" , userName);
        return "";
    }
}

如上述所述，这里我们用StringUntils的haslength方法，判断输入是否为空，这样可以节约代码量，然后判断用户是否输入错误，其次存储session信息，最后返回结果，和前端校验。

登入代码这些就结束了。

第三步：书写图书的展示功能

1）controller层

如代码：

package com.bite.springbook.controller;


import com.bite.springbook.model.BookInfo;
import com.bite.springbook.Service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequestMapping("/book")
@RestController
public class BookController {

    @Autowired
    private BookService bookService;

    @RequestMapping("/getList")
    public List<BookInfo> getList(){
        List<BookInfo> bookInfos = bookService.getList();
        return bookInfos;
    }


}

这里我们主要是和前端响应数据用的，controller层调用service层，service层是用于处理业务数据的，这里我们用到了，依赖注入的属性注入来获取service层的对象，如代码中的@Autowired注解。

2）service层

如代码：

package com.bite.springbook.Service;

import com.bite.springbook.dao.BookDao;
import com.bite.springbook.model.BookInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BookService {
    @Autowired
    private BookDao bookDao;
    public List<BookInfo> getList(){
        List<BookInfo> bookInfos = bookDao.mockData();
        for(BookInfo bookInfo : bookInfos){
            if (bookInfo.getState()==1){
                bookInfo.setStateCN("可借阅");
            }else {
                bookInfo.setStateCN("不可借阅");
            }
        }
        return bookInfos;
    }
}

如图这里通过调用dao层的数据，来进行处理，也用到了对属性注入依赖，在这里我们用到了@Service注解，为了把对象交给Spring管理，通过依赖注入就可以取到对象。

3）dao层

如代码：

package com.bite.springbook.dao;

import com.bite.springbook.model.BookInfo;
import org.springframework.stereotype.Repository;

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

@Repository
public class BookDao {
    public List<BookInfo> mockData() {
        List<BookInfo> bookInfos = new ArrayList<>();
        for (int i = 0; i < 15; i++) {
            BookInfo bookInfo = new BookInfo();
            bookInfo.setBookId(i);
            bookInfo.setBookName("图书"+i);
            bookInfo.setAuthor("作者"+i);
            bookInfo.setNum(15*i+1);
            bookInfo.setPrice(new BigDecimal(22*i+5-0.5*i));
            bookInfo.setPublishName("出版社"+i);
            bookInfo.setState(i%5==0?2:1);
            bookInfos.add(bookInfo);
        }
        return bookInfos;
    }
}

如图上述是自动生成的数据，到后面我会运用mybatis写一个完整的图书系统。这里的@Repository注解和service层的@Service作用一样。

如图运行结果：