针对上面的图书管理系统，写一个详细的系统包括数据库的设计和前后端代码

好的，以下是详细的图书管理系统的设计和实现。本系统采用Java后端和MySQL数据库，前端采用HTML/CSS/JavaScript和Bootstrap框架实现。

1. 数据库设计

本系统采用MySQL数据库，共设计4张表。

- 图书表（book）：存储图书信息

| 字段名 | 类型 | 说明 |
| ------ | -------- | -------- |
| id | int(11) | 图书ID |
| title | varchar | 书名 |
| author | varchar | 作者 |
| price | float(2) | 价格 |
| stock | int(11) | 库存数量 |

- 读者表（reader）：存储读者信息

| 字段名 | 类型 | 说明 |
| --------- | ------- | -------- |
| id | int(11) | 读者ID |
| name | varchar | 姓名 |
| password | varchar | 密码 |
| phone | varchar | 电话号码 |
| email | varchar | 邮箱 |
| borrowNum | int(11) | 借阅数量 |

- 借阅记录表（borrow）：存储读者借阅记录

| 字段名 | 类型 | 说明 |
| -------- | ------- | -------------- |
| id | int(11) | 借阅记录ID |
| bookId | int(11) | 借阅图书ID |
| readerId | int(11) | 借阅读者ID |
| borrowAt | date | 借阅日期 |
| returnAt | date | 归还日期（可空） |

- 管理员表（admin）：存储管理员信息

| 字段名 | 类型 | 说明 |
| -------- | ------- | -------- |
| id | int(11) | 管理员ID |
| username | varchar | 用户名 |
| password | varchar | 密码 |

2. 后端代码实现

后端采用Spring MVC框架和MyBatis ORM框架实现，以下是关键代码。

- 控制器层（controller）

控制器层主要负责接收处理请求，并返回相应的视图。以下是部分代码。

  @RequestMapping(value="/borrow")
  public String borrow(@RequestParam("bookId") int bookId, HttpSession session){
      User user = (User)session.getAttribute("user");
      Borrow borrow = new Borrow();
      borrow.setBookId(bookId);
      borrow.setUserId(user.getId());
      borrowService.addBorrow(borrow);
      bookService.updateStock(bookId, -1);
      return "redirect:/index.jsp";
  }

  @RequestMapping(value="/return")
  public String returnBook(@RequestParam("borrowId") int borrowId){
      Borrow borrow = borrowService.getBorrowById(borrowId);
      borrowService.returnBook(borrow);
      bookService.updateStock(borrow.getBookId(), 1);
      return "redirect:/index.jsp";
  }

  @RequestMapping(value="/manage")
  public String manage(Model model){
      List<Book> books = bookService.getAllBooks();
      model.addAttribute("books", books);
      return "manage";
  }

- 服务层（service）

服务层主要负责业务逻辑的处理，以下是部分代码。

  public void addBorrow(Borrow borrow){
      borrowMapper.addBorrow(borrow);
  }

  public void returnBook(Borrow borrow){
      borrowMapper.returnBook(borrow);
  }

  public Borrow getBorrowById(int id){
      return borrowMapper.getBorrowById(id);
  }

- 数据访问层（dao）

数据访问层主要负责与数据库进行交互，以下是部分代码。

  public void addBorrow(Borrow borrow){
      borrowMapper.addBorrow(borrow);
  }

  public void returnBook(Borrow borrow){
      borrowMapper.returnBook(borrow);
  }

  public Borrow getBorrowById(int id){
      return borrowMapper.getBorrowById(id);
  }

3. 前端代码实现

前端采用HTML/CSS/JavaScript和Bootstrap框架实现，以下是关键代码。

- 登录页面（login.jsp）

  <form class="form-signin" method="post" action="${pageContext.request.contextPath}/login">
      <h2 class="form-signin-heading">图书管理系统</h2>
      <input type="text" name="username" class="form-control" placeholder="用户名" required autofocus>
      <input type="password" name="password" class="form-control" placeholder="密码" required>
      <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
  </form>

- 借阅页面（borrow.jsp）

  <div class="row">
      <div class="col-md-6 col-md-offset-3">
          <table class="table table-striped">
              <thead>
                  <tr>
                      <th>书名</th>
                      <th>作者</th>
                      <th>价格</th>
                      <th>库存</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody>
                  <c:forEach var="book" items="${books}">
                      <tr>
                          <td>${book.title}</td>
                          <td>${book.author}</td>
                          <td>${book.price}</td>
                          <td>${book.stock}</td>
                          <td>
                              <button type="button" class="btn btn-success" 
                              onclick="location.href='${pageContext.request.contextPath}/borrow?bookId=${book.id}'">
                              借阅</button>
                          </td>
                      </tr>
                  </c:forEach>
              </tbody>
          </table>
      </div>
  </div>

- 归还页面（return.jsp）

  <div class="row">
      <div class="col-md-6 col-md-offset-3">
          <table class="table table-striped">
              <thead>
                  <tr>
                      <th>书名</th>
                      <th>作者</th>
                      <th>价格</th>
                      <th>借阅日期</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody>
                  <c:forEach var="borrow" items="${borrows}">
                      <tr>
                          <td>${borrow.book.title}</td>
                          <td>${borrow.book.author}</td>
                          <td>${borrow.book.price}</td>
                          <td>${borrow.borrowAt}</td>
                          <td>
                              <button type="button" class="btn btn-success" 
                              onclick="location.href='${pageContext.request.contextPath}/return?borrowId=${borrow.id}'">
                              归还</button>
                          </td>
                      </tr>
                  </c:forEach>
              </tbody>
          </table>
      </div>
  </div>

- 管理页面（manage.jsp）

  <div class="row">
      <div class="col-md-10 col-md-offset-1">
          <table class="table table-striped">
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>书名</th>
                      <th>作者</th>
                      <th>价格</th>
                      <th>库存</th>
                  </tr>
              </thead>
              <tbody>
                  <c:forEach var="book" items="${books}">
                      <tr>
                          <td>${book.id}</td>
                          <td>${book.title}</td>
                          <td>${book.author}</td>
                          <td>${book.price}</td>
                          <td>${book.stock}</td>
                      </tr>
                  </c:forEach>
              </tbody>
          </table>
      </div>
  </div>

以上是详细的图书管理系统的设计和实现，希望对你有帮助。