WEB构建简易图书管理系统

1. 首先需要搭建好 Java 开发环境和 MySQL 数据库，建议使用最新版本。
2. 使用 Spring Initializr 创建一个基础的 Spring Boot 项目，添加必要的依赖，如 Spring Web、Spring Data JPA、MySQL 驱动等。使用 Maven 或 Gradle 进行项目构建。
3. 定义图书数据模型。在 Spring Boot 项目中创建一个实体类来对应数据库中的表。例如：

 

@Entity
@Table(name = "book")
public class Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(nullable = false, unique = true)
    private String isbn;
    
    @Column(nullable = false)
    private String name;
    
    @Column(nullable = false)
    private String author;
    
    @Column(nullable = false)
    private String publisher;
    
    @Column(nullable = false)
    private Integer price;

    // getter 和 setter 略
}

在本例中，我们将 Book 实体类映射到 book 表中，id 是主键，isbn 是唯一的标识符。

4.创建一个 DAO 接口。在 Spring Boot 项目中创建一个接口，进行 JPA 操作。例如：

@Repository
public interface BookRepository extends JpaRepository<Book, Long> {
    Book findByIsbn(String isbn);
}

 

 

在本例中，我们使用了 Spring Data JPA 提供的 JpaRepository 接口，并定义了 findByIsbn 方法。

5.创建 RESTful API 接口。在 Spring Boot 项目中创建一个控制器，实现增删改查等操作。例如：

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

    @Autowired
    private BookRepository bookRepository;

    @PostMapping("")
    public Book addBook(@RequestBody Book book) {
        return bookRepository.save(book);
    }

    @DeleteMapping("/{id}")
    public void deleteBook(@PathVariable Long id) {
        bookRepository.deleteById(id);
    }

    @PutMapping("/{id}")
    public Book updateBook(@PathVariable Long id, @RequestBody Book book) {
        book.setId(id);
        return bookRepository.save(book);
    }

    @GetMapping("")
    public List<Book> getAllBooks() {
        return bookRepository.findAll();
    }

    @GetMapping("/{id}")
    public Book getBookById(@PathVariable Long id) {
        return bookRepository.findById(id).orElse(null);
    }

    @GetMapping("/search")
    public Book getBookByIsbn(@RequestParam String isbn) {
        return bookRepository.findByIsbn(isbn);
    }
}

 

在本例中，我们使用了 Spring Boot 提供的注解来定义一个 RESTful 风格的控制器，使用 @RequestMapping 注解指定 URL 映射。使用 HTTP 请求方法来区分不同的操作，例如 POST 请求用于添加图书，DELETE 请求用于删除图书等。

6.创建前端页面。使用 Vue.js 框架编写前端页面和交互逻辑，通过 AJAX 调用 RESTful API 接口，实现与后端数据的交互。可以使用 HTML、CSS 和 JavaScript 来编写简单页面，复杂页面可以使用 Vue.js 组件化的思想来分解页面，并使用 Axios 库调用 RESTful API 接口。例如：

<template>
  <div>
    <h2>{{ title }}</h2>
    <form>
      <label for="isbn">ISBN:</label>
      <input type="text" v-model.lazy="newBook.isbn" required>
      <label for="name">书名:</label>
      <input type="text" v-model.lazy="newBook.name" required>
      <label for="author">作者:</label>
      <input type="text" v-model.lazy="newBook.author" required>
      <label for="publisher">出版社:</label>
      <input type="text" v-model.lazy="newBook.publisher" required>
      <label for="price">价格:</label>
      <input type="number" v-model.lazy.number="newBook.price" required>
      <button type="submit" @click.prevent="addBook">添加</button>
    </form>
    <table>
      <thead>
        <tr>
          <th>ISBN</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(book, index) in books" :key="book.id">
          <td>{{ book.isbn }}</td>
          <td>{{ book.name }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.publisher }}</td>
          <td>{{ book.price }}</td>
          <td>
            <button @click="editBook(index)">编辑</button>
            <button @click="deleteBook(book.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="modal-container" v-show="showModal">
      <div class="modal">
        <h3>编辑图书信息</h3>
        <form>
          <label for="isbn">ISBN:</label>
          <input type="text" v-model.lazy="currentBook.isbn" required>
          <label for="name">书名:</label>
          <input type="text" v-model.lazy="currentBook.name" required>
          <label for="author">作者:</label>
          <input type="text" v-model.lazy="currentBook.author" required>
          <label for="publisher">出版社:</label>
          <input type="text" v-model.lazy="currentBook.publisher" required>
          <label for="price">价格:</label>
          <input type="number" v-model.lazy.number="currentBook.price" required>
          <button type="submit" @click.prevent="updateBook">更新</button>
          <button type="button" @click="closeModal">取消</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "BookManagementSystem",
  data() {
    return {
      title: "图书管理系统",
      newBook: {},
      currentBook: {},
      books: [],
      showModal: false
    };
  },
  mounted() {
    this.loadBooks();
  },
  methods: {
    loadBooks() {
      axios.get("/api/book").then(response => {
        this.books = response.data;
      });
    },
    addBook() {
      axios.post("/api/book", this.newBook).then(() => {
        this.loadBooks();
        this.newBook = {};
      });
    },
    deleteBook(id) {
      axios.delete(`/api/book/${id}`).then(() => {
        this.loadBooks();
      });
    },
    editBook(index) {
      this.currentBook = Object.assign({}, this.books[index]);
      this.showModal = true;
    },
    updateBook() {
      axios.put(`/api/book/${this.currentBook.id}`, this.currentBook).then(() => {
        this.loadBooks();
        this.closeModal();
      });
    },
    closeModal() {
      this.showModal = false;
      this.currentBook = {};
    }
  }
};
</script>

在本例中，我们使用了 Vue.js 的数据绑定和事件处理机制，通过 Axios 库来调用 RESTful API 接口。页面中包含一个 Add Book 按钮，点击之后会弹出一个表单，添加图书信息。另外，每一行图书信息后面有 Edit 和 Delete 按钮，支持编辑和删除图书操作。

7.启动项目并测试。在命令行中使用 mvn spring-boot:run 或 gradle bootRun 命令启动项目，然后在浏览器中访问 http://localhost:8080 即可看到前端页面。通过前端页面可以完成添加、编辑、删除和查询图书等操作。

这是一个非常基础的图书管理系统示例，实际开发中还需要考虑许多问题，如权限管理、数据校验、性能优化等。但是通过这个例子，你应该可以对使用 Spring Boot、Vue.js 和 MySQL 来构建 Web 应用有一个初步的了解了。