返回

jQuery EasyUI读书管理系统构建指南

前端

书籍管理系统：使用 Java EE 技术构建一个功能齐全的应用程序

简介

对于任何图书馆或书店来说，一个高效且用户友好的书籍管理系统都是必不可少的。使用 Java EE 技术，可以构建一个功能强大的应用程序，满足所有书籍管理需求，包括添加、编辑和删除书籍，以及管理书籍类别。本教程将逐步指导您完成创建一个这样的系统。

准备工作

在开始构建系统之前，需要准备以下内容：

  • Java 开发环境（JDK）
  • 集成开发环境（IDE），例如 Eclipse 或 IntelliJ IDEA
  • 数据库管理系统（DBMS），例如 MySQL 或 PostgreSQL
  • Web 容器，例如 Apache Tomcat

数据库设计

系统需要两个表：books 表和 categories 表。

books 表：

字段 数据类型 约束 注释
id int 主键 书籍 ID
title varchar(255) 非空 书籍标题
author varchar(255) 可空 书籍作者
category_id int 外键 书籍类别 ID
price decimal(10, 2) 可空 书籍价格
stock int 可空 书籍库存
description text 可空 书籍

categories 表：

字段 数据类型 约束 注释
id int 主键 类别 ID
name varchar(255) 非空 类别名称

页面设计

系统需要两个页面：

  • bookList.jsp ：用于显示书籍列表和提供添加、编辑和删除书籍的选项。
  • bookList.js ：包含实现上述功能的 JavaScript 代码。

bookList.jsp：

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bookList.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>书籍管理</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="bookList" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>标题</th>
                                <th>作者</th>
                                <th>类别</th>
                                <th>价格</th>
                                <th>库存</th>
                                <th></th>
                                <th colspan="3">操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

bookList.js：

$(document).ready(function() {
    $('#bookList').DataTable({
        "ajax": "bookList.do",
        "columns": [
            { "data": "id" },
            { "data": "title" },
            { "data": "author" },
            { "data": "category.name" },
            { "data": "price" },
            { "data": "stock" },
            { "data": "description" },
            {
                "data": null,
                "defaultContent": "<button class='btn btn-primary' onclick='editBook(this)'>编辑</button>"
            },
            {
                "data": null,
                "defaultContent": "<button class='btn btn-danger' onclick='deleteBook(this)'>删除</button>"
            }
        ]
    });
});

function addBook() {
    $.ajax({
        url: "addBook.do",
        type: "POST",
        data: $('#addBookForm').serialize(),
        success: function(result) {
            if (result.success) {
                window.location.reload();
            } else {
                alert(result.msg);
            }
        }
    });
}

function editBook(btn) {
    var row = $(btn).closest('tr');
    var id = row.find('td:first-child').text();
    $.ajax({
        url: "editBook.do",
        type: "GET",
        data: { id: id },
        success: function(result) {
            if (result.success) {
                var book = result.data;
                $('#editBookForm #id').val(book.id);
                $('#editBookForm #title').val(book.title);
                $('#editBookForm #author').val(book.author);
                $('#editBookForm #categoryId').val(book.category.id);
                $('#editBookForm #price').val(book.price);
                $('#editBookForm #stock').val(book.stock);
                $('#editBookForm #description').val(book.description);
                $('#editBookModal').modal('show');
            } else {
                alert(result.msg);
            }
        }
    });
}

function deleteBook(btn) {
    var row = $(btn).closest('tr');
    var id = row.find('td:first-child').text();
    $.ajax({
        url: "deleteBook.do",
        type: "POST",
        data: { id: id },
        success: function(result) {
            if (result.success) {
                window.location.reload();
            } else {
                alert(result.msg);
            }
        }
    });
}

代码示例

以下代码示例演示了如何使用 Java EE 技术实现上述功能：

BookService.java：

import java.util.List;

public interface BookService {

    List<Book> findAll();

    Book findById(Long id);

    void save(Book book);

    void delete(Long id);
}

BookServiceImpl.java：

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookRepository bookRepository;

    @Override
    public List<Book> findAll() {
        return bookRepository.findAll();
    }

    @Override
    public Book findById(Long id) {
        return bookRepository.findById(id).orElse(null);
    }

    @Override
    public void save(Book book) {
        bookRepository.save(book);
    }

    @Override
    public void delete(Long id) {
        bookRepository.deleteById(id);
    }
}

BookController.java：

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class BookController {

    @Autowired
    private BookService bookService;

    @GetMapping("/books")
    public String showBooks(Model model) {
        List<Book> books = bookService.findAll();
        model.addAttribute("books", books);
        return "books";
    }

    @GetMapping("/books/new")
    public String showNewBookForm(Model model) {
        Book book = new Book();
        model.addAttribute("book", book);
        return "book-form";
    }

    @PostMapping("/books")
    public String saveBook(@ModelAttribute("book") Book book) {
        bookService.save(book);
        return "redirect:/books";
    }

    @GetMapping("/books/{id}/edit")
    public String showEditBookForm(@PathVariable("id") Long id, Model model) {
        Book book = bookService.findById(id);
        model.addAttribute("book", book);
        return "book-form";
    }

    @PostMapping("/books/{id}")
    public String updateBook(@PathVariable("id") Long id, @ModelAttribute("book") Book book) {
        Book existingBook = bookService.findById(id);
        existingBook.setTitle(book.getTitle());
        existingBook.setAuthor(book.getAuthor