SpringBoot实现简单的图书增删查改

推开别再拥抱

已于 2022-09-06 17:16:26 修改

阅读量871

点赞数 3

文章标签： java 学习

于 2022-09-02 14:27:32 首次发布

本文链接：https://blog.csdn.net/AKALI822/article/details/126659144

版权

Java学习记录，仅供参考

使用到的技术如下

前端：HTML,JavaScript,CSS,JQuery,AJAX
后端：SpringBoot

后端，首先在IDEA中建立一个Springboot项目，新建一个Book实体类

package com.test.bookmanage.Entity;

public class Book {

    private Integer id;
   
    private String name;
    
    private String author;
    
    public void setId(Integer id) {
        this.id = id;
    }
    
    public Integer getId() {
        return id;
    }
    
    public void setName(String name) {
        this.name = name;
    }
    
    public String getName() {
        return name;
    }
    
    public void setAuthor(String author) {
        this.author = author;
    }
    
    public String getAuthor() {
        return author;
    }
    
    @Override
    public String toString() {
        return "Book{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", author='" + author + '\'' +
                '}';
    }
}

创建BookService层，用于编写业务逻辑

import com.test.bookmanage.Entity.Book;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;

@Service
public class BookService {
    @Resource
    JdbcTemplate jdbcTemplate;   //使用JdbcTemplate实现对数据库增删查改

    //图书列表
    public List<Map<String, Object>> bookList() {
        String sql = "select * from book1";
        List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);
        return list;
    }

    //增
    public void create(Book book) {
        String sql = "insert into book1(name,author) values('" + book.getName() + "','" + book.getAuthor() + "')";
        jdbcTemplate.update(sql);
    }

    //删
    public void deleteById(int id) {
        String sql = "delete from book1 where id=?";
        this.jdbcTemplate.update(sql, id);
    }

    //查
    public Map<String, Object> queryById(int id) {
        try {                                              //捕获查询id在数据库中不存在时map对象为空的异常
            String sql = "select * from book1 where id =?";
            Map<String, Object> map = jdbcTemplate.queryForMap(sql, id);
            return map;
        } catch (Exception e) {
            return null;
        }
    }

    //改
    public void update(Book book) {
        this.jdbcTemplate.update("update book1 set name='" + book.getName() + "',author='" + book.getAuthor() + "' where id=" + book.getId() + "");
    }


}

创建BookController层，用于调用BookService方法，并与前端连接

package com.test.bookmanage.controller;

import com.test.bookmanage.Entity.Book;
import com.test.bookmanage.service.BookService;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;

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

    @Resource
    private BookService bookService;

    //图书列表
    @GetMapping("/list")
    public List<Map<String, Object>> list() {
        return bookService.bookList();
    }

    //增
    @PostMapping("/create")
    public String createBook(@RequestBody Book book) {
        bookService.create(book);
        return "create success";
    }

    //删
    @DeleteMapping("/delete/{id}")
    public String deleteBook(@PathVariable int id) {
        bookService.deleteById(id);
        return "delete success";
    }

    //查
    @GetMapping("/query/{id}")
    public Map<String, Object> queryBook(@PathVariable int id) {
        return bookService.queryById(id);
    }

    //改
    @PostMapping("/update")
    public String updateBook(@RequestBody Book book) {
        bookService.update(book);
        return "update success";
    }
}

前端，在资源模板下新建一个index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <style>
        body {
            background-color: #D9DADF;
            color: black;
        }

        table {
            text-align: center;
        }
    </style>
</head>
<body>
<h1 align="center">图书管理</h1>
<div id="div1">
    <form id="form" align="center">
        <p id="p">查询图书：<input type="text" id="id" placeholder="请输入图书编号">
            <input type="button" value="提交" id="queryBook">
        </p>
    </form>
</div>
<div id="div2">
    <form align="center">
        <p>添加图书：<input type="text" id="name" placeholder="请输入书名">
            <input type="text" id="author" placeholder="请输入作者">
            <input type="button" value="添加" id="createBook">
        </p>
    </form>
</div>
<div id="div3">
    <form align="center">
        <p>修改图书：<input type="text" id="name2" placeholder="请输入书名">
            <input type="text" id="author2" placeholder="请输入作者">
            <input type="button" value="确定" id="updateBook">
        </p>
    </form>
</div>
<div id="div4">
    <table id="table" border="2" width="30%" cellspacing="0" align="center">
        <tr>
            <th>编号</th>
            <th>图书名称</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
    </table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

    //图书列表界面
    $.get("http://localhost:8082/book/list", function (data) {
        console.log(data)
        for (var i = 0; i < data.length; i++) {
            $("table").append(
                "<tr class='trtd'><td>" + data[i].id +
                "</td><td>" + data[i].name +
                "</td><td>" + data[i].author +
                "</td><td>" + "<a href='#' onclick='UpdateBook(this)'>修改</a>|<a href='#' onclick=DeleteBook(this)>删除</a></td></tr>"
            )
        }
    });

    //增加图书
    $("#createBook").click(function () {
        var Book = {
            "name": $("#name").val(),
            "author": $("#author").val()
        }
        console.log(Book)
        //判断输入的值是否为空或者空字符串
        if ($("#name").val() == null || $("#name").val() === "" && $("#author").val() == null || $("#author").val() === "") {
            alert("书名和作者不能为空")
        } else {
            $.ajax({
                type: "POST",
                url: "/book/create",
                data: JSON.stringify(Book),         //将JavaScript对象转换为字符串
                contentType: "application/json",    //发送给服务器的数据格式
                success: function (data) {
                    console.log(data);
                    location.reload();            //location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。reload()方法用于刷新当前文档。
                }
            })
        }
    });

    //删除图书
    function DeleteBook(BookID) {
        var id = $(BookID).parent().parent().children(":first").text();
        console.log(id);
        $.ajax({
                type: "DELETE",
                url: "/book/delete/" + id,
                success: function (data) {
                    console.log(data);
                    location.reload();
                }
            }
        )
    }

    //查询图书
    $("#queryBook").click(function () {
        var id = $("#id").val()
        console.log(id);
        $.get("/book/query/" + id, function (data) {
                console.log(data);
                $("tr").remove(".trtd");              //清空图书列表，查询图书时只展示对应查询记录
                if (data === '') {
                    alert("对应编号的图书不存在！");
                } else {
                    $("#table").append(
                        "<tr><td>" + data.id +
                        "</td><td>" + data.name +
                        "</td><td>" + data.author +
                        "</td><td>" + "<a href='#'  onclick='UpdateBook(this)'>修改</a>|<a href='#' onclick='DeleteBook(this)'>删除</a></td></tr>")
                }
            }
        )
    });

    //修改图书
    function UpdateBook(BookID) {
        var id = $(BookID).parent().parent().children(":first").text();
        var name = $(BookID).parent().parent().children(":first").next().text();
        var author = $(BookID).parent().parent().children(":first").next().next().text();

        $('#name2').val(name);
        $('#author2').val(author);
        console.log(name + " " + author);

        $("#updateBook").click(function () {
            var updateBook = {
                "id": id,
                "name": $("#name2").val(),
                "author": $("#author2").val()
            }
            if ($("#name2").val() == null || $("#name2").val() === "" && $("#author2").val() == null || $("#author2").val() === "") {
                alert("书名和作者不能为空")
            } else {
                $.ajax({
                    type: 'POST',
                    url: "/book/update",
                    data: JSON.stringify(updateBook),
                    contentType: 'application/json',
                    success: function (data) {
                        console.log(data);
                        location.reload();
                    }
                })
            }
        })
    }

</script>
</body>
</html>