ＨＴＭＬ ペイジ
<!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">
×
</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>
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()