Axios,Boostrapを使って、図書管理システムを作成する

ＨＴＭＬ　ペイジ

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Bootstrap</title>
  <!-- <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  <link href="./css/index.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>


</head>
<body>
  <div class="container">
    <div class="row  d-flex   justify-content-center mt-5 ">
      <h2 class="col-sm-8">Books</h2>
      <button class="btn btn-primary btn-lg col-sm-2 " data-bs-toggle="modal" data-bs-target="#myModal">Add</button>  
    </div>
     
      <div class="row">
        <table class="table col-10 mt-3 offset-1 table-light ">
          <thead>
            <tr>
              <th>No</th>
              <th>Name</th>
              <th>Author</th>
              <th>Publisher</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody class="list">
            <tr>
              <td>1</td>
              <td>Doasdae</td>
              <td>asdasfas</td>
              <td>asdasfas</td>
              <td>
                <span class="del">Delete</span>
                <span class="edit">Edit</span>
              </td>
            </tr>
          </tbody>
      </table>
      </div>
    
    </div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h5 class="modal-title text-center w-100 " id="myModalLabel" >Add New Book</h5>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="add_form">
                    <div class="row mb-4">
                      <label for="BookName" class="col-sm-2 control-label" id = 'name'>Name</label>
                      <div class="col-sm-8">
                        <input type="text" class="form-control" id="BookName">
                      </div>
                    </div>
                    <div class="row mb-4">
                    <label for="BookAuthor" class="col-sm-2 control-label" id = 'author'>Author</label>
                    <div class="col-sm-8">
                      <input type="text" class="form-control" id="BookAuthor" >
                    </div>
                    </div>
                    <div class="row mb-4">
                        <label for="BookPublisher" class="col-sm-2 control-label" id = 'publisher'>Publisher</label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="BookPublisher" >
                        </div>
                    </div>
                </form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
				</button>
				<button type="button" class="btn btn-primary " id = 'submitBtn'>
					Submit
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./js/index.js"></script>
</html>

```

```js
const myModalEl = document.getElementById('myModal')
const myModal = new bootstrap.Modal(myModalEl); 
const myaddForm = document.getElementById('add_form')
const myList = document.querySelector('.list')
const submitBtn = document.getElementById('submitBtn')


myList.addEventListener('click',(e)=>{
  console.log(e.target)
  console.log(e.target.classList)
  if(e.target.classList.contains("del")) {
    console.log("e.target.parentNode.dataset "+e.target.parentNode.dataset)
    console.log("e.target.parentNode.dataset.id "+e.target.parentNode.dataset.id)
    console.log("e.target.dataset "+e.target.dataset)
    console.log("e.target.dataset.id "+e.target.dataset.id)
    const theId = e.target.parentNode.dataset.id


    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'DELETE'
    }).then(result=>{
      console.log("delete successful") 
      getBooks()
    }).catch(error=>{
      console.log("delete failed") 
      console.log(error)
  })   
  }
})

submitBtn.addEventListener('click', ()=>{
    console.log("submit button clicked!")
    const bookName = document.getElementById('BookName').value
    const bookAuthor = document.getElementById('BookAuthor').value
    const bookPublisher = document.getElementById('BookPublisher').value
    insertBooks(bookName,bookAuthor,bookPublisher)
})



function insertBooks(name, author,publisher,...others) {
  console.log("TEST name "+name)
  console.log("TEST author "+author)
  console.log("TEST publisher "+publisher)
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method:'POST',
    data:{
        "bookname": name,
        "author": author,
        "publisher": publisher,
        "creator": "kyle"  
      }
    }).then(result=>{
      console.log("insert successful")
      getBooks()
      myaddForm.reset()
      myModal.hide()

    }).catch(error=>{
        console.log("Insert Failed")
        console.log(error)
    })  
}

function getBooks() {
  axios({
      url: 'http://hmajax.itheima.net/api/books',
      params:{
          'creator':"kyle"
        }
  }).then(result=>{
      const booklist = result.data.data
      const htmlStr = booklist.map((item,index)=>{
          return `<tbody class="list">
          <tr>
            <td>${item.id}</td>
            <td>${item.bookname}</td>
            <td>${item.author}</td>
            <td>${item.publisher}</td>
            <td>
              <span class="del">Delete</span>
              <span class="edit">Edit</span>
            </td>
          </tr>
        </tbody>`
      }).join('')
      document.querySelector(".list").innerHTML = htmlStr
      console.log(booklist)
  
  }).catch(error=>{
      console.log(error)
  })
}
getBooks()
```