用Spring boot+mysql+vue实现图书管理系统

好的，下面是一个简单的图书管理系统的实现：

1. 数据库设计

首先，我们需要设计数据库。这个系统只需要一个表格，用于存储图书信息。

CREATE TABLE `book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `isbn` varchar(20) NOT NULL,
  `name` varchar(50) NOT NULL,
  `author` varchar(50) NOT NULL,
  `price` double NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2. 后端实现

接下来，我们使用 Spring Boot 来实现后端。首先，我们需要添加对 MySQL 的依赖。

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

然后，我们需要创建一个 Book 类，用于表示图书信息。

public class Book {
    private int id;
    private String isbn;
    private String name;
    private String author;
    private double price;

    // getter and setter methods
}

接着，我们需要创建一个 BookRepository 接口，用于操作数据库。

public interface BookRepository extends JpaRepository<Book, Integer> {
}

最后，我们需要创建一个 BookController 类，用于处理 HTTP 请求。

@RestController
@RequestMapping("/api")
public class BookController {
    @Autowired
    private BookRepository bookRepository;

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

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

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

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

3. 前端实现

最后，我们使用 Vue 来实现前端。首先，我们需要安装 Vue 和 axios。

npm install vue axios --save

然后，我们需要创建一个 Book 类，用于表示图书信息。

export default class Book {
  constructor(id, isbn, name, author, price) {
    this.id = id;
    this.isbn = isbn;
    this.name = name;
    this.author = author;
    this.price = price;
  }
}

接着，我们需要创建一个 BookService 类，用于发送 HTTP 请求。

import axios from 'axios';

const API_URL = '/api/books';

class BookService {
  getAllBooks() {
    return axios.get(API_URL);
  }

  addBook(book) {
    return axios.post(API_URL, book);
  }

  updateBook(id, book) {
    return axios.put(`${API_URL}/${id}`, book);
  }

  deleteBook(id) {
    return axios.delete(`${API_URL}/${id}`);
  }
}

export default new BookService();

最后，我们需要创建一个 BookList 组件，用于显示图书列表。

<template>
  <div>
    <div v-for="book in books" :key="book.id">
      <span>{{ book.id }}</span>
      <span>{{ book.isbn }}</span>
      <span>{{ book.name }}</span>
      <span>{{ book.author }}</span>
      <span>{{ book.price }}</span>
      <button @click="editBook(book)">Edit</button>
      <button @click="deleteBook(book)">Delete</button>
    </div>
    <button @click="addBook()">Add</button>
  </div>
</template>

<script>
import Book from '../models/Book';
import BookService from '../services/BookService';

export default {
  name: 'BookList',
  data() {
    return {
      books: [],
    };
  },
  created() {
    BookService.getAllBooks().then((response) => {
      this.books = response.data.map((book) => new Book(
        book.id,
        book.isbn,
        book.name,
        book.author,
        book.price,
      ));
    });
  },
  methods: {
    addBook() {
      const book = new Book(null, '', '', '', 0);
      this.editBook(book);
    },
    editBook(book) {
      this.$router.push({
        name: 'BookForm',
        params: { id: book.id },
        query: { isbn: book.isbn, name: book.name, author: book.author, price: book.price },
      });
    },
    deleteBook(book) {
      BookService.deleteBook(book.id).then(() => {
        const index = this.books.indexOf(book);
        this.books.splice(index, 1);
      });
    },
  },
};
</script>

这样，一个简单的图书管理系统就完成了。用户可以通过 BookList 组件来查看、添加、编辑、删除图书信息。